Category Archives: HTML5

Stellar Blitz Progress – Accelerators, particle effects, action packed racing!

blitzlogo

The new logo

I have made significant progress this month in the development of Stellar Blitz. If you’re new to the devblog, Stellar Blitz is a mobile multiplayer racing game written in HTML5/JavaScript for the client and Node.js for the server.  As I mentioned in a previous post, the game design was originally a twin stick arena shooter but recently I’ve decided to change the game into an epic space racing game.

lobby

Game lobby

The transition has been going solid so far. Up to four players race for a star in real time online  multiplayer. Racers can go on accelerators to enhance their speed and get ahead of the competition. They can use their hubble powers to shoot down racers ahead and eliminate them from the race!

Programming racing mechanics has been interesting so far. Prior to development I had no clue how to implement a racing game and my first attempts were quite embarrassing. Now I’m starting to get a hang of the technical and design aspects of the racing genre. I’m also applying what I’ve learned in other projects about good use of particle effects. Particle effects really help a lot in giving a game a good feel. In Stellar Blitz I use particle effects for things like projectiles, backgrounds, and explosions. If programmed well they can save a lot of video memory which is critical on mobile devices because you don’t need a bunch of frames added to a sprite sheet.

asteroid

Early gameplay

Since I’m using PIXI.js as my rendering engine I did a little search on Google to see if there’s any visual particle editors already out there. And what do you know, there is! PixiParticles is a pretty simple particle engine but it has fit my needs well. I actually like how light it is. I wasn’t looking for anything over-engineered and the editor works fine and loads/saves JSON files. Integrating it with my in house engine was trivial and it saved me a lot of time. I really wanted to work on the game and not spend a few days on a custom particle editor to do the exact same thing this project does.

Stellar Blitz is having solid progress and I’m starting to think it can go into an open beta before the year ends. Stay tuned to get the latest updates and release dates!

Stellar Alien Hotfix v1.80

This week I published a new Stellar Alien update to all platforms (Google Play, App Store, Amazon). In this update a new tab to the pause screen was added to allow you to configure the game’s controller. I talk about this in detail in my last post. Otherwise It is mostly a hotfix for some bugs and polishing existing features.

WHAT’S NEW

Hotfix v1.7.3c:
-New control settings. Choose between the static or dynamic controller.
-Fix memory leaks
-Squash some bugs
-Nerf the difficulty of Level 3
-Fix crash

 

There have been some comments before about the difficulty of Level 3. I am trying to be cautious whenever I decide to make a level easier. I believe the early levels are very easy to complete but I have years of gaming experience. It’s important, especially for mobile game developers, to be able to step outside of their gaming experience and empathize with casual players. Casual players have not played hundreds of video games so some things in your level design that make sense to you will not make sense to casual players. There’s a weird balance you have to try to make, but it’s difficult when you’re trying to please everybody.

Recently a lot of Stellar Alien updates have been focused on squashing bugs. I’m doing this because I’d like the game to be at a very stable place before I start adding more levels and mechanics. Stay tuned!

PriorJS: Lightweight JavaScript Preloader & Asset Manager

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.

 

Turning a HTML5 Game into a fast, hardware accelerated native mobile app

 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!

Newbie’s thoughts on HTML5 Game Development

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!

But not all hope is lost! The Web Audio API is a more advanced JavaScript API for doing all that crazy audio stuff on the Web than the <audio> tag, and it’s awesome! At a glance, it looks like a complex API, but you simplify it and build your own little audio system.

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.

One problem with the Web Audio API is that it’s newer than the <audio> tag. Which means browser support isn’t as good. Web Audio is supported on Chrome & Safari 6.0. Firefox has planned support for Web Audio but they are seriously taking their sweet time (perhaps they’re focusing on their awesome new OS).

Conclusion

Developing my first game in HTML5/JavaScript was a blast (most of the time). I will definitely consider developing my upcoming games in HTML5 again. I hope more indie game developers, web developers, web designers, or newbies to game development to dive into HTML5 for making their games and have a great time hacking!