So when I was developing my first game Stellar Alien, I realized I’ll need to preload images and sound before they can be used. There’s some libraries already that do this but a lot seem pretty overkill to me, I just want to preload my assets, and maybe be able to manage them.

Maybe some others are feeling the same way, so I took the asset manager I wrote for Stellar Alien, polished it up a bit, gave it a catchy name, and released it under MIT License.

Check out PriorJS on GitHub: do whatever the heck you want with it.

 So I finally released my first game, Stellar Alien, in the Chrome Web Store. Development took a bit longer than I expected, but I got it done. When I was developing Stellar Alien I knew it had to work well on Mobile Devices. One of the strong points of developing in HTML5 is that you can write once, and be cross-platform with no porting at all. Stellar Alien is finally available in the Google Play store, but it was difficult to find the best way to turn it into a native application.

This is what I found out about making a HTML5 Game into a native mobile application:

Users are more used to installing apps from the marketplace

Not sure about you, but when somebody tells me they have a new app for Android, I’d assume it’s on Google Play. I wouldn’t launch my mobile browser and ask the person “Okay, what is the link to it?”

Stellar Alien was just a web app initially, but I knew I had to turn it into a native mobile application somehow.

Webview is horrible and it is too slow

When I researched ways I could turn my HTML5 game into a native application, PhoneGap popped up. PhoneGap looked okay to use, so I tried it out with a small & quick script. I ran a simple test with a <canvas> fading in using jQuery.  WOW, was that slow. It also took a bit of time for that small little script to load up. I loaded up my game on it, and the FPS was too low, making it unplayable.

I was curious why it was so slow. I found out it’s not PhoneGap’s fault, but it is the WebView. Great, so now what was I going to use? It seemed like similar software to PhoneGap also used a WebView.

Finally, I find Ludei’s CocoonJS

A few months ago while I was living in Seattle, WA, I visited a JavaScript Game Development meet up, which felt a little awkward being the only teen there, but everybody was friendly. Somebody from Ludei came and gave a talk on their new technology, CocoonJS. CocoonJS takes your canvas based HTML5 Games and turns them into a blazing fast, hardware accelerated native application. My first impression of it was that it was “just PhoneGap, specifically for HTML5 Games”. The demos that the speaker showcased at the meet up proved me wrong.  The speed was great, with FPS averaging around 250 on an Android Tablet. He later explained that CocoonJS binds canvas calls to OpenGL ES, making it hardware accelerated.

The fact that there isn’t a WebView & that my canvas is hardware accelerated, really made me excited about CocoonJS.  Another thing is there’s no SDK. You do not have to do any code changes or use some amazing, magical SDK. It’s awesome.

Let’s make this clear, CocoonJS is not a browser. How Ludei describes it is that it is a “JavaScript Virtual Machine”. For your game to be hardware accelerated using OpenGL ES with no code changes, your game needs to be Canvas Based. If it’s DOM-based, you’re out of luck. However, CocoonJS does also have a WebView extension that is easy to use & has some great features. I would take a look at that if your game really, really needs to be DOM-based. Note that their WebView support is still pretty new and might be buggy (my experience).

If your game is canvas based, great! You’ll have a hardware accelerated, native HTML5 game in no-time. CocoonJS also supports a lot of popular game engines.  These are the engines they currently have listed at the time of this writing:

• CAAT
• ImpactJS
• Construct2
• Cocos2DX HTML5
• Isogenic

If the engine you use for your game isn’t listed, it may work if you try it out (but be sure everything is being rendered with the canvas API, no DOM!)

My experience using CocoonJS was insanely simple and easy. I would definitely recommend it if you need your canvas based game to become a native application, quick and easy(and fast!)

Here’s how simple it was:

• Install the CocoonJS Launcher App to test your game to make sure it works well.
• Launch your application (just give the launcher a link to a zip file containing the code)
• Play through it, make sure everything is pretty & smooth.
• Works great? Now you can use CocoonJS’s Cloud Compiler.  Their compiler will compile your game into the selected marketplaces (currently iOS, Android).
• Get the APK, sign it like usual, & upload that baby to Google Play and/or Apple AppStore!

If you run into any problems, Ludei’s support is great and should get back to you in less than a couple of business days. The updates usually come around monthly(lately) and they fix a lot of bugs.

Conclusion

