24
May
stored in: HTML5 and tagged: , ,

Isn’t Unity awesome! For 3D games developers it’s probably one of the best choices out there and seems to run on just about any hardware platform you can throw at it. Now with Unity 5, things are getting even more awesome as it now targets WebGL, removing the need for the Unity browser plugin.

So how does all this work? Well basically the Unity runtime code needed to be cross-compiled to JavaScript allowing it to run in your browser. This was done using emscripten to convert the runtime’s C and C++ codebase into asm.js JavaScript. I’ve mentioned asm.js a couple of times before. It’s an optimised subset of JavaScript that can be AOT-compiled by supporting browsers into native code. The beauty of asm.js is that being a subset of JavaScript, it will still run on browsers that don’t directly support it ensuring a level of cross-browser compatibility.

Of course, Unity game code itself is written in C# (and UnityScript) and compiled into .NET bytecode. That bytecode also needs to be converted to JavaScript before your game will run in a WebGL enabled browser. To achieve that, the Unity guys developed a new technology called IL2CPP, which takes your game’s bytecode and converts it all to C++. Emscripten is then once again employed to convert all that to JavaScript.

Phew! Sounds pretty technical but it results in your Unity games being able to target WebGL compatible browsers and that’s a very exciting prospect for many. Theoretically your games will run on browsers and platforms that don’t have support for the Unity browser plugin. For example, this could open up Unity games to Android phone and tablet owners wishing to play games within their browser rather than downloading apps. And if Apple ever bothers to support WebGL on mobile Safari then we could also see Unity games running in the browser on iOS.

It’s early days yet and Unity’s WebGL support is still in Early-Access. However I was able to run and test a few demo games on my Macbook using Safari. I must say, I was very impressed. If you fancy taking a look then try out both Dead Trigger 2 and AngryBots, which show off the technology’s potential. Great stuff!

Now I wonder if Adobe will go down the same route with Flash and break away from its dependency on the browser plugin. It could breathe new life into the much-maligned runtime and give Flash a wider reach on mobile phones and tablets.

05
May
stored in: AIR and tagged: , , ,

I’ve come across quite a number of Adobe AIR games over the last few months so thought it was about time I did another round-up. There’s actually too many AIR games out there these days, particularly on mobile, so unfortunately I can’t cover them all. However here’s five that caught my eye for one reason or another. There are a few more I’ll cover in a future post but if you’re an ActionScript 3 programmer and you use frameworks like Starling and Away3D then the following games should let you see what others in the community are capable of.

Groove Racer

I downloaded Groove Racer almost a year ago and didn’t realise it was written in Adobe AIR! It’s a gorgeous little racing game that recreates the thrills and spills of Scalextric tracks right on your iPhone. Controls are simply a case of holding your finger on the screen to force your car to accelerate. If you want to beat your opponent however then you’ll need to carefully judge your speed coming into the bends. With 10 unique cars across 66 imaginative tracks there’s plenty to keep you entertained for some time. Download Groove Racer for iPhone, iPod touch, and iPad from the App Store.

The Banner Saga

The Banner Saga is a truly epic tactical role-playing game inspired by Viking legend. It’s also a game of choice, where a poorly judged decision can see your caravan suffer or even seal the fate of individuals you’ve grown fond of. When you’re not spending time managing, you’ll be engaged in the game’s grid-based combat desperately trying to win victory in order to push on for another day. It’s a stirring game that gnaws at your emotions, taking you on an epic journey through beautifully crafted hand-painted landscapes. The Banner Saga is available for Windows and Mac. Also, if you want to know more then take a read of both Eurogamer’s and IGN’s reviews, which do the game much more justice than my brief description ever can.

Hilomi

Here’s another beautiful 2D platform/puzzle game written in AIR. Guide Hilomi, the game’s heroine, through each level taking photographs of the unusual wildlife that inhabits her world. Hilomi needs help traversing each level’s environment and that’s where you come in. You can deform the terrain with your fingertips: moving earth, creating bridges, digging tunnels, and commanding water and fire, all in a bid to get Hilomi to each of the animals she wants to add to her photo collection. While the initial dozen or so levels are pretty easy, the game’s difficulty soon ramps up making it a great distraction for anyone who likes puzzle games, like my girlfriend who’s sitting next to me desperately trying to figure out how to get onto the next level. Hilomi is available for iOS from iTunes and Android via Google Play.

