A Free Software framework for making games using Javascript and open web technologies.
- Free and Open Source.
- Modular - component javascript files also work standalone.
- Uses Open web technologies like Canvas and HTML5.
- Runs on Firefox (Gecko), Safari/Chrome (WebKit), Internet Explorer 6+, and Android + iOS browsers.
- Cross browser event handling (keyboard, mouse, touch) jsgamesoup.js
- Game entity management jsgamesoup.js
- Sprite management sprite.js
- Sound effects playback with audio.js
- Rudimentary polygon, AABB-box, circle collision detection collisions.js
- Fast, deterministic random number generator random.js
- Simple finite state machine statemachine.js
- AStar path finding on a 2d board of squares a_star.js
- Simplex and Perlin noise algorithms noise.js
- Fast, in-place vector library for Javascript arrays vectorize.js
- Isometric to screen space helper library isometric.js
- Simple AJAX and bulk data loading with network.js
- Basic cookie management cookies.js
- URL and querystring parsing url.js
- All jsGameSoup API documentation
- Reference implementation of a jsGameSoup entity
- Simple jsGameSoup example game
- Canvas cheatsheet
- Canvas tag documentation
- Some tests
- Some demos
Copyright Chris McCormick, 2009-2011, and LGPL licensed. Please see the file COPYING.txt for details. Basically you can use this in a commercial product but if you make modifications to the library itself you should publish them.
Using jsGameSoup for your game? Hire me as a consultant.
- SFXR sound effects tool - also BFXR in your browser
- Dan Cook's free game graphics
- Oryx's LOFI fantasy tiles and sprites
- WidgetWorx SpriteLib
- Philipp Lenssen's free sprites
- HasGraphics game graphics
- Reiner`s Tilesets
- Freesound archive
To make your jsGameSoup game run under Internet Explorer 6 and above, you can use the ExplorerCanvas library (pure Javascript) or the FlashCanvas library (uses the proprietary Flash plugin) to emulate the <canvas> tag. These libraries have both been tested with jsGameSoup on Internet Explorer 6 and work fine, with the FlashCanvas library providing better performance than excanvas. You should get the source code for the project you want and then put the respective line for loading the library inside the <head> tag, before any other <script> tags.
To use ExplorerCanvas:
<!--[if IE]><script src="explorercanvas/excanvas.js"></script><![endif]-->
To use FlashCanvas:
<!--[if IE]><script src="flashcanvas/bin/flashcanvas.js"></script><![endif]-->
See the Download section above for links to these libraries.
One final gotcha under IE6 is that Javascript datastructures should not contain a trailing comma on the last element. E.g. t = [1, 2, 3]; not t = [1, 2, 3,]; This is a quirk of the browser that seems to trip people up. If you are finding debugging under old versions of Internet Explorer frustrating, one thing you can do to help is install the Microsoft Script Debugger. You'll also want to enable debugging in the advanced options of the browser.
-
Generally the larger screen area your game fills the slower it will draw. Try using window.open to launch your game in it's own window of fixed size.
-
If you have an operation drawing lots of repeating shapes on Canvas, do them inside one big c.beginPath() and c.closePath() instead of lots of little ones.
Auto-launching is useful if you have pages with multiple game canvases and you don't want to write the launch code for every instance. You do this by simply creating <canvas> tags in your html document with an attribute "jsgs":
<html>
<head>
<script src='jsGameSoup/jsgamesoup.js'></script>
<script>
function startGame(gs) {
// our demo game entity
function Thingy() {
this.draw = function(c, gs) {
c.moveTo(10, 10);
c.lineTo(10 + 10 * Math.sin(), 10 + 10 * Math.cos());
}
}
gs.addEntity(new Thingy());
}
</script>
</head>
<body>
<canvas id='mygame' jsgs='startGame' fps="25"></canvas>
</body>
</html>
When the page is loaded, jsGameSoup will attach a new JSGameSoup() object to every canvas tag with the 'jsgs' attribute. This specifies the name of the function which should be called to launch the game script associated with that canvas. The 'fps' attribute specifies the desired frame rate of the game engine for that canvas. Once the jsGameSoup engine has been attached to the canvas it starts running immediately.