next »

[GhostBomb]

I was wondering if anyone had any advice or examples on how to make a good looking ocean scene using parallax scrolling (no land except maybe off in the distance or to the side), specifically using pixel art.

[zfshmn]

Aight, so I'm not gonna worry so much about the pixel art side of things in this post (I'm not an amazing pixel artist, anyway; my answer on that side of things boils down to "make some water what's pretty." Which isn't that helpful.)

I'm actually gonna talk about the psuedo-3D parallax scrolling effect itself here.

So, first off: here's a quick speedrun of the first level of Sonic 2. Watch the background here - in particular, the greenery in the lower half of the background plane.





This isn't actually "ocean," but it's a really nice visual example of the effect we're talking about. The way this effect works is pretty simple, on a high level: the background is divided into horizontal "slices", each of which scrolls at a different speed based on where the camera is in the level. Nearer slices scroll faster than more distant ones, creating an illusion of depth.

Now we're gonna get a little more in-depth here and talk about how this actually works on original hardware.

Here's the thing about programming for a platform like the Genesis or the SNES or what have you: you don't really have a software stack, as such. Everything the machine does is determined entirely by the code you write. The console just starts executing instructions from the cartridge bus as soon as you turn it on, and the only way that changes is if you tell it to change. This lets you entwine game logic really deeply with low-level video functionality.

So if you want to do a nifty parallax effect like that, you just scroll the background plane back and forth during the vertical blanking interrupt. That's the period of time the machine between when the machine finishes drawing one line of pixels to the screen and when it starts drawing the next. So, if you have a series of 8px-high "slices," you calculate the position to draw one from, draw the background there for the next eight lines, repeat.

How do you do this on modern hardware, though? Because obviously you aren't gonna get to interact usefully with vBlank on top of Unity. Answer: you fake it. You have a comically excessive amount of CPU and GPU power (not to mention memory) on even low-end phones, so... you just add extra layers to the scene. Instead of drawing a single background image and skewing it when you draw the frame by running math between lines, just draw slice 0 on one layer, slice 1 on another, etc. and calculate the position of each layer based on the same math you'd use if you were doing authentic line-scrolling.

Note: I've been talking about evenly-spaced segments of background the whole time, but realistically you wouldn't do that outside of very simple cases. You can get a much more convincing effect by making the "slices" smaller as you go into the screen - so the nearest plane might be 16px, then 14px, then 12px, then 10, 8, 6, 4, 2, 2, 1, 1, 1, 1. Or whatever. Experiment and see what looks good to your eye.

The important art takeaway is that you need to have a clear idea of how the background scrolls when you do the art. Each slice needs to be able to move independently of the others and still look "right." So, if you say that the nearest section of the plane is 16px, then none of the details on that 16px slice can intersect the section above it or it'll look broken when it scrolls. Note, though, that since you're not doing real line-scrolling, this is purely a verisimilitude point, and it's one you can ignore if you want to. It might look like line-scrolling, but it's actually layer-based, and if layers overlap each other... well, that's kinda the whole point, yo.

[oahda]

Might not work depending on your art style but seems like a reasonable idea to make the sea mostly this unicoloured blob, or a gradient, and then only have a couple of "lines" of decals that scroll at different speeds without having to make them line up with each other in any way (so no texture): waves of different sizes for example.

[GhostBomb]

So this is what I've cooked up so far:



You can't really judge at as well when it isn't in motion but I don't really know an easy way to make a gif of a full-screen game.

It looks a little strange but I don't know if it just needs adjustments or if I should try an entirely different approach altogether

[zfshmn]

I think the art looks pretty solid static, but (as you said) it's hard to see how it looks in motion without, well, seeing it in motion.

You could screen-capture it and post it as a webm or a Youtube video?

(Side note: it occurs to me now that you could totally write a shader to enable real line-scrolling in Unity. You just determine the offset to draw each line at at the start of each frame and pass those into your shader, instead of worrying about vblank. Maybe I should write that and throw it up on the asset store, lol.)

[oahda]

Looks good to me! A video is a good idea so that we can see it in motion, yes. c:

[GhostBomb]

Who knew that the solution to would be to: not run the game in full screen.

Wow.



the game runs in 60 fps but this cap is 30 fps.

[oahda]

Its nice! But considering how vast the ocean is, I would probably try without parallax on the y axis. And/or maybe have a few more layers.

[GhostBomb]

I wanted to try making a shader that would essentially add paralax to each pixel individually for the ocean texture but I'm really swimming in the deep end (heh).  Shaders seemed simple enough when I was messing around with shader toys online but in practice putting one so complex into existing code seems like a nightmare.

[oahda]

You could always use the regular 3D maths with projection matrix and so on to map a parallax texture on there if you want too, but it's a bit more complex.

[eyeliner]

Add something to the ocean, like a boat, island or something. It's just a bit empty...

[oahda]

Good idea!

[GhostBomb]

Add something to the ocean, like a boat, island or something. It's just a bit empty...

I'm planning to.  I'm just trying to get the ocean itself right first.

I've added a very simple stretching to the ocean texture.  I don't know if you can really notice it from this gif:

[darklight]

That actually looks much better.  Like an actual 3D texture.

Is that a barrel / boat floating in the water?  It needs some sort of wake / ripples / shadow to make it obvious, because its hard to figure out if its floating or flying.

[oahda]

Are you continually moving sideways here or are the clouds just moving really fast?

[GhostBomb]

They're moving that fast.  Any speed lower than 1 pixel per frame didn't look as smooth :/