Stellar Alien v2: Massive Update – New Animations

Recently I’ve decided to take a break on Stellar Combat and work on not just improving, but also rethinking core gameplay aspects of my first game Stellar Alien. Stellar Alien was published two years ago when I was 14 years old. As a programmer I’ve gained a lot more experience in those two years,  so I decided Stellar Alien needed a facelift.  We’re not just talking about a few minor updates here and there:  I’ve completed rewritten the source code, added brand new animations, new game mechanics, levels, and controls. It’s almost a new game, yet the core mechanics are still there.   But they are now complimented by more intuitive ideas.

sheet

Starbli’s animation frames

 

The first update I did for this new version of Stellar Alien was making new animations for Starbli. Animations, even if they’re really crappy tend to help any game a ton. Stellar Alien’s initial release didn’t include any animations for Starbli (or anything really). He was just a static image through the entire gameplay. To begin clearing the stench of an amateur-feeling in your game, taking the time to include sprite animations comes a long way.

How do you go about making sprite animations? Well, there’s so many methods I doubt I’d be able to list them all. Everyone has their own workflow for how they get their sprite animations done. Some use Adobe Flash, others will hand draw every single animation frame.

For me, I already had experience working with Adobe After Effects for video composting. After Effects has some fairly decent keyframing abilities while allowing me to import my sprite’s PSDs and animate them on the fly. Once I am done animating, I could just export composition to a PNG sequence and play the sprite sheet in JavaScript. It’s an efficient workflow for me. I suppose I could do the same thing in Flash, but I find After Effects surprisingly more intuitive than Flash for keyframe animations, even though AE wasn’t initially intended for sprite animations.

So yeah, After Effects for sprite animations is pretty sweet, especially if you’re already comfortable with the program. There’s more updates in this new version of Stellar Alien that I will talk about more in detail in a few weeks, stay tuned!

The Road Towards the Closed Beta – Stellar Combat Updates

It’s been a year since I’ve wrote the first line of code for Stellar Combat. The multiplayer mobile game has been in production since December 2013. It hasn’t exceeded the time it took me to develop my first game Stellar Alien, and Stellar Combat is already better in every way in my opinion. Multiplayer development is no easy cake though. I laugh when I think about the estimated time I thought I would have Stellar Combat finished.  I had yet to realize the amount of problems that can and will arise once you introduce networking into your code base. Then add the fact I’m still teenager with schoolwork to do, and other activities. Four months? Try squaring that number. It’s not easy finding the time to work on everything.

But I’m managing pretty well I think, solving problems as they come along and adding more complexity to the networking code only if absolutely necessary. It seems to be working out alright so far.

Road map

The next steps for Stellar Combat is to bring the battle to you, the future player. Starting with a small, closed beta that will require players like you to play the game and report bugs when you come across them.

Before we can jump into epic battles, I have to implement these features

  • Add particle effects, for visual effects like an alien shooting or a special attack
  • Implement three main characters you can choose from (Starbli, Roxas, Rosso).
  • Rethink game controls for fast paced action on mobile devices
  • Design the skill and combat system.

These four big features are a lot easier said than done. The next few months will be all about finishing all these things, and polishing them so they’re ready for the epic closed beta that will come for Stellar Combat!

During that time I’ll be blogging about the implementation of these features as well as announcing the date for when you can sign up for the Closed Beta! Stay tuned.

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!