A Web Developer Making a Game

A brief introduction to why and for what

I can say that I have an extensive experience in my area of development of applications and experiences for internet access platforms. And as a developer (nerd), a passionate father and gamer (snake !!!), this combination made me grow the desire to give my son a game inspired by him and for him.

The plan

Despite knowing and practicing some concepts of animation and design, I had not yet entered the process of creating a game. So, I decided to go deeper and create something that would involve the entire process from the coding to the design.

How to do all this, since my remote work often consumes mine entire weekends and shortens my nights of sleep? The solution: Put into practice the new concepts that I would learn in what I know very well, WEB technologies.

Involved Technologies

The idea was to make a simple endless running game for small children.

Then Javascript, CSS and HTML were the chosen languages. Knowing their limitations and qualities, I should reach the 60fps mark (rate that the browser updates the screen) or 16ms to run the logic of the game and render it in the browser.

There were some complications that should be circumvented, such as heavy processes for browser rendering, such as painting and composition, so matrix3d came into action! Since it does not cause changes in geometry or painting, it has a great chance of being processed by the GPU, creating two threads, one for rendering (GPU) and releasing the other for logic (CPU).

We could discuss into the used logic, such as memory pooling, matrix decomposition, among others, but for now it's enough to know that it's possible to achieve a relatively near-expected performance with these technologies.

With these choices, I was able to split design from logic, but keeping hierarchy and readability of objects, such as the fingers of a giant's hand or a robot.

And in my new adventure I learned a lot, getting out of the comfort zone can be a bit challenging, but the reward (moment: oh yeah!) Is proportional to the greatest of challenges.

Design

My little one at the time was at age 3, I did not want something like cute monsters without a clear identification. It should be something playful and recognizable. Objects that children of his age can like and identify (Dinosaur, Robot, Dragon, among others.).

*image is a work in progress

But most of all, I wanted to despite the squares and rectangles of the divs in html, that everything seemed organic and connected in their movements.

I know that running 60fps on a Sprite Sheet of 12 frames is not that uncommon practice. A Sprite Sheet would consume a good amount of time to be done and would be a bit far from the simple but organic appearance I envisioned.

Interpolation, interpolation, interpolation everywhere.

It was a very fun challenge to animate everything through frame interpolation, this forced me to use more of my creativity. It was necessary to marry design and animation not to overlap forms, after all there is no deformation, but only basic properties like position, scale, skew and rotation. Colors without much variation or shadows fits very well with the proposal.

How to move water so it creates the illusion of something soft, connected? The hero's cape? A giant Octopus swimming in the river?

*only image used to animate the water 

The answers (so far) in interpolation of the previous questions.

The dark side of the project.

The hard part so far is that everything was animated in a text processor without visual or timeline help. At first, I had a lot of persistence (and luck!) in animate everything through command lines and it worth it. I'm very proud to have succeeded so far!

Thank you for stopping by and sharing with me these insanities of programmer, animator, designer, illustrator and everything that we were not, but that we strive to be and do!

See you again on the LinkedIn timeline