So that’s how I finally got Stellar Alien on Google Play. The link is here, perhaps it would be fun to play while you’re checking out CocoonJS, and that link is here

Have fun!

There is a lot of mixed opinions about HTML5 & Game Development. You ask one person, they will say HTML5 is not ready, or it’s too slow for real games. Another will say JavaScript isn’t a real programming language and it’s a horrible mess. Some will say HTML5 is ready to go and anyone can get started. So what’s going on? As a 14 year old who loves to program I finally decided to try out game development. HTML5/JavaScript were the technologies I chose to use for developing my first game, “Stellar Alien”. I was leaning more towards Java or Python, but I’ve always preferred the Web Platform. The Web is the most open platform of all and it’s a very large audience you can reach out to (after all, it’s the world-wide web!).

Naturally, when I heard about HTML5 and its capabilities, I decided to play around with it to see what it was about, although I was a bit skeptical. HTML is just a markup language after all, how are people making games that are comparable to the ones that were developed in “Adobe Flash” with it? I started diving in and found that the game logic is actually written in JavaScript and HTML5 provides a new <canvas> API that allows JavaScript to draw on a 2D Surface.

After a few months, I completed my first game in HTML5/JavaScript, “Stellar Alien”. It was a very interesting project and I learned a lot about game development, developing a large project & programming in general. I’ve decided to post my thoughts & opinions on HTML5 Game Development because I think it may interest some Web Developers who’ve been meaning to experiment with HTML5, but are skeptical due to all of the mixed feedback about developing games in HTML5.

HTML5 is ready

But it’s not perfect. Neither are your other popular browser-based games alternatives such as Flash, Unity3D, or Java(via applet). There are some quirks and you find yourself sometimes coming up with a little “hack” to get something to work properly, and those aren’t fun. HTML5 Game Engines can really save you the pain of getting started in HTML5 Game Development, although I wrote Stellar Alien without one and it was not too bad.

Although I do think it’s ready, I don’t think EVERYTHING should be in HTML5/JavaScript now. It depends on your game and your goal. Although I do think you should always try to prefer HTML5. It’s a very open platform and you don’t have to work and pay for Flash’s IDE, or work in Unity3D. Just fire up your favorite text editor and get going.

Browser Support is decent

It’s not 2009 anymore! I see a lot of reasons why people do not fully dive into HTML5 including old-news about it having bad browser support or it will only work with a very minimal amount of browsers. It is 2013 at the time of this writing and the support for the important HTML5 Technologies most 2D games need (<canvas> tag, <audio> tag, localStorage) is great. <canvas> is supported on all major browsers that you should care about, including Firefox, Chrome, Opera, IE9, & Safari. It is the same for the new <audio> tag. Although the HTML5 Audio has some bad issues I’ll discuss in a minute.

Canvas is fast(enough)

And if it’s not, you can make optimizations, like any other software you would write.
You can implement “dirty rectangles” so your game will only clear pixels where it’s necessary and not the whole canvas every frame(although some game engines take care of this).  If you have a large background image like my game has, you should draw that background image on another canvas, that isn’t in a loop, and then draw your foreground canvas on top of the background. This is so that your large image is only drawn once, and not every frame.

Game engines, game engines!

Not everyone wants to start coding a game from scratch like I did. I understand that. You can get started much quicker by using a game engine. There are many game engines out there for HTML5 that really make developing in it a lot more pleasant. ImpactJS is a very popular game engine, although it’s $99 dollars. If you dislike commercial game engines like me, and want something free & open source, then check out CraftyJS, it’s one of the favorite ones I’ve played around with. Also look at this table on Github that lists tons of open source game engines to use:https://github.com/bebraw/jswiki/wiki/Game-Engines

HTML5 Audio sucks

The HTML5 <audio> tag wasn’t fun to develop in. It is buggy, it is bad, it just isn’t good. And sound is an important part of a game. I’ve noticed some sound would stutter, like there was some latency issues, some wouldn’t even play at all!

So should you use Web Audio or the <audio> tag? Well, it depends on your game really. All my game had to do was play a few sounds, some background music, and it was okay, so I ended up using an open source audio library called YAAK, which uses <audio> tags, but saves me some of the pain of working with them. Other games may need more complex audio programming, and some even have gameplay that depend on sound! That is where Web Audio should definitely be the one your game should be using.