A friendly reminder to start thinking about ECMAScript 6

I must admit I have quite a love-hate relationship with JavaScript. Some days I’m enjoying its ridiculous flexibility while other days I am annoyed by its tolerance for any silly mistake I may make. Although JavaScript has some serious design warts, the ECMAScript 6 standard is here to improve upon the language. I welcome the new features and I am glad to hear that the standard will be finalized sometime this summer of 2015.

As you may know, it will be sometime before everyone will able to write straight up ES6 but luckily we have transpilers like Babel and Traceur to compile ES6 code into ES5.1 (the current standard JavaScript derives from). This is really exciting as you can write code using almost all of the new ES6 features today and it will still work on all browsers. These transpilers are pretty great and I think we’ll be using them for a while until ES6 gets spread around. Therefore, I encourage anyone hoping to improve their JS code base to consider giving ES6 a try. I use Babel personally, along with Gulp as my build system. It’s seriously sweet and it allows me to write more expressive code than I could in ES5.1.

Okay, so if I haven’t convinced you to check out ES6 yet then I’ll overview some of my favorite new features. I won’t go over every single one, just my personal favorites. A better overview of the many new features in ES6 can be found here.

Classes (Syntax Sugar)

This probably many people’s favorite addition to the standard and it is mine as well. ES6 introduces a new syntax for creating classes, basically a blueprint for object instances. Now don’t worry, this is just syntax sugar. You still have the flexibility and efficiency of prototypes, this new syntax just comes in handy when you just want to make a dang class!

Here’s an example:

ECMAScript 5.1

ECMAScript 6

 

I think the standard did a great job with the class syntax sugar. It’s very simple and the syntax is thankfully not too verbose. This should make many code bases more expressive.

Fat arrow functions

Another great feature is the new arrow function. JavaScript these days is always dealing with callbacks and anonymous functions everywhere. The fat arrow is here to save some key strokes and keep the code looking pretty. Now this isn’t just syntax sugar though, an arrow function has a lexical this. In other words, it captures the this of the context of which the arrow function was created in. This should hopefully save a few headaches of dealing with this and we should see less var self = this; in code bases.

Example:

 

let and const (Block scoping and Constants)

This is also a great addition to the language. Traditionally you would create a new variable in JavaScript with the var keyword. The variable will then be scoped to the function. let, however, creates a variable in block scope. This is neat because now we can bust out variables in if statements or loops without worrying about them being modified by something outside of the code block. I also find let allows for much more readable code than var. It’s worth noting that let is NOT hoisted to the top of the function, unlike variables created by the var keyword.

Additionally, we have the const keyword. This will make a constant value that cannot be changed. That’s pretty sweet and should give us programmers less headaches.

 

Conclusion

ECMAScript 6 turned out to be a great revision for JavaScript and we can all start developing in it today using transpilers. Many large websites have already started using it, so it sounds to me it’s ready for prime time. At the very least, get some time in the weekend and try it out for yourself!

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.