Zombie 300

Zombies have invaded your mobile screen! Use your fingers to crush them and save the humans. It’s more or less that simple in this delightful little game for iOS and Android. Of course other things have been added to the mix to provide more depth including: power-ups, a collectible currency system, and innocent bystanders. During the heat of the action it’s quite easy to confuse bystanders with the zombies, which quite often results in humans getting accidentally crushed into the ground. Given the fact that all the humans in the game are represented by schoolchildren it’s all the more heartbreaking when you crush one. My little nephew loves this game, and the distraught expression on his face when he accidentally crushes a boy or girl is priceless. Zombie 300 is available on iTunes, Google Play, and the Amazon App Store.

CUBD

I think CUBD can best be described as a brain-bending 3D puzzle game that’s inspired heavily by the Rubik’s Cube and match-three games. With a simple flick of your finger you can turn and twist your cube in an attempt to match three squares of the same colour. You’ll need to be quick though as you’re up against the clock, and the only way to gain more time is by finding more and more matching colours. It’s both challenging and addictive and things start to really heat up when you’re running low on time. If you’re a fan of puzzle games then you’ll certainly find yourself coming back to CUBD time and time again. It’s available for iOS on the App Store and Android through Google Play.

I was really lucky to get the opportunity the other day to attend a lecture by Bjarne Stroustrup, the creator of the C++ programming language. He gave a really insightful talk about the history of C++ and covered some of the major additions coming to C++14. He also spent some time highlighting common mistakes and bad practices before talking about how to actually do things right.

stroustrup-1

Andy (look at that grin), Iain, and Amanda getting pretty excited.

I haven’t written anything significant in C++ in years and thought that Stroustrup’s talk might give me the kick up the backside that I needed to spend more time with it. I definitely came away from the talk feeling inspired but I did learn that I’m most probably a very bad C++ programmer and also that the language has moved on quite a bit in the decade or so since I last used it in anger.

stroustrup-2

The man himself.

While I did enjoy myself, the evening was really for the hardcore C++ developers out there. My buddy, Angry Andy, is one such developer who eats, sleeps, and breathes C++. He loved every minute of the talk and had the cheesiest of grins on his face during the whole two hours. As an added bonus for the evening, I spotted one of my old university lecturers, Duncan Smeed, who was one of the co-creators of the Dragon 32 home computer. How cool is that!

Okay folks, that’s a first pass at the Objective-C version of my endless runner’s parallax scroller. I’d been meaning to take a look at SpriteKit for a while now so thought I’d use it as my rendering option. I was thinking about targeting the full range of iOS devices (Retina and non-Retina iPhones, iPads, and iPod touches) but in the end opted to just target a single resolution (iPad non-Retina) to keep things consistent with the other languages that I’ve used so far. You can find the source on GitHub.

So that’s my parallax scroller now implemented and running in four different languages:

  • JavaScript
  • TypeScript
  • ActionScript 3
  • Objective-C

If you need some more detail regarding the scroller’s implementation then take a look at the four-part tutorial I wrote for the original JavaScript version:

Building a Parallax Scroller: Part 1
Building a Parallax Scroller: Part 2
Building a Parallax Scroller: Part 3
Building a Parallax Scroller: Part 4

The implementation details are almost identical for the other three languages so you should still find the tutorial useful even if you aren’t interested in JavaScript.

So what’s next? I may add a few more languages and/or renderers to the mix over time, but my immediately aim is to add a game character that can run and jump between platforms. I’ll keep you guys posted.

So that’s the ActionScript 3 version of my endless runner on GitHub. The JavaScript and TypeScript versions both used PixiJS as the 2D renderer, but of course, for the AS3 version I’m using the excellent Starling Framework.

