GR#098 - iPhone Sideview Platformer + Animations

[slym]

Revamping the style.


OLD:

Current Mockup
http://i1235.photobucket.com/albums/ff440/t_redmer/Characters.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/forest_update2.gif
Working on animating a run cycle! In other words, it's going to be another one of those 3294832947 version things again..
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim1.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim2.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim3.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim4.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim5.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim6.gif


I've always wanted to make a platformer with the 240x160 resolution. So here's what I have so far. I just can't figure out what I'm missing!



http://i1235.photobucket.com/albums/ff440/t_redmer/screen_1-1.png
http://i1235.photobucket.com/albums/ff440/t_redmer/screen_2.png

[edit] Any ideas for enemies?

[Mathias]

Ok, nice stuff. As always. Way to go on starting a project you've been anticipating for a while. Reminds me I need to try my hand at an RPG tileset . . . this year!


Here's a few things:

Protagonist is bland. I'm not compelled to want to control him. Looks like an NPC you'd meet in the game. Give the boy some flair. Something that implies a story. Think of interesting game protagonists you like.

More foreground/background separation is needed. Contrast.

There's nothing interactive so far, which makes it feel empty/unfinished.

Enemies Ideers: Mutant forest animals (is there a plague spreading!? How'd that oversized groundhog grow wings and horns!?), Giant insects, Robots . . .

[Sharm]

This is looking really good so far.  Very blue, which makes me think this is supposed to be a night scene, not sure if that's where you wanted to go with it.  Sadly, I say you stop pixeling and work on a game concept first.  A good concept will change everything including who the main character is, what enemies you'd be fighting, what kind of HUD you'll need and whether or not there would even be a forest.  You seem to be going for generic right now which is nice and flexible but will only give you a generic game.  For ideas you could make a list of your favorite platformers, what you like about them and then ask yourself what game you would like to see made by people like that.  Based on what you have my first idea is to have a child who's lost in fairytale style woods and has to find his way back home.  The kid would come across things like trickster fairies, big bad wolves, gingerbread house witches, bridge trolls and such.  He could collect bread crumbs instead of money or coins.

[slym]

Tried to address some of the color issues! It's definitely not supposed to be a night scene! I also tried to add more sprites into it, I do need to figure out where this is going though. I'll try to address the main character issues and enemies in my next edit.

[edit]

I forgot to include this, but this was an alternative palette. I'm pretty sure I'm deciding against it just because it's so similar to this. Oh and sorry for the blank grey space!



I'm thinking of sticking with the previous version that looked like a night scene. Maybe a night scene could help me figure out what is going on with the enemies.

[slym]

Worked on the character a bit... and other stuff. I'm trying to get her to turn to the side to start a running animation. Struggling with it though.

[Edit] YESSSSSS. I Finally fixed Photoshops stupid gamma setting thing! Now all of my colors will be the REAL colors that I picked.

[Edit]

http://i1235.photobucket.com/albums/ff440/t_redmer/screen_5.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/screen_5-1.png


Thinking of basing it off of the idea that the characters are excluded from the rest of the world. Maybe it's in the future and the world became to industrious, so the government locked everyone in towns that are closed off from the exterior world by walls? I don't know... Anyway I'm having troubles with the texture for the wall itself. Suggestions?

[Dusty]

I really like this, but at the same time it all seems very monochrome, even with the green shade of the foreground. I can understand where you're coming from in theory, but the background just seems so boring being such a uniform shade of blue.

[slym]

Is this any better?

[Dusty]

Much better.

[slym]

Working on roofs.


http://i1235.photobucket.com/albums/ff440/t_redmer/screen_7.png
http://i1235.photobucket.com/albums/ff440/t_redmer/screen_7-1.png



[edit]

And done. Posted on PJ.

[jams0988]

Well, it's already finished, so I won't say anything. Actually, I wouldn't have anything to say, anyway. This is some gorgeous work. Thanks for inspiring me and giving me some new ideas on how to draw stone walls and such. I really like the atmospheric shading you have going on with the trees and the clouds in the background.
Also, even though your finished piece is amazing, I really *really* loved your blue and orange tinted forests, too. Someone said the blue one looked like a night scene, but I disagree. It looked more like a magical forest than a dark one. And the Fall one has a very chilly atmosphere, like Winter is about to blow in...also very nice.

So, yeah, awesome work. Now I'm really looking forward to my next day off so I can bury myself in pixels, heheh!

[PypeBros]

I really love how this all fits together. You picked great colours, and I'm impressed how you managed to capture grass and trees with such simple clusters and appropriate contrasts. Just one thing: your houses would pop better if they had a distinct (warmer ?) colour compared to the village's outer wall, which is further away.



btw, don't hestitate to populate this large, homegeneous dark region below the grass. A few rock formations or plants will reinforce the feeling that we poorly see the details due to lightning conditions rather than because there's nothing to see. You did it marvelously with the walls. I'm sure it can work the same with rocks.

[slym]

Thanks PypeBros and jams0988. Here is the one that's on PJ right now:





Now I'm working on a run cycle:

http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim1.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim2.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim3.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim4.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim5.gif
http://i1235.photobucket.com/albums/ff440/t_redmer/run_anim6.gif



Jump Cycle and Idle? And Death? Help por favor!

[st0ven]

I really like what youve made its got a lot of charm to it, but i wanted to hop in to say that i think your saturation is really top heavy in your current mockup, and perhaps toning down some of those sky sat values can help balance out your screen presentation some.

If you truly wanted to make a game from this, your biggest hurdle right off the bat would be to get your user to have their eyes actually focus on the character, vs the sky. backgrounds need to be pretty, but secondary, and by throwing in an entire atmosphere of full on saturation is not helping the cause. your sprites excellent character is being totally drowned out (the one standing on the rooftop).

i say tone down your sky values, tone down the saturation in the secondary layer between the sky and fore layers (not quite as much as the sky layer) and definitely tone down some of your oranges on the roof/panelling on the houses, and i think youll find that your very nice wall and platform tiles will stand out more.

[slym]

How is this?

[Dusty]

How is this?

O.o is your monitor calibrated right? The roof of your house is nearing pinkish-white.

[slym]

You can Calibrate your monitor? How do you do that?

[st0ven]

O.o is your monitor calibrated right? The roof of your house is nearing pinkish-white.

i actually think this is much better. not only is the saturation balance better but the lighter sky gives a much better 'daylight' vibe vs the darker values previously. also the roof saturation looks quite nice to me, much more subtle. whats most important is that theyre his colors.

id say theres some residual oversaturation in the shadows being cast on the doors (these should be less saturated compared to your highlights), and also watch your contrast here as well. these shadows shouldnt rival the dark values in your platform 'darks' imo.

[slym]

Some slight color tweaking. No critiques on the animations?

[Atnas]

The red was much more effective imo. Also i miss the saturation on EVERYTHING.

As for animations:

1) On the run the far arm's elbow doesnt seem on the same level as front arm and therefore makes the arms look assymetrical in length
2) On the jump I think you should also have a second half to it with falling.
3) Idle, the jumping on the gloves is too sudden, the blinking is also too sudden, try to stretch it out over a few frames (use AA to subpixel the movement of the lids). With it as sudden as the hair rate of movement it looks like its part of that motion, always try to have seperate timelines for seperate elements if they're close by to separate them visibly.
4) On death, when the char falls to their knees, the head bobs too softly. Have it turn more towards the ground (cross section: from \ to - but only slightly). Also have the arms buckle on that first frame.

