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.

Welcome to the fourth and final tutorial in the series detailing how to build a parallax scrolling map using JavaScript and pixi.js. In the previous tutorial we started writing the scroller’s foreground layer by implementing an object pool and learning how to work with sprite sheets. Today we’ll actually construct the foreground layer and write code to scroll its game map within the viewport.

What you will learn…

  • How to represent a game map in memory
  • How to display and scroll a large game map
  • The support code required to construct a game map

What you should know…

  • How to build and use an object pool
  • An understanding of JavaScript or ActionScript
  • Basic object-oriented concepts
  • We’ll continue where we left off. Keep working with the code you produced during the course of the first three tutorials. However, if you prefer you can download the third tutorial’s source code from GitHub and work from there.

    By the end we’ll have a scrolling game map that’s almost identical to that found in Half Brick’s excellent Monster Dash game. Remember, our map will be built from a series of wall spans of varying height and width, and we’ll take advantage of our object pool to retrieve the individual slices that make up each wall span. We’ll also add a little icing on the cake by gradually increasing the map’s scrolling speed over time, just like in Monster Dash.

    The final version of our scroller can be found above. Simply click the image to see it in action.

    (more…)

    20
    Jan
    stored in: General and tagged: , ,

    When it comes to mathematics I’m really a bit of a dunderheid. Thankfully for coders like me who should really have been paying attention at high school and university, Keith Peters (AKA @bit101) has started an excellent series of video tutorials explaining the maths that you need to understand as a programmer.

    Personally I think they’re really great refreshers but I’m sure even those who are fairly unfamiliar with the material will gain a lot from Keith’s clear explanations. He also does a great job of showing how to apply what you’ve learned to your day-to-day development duties and also where it applies to games programming.

    To date he’s posted around ten, 15-minute episodes (covering trigonometry and vectors) with a new video appearing roughly every week. I’ve embedded Episode 5: Arctangent above as a taster. If you like what you see then head on over to the Coding Math website and catch-up on the rest of the material.