If you’ve been reading my blog for a few years you’ll know that my endless runner actually started life as an ActionScript and Starling project (see video above). However my original code was a mess and it has taken me ages to actually get around to tidying it up enough to put it on GitHub. As I said in my previous post, I’ve just started by concentrating on the parallax scroller. I’ll hopefully add a game character and physics integration into each version over the coming months. Before I do that though I’d like to port the scroller to at least one more language. Think I might go with Objective-C.

I’ve decided to port the source code from my Building a Parallax Scroller tutorial to various other languages, starting with TypeScript. I’m hoping that it will eventually evolve into more than just a parallax scroller and we’ll end up with a very simple endless runner game but that’s for a little further down the line. So to begin with I’ll simply focus on the scroller.

So to begin with you can find my TypeScript port sitting alongside the original JavaScript version on GitHub at: https://github.com/ccaleb/endless-runner. Both use pixi.js as the 2D rendering engine.

If you haven’t seen my original four-part tutorial then you can find links to it below:

Building a Parallax Scroller: Part 1
Building a Parallax Scroller: Part 2
Building a Parallax Scroller: Part 3
Building a Parallax Scroller: Part 4

Next up will be an ActionScript 3 version.

20
Mar

It has been available since AIR 4.0 but I’ve held off covering AIR’s improved packaging engine for iOS due to a major bug at the time. Thankfully it seems to be fixed in the AIR 13.0 beta (yup we’ve gone from 4.0 to 13.0 in one step) so I thought I’d take the packager out for a spin on a couple of projects.

Adobe claim that the packaging times can now be up to 10 times faster than the old packager. Here’s my findings from packaging two separate projects on my ageing PC with its i3 processor: WeeWorld’s MatchMee app and my Monster Dash clone.

Project Legacy Packager New Packager
Match Mee 2.10 mins 52 secs
Monster Dash 2.06 mins 16 secs

As you can see, both projects packaged significantly faster using the new packager. Match Mee’s packaging time was roughly half that of the old packager’s, while my Monster Dash clone saw a reduction in packaging time that was actually not far off Adobe’s bold claim of being up to 10 times faster.

I was hoping that Match Mee would see improvements similar to my Monster Dash clone’s packaging times, but as it stands we’re still looking at times close to a minute, which is still far from ideal. I’m not sure what’s causing the difference in times between the two projects but Match Mee does have 7 SWC files statically linked to it along with 4 native extensions so perhaps that’s what caused the longer packaging times.

Either way though, the new packager brings a significant reduction in times and is a welcome addition.

02
Mar
stored in: HTML5 and tagged: , ,

I’ve been messing around with three.js again recently and thought it would be fun to try and mix some 2D visuals with 3D, kinda like you see in games like Rayman Legends. I also thought I’d spend some time experimenting with Physijs, which is a physics plugin for three.js. The end result was this little moon buggy demo that uses some assets that our excellent artists at WeeWorld put together.

The terrain is a 3D mesh and there’s also a 3D mesh that represents the buggy, which interacts with the terrain. All the other visuals are textures mapped to planes. I also hid the buggy’s mesh and replaced it with 2D textures to ensure it sat well within the environment. To make things a bit more interesting I added a few ramps to the scene and also randomly placed some boulders for the buggy to run over. I was also considering adding a gas and brake key to allow the user to actually drive the buggy but ran out of time, so you’ll just need to watch as the buggy tries to make its own way to the end of the map.

If I find some spare time at some point I’d like to tidy it up a bit, make it playable and also stick the code on GitHub somewhere. However, other things have gotten in the way so I thought I’d share what I’ve put together so far. Anyway, enjoy, and if the buggy flips over or gets stuck then just refresh the page and see if it does any better second time around. There are lots of large textures in the demo so please be patient as it downloads.

UPDATE: I’ve now placed the source code for the demo on GitHub. It’s still a non-interactive demo and the source is in desperate need of some refactoring but hopefully you’ll be able to get something from it.

There’s been quite a lot happening in the world of 2D frameworks. Here’s some news regarding a few that I personally use on a regular basis both commercially and for personal projects.

New Starling Book