Just add punch to everything and it'll look a lot more satisfying. Achieve that punch by exaggerating the final frame of a motion and then pulling it back to expected on the next frame. Follow through!

[Mathias]

Well, they're hard to crit - they're good.

DEATH
The death anim looks a little odd once he's crouched. His body just kinda absorbs into the ground. His left arm juts forward awkardly, but kinda comically - maybe have it extend towards us or backwards instead. And what if his bouncy hair tuft flattened out instead of remaining standing, kinda further signifying he's down - even his hair is dead heh.

IDLE
What if he's not in a windy outdoor environment?

Only minor nits, from me.



Man . . . if only Promotion didn't fight me so such, I'd start some RPG-ish tiles, too . . .  (shuddup, ptoing)

[slym]

Better?

[edit] Version 11: Killed his hurrr. (with background)

Idle animation?

[st0ven]

the death is good -, but perhaps could be more effective if he stayed on his knees a little longer, and wobbled slightly backward before he falls forward. at the very least i think it would benefit if the arms/shoulders were shifted back...

actuall now that im zooming in, if you wanted to keep it as is, id say that at the part where he supports himself with his arms, it would be good to indicate a little elbow bending before the arm straightens out again, until he finally collapses forward. that way you get that sense of weight in the arms. the elbows would be catching the weight in this action, not the shoulders.

[Dusty]

