MilkyJS, a Simple HTML5 Framework to Quickly Prototype Games

I'm currently working on my own HTML5/Javascript game framework. My goal is to make it ridiculously simple to build a game prototype. This means a simple API, and a short code to make a game.

It's early in development but it already works: you can build 2D games running at 60fps in any browser.

I'm calling this new framework MilkyJS, and this is a short post to present it to you!

Empty Game

Let's see how to create an empty game with MilkyJS. If you are already familiar with the Phaser framework, you'll see that it's quite similar.

First we need a basic index.html page to load 2 Javascript files: the framework and the game itself.

<!DOCTYPE html> <html> <head> <script src="milky.js"></script> <script src="game.js"></script> </head> <body> </body> </html>

Then we code the game in the game.js file.

// The main scene, a game can have multiple scene var play = { // This function is called once at the beginning // That's where we set up the game, display sprites, etc. init: function() { }, // This function is called 60 times per second // It contains the game's logic loop: function() { }, // Add other functions here if needed }; // Start a 500 by 500px blue game with the play scene M.ilky(500, 500, play, '#3498db');

That's it! And no need to use a webserver, just drag and drop the index.html file in any browser and you are good to go.

Simple Game

Now let's see how to make a simple game: the player (a white square) tries to pick a coin (a yellow square) with the arrow keys.

You can of course make more complex games with MilkyJS, but for a first example let's keep things simple.

Here's the full source code with lots of comments to explain how things work.

// The main scene var play = { init: function() { // Create 2 sprites: the player and the coin // Params: color, x, y, width, height this.player = M.rect('#fff', M.w/2, M.h/2, 50, 50); this.coin = M.rect('#ff0', 400, 400, 20, 20); // Add a text in the top left corner // The '@' will be automatically replaced by the score // Params: text, x, y, color, size this.score = M.text('score: @', 20, 20, '#fff', 24); }, loop: function() { // Call the hit function when the player touches the coin M.overlap(this.player, this.coin, this.hit); // Move the player around with the arrow keys // You can either do this: // if (M.key.right) this.player.x += 5; // if (M.key.left) this.player.x -= 5; // if (M.key.down) this.player.y += 5; // if (M.key.up) this.player.y -= 5; // or simply this (horizontal and vertiacal speed) this.player.move(5, 5); // Change the scene if we win the game if (this.score.i == 5) M.scene(win); }, // Function called when the player hits the coin hit: function(player, coin) { // Emit a bunch of yellow particles // Params: color, x, y, size, count, lifetime, speed M.particle('#ff0', coin.x, coin.y, 5, 30, 400, 200); // Emit a sound of a frequency of 400Hz for 200ms M.sound(400, 200); // Make the player grow slightly for 200ms player.tweenTo({ scale: 1.25 }, 200).yoyo(); // Change the x and y position of the coin coin.set(M.rand(0, M.w), M.rand(0, M.h)); // Increase the score by one and update the label this.score.i++; }, }; // The win scene var win = { init: function() { // Text displayed at the center of the screen M.text('YOU WIN!', M.w/2, M.h/2, '#fff', 40); // Make the screen shake for 1 second M.shake(4, 1000); // Go back to the play scene in 1.5 seconds M.scene(play, 1500); }, }; // Create a 500 by 500px game with the play scene M.ilky(500, 500, play, '#3498db');

Pretty simple to understand, right?

Comparison

Here's a comparison with an other HTML5 framework. With Phaser, the exact same game is made in 60 lines of code. With milkyJS it's just 29 lines:

var play = { init: function() { this.player = M.rect('#fff', M.w/2, M.h/2, 50, 50); this.coin = M.rect('#ff0', 400, 400, 20, 20); this.score = M.text('score: @', 20, 20, '#fff', 24); }, loop: function() { M.overlap(this.player, this.coin, this.hit); this.player.move(5, 5); if (this.score.i == 5) M.scene(win); }, hit: function(player, coin) { M.particle('#ff0', coin.x, coin.y, 5, 30, 400, 200); M.sound(400, 200); player.tweenTo({ scale: 1.25 }, 200).yoyo(); coin.set(M.rand(0, M.w), M.rand(0, M.h)); this.score.i++; }, }; var win = { init: function() { M.text('YOU WIN!', M.w/2, M.h/2, '#fff', 40); M.shake(4, 1000); M.scene(play, 1500); }, }; M.ilky(500, 500, play, '#3498db');

Phaser is a lot more powerful and flexible, but MilkyJS has a much simpler and shorter code. That's why MilkyJS is great to quickly prototype game ideas.

Here's how MilkyJS manages to be shorter than Phaser:

No need to load png or mp3 files, you can directly draw rectangles and emit sounds.

The physics engine to handle collisions is activated by default.

Most functions have optional parameters to fine tune things.

You can do basic particle effects in just one line of code.

And a lot more similar small things that in the end make a big difference.

Conclusion

So what do you think? Would you like to make games with this new framework? If so, I will try to fix the last few bugs and put the code on GitHub.

If you want to know when MilkyJS will be available and be notified when I write tutorials about it, just join the newsletter below. No spam and unsubscribe at any time.

Get MilkyJS news

Enjoyed this post? Then share on it on Facebook or on Twitter. Thanks :-)