[Hoverla] — The little story. JS13kGames.
TODO: Create beautiful, smooth and interesting game…
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.
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.
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.
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 :)
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.
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.
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.
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.
I use night and sunset value for animating colours during rendering whole final scene.
After, if I need to use interpolated colour, everything what I need it’s:
context.fillStyle = color.get('smoke');
Day-night task was solved!
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
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.
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.
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.
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
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! :)
I think that someone could still reach the top, even if my game really hard! Here is the link to the [Hoverla]
Thanks for reading…