Updates – Stellar Alien/Combat – Licensing Expo 2015

If you haven’t heard the stellar news, Stellar Alien was recently updated on Google Play and the Amazon App Store. This was a much needed update as there are tons of new and juicy improvements to the overall game. Finally, iOS devices should (hopefully) be receiving this same update in the next week as it is awaiting review from Apple to be updated on the App Store.

A tale of debugging an annoying launch crash.

It took sometime to get the game ready for iOS because it was crashing on launch and it was only crashing on iOS devices – not Android. So this was a frustrating problem to debug but, luckily I reviewed the crash logs and the cause of the crash was because I messed something up in Ludei’s Cloud Compiler. The app was compiled to include Facebook Integration and while I had provided a Facebook App ID for Android, I did not do the same for iOS. Ouch! And that caused me weeks of misery trying to determine what was causing the crash. I don’t think the application should crash due to the absence of an App ID, so I hope Ludei finds a better way to indicate such an error rather than the application crashing. CocoonJS continues to get better with each version and Ludei’s customer support is fantastic. I suspect inconveniences like this will cease as the platform continues to mature.

Stellar Combat still exists

In other news, I am still hacking on Stellar Combat but it is indeed a difficult beast to tame. Network programming is difficult.  I’m not sure how well I developed the client code. I’m fairly confident in the server code base, for I have not had to touch that code in months (I say if you haven’t had to touch code in a while to fix bugs/improvements, it’s probably decent code). In contrast to the client code, which I have refactored multiple times and continue to struggle to get right. This project is starting to get to the point where I ask “Is JavaScript right for this?”. But that’s a fine question to ask really. It means this is challenging me as a programmer and that’s interesting.

Licensing Expo 2015 – I’ve got a booth!

expo

Finally, much of my time recently has been occupied by the upcoming Licensing Expo 2015 in Las Vegas, Nevada. Yup, Starbli’s got a booth there. V193, write it down! I’m going to be there, and so will Starbli and all of his friends. It’s really exciting because I am hoping to expand Stellar Alien, its world, and all of its characters into different forms. A grand effort was put into developing every character’s personality in Stellar Alien, and making its massive universe super cool and unique. I’ve got an insane bucket list of the kind of things I’d like to license Stellar Alien to. If you’re attending the Licensing Expo 2015, come by the booth, say “Hi”, and check out all the neat stuff that will be there. T shirts, tablet giveaways, animated shorts for Stellar Alien, and other new info on the amazing universe that Stellar Alien is set in. Can’t wait to attend!

 

Thinking about controls for mobile games

Why is designing controls for a mobile game so darn difficult? Compared to designing controls for a PC game, touch controls are very limited. On the PC, you have two methods of interactivity:  a Keyboard and a Mouse. An English keyboard will have at least 28 keys to choose from, and standard mouse will have 3 buttons. This allows tons of possibility for control schemes, which makes the PC a very attractive platform for sophisticated games.

And then there’s mobile devices. iPhones and popular Android devices do not include a keyboard, only a multi touch screen. You can touch and swipe. That’s about it and I find it very diffcult to design games with such a limited control scheme. If you take a look at the app stores charts, you’d assume other app developers are having the same issue. How many infinite runners and “match four of something” games do you see? Either developers are having a hard time coming up with intuitive controls on touch devices, or somebody creative hasn’t came up with a new control scheme.

So when the time came to redesign the controls for my first game Stellar Alien, it was a challenge. Stellar Alien is not an infinite runner and the play can move in all directions, so the controls can’t be a “one touch to do one action”. There’s also a shooter game mechanic in some levels, so there will be times where they would prefer to use two thumbs for play. The first thing that comes to mind  is why not mimic analog stick controls? You can move in all directions, you can easily add more than one sticks. The problem with them is that many users don’t like them and casual mobile gamers won’t “get them”.

The prominent complaint is that the on-screen stick controls take up too much screen space therefore players can’t see the game view very well. That’s a legitimate issue, especially on mobile where you don’t have much screen space (although a trend in mobile devices right now is so to make the phones bigger, so that’s nice). So a solution a developer would have for that complaint is to make graphics for the stick controls transparent. But I question why should we show a graphic at all for touch stick controls? It’s just more visual clutter and it’s distracting. I’ve seen developers argue that players should see a graphic for the controls so that they’re aware where to touch, and I agree with that, but when a user is using the controls there’s no need to show a graphic. They’re engaged in the gameplay, so they would want to see the game view in full.

In Stellar Alien, the controller graphic hides when the player engages in game play

With that said, I decided for Stellar Alien I would mimic analog stick controls and show a graphic when the controls are not being touched, to give the player a visual on where the controls are located on the screen. Then, when the controls are active I hide the controller graphic completely, so they can enjoy the game view in full. I like this control implementation, and I think the most subtle of things can improve a game’s controls. The controls in Stellar Alien are still far from perfect, and I still think developers can come up with better control schemes for touch devices. But for now, I am satisfised.

Mobile game developers, how did you implement controls in your game? Share your knowledge and leave a comment.

Stellar Alien REMIX: The Biggest Update Yet

Hey all,

The new Stellar Alien update is here, and this “remix” is better than the original! After two months of revisioning the game from scratch with a completely new engine, music, art, animation, and even added some story dialogue in there! Really happy with how this update turned out, as I got more than I expected done.

Download the remix at Google Play

store2

store1

Everything’s new, but here’s a list that show’s just BIG changes:

The BIG Changes:
-New and fresh high quality graphics!
-New menu designs
-New mission system
-Revamped level designs
-Story Dialogue
-Smooth, revamped controls!
-Introduces Roxas, Starbli’s mentor
-New Music / Sound Effects
Again, these are only the BIG changes, the whole game is changed! Enjoy. Your feedback is appreciated.

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!