WIP (Work In Progress)
 Pixel Joint Forum : Pixel Art : WIP (Work In Progress)
Message Icon Topic: Sidescroller background Post Reply Post New Topic
Author Message
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Topic: Sidescroller background
    Posted: 07 January 2010 at 10:42am
My original idea was to have a small beach to transition into the forest, but what I tried to do feels kind of wrong. I can't put my finger on it. Is it just me, does it look convincing?

What goes for the water, I'm worried about the dithering. Did I overdither again?

The water, the forest and the sky are supposed to have parallax scrolling in the end. Ignore the "act 3" and those pink bubbles, just testing what they look like on the background.


IP IP Logged
rustEdge
Midshipman
Midshipman
Avatar

Joined: 13 November 2017
Location: Canada
Online Status: Offline
Posts: 59
Quote rustEdge Replybullet Posted: 07 January 2010 at 11:53am
I think it's the lack of actual beach, (i.e. sand) between the forest and the water. Right now it looks more like a river cutting through a forest. The color of the water near the bank is pretty dark, implying that the water there is deep. The crests on the water all seem to go to the left too, again more rivery than beachy...

I hope that was useful...
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 07 January 2010 at 4:29pm
Thanks for the feedback, I flipped the water gradient. Also did some work on the sky and the top forest layer (my first pixel trees, hopefully they're not too bad!). Cutting through forest gave me another idea with taking the river bank flora into the water.



Does it look like a convincing transition? It's like this in nature:




Edited by inphy - 07 January 2010 at 4:39pm
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 29 November 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 07 January 2010 at 7:18pm
Get yo'self a purple ramp for more water definition and tree shadowing... keep it simple its a BG ;)
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 08 January 2010 at 10:28am
Extended the blue ramp to purple and added that to water, the ramp isn't quite smooth just yet but I'll adjust it. Darkest shadows in the forest also got replaced by two shades from the purples. I'm liking this a lot more with the purples, thanks for the suggestion! :) Also dropped the lightness on those trees, I feel they were a bit too bright.

I'll try to keep it simple, I don't want to have the background swallowing enemies/enemy projectiles up. I keep a layer of projectiles handy for checking every now and then how they work.




Edited by inphy - 08 January 2010 at 10:35am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 29 November 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 08 January 2010 at 12:45pm
Looks nicer now :)
I would maybe soften the cloud outlines (and the farthest trees in the back) so that they blur out and help define depth. Now the sky, middle and water all have the same level of definition and it flattens things out.
IP IP Logged
PixelSnader
Commander
Commander
Avatar
Not a troll!

Joined: 05 June 2014
Online Status: Offline
Posts: 3194
Quote PixelSnader Replybullet Posted: 08 January 2010 at 2:43pm

-is this for a complete game or just a onescreen mockup?
-what style are you aiming for, currently i see a bit of a mishmash
-the grass will probably end up too noisy for actual usage (hard to see characters etc)
-you could probably be a lot more creative with the water. use waves and such to create a smooth transfer without dithering

a couple of suggestions:
-simple flat colour sky with simple clouds on top.
-simplified grass, maybe just some dithered colour patches?
-trees are just balls, add some shape, branches etcetera.

could you show us a sprite or 2 to see what you're working with?


▄▄█     ▄▄█
▄█▄     ▄█▄

IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 08 January 2010 at 3:37pm

Originally posted by snader

could you show us a sprite or 2 to see what you're working with?

Sure, here's one with the placeholder enemy and projectiles visible:


Most if not all of the enemies will be similar "shadows", and all enemy projectiles are going to be pink.

Originally posted by snader

-is this for a complete game or just a onescreen mockup?


Personal project, complete game (one day..). :) I guestimated that this would be the hardest background of the five intended, so I started with it.

Originally posted by snader

-what style are you aiming for, currently i see a bit of a mishmash

