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!
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.
src/app.js is the entry pointI've done a talk at Gamelier last Monday about how to think the rendering in a more functional way.
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.
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.
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).
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.
Bonus for the one who recognizes the melody :-)
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 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!
Last week, I initiated, with my Zenexity Hackday team, "ZOUND live" following the previous "ZOUND" experiment but being much more ambitious this time: using both the Audio API, the new MIDI API and electronic music software experience, we start our own web collaborative audio modular tracker.
This third article on Q is a little parenthesis to the Qep articles series,
featuring the requestAnimationFrame Javascript function and its general usage,
and QanimationFrame, its Promisified version used as a "wait for DOM to be ready" API.