I think the most disturbing thing about his death is that his legs suddenly disappear.

[slym]

[edit] Update:

http://i1235.photobucket.com/albums/ff440/t_redmer/death_13.gif

[edit 2] Update 2: Made the head bounce on the end. I was trying to make more of a thumping feel when he hits the ground.

[Phlakes]

His shoulders probably shouldn't be that spread, he's blocking the downward/forward momentum so the arms should go more in front of him. Still looks great, though.

[Mathias]

Haha lookin' good. It gets more and more painful looking with each iteration. You need to make a version where he just explodes into organs and bones upon final collapses. COME ON

[jams0988]

Haha lookin' good. It gets more and more painful looking with each iteration. You need to make a version where he just explodes into organs and bones upon final collapses. COME ON

He should fall down like he does every time you die, with a 1/100 chance of exploding into a mess of gore after his fall. That would be awesome.
And I agree, the death animation is getting better and better. I like the little bounce his head does when his face smacks the ground now. Makes it very clear he's dead, or at least unconscious.

[ErekT]

You need to make a version where he just explodes into organs and bones upon final collapses.

Hehe, reminds me of this:

http://www.youtube.com/watch?v=V8szWccJvb4

Go for it

[slym]

Mathias: Haha some day.

Working on a new area, La'more woods. (the outskirts of the town he was in before)



And here is Windstead, a city that is on a mountain... only place that the windy idle animation could really fit


(obviously this is not the whole city...)

[Manupix]

You can Calibrate your monitor? How do you do that?

Not only can, but must!

Seriously, if/when you do critical work (pro) you'll have to invest in a calibration device (starts around 300$, I'd think).
Meanwhile, try to find an online calibration pattern (just a neutral ramp, you check that all values appear different). I've seen some before, forgot where.

Also, awesome job so far ^_^

[slym]

Figuring out where to place the UI elements. (This is the size of the iTouch/iPhone screen)

[Dusty]

Hmm, it seems a bit odd that the farmost trees are more faded than the wall behind them.

[slym]

Color edit. Also got closer to the GUI placement that I was thinking of.






(Monster idea by Skeddles)

Trying to make monsters?

Trying to make a skunk?

Something feels wrong with the trees :/
Main character is an archer?

[slym]

Current Cast:

[Juninho]

the guy in brown is very different from other characters, I think it would be better that way

[slym]

[TheMonsterAtlas]

SDJHSDJHS This looks so amazingly beautiful! All of the pallets look lovely and soft and just go together amazingly, I wish I had this ability of yours that you have. One thing I noticed is the jump state. It seems a bit weird to me based on other platformers. When jumping on platformers I can think of you have that generic mario pose, I don't feel like it's bad to sort of incorporate that into this project a bit more. Not too strong but a little bit more than what we see now might be good? That's my opinion though, it probably looks good in action.

[slym]

Thanks XLR8ED, I couldn't agree with you more.

Project update: I just found my composer and programmer! Looks like this thing is really going to happen!




Working on the "red forest" biome. I wanted to make things interesting.

[PypeBros]

Since you aim at a iPhone game now, you may want to get a look at the frogatto story on controls placement on the iPhone screen.

I like how you introduce small details in the dark area in the bottom of the screen, on monster.gif  and mock2.png. Imho, one more that would be located just below the grass line, and you're good to go.

Something feels wrong with the trees :/

