Let’s try: Pixi.js – Stellar Combat Updates

Alright so there has been a lot of changes to Stellar Combat’s user interface, along with lots of code refactoring. But I’m most excited about the GUI changes. The game is starting to feel really slick and responsive as I’ve also added a lot of tweens/animations to the interface.

Compare the old interface with the new:





I think it looks better, right? Leave a comment and let me know.

But wait, the game was kind of running poorly

I wasn’t satisfied with the game’s performance after many attempts trying to get the FPS to not drop down significantly for long periods of time. The bottleneck seemed to be my rendering code. I use the canvas API and tried to optimize the rendering code but the FPS still gets slaughtered down quite a bit after a few matches. There were a couple of other optimizations I could’ve done but I’ve been taken away by the crazy amount of work this game needs other than speedy rendering code. (I’m one person, and I still have a life outside of making games!)

Atlas, a beautiful Pixi comes to the rescue!

I’ve decided to try out pixi.js, a 2D WebGL renderer. The API was simple enough and I really like that the maintainer of the project tries to keep pixi.js strictly a rendering engine. I feel like that keeps the project focused on doing one thing great and that’s rendering. So far I’m liking pixi.js a lot but I’m not finished with adding pixi.js to all of the game’s scenes so I’m not sure if I will get the performance improvement I’m looking for. I’ll do another post later this week to let you know. Either way, it’s nice to have the rendering code abstracted away from me so I can focus on perfecting the networking code!

Starbli’s origins



Starbli is a brave, child Gazian born during a great war in outer space between his home planet, Umbra and the planet Perriculum. While Starbli may be young, there’s no doubt in Umbra that he is one of the best star collectors. Starbli loves to collect stars and will risk his life getting a hand on the most gassiest stars in the nebula. Starbli collects stars not only because it’s fun and he likes shiny things, he’s told that it’s for a good cause. Starbli’s father, who’s a general in the Umbra Stellar Army, uses the ionized gasses in the stars Starbli collects to create weapons in the battle between Umbra and Perriculum.

Starbli is too young to fight in the war, but he makes the most of his adventures in collecting his stars. He won’t shy away from a fight, and will sneak in a few shots if he ever sees a Perriculum heading towards Umbra.


In Stellar Combat, Starbli is a fast shooting character with average health and above average speed. His attack inflicts moderate damage. Each character is in Stellar Combat is meant to fit a certain playing style, so choose one that fits yours the best! (or you can just pick one that looks the coolest).

Making space dazzle – Stellar Combat Updates

Spring break came just in time, because my brain seriously needed a break from school. But I will admit: after a few weekdays with the absence of school work, you start getting bored pretty fast. Luckily, I had Stellar Combat to work on!

So what’s new?

Added space nebula to the background

This doesn’t affect gameplay, but I’ve been thinking a lot about how I can make the game more visually appealing. It’s hard, because it’s in space and while some parts of space are really beautiful, space is mostly just…space!

But I thought… hey, there are billions of stars in space, so why not add some stars? I added stars already, they animate and twinkle, but it still felt pretty boring to me. More stars weren’t going to cut it.

So I looked up some art work involving space and realized a lot of them take the time to draw space nebula, which if I understand correctly is just a bunch of ionized gasses in the form of a cloud, floating in space. It looked pretty cool and I was able to make it in Photoshop easily.

Here is the graphic that is used in the game:

And here it is, actually in the game’s background. Compare how the background looks before the nebula, and after. I think you’ll notice an improvement.





And it’s just one single image, which is good. I just rotate the image around and change the opacity of that image in the code and draw maybe ten at a time. It also animates and floats around, once the image has gone off the screen its position gets reset so it’s visible again.

Changed the Room Lobby GUI:

The old room lobby was a little too dark for me and kinda of bland. I didn’t like it, so I change it to be a little bit brighter and added a black rectangle with some opacity as the divider between players. I like this look a lot better.

That’s all. The next steps now are trying to add Starbli and Roxas as playable characters in the game (only Rosso is playable right now) before the game gets tested on the internet (it’s being tested locally right now).

But before I do that, there seems to be a memory leak that I’m trying to fix. Need to squash that first!

