2D scrolling week

And how it all began nicely

Parallax for scrolling games is common, but the degree of development of parallax differs dramatically from game to game. To get a really beautiful and interesting background is quite difficult. Many are now switching to 3D and parallax as an effect in general disappears, as it turns out in a natural way.
In the old days, parallax-effect points (stars) were allowed on the background, a little later, backgrounds were made in a couple of different layers. And now you can not do a couple of layers or scrolling background, you need a little more.


Lightforce, Commodore 64, 1986

Attention, under the cut large pictures.

The power of modern computers (and mobile devices) is growing day by day, but the effects often remain quite simple. Let's try to understand what the problem is: low power of the equipment, complexity of creating complex backgrounds, laziness ... Is it possible that this is just a lack of development? Lack of attention to detail?
')
It was easiest to check this by trying to do it yourself. Overcoming laziness, I started doing. Since the artist is none of me, I immediately apologize for the fact that my enemies are abstract (mirrored spheres), the background is generated by the noise of the pearl, and the only drawn boat belongs to my old friend Ricardo’s pen, and I strongly hope that he doesn’t mind such a scenario.

You can rate the result by the video:


The screenshots in the course of the article are slightly different from the video, in fact only the background is changed in them, which is a little prettier.

Parallax

The essence of the parallax effect is that the speed (and size) of objects depends on their distance from the observer - the farther the object, the slower it moves relative to the observer and the smaller it is in size. Of course, this is true only for stationary objects, or moving with one speed (which is generally equivalent). Thus, we can take as an axiom the fact that our farthest plan will not move at all. Or will move very slightly. The second option will give us a better sense of movement, while the first will allow us to show insanely distant objects, such as stars.

From theory to practice

So that everything I said in this topic does not seem just a bare theory, I will supply all my calculations with screenshots from the application that runs on my Intel integrated video (HD2000) with at least 60fps. Since the game (or rather, the prototype will be said) I wrote before writing the article, glasses, fps, health scale fall into the frame. I apologize, I did not notice right away, so I decided to leave it on the screenshots. The essence of the matter they do not change.

Far plan

The action takes place in space, so the distant plan will be the stars and nebulae. Of course, I do not want the game to be compared with NASA photos, so the nebulae are bright. To create a colorful pseudo cosmic background, I used the utility FilterForge 3.0. She has a trial 30-day period and anyone can feel it.

Also, I placed a star on the background, which is close enough to become the brightest object in the whole scene, but also far enough to move at the speed of the far plane.

Medium plan

The average plan is more decorative appearance, as it is not yet the main, but already attracting attention. Therefore, he should not be dead. He must live, an action must take place there, even the most primitive. To revive the plan, I will take asteroids and huge space farms. Asteroids are all the same, but for the background now this is not the most important. Even their blurring will be beneficial so that they do not distract so much.
The farms were drawn by me in Photoshop for a couple of minutes, the asteroids are honestly taken from the Internet.

That was not empty, add dust. Ideally, of course, there should be significantly more objects. Other ships, planets, stations, meteors ... In other words, everything that comes to mind.

Main plan

The main plan is a game, so nothing but game objects will not be here. To make it easier for me not to die and take screenshots, I turned off the enemies, so the effects of explosions and enemies, alas, no.

Foreground

Yes, this is not a mistake, closer to the main plan will be another foreground So that he does not interfere too much and does not frighten the player, he will be blurred, as if not in focus. All that will be on it is rubbish. Nevertheless, in the game, the foreground will also play the role of additional complication, since it will hide part of the main game plan.

Garbage

Right, trash! I completely forgot. It is necessary to add garbage, and mainly in the main, game plan (very small, so as not to present a visual hazard). The absence of objects in the main plan completely confuses the player. The player will lose the feeling of depth and will forget in which of the plans the action takes place. Garbage can also be in any of the above plans.
Since I made this game for the contest and the timing was extremely tight. For everything, everything was about a week and I had to give up many features. Garbage got there, under the knife.

so

What did I do wrong? Actually, everything is true, but it looks awful! You also need to bring beauty and remove shoals. To begin, distribute objects in brightness, and generally muffle them so that they do not fall out of the scene.

The contrast remained large, but already such obvious color drops are not noticeable. The most attentive readers noticed that the sun is drawn incorrectly. It is behind the stage, and it should be in front and overlapped only by game objects and foreground. We fix.

Now I will add just one missing stroke ...

That's so much better. But this is only one post-process shader. Bulk light shader How does it work?

How does it work?

The original image for the formation of such a frame is, however strange it may be, the previous image. However, there is more. We will put the framed frame aside and prepare an additional texture specifically for the effect, containing information about the light and the objects that overlap it. It looks like this:

In this texture, we render the light source and everything that can block the light. And the darker we draw it, the more it blocks the light. The light source in this frame is the center of the screen (the coordinates of the source are additionally transmitted to the shader during drawing).
Please note that the scene 1 in 1 repeats the one that we see by the location and size of the objects:

Above the texture for the rays, below the usual drawing
To transform this texture into rays of bulk light, we must process it with a shader, the code of which I will attach at the end of the article. The result is very similar to the effect of radial blur from photoshop, which in fact is corrected for the coordinates of the light source.

So we got our rays of light. All that now remains to be done is to impose this texture on top of our entire scene with additive addition, to mix them. The final result was a little higher, and to see the difference, I will impose the effect on only half of the screen:

Left with surround light rays, right without

Instead of a resume

Plans painted. There are only four of them, but since objects in one plane can move at different speeds, this will create the effect of continuous space. All that is needed for this is to vary their speed and size. To give greater beauty and volume - the effect of volumetric light.
I do not exclude the use of additional effects, such as motion blur or light aberration. Since the goal was to create a game that runs at 60fps on the laptop’s integrated video processor, such complications had to be abandoned. We must immediately admit that the creation of parallax required not even 60, but all 120 frames per second, since the subsequent implementation of the game itself will reduce the performance. It is also necessary to take into account the resolution - 1280 * 720, which imposes restrictions on the speed of processing full-screen post-process effects.

Tools

I used the development tools I was used to, namely my own framework for Direct3D9, HLSL and the Microsoft compiler for creating binary effects code. The main code is written in Embarcadero Delphi XE3. I rendered the background texture in FilterForge 3.0.

Shader

sampler2D DiffuseMap : register(s0); float2 LightPos : register(c0); float4 Params : register(c1); float4 std_PS(vertexOutput Input) : COLOR { float4 Output; int NumSamples = 20; float Weight = 1.0; float Density = 0.5; float Exposure = 0.25; float2 DeltaTexCoord = (Input.TexCoord - LightPos); DeltaTexCoord *= 1.0 / NumSamples * Density; float3 Diff = tex2D(DiffuseMap, Input.TexCoord); float illuminationDecay = 1.0; for (int i = 0; i < NumSamples; i++) { Input.TexCoord -= DeltaTexCoord; float3 sample = tex2D(DiffuseMap, Input.TexCoord); sample *= illuminationDecay * Weight; Diff += sample; illuminationDecay *= 0.9;//Decay; } Output = float4(Diff * Exposure, 1); return Output; } 

UPD:
Source codes and binaries can be obtained from the repository at bitbucket.org