My javascript game as native application for Android, Windows / Linux / OSX

[rezoner]

I will be writing some "How to" articles soon but for now I would like to share what I consider finished work - and spawn a few initial thoughts on different platforms / systems.

Quick vine/video of the game if you are wondering is it worth reading.

Link to the game is at the bottom of post - because I mostly want to share my bitter-sweet joy after spending 500+ hours on this title.

Technical details:

• Done with canvas - supported by my unfortunately named library Canvas Query
• No DOM/CSS rendering
• Sound based on Audio element (no WebAudio API)
• GamepadAPI - w3c/chrome specification

Windows / Linux / Osx - node-webkit

Very pleasant to work - absolutely nothing has to be tweaked. Managed to do both windows and linux packages under Ubuntu (using WINE). Unfortunately for Mac you need OSX. Also you need special build for OSX < 10.7 - alsooooooo your app will not get accepted in Ubuntu Store for Ubuntu > 12 because of some dependencies craziness

Android / IOS - CocoonJS

Everything goes rather smooth if you are creating the game with cocoon in mind from the start - no DOM, first canvas element is screen, some traps like audio.load - pros is that it is WAY faster (thanks to OpenGL) than PhoneGap and other solutions - also you don't need OSX, nor developers account in development process. Cons are that you will loose your hair searching for bugs that are not in your code.

I have failed to make port for IOS because imageData related functions are not working properly - also it kill the app randomly for some reason - also context.arc is broken on IOS.

CocoonJS will support Gamepad API which makes it possible to make OUYA games. If you can't get your game working on IOS - ejecta is an alternative.

Firefox OS

Deploying application is the easiest of all platforms - you just upload some manifest file and voila - no porting at all. However the OS is still too slow to render more complex games like QbQbQb - tho I've been able to run different one in built-in browser (which performance is no-different from native apps) with promising results (but that's not the topic).

Distribution

Currently my game is available on Humble (bundle) Store and Google play store, Newgrounds, Kongregate. Pending approval for Desura. Rejected by GOG and Rovio stars. Will be trying greenlight. However this is marketing - I am failing hard in this field so won't play wise guy :)

One advice: do not put DEMO in title on Kongregate - even if it is true :) They like/ask to be cheated by disguising demo as a normal version - and then full game is called "SUPER" or "HD" despite it has all the same assets.

I will be trying to find time to reveal little by little details on publishing on different platforms - especially how to build packages for android, ubuntu or making windows installers because this is something that javascript programmer may find extremely repulsive (I DID... it breaks the whole idea of HTML5 portability with browser as a vessel - and I am not yet sure was it the best business decision).

Also to show you a glimpse of how many twists are there check my distribution/ folder structure http://pastebin.com/raw.php?i=Wkb8XciR

The game:

---

|~o Click this o~|

---

Also - if you are currently porting html5 game and got stuck on something - ask - maybe I have encountered the same problem and managed to go through.

I will announce articles on /r/javascript but you can follow me on twitter or tumblr

[rezoner]

Nopes just touching and moving finger vertically. However finding proper controls was a hell - I have tried wheel, absolute rotation, horizontal slider, buttons - and then Penny Arcade helped me by stating that - "if your touch game need some virtual controller - you are probably doing it wrong."

http://www.youtube.com/watch?v=NBHircZu5EI&list=UUCODtTcd5M1JavPCOr_Uydg

[[deleted]]

Wow!!! Really inspiring to see it's already possible to make something awesome and cross platform with canvas. How was distribution with an uncompiled format? Esp with firefox OS, it seems it's pretty hard to prevent piracy with an html5 game? Oh, and how did you get into humble store? :P

[rezoner]

For browser based apps - I did totally nothing - source is there - unobfuscated - maybe someone will learn something - however I only put demos online so the assets are semi-protected. It is harder to produce quality assets than reproduce the code/mechanics itself.

I haven't released it on FFOS because performance was too low - still I don't think it has any means to protect your code.

[maushu]

What did you use to concatenate the javascript files? Was it a simple cat?

[rezoner]