Cartoonish (edit: well, more accurately, . It's supposed to play a bit like a fairy tale, with narrator intermissions between levels.

Originally posted by snader

-the grass will probably end up too noisy for actual usage (hard to see characters etc)

-simplified grass, maybe just some dithered colour patches?

-you could probably be a lot more creative with the water. use waves and such to create a smooth transfer without dithering

-simple flat colour sky with simple clouds on top.

-trees are just balls, add some shape, branches etcetera.

I'll try these out, I was planning to get rid of that dithering on the sky anyway.


--

edit:


On the rightmost third: new trees, changed grass, slight waviness in the water gradient, softened clouds and back forest layer (just to test, the trees in it are placeholders). I didn't try the simple sky/clouds yet, nor remove the sky dither. At least the sky dither will be going away soon.

What goes for the total length of the background, I'm planning to build a library of trees (10-15 for the front layer, 5-10 for the back layer), and just use those to build the rest of the background. Similarly, sky/clouds/grass/edge/water will end up being tiled and reused throughout.

--

edit:

I guess that the earlier style clash was the high contrast shaded clouds + enemy vs more detailed forest layer? I tried to resolve that with the sky. Does that water gradient waving match your idea, or did you have something else in mind?

Here's the current version, plus one with assorted doodads (player sprite is eventually going to be that butterfly, still working on it). The sky has been redone completely, the rest was copypasted to see how it works. The background forest layer is still placeholder. 

The 100+ colours in the second image come from alpha channel, the gems and the HUD text have alpha AA.

Originally posted by snader

-what style are you aiming for, currently i see a bit of a mishmash

Answer revision time! :) Well, I kind of want to keep it light and cartoonish, but still detailed (not high contrast shading like the clouds and the enemy in the earlier posts). "SNES RPGish" might be a better description.

--

edit:

Water level up! Water is now at level 2... or is it?




Edited by inphy - 12 January 2010 at 1:43pm
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 12 January 2010 at 3:25pm
Yay for parallax scrolling! I think it works nicely. What do you think about the water and the sky now - any glaring errors? I'm pretty pleased with them, so the next order of business would be to finish the forest layer.


IP IP Logged
CaKsTeR
Midshipman
Midshipman
Avatar

Joined: 25 February 2008
Online Status: Offline
Posts: 50
Quote CaKsTeR Replybullet Posted: 12 January 2010 at 8:27pm
It's definitely got an appeal, and it's an interesting take on the water.

Unfortunately, it's also giving me a headache just looking at it. That might be solely my problem, though XD
IP IP Logged
Ryath
Seaman
Seaman
Avatar

Joined: 17 October 2009
Location: United States
Online Status: Offline
Posts: 30
Quote Ryath Replybullet Posted: 12 January 2010 at 8:28pm
I like the new water a huge amount! The only thing I could say would be that the back should move a bit faster, since it isn't that far away, and the trees are supposed to move slower than the water.

Other than that, maybe reduce the white in the gems a bit, there's too much of it IMHO.

Other than these little bits, great work, it looks amazing!
IP IP Logged
Elk
Commander
Commander
Avatar

Joined: 15 May 2017
Online Status: Offline
Posts: 478
Quote Elk Replybullet Posted: 13 January 2010 at 3:07am
looks cool!
IP IP Logged
Manupix
Commander
Commander
Avatar

Joined: 30 July 2022
Online Status: Offline
Posts: 771
Quote Manupix Replybullet Posted: 13 January 2010 at 3:16pm
I didn't see this thread before, but from the beginning it's screaming mangrove to me. Sorry if this comes late.

I'm not too sure about the scrolling water. Firstly, it's too fast, or takes too much attention, or both. Then, the slowest band looks vertical, for some reason.

My fav trees are those from January 9.


Edited by Manupix - 13 January 2010 at 3:17pm
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 14 January 2010 at 12:34pm
Thanks for the comments and suggestions! :D Yeah, it's too fast. Plus, the relative speed difference between the slowest and 2nd slowest is also too big (1px per frame vs. 2px per frame), that makes it look a bit funky when the other bands go at 3px per frame and 4px per frame (smaller relative speed difference).

I tried to keep the animation frame count down to maintain a reasonable size, to get a loop through the whole pattern on every level is 80 frames (at those px per frame speeds) and already half a megabyte. :) It'll be easier to adjust them in code later on.

@CaKsTeR: The Collector's Edition will include a pack of painkillers. ;)

@Ryath: I'm planning to reduce the facet count, that should make them more readable and less bright. The frames with the white stripes are played very quickly and not very often, those are just for glint/highlighting.

@Manupix: I think I see what you mean (bad contrast in the wave pattern and between the two bands, wave pattern too big for the band), tried to fix it. It should also blend it better when the relative speed difference is adjusted to something more reasonable.

Mangrove would be brilliant, but I think it might be too tropical/swampy in the context of the game. The trees are going to be modified further though, added a couple of unshaded New Trees(tm). I think was doing it wrong, first trying to shape the canopy and then the trunk + branches. Now I do the trunk + branches first, and then think about how the canopy rests on that. Another thing I feel I did wrong was that I shaded the trees so early, it's harder to maintain a consistent style.



--

edit:

