@GreWeb

embrace standard web technologies for web, games and mobile apps

IBEX, my js13k game

gamedev js13k

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 https://www.browserleaks.com/webgl.

Playthrough

48 hours to prototype an Ant Sim Game

gamedev ludumdare javascript phaser

I gamejam-ed last weekend to the Ludum Dare theming "Beneath the Surface" (29th edition).

I enjoyed that time a lot. What changed from the previous Ludum Dare for me is that I'm now —and happy to be— a father, and I'm enough trained to wake up at 3am so I could be there attending the beginning!

This article is my diary of this incredible 48 hours past to develop "Anthill", a minimalist anthill simulation game. This postmortem will explain what went right and what went wrong for this compo.

The Game

I haven't played any Ant Simulation Game but I recently played a lot "Banished", an awesome city-building strategy game, and I was inspired by the "assign jobs to people" gameplay of this game.

Timelapse

Developing a complete game in 48 hours (including sleeping) is tough, especially that it is also about making the graphics and the music!

The game resulting of these 2 days is more a prototype than a finished game: the simulation remains minimalist and fastly boring, the food is the only resource you have to care about.

Here is a 300x accelerated screencast of the developement of "Anthill":

Panzer Dragoon 1k

gamedev js1k javascript canvas

This article introduces my journey into the JS1K world and a few tricks I've used for my entry "Panzer Dragoon 1k" (source).

Welcome to the world of hacks, tricks and getting-things-done-at-any-price. You will turn the worst JavaScript practices and ugliest JavaScript facts to your advantage. Welcome to the world where coding the bad way is satisfying!

Panzer Dragoon 1k

Panzer Dragoon Original Game

Promisify your games

gamedev promise Q ludumdare

One month ago was the LudumDare #28 gamejam theming "You Only Get One".

I submitted a mini-game which ranked 105th out of 2064 entries and also 26th in the "theme" category.

This is of-course a web game implemented in JavaScript and using HTML and CSS.

But actually, my main goal was not really making a game done but more about technically making a state-of-the-art Promise-based game.

I think Promises contains very interesting advantages in a game development design: Resource loading managment, game scenes chaining, animations... are some use-cases.

Functional Rendering

functional rendering GLSL

I've done a talk at Gamelier last Monday about how to think the rendering in a more functional way.

Abstract

Most of today 2D graphics libraries restrict us to a set of primitive procedures (drawRect, drawCircle, drawImage,...) but when it comes to bring more interesting features you tends to be stuck with it. Let's see how we can just do things with a function of (Vec2 => Color).

This is the way (WebGL) GLSL has already took and the presentation examples will be built on it. Let's see what are the multiple benefits of taking that paradigm of rendering.

Talk

Open the slides

Checkout more presentations at Gamelier.org

Making a rhythm game with bleeding-edge web

js13k GLSL audio gamedev

While continuing to experiment with Web Audio API and GLSL, I've made a game called Timelapse for js13kgames (an HTML5 game competition where entries must be less than 13 kb zipped).

This article is a postmortem overview of my game development which will try to explain what was my game mecanism ideas and show you some interesting parts with screenshots, audios and source code snippets.

The Game

Open the game on js13kgames / github.

The game intends to work on Desktop and Mobile. However, Chrome is recommended (Firefox Aurora also supports it but audio is a bit wrong, but Mozilla devs should improve this soon). Today, it works on Android Chrome Beta on a Nexus 4, unfortunately with some clicks in the audio (Web Audio API is bleeding-edge).

Beez, WebRTC + Audio API

WebRTC audio hackday

Here is Beez, a web real-time audio experiment using smartphones as synthesizer effect controllers.

This is our second Web Audio API experiment made in one Hackday at Zenexity (now Zengularity).

This time, we were much more focused on having the best latency performance: we used the bleeding-edge WebRTC technology, which allows you to link clients in Peer-to-Peer instead of a classical Client-Server architecture.

Live demo of the Hackday application

Bonus for the one who recognizes the melody :-)

Frequency Modulation (FM) with Web Audio API

fm audio

The main principle of Frequency Modulation (FM) is to pipe an Oscillator (the Modulator) into the frequency of another Oscillator (the Carrier).

This article will explain to you how FM Synthesis works with interactive demos. In the meantime, all demos are implemented with the brand new Web Audio API, so feel free to hack the code for your own purpose.

This article will also introduce some Audio concepts like LFO, Envelope and Finetuning.

I've recently implemented a very first FM in ZOUND live - a HTML5 collaborative audio tracker, giving much more powerful Synthesizers (see in the following video).

(here is the implementation of that FM)

ZOUND live v1 in development

MIDI audio zound

Here is a preview video of the Work In Progress development of ZOUND live, the collaborative modular audio tracker built with bleeding edge web technologies: Web Audio API, Web MIDI API, WebSocket & Playframework.

N.B. In the video, I've used the nanoKONTROL2 for changing some properties in real time and using the MIDI API.


If you are interested by the project, fork it on Github.

More to come, stay tuned!