The Starling Framework is the most significant thing to happen in the world of Flash for years and has done an amazing job of breathing life into the platform. In fact it’s so popular that there seems to be a constant stream of iOS and Android games being released that were built on top of it. Additional proof of Starling’s popularity is the publication of a new book, Starling Game Development Essentials by Juwal Bose and published by Packt. The book takes you through the steps required to build an isometric game for both web and mobile. Additionally it covers pathfinding and also deployment of your finished game to the App Store and Google Play. It’s also worth mentioning that Starling’s creator, Daniel Sperl, was one of the book’s technical reviewers so the content covered is of the highest standard.

Since Starling is an open source framework, Packt Publishing pay a royalty directly to the framework’s author. If you use Starling then I strongly urge you to support it by buying a copy of the book or better still, donating directly to the Starling framework via this link.

Starling JS Joining Forces with Away Foundation

You may also remember that an HTML5 port of Starling was announced just under a year ago. Things have been suspiciously quiet of late and I was starting to think that Starling JS was perhaps never going to see the light of day. Well it turns out that the project was actually on the brink of cancellation after the main sponsor pulled out. And while development had continued, it had slowed to a crawl thanks to various technical and funding issues. The good news however is that the Away Foundation who are responsible for Away3D have taken the project under their wing after identifying that they need to be able to offer their clients a 2D solution as well as a 3D one.

This is great news and hopefully the final API will remain similar to both Starling and Sparrow (the Objective-C version). Starling JS is written in TypeScript, which was also the language of choice for the JavaScript port of Away3D, so those coming from an ActionScript background should find development fairly familiar. I’m personally really looking forward to tinkering with Starling JS and fingers crossed that it has both a Canvas and WebGL renderer.

PixiJS Site Goes Live

PixiJS has to be my favourite HTML5 2D renderer at the moment. Having support for both Canvas and WebGL means its hardware reach is pretty damn awesome. Plus it’s screaming fast on WebGL-enabled mobile browsers. In fact, even Safari on my ageing iPad 2 (which doesn’t even support WebGL) is capable of some pretty impressive results. Additionally, Pixi’s API isn’t that different from Starling’s, so if you’re coming from an ActionScript background you’ll feel right at home.

PixiJS has gathered some serious momentum of late and its developer, Mat Groves, has now launched Pixi’s official website complete with a showcase section, code examples, and tutorials. In fact my recent four-part Pixi tutorial can be found on the site too!

Pixi is now at version 1.5 and new releases seem to appear faster than I can actually keep up with. It’s probably one of the fastest 2D JavaScript renderers around and still getting faster. If you’re looking for a true multi-platform solution then Pixi should probably be top of your list.

WebGL Support for CreateJS

We’ve been using CreateJS a lot at WeeWorld over the past year. Its tight integration with Flash Professional CC makes it perfect for our workflow: our illustrators and animators are able to continue using the tool they love and we’re finally able to playback their rich vector content and animations outside of the Flash runtime. This is huge as it provides an avenue for running content created in Flash on mobile web browsers. In fact, as I’ve said in previous posts, development really doesn’t feel that different from our older Flash-only projects.

Until recently, CreateJS was a strictly Canvas-only affair. Well the good news is that a WebGL renderer is now in early beta and promises significant performance advantages. While the WebGL renderer supports a limited API compared to the Canvas implementation, CreateJS makes it possible to layer your WebGL and Canvas content, allowing your games to utilise the strengths of both APIs. You can find more information on the official CreateJS blog.

07
Feb
stored in: AIR and tagged: , , ,

It used to be the case I’d have to actively go looking for desktop and mobile games written in AIR, but these days they aren’t that hard to find. Personally I think it shows AIR’s increasing strengths as a games (and mobile in particular) development platform. Anyway, here are few games that really show the platform off and are definitely worth a few moments of your time.

Bardbarian

I’ve been following the development of Bardbarian from day one. Created by indie outfit, TreeFortress, you control Brad, a barbarian who is sick of violence and just wants to make music. So that’s exactly what he does, fashioning his axe into a guitar and inspiring his fellow villagers to fight off invaders with the power of rock music. It’s part tower defence, part shoot-em-up, and part RPG with a dash of blistering guitar solos.

