A post about small video games

Hello friends. In this post I would like to tell you how I wrote small HTML5 games for the js13k contest , what pitfalls we encountered on this thorny path, and what happened as a result.


The story is replete with references to various things that have helped me in my work, which means that you will be useful with a certain probability in a similar situation. In general, the purpose of this post - to tell how everything is really just done. I am sure this immediately motivates thousands of people to write all sorts of video games and other programs, or does not motivate.

But first 77 words about js13k

If someone missed, in short about the contest: js13k is such a special way to kill free time. It is necessary to write a video game, a month is given time for this (I wrote two at once, somehow it turned out from greed ).
')
The main requirement - the size of all the source code of the application in the archive (zip) should be no more than 13 kilobytes. The program should work offline, that is, download your favorite fonts from Google’s servers, but the music from SoundCloud servers will not work - you need to take everything with you to the archive.

It turned out that

This formulation of the problem immediately pushes, of course, to the generation of resources mostly directly on the client. Since I didn’t discover any special United States in procedural algorithms, let's show right away what happened - maybe it will become uninteresting to finish reading to the end at once, and you will save up to ten minutes of life.


Here are two links, the first and second . Github is there inside.

If someone else does not cry blood from his eyes on the appearance of my programs, then let me now tell you how it all happened, to be sure. I’m not going to copy boring sources into the post, but they are there - everything is decorated with references to working examples or githabs.

So, the story about the parts of video games:

Disco ball like planet

At first I did not have the slightest idea what to write, but I really wanted to create some firmament in the midst of nothing. Not that I imagined myself to be such a Judeo-Christian Gd, but why not try it out.

The first available algorithm for scanning the texture onto the ball was a great fit. Here is a disco planet separately (by reference a working example). The real source lives, of course, in a githaba .

And this is where design errors immediately begin.

I wanted to make a decent looking planet with green continents and a blue sea, into which asteroids would fly, leaving beautiful black spots of death and evil. Accordingly, the ball renderer theoretically supports all this, but the desire to implement all the cool stuff as a result is lost, especially they have absolutely no effect on the gameplay. The bottom line is a heavy and rather meaningless renderer in the context of a disco ball.

It was better to get by with something simpler, even if it was even a static (or rotating in the screen plane, for example) picture. Such a solution would give a sour performance gain, and it would look 20-25% better than nothing. Well, okay, did not alter - let it be a disco ball.

(About overkill: in the final version, instead of a texture, there is still Perlin's soothed noise instead of a texture. Half of the program does nothing but draws an unnecessary ball, without grace, without ceasing.)

Asteroids

Then merry schizophrenia in the form of multicolored asteroids falling on the planet. There is such a thing: I wanted them to fly not in a straight line, but somehow pretentiously. My fragmentary nostalgic memories of the school course of mathematics were enough for a trajectory in the form of an arc of a circle. For simplicity, all asteroids fall counterclockwise.

Here is a small program that I tested math. You can move the mouse and observe how this thing is trying to build an arc from the mouse to the center of the screen and find the intersection point with an imaginary planet.

The asteroids themselves are unpretentious, such crooked polygons (a pair of random numbers is added to each vertex within several pixels). The polygon is rendered into texture once and cached throughout the life of the asteroid, and then discarded.

The speed of space objects is extremely angular and absolutely identical, since the author turned out to be fabulously lazy.

And other space

About the rest of the cosmos even really nothing to say. Asterisks go in increments of 5 pixels. I also wanted to draw the atmosphere of the planet, it turned out this thing , but then I removed it - the assembly as a whole looked ugly, and my internal Roskomnadzor Maxwell did not let this humanitarian and aesthetic catastrophe into the world of the living.

(In general, the atmosphere should, of course, be depicted on top of the planet. But in the Firefox browser, the renderer slows down so much, I didn’t want to rape it even more. Yes, there you can optimize copying from one texture to another, but I didn’t optimize it.)

The artificial cannon satellite, which is spinning around the planet, is generally very boring and does not deserve any attention. And when an asteroid hits the planet, this is the effect of jitter on CSS .

At this, the rest of the cosmos somehow ended by itself, and it began.

Sound accompaniment

Here I was pleasantly surprised by many things at once.

First, the library for “eight-bit” sound effects with the unpronounceable jsfxr name. Combining this library with a simple wrapper, it is possible at the cost of two and a half kilobytes of code to publish a heartbreaking clan from anywhere in the program. Here is a working example (there is a whole blog post with a more detailed story), appreciate the brevity, this is absolutely perfect.

Secondly, I wanted some kind of background music, for this jsfxr is not suitable. I remembered about this thing , in short it is such a kind of hack: we take integers from 0 and until we get tired, for each we consider the formula, we write a byte to the sound card.

Some freaks do real music right this way.

The romg democenter (Fabian Giesen, from Farbrausch) helped me a lot in finding the formula for the irreversible background tune. Here you can see on Twitter how this wonderful person and talented programmer gives me a formula. It was a pleasure. Why, there is still nice.

The minimum sound synthesizer is here , there are only a few lines.

By the way, if you are interested in procedural music, obtained in this way, then here is a small collection of formulas .

Three-dimensional cubes

In the second video game there are significantly fewer elements, mostly there is just a board with multi-colored cubes in the middle of nothing. Programming graphics using canvas unusually exhausted me by that time, so I decided to use CSS3. It turned out like cool:



Play around with the prototype here. You can rotate the board with the slider. The word nopsp (unreal) means hopelessness, it must be turned off.

About browser compatibility: I haven’t overworked with the prefixes in this project, so it works where it works. The latest Firefox and Chrome / Chromium are usually OK. (The problem with prefixes is that they are not only in CSS.)

Firefox also draws sticking pixels without anti-aliasing, which could confuse some slightly aesthetic developer, and I like it better than the soapy edges of chrome polygons — such an eight-bit charm. I love old video games.

Pathfinding and other things

In order for the enemies to catch up with the character, the search for a path was needed. I did not invent anything, I used the A * algorithm, this is the implementation . Very cool version of the algorithm, small and fast.

Other aspects of the game do not seem to be of technical interest.

If you can learn the names of levels without google, we could make friends, probably.

Conclusion

Of course, on the Internet you can easily find a hell of a break through the material on the programming of graphics, sound and anything else.

Writing video games is quite time-consuming, but excitingly interesting process, especially spontaneously and “for fun”, when you invent everything on the go without preliminary planning and management different there.

You know how it happens in large firms - we collect, it means, a meeting to discuss the results of the discussion of the results of the meeting before last ... And a small joy of work leaves, leaving behind oppressive emptiness and hopelessness. And here it turns out quite the opposite, the souls are wonderful impulses go to all fields.

And remember: trying is the first step to failure.

---

Such is the motivational post. Please write me a personal message about how I am not friends with the living Great Russian language, and a good time of the day for you.