I spot 2 things:
1) you've got a very vertical pattern that goes down to the roots, but of course, near the roots, your tree gets wider. The pattern should follow that.
2) the roots at the bottom feature a set of blobs (sorry, can't find a better term) that suggest there should be root there, but you don't have the shadows that are typical from in-between-roots . You don't either have a tree-to-ground transition, making the ground near the tree unusually regular and geometric. Small pebbles would have been digged out, some different kind of grass would benefit of roots protection ... and that'd be the place in the woods where dead leaves stagnate the most, too.

Main character is an archer?

That can fits him well. Make sure you've read Kirby Kid's post on functional blind spots then: your gameplay and power-ups is likely to be linked to their mastering.

[slym]

2x with UI



(Posted on PJ)

Thanks PypeBros! Much better in my opinion.

[TheMonsterAtlas]

Since you aim at a iPhone game now, you may want to get a look at the frogatto story on controls placement on the iPhone screen.

Yes, this is what I was going to bring up next. A vast majority of games on the market, at least what I've played on my Android is that the button area is so small, the button icons are big but when you click on them slightly to the side it doesn't respond. So encompassing a larger area than the icon is probably the most beneficial thing that can be done, just keep the GUI spread out enough that they wont hit the wrong button, but not far enough so that it becomes difficult to play.

[Dusty]

I've often thought about ways to emulate a D-pad with touch screens; instead of just placing arrow buttons... trying to create code that attempts to predict what you're trying to do in a smart manner.

For example when using a dpad people tend to hover their thumb in the center and waggle it left and right(when say, playing a platformer) instead of actually moving their thumb over to the left or right and pressing. Also, other sort of mechanics such as trying to predict whether the player is finding their "center" with their thumb(for said waggling) and adjusting the center of the dpad there, or to consider whether it was a quick tap(as would happen when running right and suddenly trying to move left).

Sadly I have no manner of which to code and test these things as I only know Java, and have no iTouch or Android phone :/

[Kasumi]

Super Mario 64 DS has a moveable joystick.

Touch the screen. Wherever you touched is the center. If you move the stylus far away enough from the center that you've passed the max value, it moves the whole joystick to keep up.

In this way it's very easy to switch directions without constantly thinking about where exactly the joystick's active area ends. Because it basically never ends, it just moves the joystick and that is the new active area. As well, it's easy to center. Just stop touching, and touch again and the joystick is centered.

[PypeBros]

Touch the screen. Wherever you touched is the center. If you move the stylus far away enough from the center that you've passed the max value, it moves the whole joystick to keep up.

That could be applied here; good idea. I note however that M64DS had analogous control. It could need some tweaking before you've got the deisred responsivity for a beat'm'all / hack'n'slash / platforming gameplay.

[Kasumi]

There would be some tweaking, yes. For a game that handles d-pad diagonals like a fighting game, the method would need to get smart with how it shifts the active area or you might end up doing say... diagonal up and right when you've only moved straight up.

But it's nearly as simple as making the distance between the max values very small. It's even easy to let the player customize this distance with options. You can then slide left when you're going right just as you would on a dpad, and even if you overshoot by a mile you'd still only need to slide a short distance to move back to the right.

I'll say that while I absolutely hate touch screen controls, I have no doubts at all this method could work quite well (and probably better than it does for analog controls) for d-pad controls and wouldn't mind it myself unless I was playing something like this. Until touch screens can give tactile feedback buttons are better for any game that's goal is responsiveness like the linked game, though. I'd say the movement controls aren't even the problem, because of how the buttons always work. You can press two at once, and usually the game only cares about one. It's the other buttons. When I play Tetris Grandmaster, I can feel which one is rotate right and rotate left and handle the speed. Throw a third button like hold piece and this method no longer works because I have to at least remember where one button is. Same with a game that requires you to hold a shoot button while you must jump sometimes like Gunstar Heroes. Even worse is a game like contra where you PRESS a shoot button and must jump. But now I am so far off topic, that I will stop my rant.

[slym]

Changing up the style a bit. I wanted to use more bold colors. Here's a mockup with the modified grass tiles and new character!



[edit] btw: does anyone know how to fix photoshops color saving settings. (gamma?) The colors appear differently in the image files as they do in photoshop.

[infinitegames]

I really like this edit. Not only does it improve the viewability of the character (although putting him on top of the house instead of in a position where it would automatically be hard to see him is kind of cheating), it still looks really good

[infinitegames]

Idle animation?

This isn't subtle enough. It makes it look like it's extremely windy. I'd also say you have this problem on the jump animation... it makes him look like he's flying in an anime show at a thousand miles an hour.



And for your GUI. I really, really don't like it. It's one thing to have contrast, but the pink doesn't fit in AT ALL. I think using a saturated blue might work better, especially if you decrease the saturation of the background graphics. The health and stamina things both bother me, looking far too out of place, hard to read, and they don't look good next to each other. I see what you were trying to do, making stamina less important than health, but I don't think it's working. It should at least be equal in length to the health bar, and since it's so much smaller, it's hard to read the word "Stamina"

[slym]

@Infinitegames thanks for the critique. The UI that is shown on there is a ui map, it isn't the actual interface. A seperate idle animation will be made, but how do you think it would fare in an environment that is actually windy? And yeah the jump animation is kinda crazy. I'm not sure how the movements work on a jump yet.

Tiles Update

[infinitegames]

@Infinitegames thanks for the critique. The UI that is shown on there is a ui map, it isn't the actual interface. A seperate idle animation will be made, but how do you think it would fare in an environment that is actually windy?

I think it'd look great. It would definitely show the wind

[tehwexxl0rz]

Really digging the "boldness" of the new tile colors, although I'd avoid fading to pure black considering the bright background. You could get away with using a dark muted purple for example and still have plenty of contrast.

I like the new direction for the player character conceptually, but he's got readability issues at the moment. Perhaps too much detail for such a small sprite? Also, the colors don't "pop" nearly as much as they ought to IMO.

[slym]

Thanks tehwexxl0rz. I definitely agree with the colors not popping enough on the character.

New characters from 3/18/12:


(Yes the game is going to be played with a 200% zoom)

From left to right: Adrien, Haig, Female Hero, Male Hero, Darya.

Adrien is a shadow soldier who was exiled from his ranks. The triangle acts as a scarlet letter (For those of you who have read the book).
Haig is a soldier found in a destroyed town. The town was destroyed by the Empire forces and the fighters of the town were taken prisoner. He hid during this, leaving him with guilt for not being captured.

Darya is a character who joins the party in the seaside village in the game.

In the game the party members are playable, however you can only travel in twos. The game includes several wars where all of the party members are in use, however the player cannot switch between them.

I also added an enemy knight:

[coffee]

Been watching this for a while and it really looks great idd!
The changes you did to the colours and saturations on the last update for the tiles looks great, but I would really want to see more contrast on the characters as you said, they look a bit dull atm.

About the enemy soldier. I think the light could be a bit more like the helmet over all of his armor, instead of just one line of light.

Looking forward to more of this and I will deffinatly play it when it's able for download!

[slym]

Coffee: Added more character contrast I agree with you about the enemy soldier, however I'm not sure he will fit in with the other characters if I shade him differently. I'll do some more work on him later tonight.



There seems to be something wrong with the tree leaves. I just can't figure it out.

[moket]

I'm in love with your color palette and the overall graphic design.
Regarding the tree, you could define the silhouette a bit more.
Also some branches don't appear to be logically connected with the trunk thus leading to slightly random leaves chunks. The little vines for example could stem from specific parts. All those little details would contribute to make the tree believable.
The leaves could have different scales depending on their spatial position in order to reflect the roundness of the foliage.
The tree is sitting at the forest "entry" (sorry for the lack of better word) , so the light should affect the side, since nothing is projecting shadows on it. Even you could add some reflected light from the grass inside the tree shadows.
Can't wait to see the game unfold

Made a quick edit.

[Indigo]

To be honest with you slym, I really really preferred the more pastel palette you had going on before.  It gave you far far more control over priority of the screen and was much easier on the eyes.

[Vakinox]

To be honest with you slym, I really really preferred the more pastel palette you had going on before.  It gave you far far more control over priority of the screen and was much easier on the eyes.

Seconded. the only thing that troubled me though would be the color of the blue-green (maybe a cyan green I think is the proper name of it?) color on his upper torso used to line out something.
It really pops out. Maybe a darker color or shading, possibly removal would be a plus.
Other than that, the sprite seems pretty well done as far as I can tell.

[Phlakes]

Thirded. The pastel colors were very unique, and since everything is very detailed, as Indigo said, it helped a lot with priority. All the blacks and dark blues everywhere in the newer one feel a bit cluttered.

[jams0988]

NOT FOURTHED!
Instead, I agree with wex and coffee. The new palette looks bold and refreshing! =)
I liked the old palette too, but it looked kind of sickly, like the whole world was covered in poisonous pink fog. It was vaguely uncomfortable looking! XP

New one looks fantastic, I think. And I freaking love how your new rocks fade into those simple polygonal shapes, while still suggesting a rocky texture. Very stylish!
Your new hero is a big improvement too. Looks like he's actually set to adventure now, instead of just wandering around in his tshirt.

Honestly, you're one of my favorite artists to watch on here, simply because you're improving so fast (also, because your art's great). The little archer you have as your avatar isn't even in the same class as the stuff you're pushing out now, imo. And it's been what, not even half a year since then? Good on you for working consistently, hahah. =D

[slym]

I tried to compromise. Is this better?
(I still haven't touched the tree)

[imnumberfour]

I love that pallet! One thing though, I feel the tree could use a tiny bit of AA. I made a bad edit (I am new to pixelling):



I just realised i barely touched the shaded part of the tree with AA, its looking rough.

Beautiful none the less! :3

[Indigo]

Yes slym, that's a much better direction.  Love it.  You're controlling your priority again.