With its epic boss battles and butter smooth 60fps Spriter-based animations, Bardbarian is another feather in the cap for Adobe AIR and the excellent Starling framework in particular. It’s also worth mentioning that Bardbarian’s lead-developer is Shawn Blais, who is also the author of Picshop Pro, which was another huge success story for AIR a few years back.

Barbarian is available for iOS with an Android and Blackberry release due soon. It’s also great to hear that it has also just been greenlit on Steam so expect a Windows and Mac port some point in the future.

The Floor is Jelly

The Floor is Jelly is possibly the most beautiful looking Adobe AIR game I’ve seen to date. It’s an indie platform game (not that dissimilar to Super Meat Boy but with the flair of Fez) where everything you touch is made entirely of jelly! Using a whacky physics engine that was custom written for the game, you need to navigate your way through each level by bouncing through corridors and solving simple puzzles while simultaneously gasping in amazement at developer Ian Snyder’s creative vision.

Still images of The Floor is Jelly do it absolute no justice whatsoever so make sure you check out the video above. The Floor is Jelly is available from its official website (or via Humble Bundle) and can be downloaded for both Windows and Mac. It only costs 8 bucks so please do support the developer by making a purchase. Oh and a special mention should also go to the excellent sound and music by Disasterpeace which perfectly compliments the gameplay.

Frosby Picnic Camp

Matt from Frosby Studios got in touch to let me know about a couple of new releases of his. First up is Frosby Picnic Camp, which is the latest in the series of Frosby learning games. Aimed at 2-5 year olds, Picnic Camp teaches kids how to make their own picnic, how to pitch a tent, interact with animals, and explore the beautiful park surroundings.

Just like the previous Frosby releases, my little three year old nephew loves Picnic Camp. He particularly enjoys making sandwiches and loves pitching his tent by hammering pegs into the ground. In fact, I think it’s worth mentioning that my nephew has returned to Frosby’s titles more often than he re-visits the Toca Boca range of apps. What’s nice about the Frosby apps are that each has a wide range of activities that kids can return to and tackle as they get older. Great stuff.

Frosby Picnic Camp is available for iOS and Android.

Qixel HD

Frosby’s second offering is Qixel: a quirky live art project that will appeal to pixel lovers and retro gamers alike. You create stylised pixel paintings using the Qixel HD app and share your masterpieces with friends via Facebook, email or Twitter. For those who don’t want to share you can simple save your artwork to your device’s camera roll.

The nice thing about Qixel is that even geeky programmers like myself who can’t draw to save themselves can actually produce some nice looking artwork. Qixel is available on the iOS App Store, Google Play, and the Amazon App Store. Head on over to Qixel’s official Facebook page to check out the latest creations.

Pyro Jump

Another huge Adobe AIR success story with over one million downloads already is the rather gorgeous Pyro Jump. With its intuitive one-touch gameplay, you control a little fireball as he works his way through each level by jumping between spinning wheels. Timing is the name of the game as you perfect your leaps from one spinning cog to another. Pick-ups are dotted throughout the route increasing each level’s replay value, forcing you back in an attempt to collect everything.

Pyro Jump’s French developers (Pinpin Team) have done an excellent job crafting this visually rich and well executed game. The game is also once again an excellent example of what can be produced with the ever impressive Starling framework. It’s also worth noting that there’s a playable trial version of Pyro Jump on its official website, which is itself an excellent example of the Flash platform’s cross-platform benefits. Pyro Jump is available for iOS and Android.

Captain Fishblock

To demonstrate the power of Adobe AIR and Starling, developer Oliver Joyce set himself a “From AIR to App Store in 14 Days” challenge. He also very thoughtfully blogged about each day of the development process, which is definitely worth a read. The end result of his endeavours is the excellent Captain Fishblock, which I think is best described as a physics-based tetris game.

The game has you trying to land blocks of frozen fish on a rickety old fishing-boat by carefully stacking ice-blocks before time runs out. You’ve got to be careful though or your boat will end up at the bottom of the sea. Captain Fishblock features some lovely artwork and has some really nice music that accompanies the gameplay. It’s available on Android and iOS. Not bad for 14 days work. Not bad at all.