A platform for multiplayer HTML5 games
It was built in response to our needs while developing a HTML5 game called TankCraft.
It acts as multiplayer server which also serves static files and uses Ajax requests to transfer data between the front end and the back end. The main feature is syncing player actions or broadcasting data across multiple clients using Chilly update channels.
Behind the hood requests and long-polling are handled by Chilly. We provide an interface to use these features easily.
The back end logic of a game can be built using Chilly Framework methods and if needed, additional Node.js modules like MySQL support, can be added easily using NPM modules.
Chilly front end script takes care of ajax requests and broadcasting updates. And triggers updates whenever a client receives data. Developers are free to use whatever suits them to build the game. We used the CraftyJS library for graphics and animations, jQuery for the UI and SoundManager for the sound.
- Download and install Node.js on your platform of choice.
- Download Chilly Framework, using for instance
git clone https://github.com/TajPelc/Chilly-Framework.gitor by downloading a zip.
- You are ready to go, start the server with
node server.jsfrom the folder where you extracted the files.
This is a basic structure for a Chilly Framework project. It's separated to a back (protected) and a front end (public).
frameworkchilly-0.2.js // Chilly Framework back end scriptnode_modules // additional Node.js modulesprotected // back end filesactions.js // define your actionsconfig.js // server and game confighelpers.js // define custom helper functionsmodels.js // define your modelspublic // static content served by the web serverjslibrarieschilly-0.2.js // Chilly Framework front end scriptcssimgserver.js // starts the server
Start by creating an index.html file in
/public/index.html, then run the server with
node server.js. Navigate to
http://localhost:3000/ and you should see the contents of the file.
Include the Chilly Framework front end library with
To start Chilly Framework call
Chilly.init();. This triggers an
To bind events use:
Chillybind'init' /* load assets, sprites, sounds, etc */ ;
To trigger custom events use:
To issue request to the back-end use:
Chillyrequest'actionName'data: // optionalcustom1: 'a'custom2: 'b'// do stuff// optional// display errors;
Define code for every action that is transmitted over the update channel using:
ChillyonUpdate'gameOver'// display the score;
Listen to additional channels created on the back end using:
Chillylisten'chat'// display broadcasted message;
actions.js and define additional update channels with:
actions.js and define responses to requests send from the front end by
Chillyaction'login'// if user is already logged in// respond with an errorrequestrespond.error'Already logged in.';// (optional)// log the user inrequestrespondok'You are now logged in.';;
models.js and extend Game.js and define your own models that will be used by the game.
Check the source code comments for both chilly-0.2.js files for more information. Visit chillyframework.com.
Copyright 2012, Taj Pelc
Dual licensed under the MIT or GPL Version 2 licenses. http://chillyframework.org/license/