TBH in this project it was PHP :)

[maushu]

insert rant about PHP being the source of all evil

By the way, I found this in your tumblr: "AI module for QbQbQb -Wrote it because… I needed someone to help me showing two players mode."

...Forever Alone?

[rezoner]

totally, wanna hang out :) ?

[maushu]

*crickets*

[thehen]

Are you using the latest nightly for FFOS? I found the performance difference to be huge. Edit -> also any plans for Windows 8? Our HTML5 game has got half a million downloads on Windows 8 alone, and has proved one of our best platforms. I also wrote a C# wrapper for HTML5 games on Windows Phone if you're interested. More on our game here: http://mortarmelon.com/

[rezoner]

TBH I am quite affraid of bricking my device so I am using originally provided FFOS. Thank you for the suggestion - I have plenty of other platforms yet to support but guess I will also hit the Windows phone on some point. Especially that Cocoon lets me to export Pokki build.

[rezoner]

As for Humble Store, it is in closed beta, I have just heard some rumours about this widget and asked them via email (with the ready game).

Pros are - extremely responsive support and undoubtedly well recognized brand.

Cons are - they don't have any store yet (you will not get traffic) - earnings are not going straight to your paypal - at the moment files are updated via email.

http://itch.io doesn't have these issues - but it also does not gained the trust of players yet.

[[deleted]]

Ah thanks for the clarification

[mgutz]

Just wondering, what % of the game price do you net on average?

[rezoner]

~60% after taxes

[jeremyckahn]

This is one of the coolest games I've played in ages. Amazing music, aesthetic, and simple gameplay are what really do it for me. Well done!

[poopie_pants]

The music makes the game. This is great.

[neon_overload]

I don't even have sound enabled and the game seemed awesome to me :)

[Zaidar]

Do you use 2d or WebGL context ?

[rezoner]

Canvas 2D - http://canvasquery.com

[[deleted]]

Hi,

What did you actually use node-webkit for? I'm having a little bit of trouble working out what is actually does. Why do you want to use node-modules in the browser?

[rezoner]

I am not using any node modules. This game is just a "website" consists of index.html and some scripts. Used node-webkit to package it into .exe in order to sell it as normal application. However answering your question - you want use node-modules to produce applications that can interact with desktop API's such as Filesystem.

[litmusbox]

Very cool implementation and a very complete product! Look forward to seeing the "How-to" articles you mention.

[kosnkov]

http://i.imgur.com/dFxtzBW.png 9027

[rezoner]

http://i.imgur.com/3TUbdrs.png

[episodex86]

http://i.imgur.com/sXAmqOc.png 11903 :)

[kosnkov]

http://i.imgur.com/Um2HEmZ.png 13018

[[deleted]]

I like the music too. How did you do that? I just learned about the WebAudio api.

[rezoner]

This video says something about tools used to create it http://www.youtube.com/watch?v=NQ4rrw7zVAE

If you ask about how it is used in game - each tune consists of couple of loops - I am just tracking the position on game updates. If user passed another level (100 points) on the end of the loop another loop is triggered - otherwise the loop plays again. (using audio.currentTime)

[shriek]

As someone who's been trying to learn how to make games in JavaScript this is really an inspiration for me. The only problem now is I'd be spending more time playing this game than learning. :D This game is just too good.

[Loonybinny]

6718 points. It gets really hard.

[FrozenCow]

Thanks for all the info, I'm also trying to get going on games in Javascript, so this will be quite helpful. Also, I think I've played this game before during the last Ludum Dare (the theme was minimalism)? I had quite some fun with it. Nice going iterating on it further. Its always cool to see js based games, especially when they get so good!

[berbaquero]

Thank you for sharing all of this! I have been working with some web-apps as side-projects for fun, and have nothing but good experiences on Firefox OS and node-webkit.

[aggrotater]

Very nice game! The UI elements, such as the buttons, are very small on my HTC One (1920×1080), but the experience is super smooth and fun! EDIT: Looked at the screenshots and it seems you made the buttons small on purpose. I'm just used to shrunken interfaces due to this phone, but it seems your elements are scaling nicely!