What do you think of the changes? Do you think some of the older pictures looked better or my changes were an improvement? Leave a comment!

Roxas joins the battle

In Stellar Combat you have the choice of different playable characters with their own unique attacks and play style. For example, Rosso has slow attacks. He makes up for it by having some of the most powerful attacks in the game.

I’d like to have as many characters as possible in Stellar Combat but to start the game off, I’ll begin with three characters. Starbli, Rosso, and a new addition to the gang, Roxas.


Roxas is an intelligent alien, very handy with the latest technology  from several galaxies. Her preferred weapon is a deadly laser, able to knock out a damaged alien in one hit even from long ranges. If Starbli and Rosso thought fighting each other was hard, they have another thing coming once Roxas joins the game.

Overall I am happy with her design and can’t wait to start programming her into the game. What do you think? Leave a reply.

Rosso’s new look

Last week I gave Starbli a little touch-up with his coloring and shading, nothing major. This week I decided I would not only re-do Rosso’s coloring but his entire character design. I’ll be honest, Rosso didn’t look too good in Stellar Alien. But now, he’s quite a handsome fella:


The first thing you’ll probably notice is that he has way better shading now! He’s not flat colored anymore. He has better eyes, and even some spiked hair. The hair is my favorite part about Rosso’s new design. You’ll also notice is that his forearms are some shade of blue/green now. This was actually an accident at first as I was trying to give him shading but I looked at it for a second and said “hey, that looks pretty decent”. I also don’t want all the aliens to be one single color, so I went with the blue/green forearms.

I am happy with the improvements I made to Rosso’s design, he looks like a great character to play as in Stellar Combat. What do you think of his redesign? Leave a reply!

Stellar Combat’s updates over the week

I did lots of bug squashing and artwork this week. The whole week was supposed to be completely focused on Stellar Combat’s art, such as (re)designing characters. I wanted a small break from programming, as I’ve been on a bit of a programming frenzy lately. It is exciting to work on Stellar Combat’s code, much more than Stellar Alien. I think the reasons for that is because the networking code is fun to work on, Stellar Combat has a better game engine that allows me to develop faster (entities have reusable logic, scene management), and overall I’m much more excited about the project than I was for Stellar Alien.

So…what’s new?

Game Art

Rosso’s blowing up the galaxy with a new attack:


Above is the sprite sheet animation of Rosso’s new attack! His attack was just a tiny little red circle before but now he’s ready to own Starbli with a powerful star blast.

Rosso also is getting a makeover, just like Starbli. This more of a redesign of the whole character. He needs more touching up though, check for another post in a few days.

Game Programming:

Added game music using howler.js:

I don’t like the HTML5 Audio tag. It is obvious that the audio tag just wasn’t meant for games. The up and coming Web Audio API is ready to deliver a more complex and powerful audio API for the web. But, the browser support for Web Audio is very poor. It has been in Chrome stable for quite a while now but only just introduced in Firefox a few versions ago.

Stellar Combat uses CocoonJS to compile its JavaScript code to a native application on Android and iOS. While CocoonJS supports many HTML5 features, it doesn’t however support Web Audio API. So I must use the Audio tag.

Not bare bones though. I used an open source audio library called howler.js. Howler.js will use the Web Audio API if it’s supported in the environment, otherwise it will fall back to HTML5 Audio. That’s perfect for me, since I am considering having Stellar Combat run in the browser as well, so using Web Audio on the desktop would be great. It also has nice audio features built-in like fade in/out so I wouldn’t have to worry about implementing those things myself (I don’t find audio code interesting).

But howler.js wouldn’t work in CocoonJS out of the box. The sound didn’t seem to load and would freeze the entire game after a few seconds. The problem was really a head scratcher. I told the friendly folks over at Ludei, the company behind CocoonJS about my audio issue and they responded insanely fast (like 45 minutes…on a Sunday!!) and told me to send them a very simple example that just plays a .ogg sound and they’ll take a look at the problem.

I was going to do just that, but the example worked fine for me. The music played. So that was when I knew it was a problem specific to howler.js. After a lot of digging in the howler.js source code, I found that before they played a sound, they would check the Audio Object’s readyState property, and if the audio is not ready it would try to load it again.

