[Hoverla] — The little story. JS13kGames.

6 min readSep 17, 2018

Intro.

TODO: Create beautiful, smooth and interesting game…

Preparation.

Previous year my friend Pavlo helped me a lot with graphics to create our game Mauja. Graphics was created by using AI then exported as *.svg and converted to canvas by using some free web tools. As you can see it wasn’t optimized way, especially if you need to use it in a 13kb game. And the question with animation was still open.

This year I decided to create my own application which allows me to draw some kind of animation sprites with vector graphics and export it with less amount of code.

Work was started.

Application.

Current version of application took around 2–3 weeks of development. I won’t write a lot about it, just share some screenshot of the app if someone is interested in.

Technologies: Angular, Firebase, Angular Material, Angular CDK, SVG.

Color’s Palette. Create your own palette then use it during creating graphics.

In general, if you want to animate something, everything what you need is to add animation on the left, attach all paths which you need to animate on the right and mutate it then by moving, rotating or scaling.

Here you can see how actually I can export graphics and use it in my game. Only option here is scale ratio. For sure I can scale graphics in javascript directly, but by scaling it here could save some bytes, which is really important…you know. First array is original graphic, another is animation’s patch (Only paths which was mutated). I’m sure it could be more optimized, but I had spent lots of time already and only around 2 weeks was left to the deadline.

Currently this application is in my private repo. I haven’t written security rules for firestore yet and there are still some issues which must be fixed, but I’m working on it. In some time I will share application link or just a repo, which you could fork and set your own firebase account. Maybe it helps someone next year :)

Idea.

Inspiration I’ve got from reading couple of articles about Everest and how hard is to reach the top. The first idea was something like strategic game, where you need to take care about amount of water, oxygen, temperature and weather around. But after finishing drawing application only around 2 weeks left to the deadline and only way to finish the game was to simplify everything.

Coding…

Here I will try to write down some tips and tricks, which I have used during creating my game.

For rendering game nothing special, it’s just 2d canvas.

For getting better graphics you can detect pixel ratio and adjust everything to it. Here is the basic example of how you can do it.

Example of how to use devicePixelRatio to improve quality on high-res displays.

But nevertheless I didn’t use such trick as I faced with performance issue in Firefox browser on my retina display.

Day, Night and the Colours between.

I don’t like my last year solution, which I have done for day-night cycle. Every object was rendered two times one over another. First with normal and second with the black colour. During the day, black layout has 0 opacity and obviously during the night — 1.0. It causes performance issue, especially on mobile devices, as you need to render whole game twice at the same time, but at least it works well.

This year I was looking for much better solution. I investigated lots of different techniques about how to interpolate colours in javascript: gradient solution, math interpolating and so on… And then I found HSL colour format. It looked like the perfect solution for my task.

HSL format has three parameters: Hue is a degree on the colour wheel, Saturation is a percentage value (100 % is a full of colour) and Lightness is also a percentage (0% is dark and 100% is white).

As you can see it’s super easy to animate objects lightness and saturation. Below is the example how I have implemented it.

Sun, night and sunset global values.

I use night and sunset value for animating colours during rendering whole final scene.

Global color object, which is used for getting actual interpolated colour according to night value.

After, if I need to use interpolated colour, everything what I need it’s:

context.fillStyle = color.get('smoke');

Day-night task was solved!

Graphics.

This part has two main function: draw.r() and (new Anim(graphic, animations, time, oneTime)).n();

Let’s take a look a little bit more closer to both of them. Here is the code

Main function for rendering graphics imported from drawing application.

draw.r() is a stateless method, which could render original graphic or returned by n() method of an object of Anim cunstructor. It’s just going through array of paths and draw it by using standard moveTo and lineTo methods of canvas 2d context.

Anim constructor for getting actual state while animating graphics

When render function calls .n() method depends on time passed from the last call, next animation state will be calculated. I use simple linear interpolation for transitions. The one thing which I would like to improve here is that possibility to set different animation speed between slides. Now you can set only one for whole animation cycle.

Here is the example of rendering evergreen tree by using draw and Anim together.

Draw animated evergreen tree on the scene

Character.

It has 6 different type of graphics with their own animations: running, walking, sitting, falling, hiding and drinking. What I don’t like now is when you switch from one graphic to another, f.ex you are sitting and then start running, there is no animation between. So it’s great stuff to think about next year. Firstly I wanted to create some zoom function for camera, f.ex if you are dying then slow down the time and zoom in. It would make the game more dynamic and show smooth interpolated animation, but haven’t found time for that.

Mountain.

I decided to generate it randomly, but with static camp’s positions. There are four camps and while you are drinking hot tea, by sitting in the camp, you can wait until sun is raised (or storm is passed, what is not implemented). While I work on the mountain I started thinking creating some smart random library for next games to make

Final thoughts.

I would like to improve weather system, add some storm and thunders, improve character animation to make it more realistic, work on difficult level as currently it’s not so easy to play, especially if you my game for the first time. But nevertheless I’ve got tone of experience this year. Js13kGames for me is something like out of space, when you can do unusual things among daily routine and get lots of new experience. I hope that someone finds this article interesting and will use some tricks.

Finally I need to improve my ‘time management system’ and make things in time! :)