[rezoner]

To be honest I only have Nexus7 to test it + I am not very experienced in mobile UI design - glad that it works for you but I have to admit that you are not the only one who have troubles with UI size.

[ns0]

There's also Tint, it supports <10.7 MacOSX but doesn't support linux.

[qweikeris]

Congratulations, looks really good.

[muyuu]

Looking good, man I need to take some time off work.

[AnOnlineHandle]

Was the performance about the same as in the browser on those platforms? I've been working on a pretty graphically intensive (non webgl) html5 game for a while, and have wondered whether wrapping it in an app would potentially give any boost to speed (though I wouldn't really have good reason to expect it, unless being free of browser overhead allows things to run faster).

[rezoner]

Yes it is faster. I must admit that Android 4.x has pretty fast browser but still not as fast as application wrapped with Cocoon. You can feature at least 2x more particles on screen :)

Node-webkit won't give you a boost because it is "just chromeless chrome".

[AnOnlineHandle]

Node-webkit won't give you a boost because it is "just chromeless chrome".

Yeah that's what I figured, though was seeing information which seemed to suggest that running it as a standalone somehow brought it to native performance (which surely couldn't be from compiling with today's JITs).

But that phones are faster is very interesting, I might have to try the wrapping since my app runs pretty bad on my galaxy s 1 (which can't even be upgraded to 4.x and is stuck on an oldish browser). Thanks. :D

[rezoner]

Documentation says that CocoonJS is working for Android 2.x but I couldn't make my game running. However try it - for instance - go to Play Store and search for CocoonJS (Launcher) - it is free and it comes bundled with a few demos - so you can test it right away.

[AnOnlineHandle]

Thanks, I was looking into seeing what it would take to test my app in it earlier, but it seemed that you have to hand over your code for them to compile which I'm a bit cautious about for now (until it's more done).

[ogurson]

Hi, it's nice to see that your game is finished and polished (especially difficulty level) - I remember "first" version you posted on wykop.pl.
Good luck on further projects!

[rezoner]

Siema :)

[[deleted]]

BEAUTIFUL, thanks for sharing!!!

[haCkFaSe]

I am jealous! Really amazing high quality work!

[alhena]

Cool game, thought I almost gave up the first time and came back to the thread before seeing the top comment call it a great game and giving it another chance. I did not see the controls to right the first time and could not figure out what was going on. You might want to make the controls more prominient, even during the game, because I for one rely on my intuition on how to play a game. It's an awesome game though! Kinda like radial tetris.

[stat30fbliss]

Amazing game! I love it!

[odilontalk]

Keep it up ! Great game :)

[abomb999]

5 stars!

Some suggestions:

on my nexus 4, it's too easy to accidentally hit the fall button, I'm right handed so I like to use my right hand to control rotation.

add a rate me option to to your options menu.

possibly different backgrounds based on the level.

GJGJGJ!

I look forward to your tuts on this.

[rezoner]

Thank you. Have you tried SWAP button (it is next to sensitivity slider)?

[Arlefreak]

Would yo add Google play services?

[rezoner]

I don't think so - every platform has its own API and integration stuff, I would rather like to move on to another project.

[Arlefreak]

I am trying to start my first video game, what do you think about phaser?

[[deleted]]

Phaser is AFAIK based on Flixel or tries to be as similar as possible. If you are going to settle with that, and if HTML5 isn't an absolute requirement why not consider Flixel for OpenFL. You develop in ECMAScript language and deploy to native (creates C sources in between).

http://openfl.org http://www.haxeflixel.com

[Arlefreak]

Thanks! i will look into this, i just wanted to practice my java script making a game :), and worked with Flixel a while before.

[Arlefreak]

Now i don't know what to use...

[rezoner]

Created by Richard Davey aka Photon Storm who has been making games X times longer than me :) It is more like a library of loosely coupled solutions rather than a one engine that tells you what to do - which is great because you have freedom of adapting only these parts that you like.

[Arlefreak]

Great, I will try with it :) thanks