The problem is that CocoonJS’s audio object doesn’t have a readyState property. So when howler.js checked if Audio.readyState === 4, the property was undefined. This made howler.js go crazy and load the audio again…and again…and again because it thought the audio never loaded.

I told a member of Ludei that their audio object is missing the readyState property and they responded telling me “Thanks!” and that it should be included in the next release. The issue was temporarily solved by manually setting an Audio instance’s readyState property to 4 in howler.js. Now the music plays!

Network Connectivity issues:

Lately there’s been a lot of inconsistent connection issues that have been having me worried about the stability of WebSockets on mobile. Luckily, the problem isn’t with anything except my networking code. It seems like my Ping/Pong timers are a little inaccurate. In Stellar Combat, the client sends a “ping” command to the server every 15 seconds.

If the client has yet to hear from the server after 15 seconds, it will assume that it has lost connection with the server and the socket hasn’t closed yet or you’re lagging way too much to be playing, in which case it will close the WebSocket connection.

This sounds pretty simple, right? Turns out I didn’t implement this correctly and it seems to be the cause of the random disconnecting. More on this issue later.

Overall, a good week of development. Leave a reply if you have a question about the game, or anything else.

Starbli’s makeover

A couple of years ago while Stellar Alien was in the early stages of development, I decided that the main character should be  a cute, chubby alien trying to save the stars all by himself, and he just found it all as a fun little adventure. For some reason, I thought I could actually draw (I can’t) so I bought a drawing tablet and started sketching Starbli in Photoshop.

I thought Starbli looked okay considering I can’t draw very well. I did think I was able to capture his “ugly, yet cute” apperance and his chubbiness.

His flat coloring really bother me though, I went a little too basic with his colors and I can do better(?). Since Starbli is a playable character in Stellar Combat, the 2D Multiplayer Mobile Shooter I’m currently working on, I thought he could use a little make-over before he starts his epic space battles with his friends:


Comparing Starbli from Stellar Alien to Stellar Combat, you’ll notice the new Starbli (Stellar Combat) has better shading and colors. I like his new colors and I think it gives him more dimension. It’s totally subject to change though, but I like it so far.

If you like the older Starbli better, leave a reply stating why, that’ll be extremely helpful!


The Next Game – 2D Multiplayer Space Shooter in Development


After nearly a year fiddling with game concepts and JavaScript, I finally decided that my next game will be a real-time multi-player 2D shooting game programmed in JavaScript and NodeJS named “Stellar Combat”.

If I had to compare Stellar Combat (so far) to another game it’s sort of like PewPew with its controls and being a mobile shooter.  However, Stellar Combat is in space, with weird looking aliens, and best of all, multiplayer!

Stellar Combat, a very ambitious project for me (especially on mobile) is something that I’ve been working on in my free time since the last quarter of 2013. As you can tell from the name, it is loosely related to my first game, Stellar Alien. The only similarities are that the game is set in the same fictional universe and characters like Starbli and Rosso will be playable aliens in the game, along with the introduction of new characters. Besides that, the game is pretty much entirely different gameplay wise.

In Stellar Combat’s current state, you can give yourself a nickname and quickly join a room with up to four players (should be more in the future), have an epic space battle with your friends and shoot your way to victory!

I have plans for multiple game modes. Right now, there’s only deathmatch but there will be team deathmatch, and a gamemode similar to Capture the Flag. And I have some other fun game modes in mind I’ll be working on.

There will also be several playable aliens you can choose from.  Each alien will have its own abilities and attacks so you can choose one that fits your playing style.

Development on Stellar Combat so far has been suspiciously fun. There aren’t a lot of multi-player games on mobile (and for good reason), let alone written completely in JavaScript.   I’m sure all the fun will go away as soon as I’m dealing with latency issues on 3G networks or perhaps my networking code will prevail.

I will be trying to blog more often about new development updates on the game as it gears up for a private alpha test in the next couple of months. Stay tuned for more information on that and on how you can sign up and be one of the first players and help me squash bugs in this exciting new multi-player game for mobile devices!

Stellar Alien Android Update v1.0.2

