Ask HN: Best way to make quick, relatively simple HTML5 games today?
14 comments
Have you looked at http://phaser.io/ ? Lots of resources available for it, active IRC channel, even a few books written.
Just started making a game in Phaser and so far I find it very nice. Before that I used MonkeyX and before that Impactjs: Phaser feels better supported so far.
I may have briefly visited the site a while back, but I haven't looked at it too closely. I'll check it out more later. Thanks for the suggestion.
used this in two hackathons, it was relatively easy to learn and has a pretty big set of functionalities built in such as physics, collision etc. It helped us through two fairly successful game jams, would recommend.
I've always wondered, why more people don't use SVG for web games. It's easier to work with than HTML+CSS, and since you can specify simple animations in it, you can reduce the amount of work your game loop needs to do manually.
Here are my personal options for 2d games, based on my personal background(I developed Flash games):
- Construct2 is you want to create simple games without writing code. Simple to do standard games, hard if you need more control or more complex data structures. It contains exporters for different platform including mobiles(using html5 wrapper to execute html code, based on phonegap or something similar).
- GameMaker - quite similar to Construct2, a bit more powerful and it requires to write more code than Construct2, unfortunately in their own language. You can export games for different platforms(unlike Construct2 it generates and compile the code for each platform in native code) and for html. Each exporter should be brought so it makes this option the most expensive.
- CreateJS - the Adobe Html5 alternative. It recreates the class hierarchy from action3 flash, in html5 js. A tentative to recreate Flash in Html5, good enough. It has the advantage that it can export Flash graphics including vector graphics in an html library which can be used imported in your project.
- Phaser - A nice framework based/inspired/not an exact port of Flixel. It has nice features and it was written only for games so I would say generally it's better than CreateJS, in the same way Flixel was better than plain AS3. It can be combined with Pixi.js to webgl rendering.
- OpenFl - a flash inspired library written in Haxe. The advantage is that it can generate and compile the game in native code for virtually any platform that matters including HTML5. It can even import and use flash objects for graphics.
- LibGDX - write it in java, deploy it on multiple platforms, including html. It uses OpenGl for rendering, for the html export they use Google GWT to translate java code to javascript. It sounded for me as an interesting approach.
My advice is to pick one option and to go for it(the list is far away of being exhaustive). If you have java experience you can check CreateJS or OpenFl, if you want a codeless engine, Construct2 is more popular among html devs than GameMaker.
P.S. It seems Phaser can be easily used with ecma6.
- Construct2 is you want to create simple games without writing code. Simple to do standard games, hard if you need more control or more complex data structures. It contains exporters for different platform including mobiles(using html5 wrapper to execute html code, based on phonegap or something similar).
- GameMaker - quite similar to Construct2, a bit more powerful and it requires to write more code than Construct2, unfortunately in their own language. You can export games for different platforms(unlike Construct2 it generates and compile the code for each platform in native code) and for html. Each exporter should be brought so it makes this option the most expensive.
- CreateJS - the Adobe Html5 alternative. It recreates the class hierarchy from action3 flash, in html5 js. A tentative to recreate Flash in Html5, good enough. It has the advantage that it can export Flash graphics including vector graphics in an html library which can be used imported in your project.
- Phaser - A nice framework based/inspired/not an exact port of Flixel. It has nice features and it was written only for games so I would say generally it's better than CreateJS, in the same way Flixel was better than plain AS3. It can be combined with Pixi.js to webgl rendering.
- OpenFl - a flash inspired library written in Haxe. The advantage is that it can generate and compile the game in native code for virtually any platform that matters including HTML5. It can even import and use flash objects for graphics.
- LibGDX - write it in java, deploy it on multiple platforms, including html. It uses OpenGl for rendering, for the html export they use Google GWT to translate java code to javascript. It sounded for me as an interesting approach.
My advice is to pick one option and to go for it(the list is far away of being exhaustive). If you have java experience you can check CreateJS or OpenFl, if you want a codeless engine, Construct2 is more popular among html devs than GameMaker.
P.S. It seems Phaser can be easily used with ecma6.
Thanks for your thoughts. I've tried Construct2 and GameMaker before and before too long it felt like I was in a straitjacket I couldn't break free from. That's why I specified any genres, because those both seem to handle puzzle/strategy games rather poorly (Construct2 moreso than Gamemaker).
I've tried LibGDX and I just ran into too many little issues that slowed down development (especially for certain platforms) with not enough discussion online to help fix it. It wasn't the Java part of it (I have a decent amount of Java experience), it was the library. I had that same problem with Haxe as well, which I really wanted to make work for me. I did not try OpenFl, however.
CreateJS seems appealing because some of my flash assets are tons of frame by frame vector animation, and I'm not wanting to manually convert those to bitmaps. It'd take forever and the filesize would be huge.
But I looked at a 2d tutorial for Phaser last night and that had a syntax that looked very comfortable for me, so it's looking like that might be the way to go. CreateJS is tempting for ports, though.
I've tried LibGDX and I just ran into too many little issues that slowed down development (especially for certain platforms) with not enough discussion online to help fix it. It wasn't the Java part of it (I have a decent amount of Java experience), it was the library. I had that same problem with Haxe as well, which I really wanted to make work for me. I did not try OpenFl, however.
CreateJS seems appealing because some of my flash assets are tons of frame by frame vector animation, and I'm not wanting to manually convert those to bitmaps. It'd take forever and the filesize would be huge.
But I looked at a 2d tutorial for Phaser last night and that had a syntax that looked very comfortable for me, so it's looking like that might be the way to go. CreateJS is tempting for ports, though.
I came across this post a few years ago, reminds me of the javascript games written 15+ years ago. For a lot of use cases, This technique is simple and has good enough performance.
http://buildnewgames.com/dom-sprites/
Also,take a look at http://createjs.com/. It is pretty familiar if you come from a flash background. The latest version of adobe flash/animate exports to createjs so you can keep using your old flash authoring skills for your assets.
However, If time is your major constraint, unity might not be as overkill as you might think.
Also,take a look at http://createjs.com/. It is pretty familiar if you come from a flash background. The latest version of adobe flash/animate exports to createjs so you can keep using your old flash authoring skills for your assets.
However, If time is your major constraint, unity might not be as overkill as you might think.
libGDX is a Java game engine that's relatively simple and lets you deploy to HTML5, Android, iOS, and desktop. PlayN.io is fairly similar I think, but I haven't used it.
2048 is actually somewhat of an odd case, since it was originally only an HTML5 game that was built to run in both the browsers of desktop and those of mobile devices. For this reason, the developer didn't actually port the game to Android/iOS until much later. Pretty much all the versions on the App Store/Google Play Store were 3rd party clones of the original, since it was relatively simple and open source.
2048 is actually somewhat of an odd case, since it was originally only an HTML5 game that was built to run in both the browsers of desktop and those of mobile devices. For this reason, the developer didn't actually port the game to Android/iOS until much later. Pretty much all the versions on the App Store/Google Play Store were 3rd party clones of the original, since it was relatively simple and open source.
PuzzleScript[1] sounds like it might work for what you want to do, at least for quick prototypes. It's a brilliant little online IDE for a puzzle game DSL.
It might seem like a toy, but there's a community of people who create genuinely good games in it.[2]
[1] http://www.puzzlescript.net/editor.html
[2] http://puzzlescriptgallery.tumblr.com
It might seem like a toy, but there's a community of people who create genuinely good games in it.[2]
[1] http://www.puzzlescript.net/editor.html
[2] http://puzzlescriptgallery.tumblr.com
I really like https://www.scirra.com/construct2 for having fun and fast prototype iterations. Just be aware, that it is UI and click heavy, but yet powerful and flexible. I think it will be hard to manage large code bases in Construct, but that is something I have not yet gotten into with my simple hobby projects.
Take a look at Cocos Creator: http://cocos2d-x.org
Utilizes JavaScript and there will also be Lua and C++ support coming.
It is under active development, docs are good and there are plenty of complete game examples to learn from.
Utilizes JavaScript and there will also be Lua and C++ support coming.
It is under active development, docs are good and there are plenty of complete game examples to learn from.
Phaser and Crafty are code oriented 2D game engines.
I think entity component system of Crafty scales a bit better than Phaser, but on the other hand Phaser has a bigger community.
I think entity component system of Crafty scales a bit better than Phaser, but on the other hand Phaser has a bigger community.
Babylon.js is a pretty good option for 3d games
I want something that's open enough that I can make any type of game or mechanics with it (although I am focused more on 2D puzzle and turn-based strategy games).
Unity seems to be overkill but I do have experience with it, and I used to churn out Flash games a decade ago. Now I'd like to update a few of them to HTML 5 and bang out a few other ideas, but I have much less time to work on them than I used to back in the day.
Something that could be translated to a mobile app without much difficulty would be nice, also, like 2048 was.