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!