Buurkracht

Buurkracht is an energy initiative that brings neighborhoods together in order to save energy. I made a low-fidelity prototype that was supposed to encourage children to learn more about renewables and how they can save energy.

The prototype did great, which sparked my interest and encouraged me to learn about what turning it into a high-fidelity prototype would entail.


Personalization

One of the features I first implemented was the option to personalize your character. I ended up making use of SVG. This made it easy to dynamically add colors, mix objects, animate and allow the player to create a truly unique character.

The preloader I ended making and using was designed by Iconathon and even got a shout from Codepen.

Handling state

While React made the application easy to reason about due to its componentization, Redux helped interface and game state flow throughout the application with ease. With the help of React Intl, internationalization became a breeze and could be changed at runtime.

Terrain deformation

One of the key features I had demonstrated in my low-fidelity prototype was the ability to deform the terrain and making it your own.

Most of this work involved working with GLSL and writing my own shaders.

The terrain could theoretically influence the environment and thus the energy sources one should opt for, offering a more diverse playthrough.


In the end, I learned a lot about React, Webpack, WebGL, Canvas, Node and many other technologies while building this application. I will most likely apply them to future projects.

For those interested, the repository can be found here.