Stellar Combat Updates: Roxas wants a makeover

While I’ve been trying to improve Stellar Combat’s net code, it’s nice to take a break from all of the game’s logic and efficiency, and instead play around with its artstyle for a couple of days.
It’s been a while since I did my concept art for Roxas, a few days ago I updated her appearance.
newroxas
With this update to Roxas’s look, you may notice I’ve shifted her antennas a little more to left, and gave them more of an arc towards the right. I liked this change, for one it’s different from Starbli and Rosso’s design, but not too far away from them. I want the aliens to be diverse in their apperance, but they should look like they belong in the same game.

Hopefully you noticed a bigger change here, which is in how I colored Roxas. I painted her design with my drawing tablet with different blends of purple and hot pink. I had fun just using different brushes in Photoshop. I never really liked how cartoony and solid the alien’s  coloring/shading were.  I think this rough look of the colors here gives an interesting, fitting look for Roxas.

Blazing, kind of fast, Particles – Stellar Combat Updates

Over the week  I hacked on some code for a 2D particle engine + effects designer. My upcoming game Stellar Combat needed some cool particle effects I thought, but I wanted an easy way for me to create new effects because they’re going to be important for the game to look good visually in my opinion.

 

The editor uses dat.GUI for changing the emitter's settings.

The editor uses dat.GUI for changing the emitter’s settings.

There are some particle engines for JavaScript already, but none I’ve found had a visual effects editor and more importantly I wanted an engine that can create a particle system just from parsing a JSON string and loading a particle texture file given. This should cut on resources the user needs to download unlike if I were to use export particles to a spritesheet. Plus, particles just feel better and natural when they’re being processed in real time. This is at a cost though, as if I run too many particles it will impact the game’s performance.

Right now the particle engine I worked on only has a Canvas renderer and it allows you to color the particle’s texture which is actually an expensive task to do  (profiles I ran show that drawImage() is the blame for that). Stellar Combat is starting to use pixi.js for rendering now so the particle engine will probably have a Pixi renderer as well, which I hope will improve the engine’s performance. I looked at the CanvasRenderer in pixi.js though, they seem to use the same method I do for tinting images so it may be just as slow.

You might be thinking “Why not use WebGL for rendering the particles?”. Well, I’d like to use WebGL but it seems like Pixi.js’s WebGL Renderer actually performs worse than its Canvas Renderer on mobile/CocoonJS. I thought it was strange but apparently older phones have poor graphics cards to be able to do WebGL effectively or something. And I test Stellar Combat on an older Samsung, so WebGL is a no-go for now.

Conclusion

The particle engine is pretty much finished, but the editor needs work as it’s missing some values you can change and it doesn’t export JSON yet. Won’t be the main focus next week but instead something on the side if I get bored working on the rest of Stellar Combat.

 

 

 

Stellar Combat Updates – Move to Pixi.js: Sprite Animations!

Greetings from Planet Umbra! In my previous blog post I spoke about big changes for Stellar Combat, including a switch of rendering engines in the middle of development. The task of switching the rendering engine to Pixi.js is still ongoing, and it’s turning out to be almost a complete rewrite of the client. Rewriting working code is bad, especially when the game is still in development. I did not take on this big task of moving the rendering engine to Pixi.js for no reason, my previous rendering engine I made myself was severely lacking in performance. I’m happy to say that the move/rewrite is almost done and I’m actually seeing the performance increase that I am looking for.

I suppose one reason why moving to Pixi.js is taking so long is because I’m actually still adding updates and polish to the game wherever I can, as I change the rendering code. Let’s review the relevant updates:

 

Character sprite animation and packaging

I work on Stellar Combat alone, definitely not by choice. One of the times when working alone isn’t so bad is when you’re having a hard time programming you can take a break and move onto another part of development like game art or music. I decided to work on the art for a bit.

One thing I learned from Stellar Alien is that having one static image to display for your character’s sprite simply isn’t going to be on par with games with high production values and experienced animators that can make lively sprite animations. So I thought character idle animations would be a good thing to work on for the game. The most obvious idle animation is: make them blink! Sprites blinking actually really helps in bringing your character to life. It’s a minor thing, but trust me, it really works well.

sprites

The first three frames in the sprite sheet above will show you that making a blinking animation is quite easy. I simply made 3 frames of Rosso closing his eyes. With the help of Pixi.js’s MovieClip object and some programming magic, I can play just three frames of Rosso closing his eyes, and then play it backwards in the code so his eyes will reopen.

I’ve also added frames for Rosso to look in the direction that he’s being moved in, because before he just always stared straight at the camera. How the heck is he surviving an epic battle between powerful aliens when he’s not even looking at what he’s doing?! Again, a small change but overall really helped the game’s experience in my opinion.

Conclusion

Next up after I finally close this Pixi.js branch, it’s off to implementing characters such as Starbli and Roxas into the game. After these two tasks are completed, it’s just hardcore network code testing from there.

The time is getting closer and closer for you to be signing up for an epic closed alpha test! Stay tuned for more updates.

 

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:

Old:

Screenshot_2014-03-09-18-39-11

New:

Screenshot_2014-06-25-17-30-00[1]

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

starblimakeover

 

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:
nebula

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.

Before:

Screenshot_2013-12-24-20-11-24

After:

Screenshot_2014-03-09-18-39-11

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:

Old:
Screenshot_2014-01-10-12-17-31
New:
Screenshot_2014-03-21-10-19-54
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.

roxasblog

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:

comparerosso

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:

rossobullet

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:

starblimakeover

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!