Stellar Alien v1.0.2 patches several bugs that have been crawling around for a while now. But they’re squashed! There’s also a new share button after you complete your level to share your scores. Using CocoonJS’s socal extenstion, the browser-based code I used for the Facebook API didn’t need modification while migrating to the mobile application. Good stuff.

Update summary:

Version 1.0.2:
-Now brag to your friends on Facebook about beating your high score! You can share your score on Facebook with the new Facebook intergration.
-Fixed bug causing game credits not to stay on the screen.
-There should be a noticeable performance increase.
-Several bug fixes


In other news, I’ve been hacking on my multiplayer game using WebSockets the past few days. Hopefully after I squash these bugs I can give a preview and share some of the networking issues I’ve faced so far.

Lies Your JavaScript Haters Told You

After 18 years, It’s a bit hard to believe that JavaScript expanded so much. From what seemed like a little toy language that appeared in 1995 that could add interactivity to Netscape’s web browser, to the concept of “AJAX” that some say revived the web in 2005, to the HTML5 specfication providing powerful APIs for JavaScript and fast JavaScript implementations popping up since 2009…

JavaScript has shaped up to be quite a decent tool.

“Or maybe JavaScript is just to get something done fast and never look at it again, because JavaScript is just crap.”

That quote just grinds my gears, and I’m the one who wrote it! But it’s commonly said by someone who usually has some gross misconceptions about the JavaScript programming language, even after many years of widespread use, with no sign of the popularity ever dying down. And note that I’m not trying to say that JavaScript is perfect, every language has its faults and JavaScript is by far no exception. I could get some buddies and we could write a book on how much we hate writing and reading PHP.

But if you’re gonna write JavaScript, let’s make sure you don’t have some of the biggest misconceptions about the language in your head, so you can confidently write software.

“Dude, JavaScript is just Java’s little brother.”

Oh yeah, you saw this one coming. Some people reading this might be thinking “How can people still think that?”, but it turns out an overwhelming amount of people do think JavaScript is a smaller, simpler version of Java. Especially newcomers. But it’s simply not true.

JavaScript is not Java’s little brother, it is not Java’s sister, it is not Java’s Cousin, it is not Java’s second cousin, it is not related to Java in anyway besides the unfortunate fact it has “Java” in its name. and I must clear up this insane misconception before anything else, because many of the misconceptions I’m about to correct are directly related to this one.

And so if JavaScript has hardly any relation to Java besides them both inheriting C’s syntax, why does it have Java in its name then?

The answer is that it was probably a marketing ploy. At the time when JavaScript was designed over at NetScape by Brendan Eich, the fellas at NetScape asked Eich to design another programming language for web scripting to rival the Java Programming Language, as Java Applets were taking the web by storm at that time. (which you can see today, JavaScript actually won the resulting battle of the languages of the web)

Eich decided he would want to make a functional programming language, with semantics similar to Scheme and with object oriented programming inspired by Self Programming Language. But Netscape also requested Eich to make it “look like Java” so other programmers can easily adapt to it.

While Eich did successfully make JavaScript look like Java, he also decided he wanted to be sneaky and keep all the juicy traits derived from Scheme and Self, which in my personal opinion, are some of the best parts of JavaScript.

As a result, JavaScript is now a dynamically typed, prototype-based object oriented,  functional programming language with syntax that looks like C…Basically, JavaScript is a little confused and you must understand this to confidently write software in it.

May I also add that technically, we should be referring to JavaScript as ECMAScript, the name it was given since the language became an ECMA Standard. But the name hasn’t really caught on much, mainly because I think everyone else thinks it’s a lame name I guess. JavaScript is more known to the masses. And if it helps, consider JavaScript, JScript, and ActionScript as “implementations” of the ECMAScript standard.

“Javascript performance is too slow for games.”

So when I tell someone on the Internet about finishing my first game Stellar Alien in JavaScript, I can see their faces of horror and disgust through the text they respond with, often reading “JavaScript? That’s for scripting web pages, it’s far too slow for any real games”, or something like that.

