The Big List of HTML5 Game Tutorials

When you are making games in HTML5 you have several options. You can simply write everything by yourself in plain js and html, or you can use a gaming framework which already implements some core features used in most of the games, or simply using a game tool which exports in html5, in which you do all or most of the operations visually, writing none or less code.

CreateJS

My first framework I’m playing with is CreateJS. CreateJS is mature enough, tries to mimetic the flash/as3 class hierarchy and is supported by Adobe. Flash Profesionall CC has and option to export resources from flash for CreateJS.

• Retro Style Platform Runner: Part1, Part2, Part3, Part4, Part5
• How to Create a Flappy Bird Clone
• Circe Chain engine made with CreateJS, Part2

More useful links:

• Postmortem: Making a HTML5 game with Flash CC HTML5 Canvas document for a Game Jam
• Using CreateJs: PreloadJS, SoundJS, and TweenJS
• Dragon of Bosnia: Preloading Assets and Creating a Loading Screen Using PreloadJS and EaselJS
• Type annotations for the CreateJS Toolkit

Phaser

Phaser is another html gaming framework, heavily inspired by flixel, another flash framework ported in many other languages.

This article is going to be maintained with more links as they will be discovered. If you have a link worthy to be mentioned here, just leave it in a comment.

PandaJS 

PandaJS, html5/javascript engine, quite new but in the same time mature enough. It was built with the mobile support in mind, providing options to render games in WebGL or canvas, having it’s own Particle, Tweening and Physics Engines. It also provides support for sound and bitmap fonts and it implements a nice plugins mechanism for reusing code in addition to a way to organize code in modules(which can be quite hard in js).

Top Car Sprite Tutorial

For creating games you need if not good graphics at least some decent graphics. If you are not an artist by your own you have 3 options:

• hire/collaborate with a good artist
• buy existing assets from sites selling them
• make your own graphics

Looking for different resources, I discovered that sometimes is not so hard to create your own sprites. Here is an old tutorial from an old forum for creating a top view car sprite:

How To Create a Top Car Sprite, Step by Step

1. Start with basic layout… Seats, front and rear.
2. Add wheels. Make sure all wheels are the same size.
3. Start covering.
4. Remove the underline.
5. Add color and some shading.

Top Car Samples

Found here, created by Krysis.

Choosing A Framework/Game Development Engine

Choosing the right tools might has a huge importance for a couple of reasons. Obviously, choosing the wrong tool might have a huge impact on the long term future. The more time you spend using a specific tool the more will the more you’ll get used to it, becoming more resilient to change it even if it’s not the best one. On the other side when choosing a tool you don’t have the experience of using them, to compare them. Reviews you find on the web are valuable but you can not trust them entirely. Further more what’s good for the others might not be that good for you.

The bottom line here is that before choosing any tool you should define based on what you want to achieve a set of features you are interested in. Based on it you can decide the best tool for you. In my case I decided to go on creating in the near future HTML5 games which will work good enough in browsers on mobiles. The games don’t have to be very complex, because I don’t have to deal as of now with optimization issues. They also don’t have to be very original concepts since I’m in the phase when I’m testing the market. However I’d like to be able to build those games for other platforms as well.

Based on the above mentions, on the fact that I have good programming background plus some Flash experience, I took in consideration a few options:

• OpenFl(NME) – a framework based on HAXE which can export the games in Flash/Html5/Native iOS/Native Android/Blackberry/Windows/Mac/Linux. Haxe is a strongly typed language close to as3, created as an alternative to flash. I can generate C++ code which is then compiled for other language. It uses a structure of objects almost identical to the as3/flash one.
• Dart + Dart Toolkit Exporter added to Flash CC. Dart is a language created by google as an improved alternative to JS. The dart code can be compiled to JS (or it can run on it’s own VM). The Dart Toolkit Exporter can be used to export graphic resources from flash.
• playN – a promising google framework in which you will write java code which will be compiled to different targets. For me sounds good because I feel good writing java code and I love eclipse.
• CreateJS + CreateJS Toolkit Exporter – flash can still be used to export graphic resources.
• Stancyl – a visual game development platform to generate 2d games. It can export into flash, Android, iOS, Windows, Mac and version 3 which is in beta since August will include Android and Html5 Exporters.
• Construct2 – another visual tool which makes game development very easy. It can compile the game only to HTML5(CocoonJS might be an option to obtain a native app for mobiles). It’s worth to give a try, considering the learning curve seams to be very quick.

Until now, I’ve played around with OpenFl a little bit but not enough to have an opinion. Haxe is strongly typed and that makes it a little bit more restrictive compared to as3 and it appears to miss a standard for loop which is annoying. Writing once and deploying everywhere sounds promising anyway.

About one year ago I’ve checked Constuct2 and I was not impressed by the performance on mobiles. I still have to investigate more on this issue.

The next day I’ll try to develop a simple game in CreateJS or maybe in pure HTML5 using canvas.

More options to consider: http://stackoverflow.com/questions/17584717/2d-cross-platform-game-development-engines

5 Reasons HTML5 Apps are Easy to Monetize

 

A nice presentation by Alexander Krug from softgames.de. He presents the advantages of the of monetize HTML5 games. Compared to the current game markets there are various business models of how and where you can monetize or sell HTML5 Games:

• In-Game Advertising
• Freemium
• License Fee
• Subscription

Distribution Channels:

• Mobile Web
• App Stores (Hybrid App)
• Carriers
• Social Networks

Great Virallity

• Just Share the link
• Everybody can play it

Instant Accessibility

• Click and Play Flow
• No Download and Installation
• No forwarding to external app store

Optimization on the Goal

• Much Easier A/B Testing
• Update on the fly without any hustle and delay
• Always up to date

Starting Your Own Game Dev Venture? Check This Out !

Having a solid programming background and some experience with flash game development I decided to move to the next level. I think it’s the moment to move slowly from flash towards other technologies in order to pursue new opportunities which emerges in an increasingly changing market.

When you want to take such radical decisions it’s difficult to choose one way or another without knowing pros and cons of each of the possible options. If you want to step on a road you’ve never been on, before starting to read and to gather pieces of information, you should set your goal and define your mission. For me that will be not only to create games, but to be able to monetize them when they are ready. I should constantly remember to spend some of the time for monetizing games, not only for creating them.

Having the clear goal and mission in mind it’s easier to choose the technology you need for that. For the moment I have only a few points I should follow. To choose something that is good for developing for mobiles(preferably running efficiently enough) as well as for web. For the moment I’ll stick to 2d and not very complex games. I think it’s not so bad to try new things, so even if I opt in for a framework, technology or game development engine I won’t stick to it forever. Trying new things will broad your views and will provide you the knowledge and experience to choose the optimum decision to achieve your goal.

From my previous experience I realized you can not be good at everything. Because it takes time to become good in a field and your time is limited. So again with my goal in mind, I have to realize that in order to be productive in my endeavor I should highlight my strong points and to be aware of my weak points. Whatever you’re not good at, you should find an alternative which will keep you doing what you are good at. For example I’m not that good  at creating art for games so I might outsource it, use free game art or simply buy it from different marketplaces.