Trees (still going to apply more shading)! Gems!




Edited by inphy - 17 January 2010 at 10:06am
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 20 January 2010 at 2:02pm
SUDDENLY



Hmm. I'm having second thoughts on the canopy - what do you think, too busy?
IP IP Logged
MyBuzz
Seaman
Seaman
Avatar

Joined: 18 December 2009
Location: United Kingdom
Online Status: Offline
Posts: 35
Quote MyBuzz Replybullet Posted: 20 January 2010 at 2:47pm
This happens to be some of the BEST pixel art I have ever seen. :)
My suggestion: Maybe add a bush or 2? Just trees looks a bit odd, other than that fine, maybe add another slightly distinct color for the blue sky, it's just 1 single shade.
 
Marvellous! :D
http://www.my-buzz.com
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 22 January 2010 at 10:35am
I'm glad you like it.. but some of the best you have ever seen? Go here: http://www.pixeljoint.com/pixels/new_icons.asp?ob=rating ;)

--

Yeah, it's too noisy and the contrast variation in the canopy area bothers me. Change of plans.



Individual trees are there just to spice things up, not to build the forest. A little more variation could be added to the background canopy, but I feel this is the far more pleasant (and you can still see sprites on this - good feature to have :D). I might get around to adding some bushes, too.


Edited by inphy - 22 January 2010 at 10:40am
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 29 November 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 22 January 2010 at 7:28pm
I think this is coming out great! I wonder if the flat grass is too over-pixelled tho. Maybe instead is the 6 colors used, just use 3 or 4???
IP IP Logged
cure
Commander
Commander
Avatar

Joined: 23 March 2022
Online Status: Offline
Posts: 2859
Quote cure Replybullet Posted: 22 January 2010 at 9:19pm
don't like how disconnected the trunks feel from the canopy. also the ball shapes could be reduced a bit. still the best tree background thus far
that parallax looks great btw
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 24 January 2010 at 12:01pm
Thanks for the advice, the majority of the grass now uses 3 colours, the rest being pushed to the back for smoother transition/canopy shadow. Also tried to break down the ball canopy and connect it to the trunks better.



I was concerned that the grass is too noisy at first, but I think it ended up pretty smooth. What do you think?

edit: Aside from perhaps adding a shadow for the foreground trees and more flora (flowers, bushes, etc) for the grass, I can't spot anything obvious to refine. Is there something you guys would still refine?


Edited by inphy - 24 January 2010 at 12:27pm
IP IP Logged
jalonso
Admiral
Admiral
Avatar

Joined: 29 November 2022
Online Status: Offline
Posts: 13537
Quote jalonso Replybullet Posted: 24 January 2010 at 12:27pm
This is a quickie of what cure mentions which is a very good observation. I did add a color to your palette here but you could substitute the black in the GUI to a new color if you don't want to add any more colors???
I think the trees in the grass need a bit of ground shadow too (better pixelled than what I did, tho).


Also the dark in your version may be black, the dark purple where there is light and the light to highlight just the bottom of the trunks would be great too.


Edited by jalonso - 24 January 2010 at 12:33pm
IP IP Logged
inphy
Commander
Commander
Avatar

Joined: 24 June 2014
Online Status: Offline
Posts: 116
Quote inphy Replybullet Posted: 25 January 2010 at 2:51pm
Ahh, I see, I thought he meant that the dark line between the canopy and the trunks in the background was off.. 

Thanks a lot for the edit, I tried following your example:



--

edit: Huh, I had an extra green in the grass, used that for smoothing the canopies a bit, and rounded some of the canopy the canopy/clouds line (feels like it blends better):



--

edit: Spent some time away from this, and nothing sticks out like a sore thumb in my eyes. The tree shadows don't exactly follow the canopy, I tried doing a more accurate shadow but I feel it didn't look as good as this.

I'm quite pleased with the way it looks now. Using that dark in the foreground tree trunks was a good suggestion, I think the trees pop up nicely from the rest of the background but without looking separate/out of place. Plus, I think the trunks connect better both in the foreground and background.

So yeah.. maybe it's time to call this done? Started work on the engine anyway. :)

--

edit: Yup, this is now done. Thanks a lot to everyone, this wouldn't be half of what it is now without you. :)


Edited by inphy - 01 February 2010 at 12:41pm
IP IP Logged
Post Reply Post New Topic
Printable version Printable version

Forum Jump
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot delete your posts in this forum
You cannot edit your posts in this forum
You cannot create polls in this forum
You cannot vote in polls in this forum