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…)

    This content is password protected. To view it please enter your password below:

    Enter your password to view comments.
    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.

    16
    Jan
    stored in: HTML5 and tagged: , ,

    Thanks to the ever increasing browser penetration of WebGL we’re seeing more and more games and demos that take advantage of it. One such demo that caught my eye a while ago was HexGL – a futuristic, fast-paced racing game developed with JavaScript and three.js. If you haven’t played it then check it out or watch the video below.

    It was developed in just under two months by student Thibaut Despoulain. Thubaut very generously made the source code available on GitHub and also presented at the Adobe User Group NL meet-up, where he dived into the making of HexGL.

    AUG talk about HexGL

    One thing I noticed while scanning over the source (and confirmed in his video) was just how simple he’s kept things. Rather than using a physics engine for collision detection, Thibaut has instead gone with a simple collision map that lets him know when the player’s ship has hit a barrier. He’s done the same when determining the ship’s position on the game’s undulating circuit: looking up height information that’s been stored within a bitmap.

    Impressive stuff.

    12
    Jan
    stored in: Flash and tagged: ,

    My girlfriend once asked me whether I loved her more than Flash. Of course I didn’t hesitate and immediately asked her what version of Flash she was talking about. Apparently that was the wrong answer and I’ve been trying ever since to find the perfect way to make it up to her. Well, I think this totally awesome t-shirt I just bought her will do the trick.

    flash-love-1

    I can’t wait to see her reaction. The print has a big giant heart and an equally large Flash logo, both of which I’m sure girls love. Right? I’ll let you guys know how I get on and whether or not I still have a girlfriend come the end of this.

    UPDATE: Great news! Amanda loves her new t-shirt!

    flash-love-2

    UPDATE: I got one for myself too! How awesome do we look!

    flash-love-3

    Yeah, we rock! :-)

    08
    Jan
    stored in: General and tagged: , , ,

    That’s another year over and it’s once again time for me to recap what I’ve been up to over the past twelve months and look forward to the next. It’s also an opportunity to see how close I came to achieving the goals I’d set out for myself at the beginning of the year. I always feel doing so helps motivate and push me to learn new things.

    The Flash Platform

    It was bound to happen eventually. This was the first year where my professional workload involved more HTML5 than Flash. My ActionScript skills were almost exclusively reserved for the maintenance of legacy projects.

    The only real exception was a new update to Match Mee, which is an AIR based iOS app we released at WeeWorld last year. We added a bit more functionality, made some gameplay changes, and also squished a few bugs. In addition to that I spent a morning getting Match Mee running in the web browser. It really is a testament to Flash’s strengths when some slight modifications to your code can have something that was originally intended for iOS running quite happily in a web browser. We’d also had Match Mee running on a handful of Android devices with minimum fuss. Unfortunately neither the web or Android ports made it onto WeeWorld’s roadmap for the year but they were fun pieces of work nonetheless.

    I might not have written much ActionScript but Flash Professional CC made a triumphant return to my workflow thanks to its integration with the CreateJS framework. After a few difficult years for it, I firmly believe that things are heading in the right direction for Flash Professional. It’s now much more tightly integrated with HTML5 and also provides support for JavaScript directly within the IDE. It has meant we’ve been able to create rich HTML5 web content that utilises the vector graphics and animations that Flash is so good at. I’m happy and it has enabled our designers and illustrators to express themselves again, which has been difficult over the past few years when the tools weren’t available for previous HTML5 projects.

    I did do a fair amount of ActionScript development outside of WeeWorld, some of which I’ll cover a bit further down.

    HTML5/JavaScript

    The last six months of my time at WeeWorld has been almost exclusively spent working with HTML5 and JavaScript on a new section for the site. We’ve also made heavy use of Flash Professional and the CreateJS framework, allowing us to bring a lot of WeeWorld’s vector content into the project. I’m enjoying every minute of it and hopefully I’ll get to stick with it as we add new features throughout 2014.

    In fact, the development of this project has gone so smoothly that it’s unlikely that we’ll see another native Flash project at WeeWorld that targets the web browser. JavaScript as a language doesn’t have the niceties of ActionScript 3 but it’s easy and enjoyable enough to use. And of course, for those desperate for something a little closer to AS3 there’s TypeScript. I’ve used TypeScript for some personal projects and I really like it. In fact, it’s something that we’ve talked about using at WeeWorld on future projects.

    If you scan through my blog you’ll see that I’ve been tinkering on and off with HTML5 for a few years now on some of my personal projects. However 2013 was clearly a tipping point for me. Personally I think the issues with HTML5′s readiness and complaints regarding browser compatibility have now mostly evaporated. Sure there are problems with older browsers, but most of the modern browsers have significant penetration to the point where the majority of users can enjoy all that HTML5 goodness. As someone who loves developing in Flash I can honestly say that with frameworks like CreateJS and PixiJS the lines have become very blurred and that working with HTML5/JavaScript doesn’t really feel that much different to Flash anymore. Basically I’m pretty damn happy.

    Objective C

    I did a fair amount of Objective-C too and also tinkered with AIR native extension development. I didn’t actually write an extension that was of any use to anyone but spent enough time experimenting so that I can write my own extension if the need arises. Of course, there’s a good selection of native extensions out there but they tend not to get updated as often as the third-party Objective-C libraries that they’re based upon. So being able to get my hands dirty with any open sourced ANEs or simply write my own should come in handy for future AIR projects.

    Just for fun, I also revisited my X-wing Targeting Computer app and re-wrote it in Objective-C. People to this day still email me asking about my app. I have no intention of releasing this one but thought it would be a good coding exercise to rewrite it. I haven’t bothered blogging about this new version because I was hoping to give it a new coat of paint and make the UI look a bit more modern first. My sister in-law has offered to help out with the visuals so hopefully we’ll get those dropped in there in the coming months and then I can show it off to you guys.

    Monster Dash Clone and Tutorials

    I had a great time creating a clone of Half Brick’s Monster Dash game, which originally appeared for iOS, Android, and web. I wrote it in ActionScript 3 and thought it would be a good opportunity to spend some more time with Box2D and the excellent Starling framework. I picked the Tomb Town level from Monster Dash and did my best to recreate it. Personally I think I got damn close to the original and was pretty pleased with the end result.

    I’d also promised to write more tutorials last year so thought a series of tutorials (part 1, part 2, part 3) detailing how to write the scrolling engine from my Monster Dash clone would be worthwhile. Doing it has been a huge investment in time but I think it has been worth it. Since I’d been spending more time with HTML5, I ended up writing the tutorials for JavaScript developers with pixi.js being my rendering engine of choice. It seems to have been a popular decision but I’m also planning to re-write the tutorial’s source code in a few other languages, including ActionScript 3, TypeScript, and possibly Objective-C if I can find the time. I’m also hoping to completely re-write the tutorials for ActionScript developers but that really will depend on how much free time I find myself with this year.

    I’ve got one more tutorial in the series to do, which I’m about to start this week. After that, I may go on to write a few more tutorials explaining the Box2D side of things for those who want to add a game character and platform collision detection to proceedings. However that probably won’t happen until the second half of this year.

    Bunny Vengeance

    I’ve been working on and off with my buddy Alex on a game concept called Bunny Vengeance. The plan was to knock together a few prototypes over the course of the year, however we only found the time to produce one. Even though it contained some beautiful animation from Alex (he’s worked for likes of Pixar and DreamWorks over the years) I never really felt that we had something that was going to make a great game. After spending some time with the first demo Alex also came round to this realisation and we’ve now agreed to explore a few more concepts. The plan is to try and produce another few quick prototypes over the next six months or so and see if we can create something that others might want to play.

    3D Games Programming

    Every year I promise to do some 3D programming and just about every year I completely fail to find the time. I’m pleased to announce that I did actually spend all of December looking at three.js – Ricardo Cabello’s (AKA Mr Doob) excellent WebGL-based 3D library. Of course, there are many ActionScript 3D libraries I could have opted for, and there’s also Unity, but I felt that three.js had the lowest entry barrier. Its API is fairly mature now, it has a growing community around it, and there’s a wealth of tutorials and examples to work from. I’m also hoping to take a look at Unity before the year is out but three.js let’s me quickly experiment with things and push any work I do to the web without the need for a plugin.

    I’ve also come to the realisation that I really need to learn how to use a 3D modelling package. There are plenty of 3D models floating around the web that I can use in my personal projects but they quite often require some tinkering with before I can import them into three.js. I’d also like to be able to build my own simple 3D models for my projects. While I could probably programmatically create some of these models directly with three.js I think I’d get things done a lot quicker if I simply had the right tools to let me be more creative. I’m seriously considering checking out Blender. It’s free and I’m already using it to make very quick adjustments to existing models. Blender’s a bit of a beast though so it may take me some time even to get to grips with the basics. We’ll see how I get on though.

    This Blog

    Yeah, But Is It Flash? is four years old now! I originally only intended to run the blog for a year so I’m chuffed that I’ve managed to keep it going this long. However I have actually struggled with the blog’s name for a few years now. It did start purely as a Flash platform blog but the last couple of years has seen me work with an increasingly wider range of technologies. I have posted some of my non-Flash experiments here but have held back many more because I was afraid I might alienating myself from my original target audience. I’ve decided that I’ll just go for it this year and write about just about anything I happen to work on.

    I had also seriously thought about changing the blog’s name but couldn’t think of anything that I liked, and I do think my blog’s current name is kinda cool. So for the time being, the name will stay.

    All Change

    So it’s all change for me this year. I’m really looking forward to experimenting more with three.js and hopefully I’ll find the time to tackle Blender as well. I’m also hoping to do some more small Objective-C projects including finishing off the port of my X-wing Targeting Computer app. Fingers crossed that me and Alex will also find the time to bash together a few more Bunny Vengeance prototypes too. Not sure if we’ll ever finish the game but even putting together a few demo levels should be fun. Finally, I’ve got my Parallax Scrolling tutorial series to finish. Actually, it’s just one more tutorial I have to do but as I said I’d like to also write a few more based on the Box2D side of things.

    So, looking forward to 2014 and hopefully I’ll get lots done.