IBEX, my js13k game

gamedevjs13k

I've just finished and submitted my game for js13kgames, a contest where you have to make a web game in less than 13 kilobytes of a ZIP archive.

PLAY IT HERE / github

I had a lot of fun making this game and I think it is by far the best game I ever finished. It is a bit a continuation of my "antsim" game prototype in the idea that you don't control directly the entities but you are at an higher level with simple interactions.

The game should be performant enough but however require that you have a good hardware to support WebGL and some advanced limits (I used too much uniforms). I'll talk more about the compatibility and performance issues in a next postmortem article.

If it doesn't work for you, please report me a dump of http://webglreport.com/.

Playthrough

The Story

The world is burning, Protect and Escort a group of wild ibex away from the inferno. On the path there are sleeping ibex to rescue, wake them and they will join the group.

The Gameplay

You will have to use the 4 elements (Air, Earth, Fire, Water) to make the ibex progress safely in the environnment.

The 4 elements are primary elements but there are also secondary elements at play:

  • The Volcano (creates fire)
  • The Source (drops water)
  • The Forest (created by Earth and Water)
  • The Wind (left wind and right wind is created randomly in Air)

All elements interact with each other and the ibex also react to elements in different ways.

  • Earth is a platform for the ibex
  • Fire scares the ibex
  • Water attracts the ibex
  • Forest makes the ibex running faster

The Controls

SPACE to draw an element, ARROWS to move, W/Z + X + C + V to switch between Air + Earth + Fire + Water.

Keyboard is recommended but playing only with mouse is also possible (click on elements and DRAG the inner cursor).

Some technical notes

This game uses a cellular automaton to simulate a world with different elements (Air, Earth, Fire, Water). This cellular automaton is technically computed as a texture in the GPU through WebGL and a GLSL shader (logic.frag).

While I was writing this game @42loops made me buy this awesome book that I'm still reading:

You can interact with this world by drawing elements with a brush.

However, simulation is not enough to make a game so I mainly focused on the story and the gameplay: On top of this simulation are living the ibex. They are managed in JavaScript and behaves with an AI. The pixels collision and the ibex decisions (e.g; react on fire nearby) is based on querying the simulated world (stored in the GPU as a texture).

The rendering of the game is also performed in WebGL through another shader (render.frag). My source code is on Github.

I will try to write a technical post-mortem to explain you more of this and also what went wrong and what could have been more efficient in my usage of WebGL.

Bonus

During my early development, I've experimented the fire propagation in deep forest:

As a generative plotter artist, I use code to generate art (creative coding) and physically create it with pen plotters, which is itself a generative process – each physical plot is a unique variant. I love dualities, like digital vs analog physical, abstract vs figurative, orthogonal vs polar, photo vs noise,...