HTML5 Game Development

Facebook Twitter

Box2dweb - Box2DFlash port to javascript. Overview This is a port of Box2DFlash 2.1a to JavaScript.

box2dweb - Box2DFlash port to javascript

I developed an ActionScript 3 -to- JavaScript compiler to generate the code. There already exists a port to JavaScript called Box2dJs, but it's not up-to-date and you have to import a big amount of JavaScript files in every project, whereas my version is stored in a single file. The Box2D physics engine was developed by Erin Catto (visit for further information) Live Demo Usage You can read the documentation for Box2dFlash, since nearly everything is organized the same way.

The b2DebugDraw takes a canvas-context instead of a Sprite: var debugDraw = new Box2D.Dynamics.b2DebugDraw;debugDraw.SetSprite(document.GetElementsByTagName("canvas")[0].getContext("2d")); Graphics. JsGameSoup: A Free Software framework for making games using Javascript and open web technologies.

GameJs. A Developer’s Guide to HTML5 Canvas. Indie Game Developer McFunkypants. HTML5 Multiplayer with Node.js and Socket.IO. Open Source multiplayer platform for HTML5 based games. 15 Icon (@font-face) Web Fonts to Improve your User Interfaces. Nowadays web applications have greatly increased and they make extensive use of icons for their user interfaces.

15 Icon (@font-face) Web Fonts to Improve your User Interfaces

Thanks to @font-face rule we should include icons within our web pages using icon web fonts instead of single images. In this post we have collected 15 sets of icon web fonts that you can use to design your user interfaces. Web Symbols Web Symbols is a free set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly — but IE7 for sure). Link Iconic Iconic is a minimal set of icons consisting of 177 marks in raster, vector and font formats — free for public use. Link Fico Fico is a font with 52 simple, commonly used icons and glyphs, served on the web via @font-face. Link Heydings Icons Heydings is a collection of 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons.

Link IcoMoon Link Tipogram Link Writesocial Link Pictos Link Symbol Signs. Html - Sublime Text 2 Keyboard shortcut to open file in Chrome. Canvas From Scratch. PHP Scripts, WordPress Plugins, HTML5, jQuery, and CSS. Bouncy Mouse. Introduction After publishing Bouncy Mouse on iOS and Android at the end of last year, I learned a few very important lessons.

Bouncy Mouse

Key among them was that breaking into an established market is hard. On the thoroughly saturated iPhone market, gaining traction was very hard; on the less saturated Android Marketplace, progress was easier, but still not easy. Given this experience, I saw an interesting opportunity on the Chrome Web Store. While the Web Store is by no means empty, its catalogue of high-quality HTML5-based games is just beginning to grow into maturity. In this case study, I will talk a bit about the general process of porting Bouncy Mouse to HTML5, then I will dig a bit deeper into three areas that proved interesting: Audio, Performance, and Monetization.

Porting a C++ Game To HTML5 Bouncy Mouse is currently available on Android(C++), iOS (C++), Windows Phone 7 (C#), and Chrome (Javascript). So now the question is, can anything be done to make a codebase easily hand-portable? Audio. Adventures in JavaScript Development. Taming the SVG Beast. <title>Inkscape Output</title> var ctx = document.getElementById("canvas").getContext("2d"); // #layer1 ctx.save(); ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, -732.362180); // #path3220 ctx.fillStyle = 'rgb(255, 102, 0)'; ctx.beginPath();

Taming the SVG Beast

Mobile Game Primer. Until recently, performance of browser-based games for mobile devices has lagged significantly behind desktop performance.

Mobile Game Primer

If you wanted to create a Canvas-based mobile game, performance was terrible and you needed to build your game around the limitations of the platform. Developing a usable game meant using tricks like scaling up from very low resolutions or doing partial screen updates instead of full refreshes, meaning your game design was limited by the platform’s weaknesses rather than your creativity. Luckily, this has changed. Browser vendors are rapidly improving their mobile performance: iOS5 now ships with Nitro Javascript Chrome for Android browser is now available on Android 4 (Ice Cream Sandwich) Windows Phone 7 Mango launched IE9 mobile with hardware acceleration All feature a GPU hardware-accelerated HTML5 Canvas element and both feature multi-touch support inside of the browser, a must for any but the simplest games.

SXSW 2012 - Do Gamers Dream of HTML5 Sheep? - Game Developers. Build New Games. 2D Game art for HTML5 Game Programmers. Posted 16:16PM on March 17 2012 by Pascal Rettig Chris Hildenbrand has a great blog called 2D Game Art for Programmers targeted at programmers designing art for 2D games, focusing on using open-source tools such as Inkscape.

2D Game art for HTML5 Game Programmers

Also check out Chris' introductory post on GamaSutra which covers a lot of the basics and is a huge boom to indie-developers without design skills. Here's a sampling of recent posts: Cloud9 IDE – Your code anywhere, anytime.