The performance of JavaScript in general is determined by how fast the JavaScript engine your user is running is, and the past few years the performance of these JavaScript engines have increased greatly. Consider Google’s V8 engine, which is used in Chromium and Node.JS. V8 compiles your JavaScript code into optimized native machine code, unlike JavaScript engines in the past that simply interpreted JS code. V8 also tries to optimize the compiled machine code at runtime as well, dynamically. As a result, JS is a lot more faster these days, with speeds close to Java 7 according to some benchmarks.

So you may be thinking, “Great, V8 is fast. But what about IE, Firefox, and Safari, which don’t use V8?”

Well it turns out just about… all of them use a similar technique V8 uses. In fact, SpiderMonkey, the JavaScript engine Firefox uses is often shown to beat V8 in benchmarks as Spidermonkey uses a JIT Compiler to compile your JavaScript into native machine code. Safari’s Nitro JavaScript engine also compiles your JavaScript into native machine code, and so does Microsoft’s Chakra JavaScript engine used in IE since version 9.

Okay, I think I made it pretty clear that while JavaScript is delivered in plain text, it still gets JIT compiled by JavaScript engines into native machine code. But how well does JavaScript handle graphics? I mean, the performance can’t be that good since it’s running in the browser, right?

I’d probably agree with that statement in 2009, when most browsers used the Software Rasterizer for HTML5 canvas. Using the CPU/Software for the graphic calls will definitely be slow. If JavaScript is going to have any hopes of being a choice for game development it needs hardware acceleration. And it does today, since a few years now.

HTML5 canvas is hardware accelerated by modern browsers now, notably Chromium/Chrome, Safari, Opera, IE9, and Firefox. So the performance increased drastically now that it runs on the system’s GPU. Microsoft did a great job with their hardware accelerated canvas in IE9, because under the hood it uses DirectX for rendering. I’ve even noticed my game running faster in IE9 than Chrome. Also, don’t forget HTML5 canvas is a relatively low-level drawing API. It leaves a lot of stuff for you to do on your own that will drastically increase performance. See this article about implementing dirty rectangles in your game, and also about using multiple canvases (which helps A LOT and leads to the concept of having “layers”).

Let’s not forget about WebGL, the JavaScript implementation of OpenGL. WebGL has been performing pretty well so far, and will be the lowest level you can get as far as graphic APIs go in JavaScript. We also should remember WebGL is actually a 2D drawing API (that’s also capable of doing 3D of course with a bit of Linear Algebra) so consider it as a second choice for when deciding on a 2D rendering solution for your HTML5/JavaScript game!

“JavaScript has broken variable scoping, or none at all!”

So what’s the deal with JavaScript’s scoping? If you take this snippet for example:

Well that was weird. The next question is “Does JavaScript even have variable scoping?”. I’m not going to lie, the code snippet above suggests “no”, JavaScript does not having variable scoping as you would see it in Java or C, which have something commonly known as “block scope”. But as we established a few misconceptions ago, JavaScript isn’t anything like C or Java and just because you know those programming languages doesn’t necessarily man you know much about JavaScript.

JavaScript doesn’t have block scope which is commonly seen in programming languages that have C-like syntax. JavaScript has something called “function scope” rather than block scope.

To fully understand, let’s see this code snippet here:

Does it make a bit more sense now? There is no block scope in JavaScript, but there is function scope. This simply means that variables declared in functions using the “var” statement can only be accessed within that function. Variables declared in blocks of code like an if statement are added to the global namespace. That’s why we were able to log “string” when it was declared within the if statement block.

Knowing this about JavaScript’s variable scoping, you can create private data that cannot be modified by another’s code by encapsulating the data in a function, and many other interesting code patterns. See the popular Module Pattern.

Final Thought

I use JavaScript because it’s a very expressive programming language and I like its dynamic nature. It feels very loose and free and It’s the language I know best.

Like any other programming language, JavaScript has flaws and its initial poisition as “that little language that thinks it can beat Java in the fight for interactive web” leaves many programmers skeptical that JavaScript can be used today to write good software. And it’s different from what many are used to programming in, so naturally people will be hesitiant to write software in it. What I think is the bigger issue is how JavaScript basically lies to the programmer. The language dressed in a C-style syntax, but as you write programs in the language and undress it, you’ll find semantics derived from Scheme and Self.