Pixelation

Critique => Pixel Art => Pixel Art Feature Chest => Topic started by: ceddo on July 10, 2011, 12:22:25 pm

Title: GR#069 - Minefields Project - Scenery, Menu
Post by: ceddo on July 10, 2011, 12:22:25 pm
I'm reworking the first level of my upcoming iPhone game, and I'm looking for any advice you have to offer. The game works like iCopter (press the screen to go up, release to go down) and there are obstacles. I'd like to implement a type of obstacle for the top of the level (cranes?) but I'm having a hard time finding ideas. Any and all advice welcome :)

Update8:
(http://i281.photobucket.com/albums/kk229/ceddo2/newrinterface.gif)

Update7:
(http://i281.photobucket.com/albums/kk229/ceddo2/upgrade3.gif)

Update6:
(http://i281.photobucket.com/albums/kk229/ceddo2/blueship3.gif)

Update5:
(http://i281.photobucket.com/albums/kk229/ceddo2/fontv1.gif)

Update4:
(http://i281.photobucket.com/albums/kk229/ceddo2/minemockup.gif)

Update3:
(http://i281.photobucket.com/albums/kk229/ceddo2/mineupd.gif)

Update2:
(http://i281.photobucket.com/albums/kk229/ceddo2/nukebg6.gif)

Update1:
(http://i281.photobucket.com/albums/kk229/ceddo2/nukebg5.gif)

Original:
(http://i281.photobucket.com/albums/kk229/ceddo2/nukebg3.gif)
Title: Re: Junkyard/City ruins scene
Post by: pistachio on July 10, 2011, 01:06:07 pm
Interesting. Reminds me of Rust Mesa (http://www.pixeljoint.com/pixelart/23660.htm). You know, that one piece that looks somewhat like yours.

Not a fan of the stark contrast between foreground and background. I'd like to see the background piles of junk a bit more obvious, perhaps higher, just to create more of a transition. Doesn't have to cover every inch of the foreground junk though, but it wasn't that apparent to me. So either that or lighten it up. Or change the sky a bit. On that note...

The sky seems a bit saturated as well (considering the theme, unless it's a sunset), and kinda high, or maybe the cloud formations are just creating that effect somehow. The clouds are another thing that seems odd in a way.

Good job on what you have so far, though!
Title: Re: Junkyard/City ruins scene
Post by: Seiseki on July 10, 2011, 09:37:44 pm
I love it! Very dark feel.

The ground does look quite uniform in color though, you might want to add some slight variations, like rust, more bluish metal, lighter gray.
Also, about the contrast, how does that work on a cellphone? Like playing the game outside.
High contrast might be an advantage.

Also, would be cool with more parallax layers, especially for a game focused on constant movement.
Title: Re: Junkyard/City ruins scene
Post by: Cesque on July 10, 2011, 10:04:41 pm
Some comments/criticism:

There does seem to be a lot of contrast between the sky and the pile of junk - the colour contrast doesn't really bother me, but the clouds look rather basic with no visibile lightning direction, while the pile is incredibly detailed with strong reflections. It looks somehow out of place (there shouldn't be too many light reflections if the sky is so polluted).

It's visible that you reused a lot of elements for the pile, like the two TVs facing different directions (including a mirrored lightning direction).

The "rectangular" border between the visible junk at the top of the pile and the darkness below looks a bit weird upon closer inspection.

Why are the clouds generally smooth, except for the dithered section in the top/centre?

Apart from that (and despite that), it looks good. If it's for a game, the foreground/background contrast may actually be useful.
Title: Re: Junkyard/City ruins scene
Post by: heyy13 on July 11, 2011, 05:11:28 am
You have a red sky giving out reddish light, and blue highlighted junk. I think that's what creates the dis-jointed feeling to the composition. Just changing that, and giving the junk and red/orange tinge would improve it alot. I also thought of Rust Mesa, it's very pretty and tiles well. The tv/barrel section mirrors very convincingly.
Title: Re: Junkyard/City ruins scene
Post by: r1k on July 11, 2011, 06:52:16 am
changing the lightest color in the junk (aside from the white) to the lightest orange in the sky actually works pretty well.  Gives it a real sense of heat
Title: Re: Junkyard/City ruins scene
Post by: ceddo on July 11, 2011, 10:17:36 am
Interesting. Reminds me of Rust Mesa (http://www.pixeljoint.com/pixelart/23660.htm). You know, that one piece that looks somewhat like yours.

Yup, Larwick (http://www.pixeljoint.com/p/3794.htm)'s Rust Mesa piece definitely was a huge inspiration for me :)

Quote
Not a fan of the stark contrast between foreground and background. I'd like to see the background piles of junk a bit more obvious, perhaps higher, just to create more of a transition. Doesn't have to cover every inch of the foreground junk though, but it wasn't that apparent to me. So either that or lighten it up. Or change the sky a bit. On that note...

The sky seems a bit saturated as well (considering the theme, unless it's a sunset), and kinda high, or maybe the cloud formations are just creating that effect somehow. The clouds are another thing that seems odd in a way.

Good job on what you have so far, though!

That's a good idea Pistachio, I'll push the junk piles in the back further up. I agree with the sky as well, my coder told me that it was even a little distracting when playing the game. I'll probably change the saturation and contrast a little, see what I come up with. The clouds are just blocked in at the moment. Thanks for the CC!

Quote
I love it! Very dark feel.

The ground does look quite uniform in color though, you might want to add some slight variations, like rust, more bluish metal, lighter gray.
Also, about the contrast, how does that work on a cellphone? Like playing the game outside.
High contrast might be an advantage.

Also, would be cool with more parallax layers, especially for a game focused on constant movement.

Thanks Seiseki! You're probably right about the ground, I was thinking of some grass maybe. I have a tendency to make elements of levels too uniform color-wise :) Haven't tested this theme outside yet. I'll see what a parallax layer in front looks like.

Quote
There does seem to be a lot of contrast between the sky and the pile of junk - the colour contrast doesn't really bother me, but the clouds look rather basic with no visibile lightning direction, while the pile is incredibly detailed with strong reflections. It looks somehow out of place (there shouldn't be too many light reflections if the sky is so polluted).

It's visible that you reused a lot of elements for the pile, like the two TVs facing different directions (including a mirrored lightning direction).

The "rectangular" border between the visible junk at the top of the pile and the darkness below looks a bit weird upon closer inspection.

Why are the clouds generally smooth, except for the dithered section in the top/centre?

Apart from that (and despite that), it looks good. If it's for a game, the foreground/background contrast may actually be useful.

I'll refine the clouds more, I tried to just give the illusion that they're lit from the bottom. Keep in mind that the background will be scrolling throughout the level, just like all the rest. Should I make the clouds dithered like in the center or more smooth? I'm going to make a third slope tile to kill the grid and get rid of the squareness. Thanks :) yeah, the contrast is really key because the junk is actually an obstacle.

Quote
You have a red sky giving out reddish light, and blue highlighted junk. I think that's what creates the dis-jointed feeling to the composition. Just changing that, and giving the junk and red/orange tinge would improve it alot. I also thought of Rust Mesa, it's very pretty and tiles well. The tv/barrel section mirrors very convincingly.
Quote
changing the lightest color in the junk (aside from the white) to the lightest orange in the sky actually works pretty well.  Gives it a real sense of heat
Thanks, I think it looks much better with just that little change!

Thanks for all the replies guys - update coming soon!

Edit: Ugh, having a really hard time with the sky. Changed the color of highlights on the junk. There will eventually be a mushroom cloud from a nuke appearing halfway through the level, thus the lighting from the bottom. Made the tiles less squareish, tried the foreground parallax, didn't work! :/

(http://i281.photobucket.com/albums/kk229/ceddo2/nukebg5.gif)

I still don't really know what to do with the sky. Are the colors fine? I'm pretty sure I'm gonna have to add loads of new colors and dither the hell out of the clouds to make the sky smoother. This is going to take ages! Opinions?

About the ship sprite, I know the highlights are blue once again :) but this really makes the sprite pop out, which is good I assume. Also, most of the sprites in the game are highlighted with this cold blue.

Edit2:(http://i281.photobucket.com/albums/kk229/ceddo2/nukebg6.gif)
Title: Re: Junkyard/City ruins scene (updated)
Post by: ceddo on July 13, 2011, 02:20:44 pm
'nother update, this one I've worked mostly on the armor upgrades for the ship sprite. I've tried to make the light source of the sky more obvious (they're supposed to be lit from the bottom left). I'd really appreciate some feedback, especially on the sky. Is the dithering working? Should I keep the clouds cel-shaded for the highlights or use more colors and dither it out?

(http://i281.photobucket.com/albums/kk229/ceddo2/mineupd.gif)
Title: Re: Junkyard/City ruins scene (updated)
Post by: pistachio on July 13, 2011, 06:14:54 pm
Latest update is def. an improvement, and what detailing you have (in the clouds) looks very promising, and pleasing to look at. (I'd suggest to have less detail from the highlight to the midtone color, however, than you have midtone to dark.) The light-source in the clouds, to me at least, is made a lot clearer with the latest addition. Doesn't look like it'd be very compatible with parallax scrolling, however. :( We'll wait and see.

Also, is this going to be a sidescroller shoot-em-up of sorts? Seems like something I'd play in my spare time, if only for the stunning graphics. By the way, my favorite design so far is the ship that's pretty much silver with what looks like several large-scale uneven plates on its hull. Seems the most fitting, but its rear parts would have to be changed a bit to fit in, I think. Considering they're design upgrades, they're all good, but somehow the third upgrade (the gold one?) doesn't seem as fitting as the rest. I suppose dulling it by a tiny bit or changing it to more of a brass/bronze scheme could help. I assume there are going to be quite a few larger variations of enemies because there's a lot of blank space on-screen? Leaves a lot of room for direction by the way.
Title: Re: Junkyard/City ruins scene (updated)
Post by: Koyot1222 on July 13, 2011, 08:48:01 pm
Your work realy inspire me :) Just keep working :D
I was try to draw shutle similar to your game, its not as good as your work but it helps me a lot to understand some more. Thankyou :)

(http://i.imgur.com/r9d36.png)
Title: Re: Junkyard/City ruins scene (updated)
Post by: ceddo on August 17, 2011, 09:54:15 pm
Well, sorry about the huge delay but I've been gone on holiday and back, and have been mainly working on enemy robot sprites. Seems like our game is heading more and more towards a shoot-em-up style! Here's what I've been working on:

(http://i281.photobucket.com/albums/kk229/ceddo2/minemockup.gif)

I now consider the background and junk tiles finished, although I'm open to any final adjustments that would benefit! I also tweaked the armor of the ship, think it looks much better now.

@Pistachio: thanks for your cc, it helped a lot! The background is actually parallax compatible, and yeah I plan to revamp the gold armor upgrade (maybe ditch the gold altogether)
@Koyote: Wow, I'm honored! Your ship is great, it has character! I suggest fixing those jaggies though :)

Next priority is making these destructible rocks, but I've been having difficulty creating natural looking tiled rocks.

(http://i281.photobucket.com/albums/kk229/ceddo2/choppa2.gif)

Here's a robot enemy that shoots red fireballs at you. :)
Title: Re: Apocalypse Junkyard (UPDATE!)
Post by: Batzy on August 17, 2011, 10:35:07 pm
Wuzaa! and here is a bomb for you to look at hehe...

1. Power up or what ever that "P-logo" is just don't look good
2. Same thing with the lifebar(hearts), also white outlines don't just fit the style i'd remove them : P
3. Bg only needs a bit more rendering with those white/red clouds :/ if you want to keep it pretty simple.
4. Rock tiles well you got that already in your remake list eh? hehe
5. Player ship, yea it is something you maybe don't want to stuck with but i'd trash it and make a new one with simpler design and definitely with umm... a fresh color like blue. Coloring is pretty much same with the enemies currently so yeah i'd add a heroic color into it!

I'll make an edit if you don't get it... rimmed well eh?  :)  but yeah that's pretty much all i have to give now
Title: Re: Apocalypse Junkyard (UPDATE!)
Post by: ceddo on August 19, 2011, 12:39:38 am
Thanks for the critique Batlorder :) I agree with the P logo, I'll remake that - but I actually like the rest of the UI. I agree that having the player's ship as the same color as the enemies is quite misleading. The player actually begins with a dinky ship and can upgrade it with weapons, armor and paint jobs.

I tried making it blue, and as you can see it didn't work out so well. The windshield is driving me crazy, I just can't get it to look good. Something else I did today, which was a big priority in the project, was begin work on a custom bitmap font.

(http://i281.photobucket.com/albums/kk229/ceddo2/fontv1.gif)
Title: Re: Apocalypse Junkyard (UPDATE!)
Post by: EyeCraft on August 19, 2011, 01:13:37 am
Scrap the hazard line for the bars in the HUD. Hazard lines are ULTRA CONTRAST because they are designed to catch people's attention and they are absolutely dominating the priority hierarchy of the piece at the moment. Not something you really want for a HUD; if the player wants to check something there, they'll deliberately glance at it.

I agree about losing the white outlines, as well, for similar reasons.

The background is very patchy/blotchy, which kind of gives it the effect of noise. Perhaps try a more composed arrangement for the clouds.

The mix of cool and warm speculars on the sprites and tiles is disharmonious. I do like the priority gained on the sprites by the temperature contrast, though. One thing that could work is to not make the ground tiles so... specular-y. Shade them more according to planes, rather than edges and corners. This will make the warm light appear to be ambient, rather than direct, "sort of" explaining the temperature difference. Or you could match temperatures on the sprites and tiles, but hue shift them in opposite directions.

The floating stone blocks don't really fit at all, imo. The fact they differ so drastically in both theme and shading approach to the ground tiles is a prime reason for this. Also the fact that everything else in the scene has some physical explanation for its state (jets on the mines, junk in realistic piles) whereas the stone blocks are inexplicably floating. Oh I guess the missile pack pickup is floating too... I actually didn't even notice that was there until just then. Might want to increase it's priority a little by differentiating it's palette from the other elements (similar to Batlorder's suggestion on the player's ship).

Keep it up!  :)
Title: Re: Apocalypse Junkyard (UPDATE!)
Post by: ceddo on August 19, 2011, 07:38:06 pm
Thanks for the great feedback as usual Eyecraft. I've scrapped the hazard lines but the health bar seems a little bare now. Maybe a little bubbling animation would remedy that.

However, I'm struggling so much with making modifications to the ship. I've ditched the warm ambient lighting and attempted to render the ship's lighting by planes rather than edges as Eyecraft suggested. But so far it's not giving results, and I don't know what I'm doing wrong - an edit would really help me out if someone wants to point me in the right direction. I have the impression my brain just isn't capable to picturing how the light would fall realistically, and this may be why I've been so dependent on speculars - to compensate for my weaknesses in simple plane shading. Any thoughts?

(http://i281.photobucket.com/albums/kk229/ceddo2/blueship3.gif)

Don't worry if I haven't brought up other points you mentioned, I will take them all into account when reworking elements of the scene.
Title: Re: Apocalypse Junkyard (UPDATE!)
Post by: ceddo on August 22, 2011, 02:31:57 pm
So today I just finished a mockup of the ship upgrade interface with which I'm quite happy. I still haven't reworked the ship as I said I promised I would, but since I'm on a deadline I'm working on /reworking things by priority rather than sequentially. Therefore, I'm going to rename this thread "Minefields Project" and it will contain all my progress on the game. Again, I really appreciate your comments and feedback, and although I may not implement them right away, I am definitely taking them all into account.

So here goes: the shop interface!
(http://i281.photobucket.com/albums/kk229/ceddo2/upgrade3.gif)

(http://i281.photobucket.com/albums/kk229/ceddo2/yesno3.gif)
Title: Re: Minefields Project
Post by: coffee on August 22, 2011, 06:00:21 pm
I havn't commented on this thread before although i have kept track on the updates and I really enjoy looking at this. Very neat!
As of everything else the shopping i.f. looks wicked. like the coins a lot and the letterset matches it all very good.

I had a look at the Iphone screen aswell as a normal android mobile phone screen and I can see that it will be scrolling about whatever space is left out when you fly around as the background is bigger then the actual screen of the phone (Having an iphone myself) with the same size of the shopping interface as the background of the playing screen I take it you will be moving your finger about to look all over it, either that, or you will move your finger on the screen and it will switch between the shopping windows? CONFUSED! I might have just looked at this wrong and they will all actually be split up?  :-[

If I remember it right the normal size of a android/Iphone is 398x234

If im totally wrong, I am sorry!

Other then that, good luck!

EDIT:
Will you release it for Android?
Title: Re: Minefields Project
Post by: ceddo on August 22, 2011, 07:50:16 pm
@Coffee: Thanks for the kind words! I'm also quite glad with how the font and interface turned out. Sorry for not clarifying, the window of in which you see the ship in the shopping menu will simply be an animated demonstration of the upgrade - no gameplay here. The interface shows up between levels so you can upgrade your ship. When you're actually playing the game, it's full screen :)

We don't have any plans to release it for Android yet as we're just focused on getting the iPhone version out for the moment.

Cheers!

Edit: one more update tonight, I'm working on the online level browser.

(http://i281.photobucket.com/albums/kk229/ceddo2/onlinebr.gif)
Title: Re: Minefields Project
Post by: ceddo on August 25, 2011, 10:27:55 pm
Update for the level selection interface... it's alright but I find it too busy, can't figure out how to simplify or make it sleeker.

(http://i281.photobucket.com/albums/kk229/ceddo2/newrinterface.gif)
Title: Re: Minefields Project
Post by: Mathias on August 26, 2011, 05:39:36 am
A favorite quote - "Perfection in design is achieved not when there's nothing more to add but nothing left to take away."


The less a UI has in it the more usable it is. The more it has, the more capable it is but less usable - more time is required to take it all in and understand it. It's a trade-off. Strike up a balance.

I can see plenty of opportunity here to simplify (though I don't think it's overly busy as is) :

Get rid of unnecessary edges, borders, lines, color breaks, details. All these things force the eye to decipher them. Too much of this could be called noise - superfluous distraction, clouding the interface.


Application examples:

1) Change "--Sort by...--" to "Sorting"
2) Remove outlines around level thumbnails.
3) Reduce contrast of white text on black
4) Make all buttons grey instead of colorful, remove their outlines, reduce text's contrast

Let the content speak. Suppress the UI elements so that they're there but not screaming at you. Use color when it has meaning.



Title: Re: Minefields Project
Post by: ceddo on August 26, 2011, 01:35:41 pm
Excellent advice Mathias, thank you very much. I've tried to apply most of what you said. One of the issues I'm working on at the moment is that the level buttons don't look "button"-ey enough. I've moved the backgrounds around so they're less noisy. I don't really want to add the orange borders again, it makes them look messy again.. also, without borders the black areas for the names of the levels form a thick black line and there's no way to contain the viewer's eye. :'(

(http://i281.photobucket.com/albums/kk229/ceddo2/bettar.gif)

Edit: here's a video demo of the way the interface will work. http://video.gammosaur.com/NewLevelSelection.mov (http://video.gammosaur.com/NewLevelSelection.mov)
Title: Re: Minefields Project
Post by: Batzy on August 26, 2011, 02:21:16 pm
Looking like way way better than before  :) excellent progress here  :y: as for layout ohrm... i like it tho i dunno how easy it is to use on iphone or on (android in future perhaps :-X) i wouldn't like to brag about this in here but i did couple months ago some little tests with menu systems on android phones that were well kinda successful with simpleness etc i think... http://i1216.photobucket.com/albums/dd378/Batlorder/cob.png (http://i1216.photobucket.com/albums/dd378/Batlorder/cob.png)

Don't have much crits here so i'll leave it for you to puzzle it yourself hehe :'P anyway keep it up  :y:
Title: Re: Minefields Project
Post by: NightCabbage on August 30, 2011, 08:21:13 am
Oh cool - are you doing the programming as well as the graphics for this game?