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.

05
Jan

Happy New Year everyone! I thought I’d share with you my latest three.js experiment. It’s based on the spline demos I posted previously but this time I thought I’d move the camera to the outside of the tube geometry and let you rotate left and right around it. Just for fun, you can also fire projectiles along the spline and increase your speed by pressing a boost button. There are also some barriers to dodge but no collision detection, so you can fly straight through them if you like.

tunnel-3

I was inspired by a Unity/Flash game I once played called Tail Drift, and if you have some time on your hands then you should check it out because it’s pretty awesome. Now, my effort is nowhere near as good as Tail Drift but I have added a nice skybox and the planet Earth to my scene to trick you into thinking it’s better than it actually is. Have fun and if you’re interested, the code is available on GitHub along with my previous two experiments.

NOTE: There’s about 10 Mbytes of texture data (for the skybox and the planet) so the demo may take a few moments to load.

23
Dec
stored in: HTML5 and tagged: ,

Every year I promise myself I’ll spend some time learning 3D graphics programming and just about every year I fail miserably at finding the time to do so. So in a desperate attempt not to let the same happen again this year I thought I’d do some tinkering with three.js. Here are two quick demos I put together.

tunnel-1tunnel-2

Both use a spline to generate a 3D tunnel, which I then move the camera along. The first tunnel is coloured by mapping its geometry’s normal vectors to RGB values. In the second demo I send the tunnel’s vertices to a particle system, which let’s you see the tunnel in its entirety as you move through it. Now all I need to do is convince my buddy Ian to give me his Oculus Rift headset and get that hooked up. How’s about it Ian?

UPDATE: You can now find the source for both demos on GitHub here.

Welcome back to the third in a series of tutorials covering how to make a parallax scrolling map using JavaScript and pixi.js. A lot’s been covered so far. In the first tutorial you learned some pixi.js fundamentals and applied parallax scrolling to a couple of repeating layers. While in the second you wrapped your existing scrolling functionality into its own class by applying some object-oriented concepts to your codebase. We’ll now focus on a third, more complex, parallax layer which will represent the terrain that the player’s character would traverse if we were actually writing a full game.

What you will learn…

  • How to work with textures and sprite sheets
  • The basics of object pooling

What you should know…

  • Familiarity with pixi.js fundamentals
  • An understanding of JavaScript or ActionScript
  • Basic object-oriented concepts

We’ll continue where we left off in the previous tutorial. You can either work with the code you produced during the first two tutorials or download the second tutorial’s source code from GitHub and work from there. You can also find the entire source for this third tutorial on GitHub although I do encourage you to work through the steps detailed in this tutorial and only refer to the source if you run into problems.

This series of tutorials is very much inspired by endless runner games such as Cannabalt and Monster Dash, which both make excellent use of parallax scrolling to provide a dizzying illusion of depth as the player’s hero runs and jumps between platforms.

Over the course of the next two tutorials we’ll build a scrolling game map very similar to that found in Monster Dash. Monster Dash’s game maps are built from a series of wall spans of varying width and height. The aim of the game is to survive as long as possible by jumping between wall spans. The scrolling speed of the game map increases over time adding to the challenge.

A demonstration of what you’ll be writing can be found above. Simply click on the image to see the scrolling map complete with wall spans and gaps.

(more…)

Static code analysis tools like JSLint can be a real time saver when working with JavaScript. It can be somewhat frustrating only finding out about errors in your code at runtime. It’s especially true when working with Flash Pro’s HTML5 Canvas document, where a simple typo can leave you with a blank page in your browser.

That’s where the JSLinter extension for Flash Pro CC comes in. It performs static code analysis on your timeline JavaScript and helps to detect any errors and potential problems. The extension was written by Adobe’s Hemanth Kumar R and can be downloaded from his blog. I’ve also embedded a video above of Hemanth demonstrating how to use the extension.

06
Dec

Adobe has just released an update to Flash Professional CC and the great news is that it now provides native HTML5 document support. This is a significant step towards Flash’s deeper integration with HTML5 and the CreateJS framework. You can now create a new HTML5 document directly from Flash Professional and you’ll find all the HTML5 export settings now sitting within Flash’s Publish Settings panel.

Previously HTML5 export was available via the Toolkit for CreateJS extension. This had its problems as it was all too easy to build a FLA that used features that weren’t supported by the export tool. That’s no longer an issue as the new HTML5 Canvas document disables any Flash features that aren’t supported in HTML5. In addition, JavaScript is now treated as a first class citizen. You can now write JavaScript directly within your Actions panel complete with code hinting and code colouring.

Hopefully we’ll see more great updates like this over the next twelve months. More frequent updates are definitely one of the benefits of Adobe moving its product suite over to the Creative Cloud.

In this series of tutorials we’ll discover how to make a parallax scrolling map similar to that found in games such as Canabalt and Monster Dash. The first part introduced the pixi.js rendering engine and covered the fundamentals of parallax scrolling. Now we’ll build upon our first scrolling attempt by adding the concept of a viewport.

What you will learn…

  • How to extend pixi.js display objects
  • The basics of object-oriented JavaScript
  • How to add a viewport to your scroller

What you should know…

  • An awareness of object-oriented concepts
  • Some pixi.js fundamentals

You’ll be working from the code you produced during the first tutorial. Alternatively you can download the previous tutorial’s source from GitHub and work from there. Additionally, the entire source for this second tutorial is also available on GitHub.

As a reminder, click on the image above. It will launch and run the current version of our parallax scroller. There are only two layers at the moment but we’ll start adding a third, more sophisticated layer, in the next tutorial. In the meantime we’ll put ourselves in a position to add that third layer by adding the concept of a viewport. While we work, we’ll also perform some significant re-factoring in order to wrap our scroller within its own class.

While this tutorial is very much aimed at a beginners level it does expect that you have at least a fairly basic understanding of object-oriented programming concepts. Don’t worry if that statement makes you feel a little uncomfortable, as I’ll still provide enough gentle prodding in the right direction for those who are unfamiliar with object-oriented JavaScript.

(more…)

I’m not entirely sure why Adobe make it so difficult to update the AIR SDK within Flash Builder 4.7. It’s all the more baffling considering how easy it is to use a different AIR SDK within Flash Professional.

Thankfully Joseph Labrecque has recorded a video showing you how to upgrade Flash Builder 4.7 to use the latest version of the AIR SDK and the new ActionScript compiler. Oh, and if you’re interest in Android development using Adobe AIR then I highly recommend Joseph’s Flash Development for Android Cookbook.

27
Oct
stored in: AIR and tagged: , ,

Over the past few weeks I’ve been playing quite a few really great mobile games written in Adobe AIR, so I thought I’d list them here for you guys to check out. All of them are definitely worth a look.

Help Me Fly

I’ve probably spent more time with this game on my iPhone than any other in the last six months. Help Me Fly is a great little puzzler where you’ve got to jump start your biplane by connecting circuits between it and a power source. It’s a beautiful game with a lot of charm and a subtle but effective use of animation. The 60 levels will keep you going for quite some time and there’s apparently more to come in future updates. Help Me Fly is available for both iOS and Android devices. The first 20 levels are also available on the web.

Snailboy

Snailboy is perhaps one of the nicest looking games powered by Adobe AIR to date. It’s a physics based puzzle game where you’ve got to catapult, prod, and nudge Snailboy around each level in order to rescue his prized collection of shells, which have been stolen by the evil Shadow Gang. Gameplay is simple and intuitive, and you’ll soon find yourself comfortably navigating your cheeky garden mollusc through each of the game’s tricky environments. It’s all good fun and I must say that Snailboy is one of the most polished looking Adobe AIR powered games I’ve seen on the iOS App Store.

KAMI

I almost spent as much time with KAMI as I did with Help Me Fly. The only reason I didn’t is because I managed to complete its 36 levels quicker. KAMI is a fantastic Japanese influenced paper puzzler. It’s both simple and beautiful and will have you spending hours trying to complete each of the game’s increasingly complex levels. While most puzzle games eventually frustrate, KAMI has a soothing quality to it that will make you feel somewhat relaxed even when you’re revisiting a particularly hard problem for the umpteenth time. Easy to pick up but very hard to put down. KAMI is available for iPhone and iPad.

Incredipede

I’ve been meaning to check out Incredipede for some time now but for one reason or another never got round to it. Just like Snailboy it’s a visually lavish affair and also makes great use of physics. It’s a puzzle game that celebrates the vast diversity of life in the world. Your incredipede has the unique ability to grow new arms and legs whenever needed, allowing you to transform it into anything ranging from a spider to a monkey. With a little practice you’ll be navigating the game world by swinging through the trees, climbing cliff faces, and even soaring through the air. Incredipede is available for both iOS and Android.

Fingervals

Games don’t get much more stripped down than Fingervals. Guide your fingertip through a vertical scrolling maze of bombs and pickups. There’s a really neat retro quality to Fingervals, from the lovely but simplistic graphics to its minimalistic but well placed audio. It also has a difficulty curve that’s very much associated with 80′s gaming rather than today’s more forgiving offerings. In many ways the challenge on offer leans towards the likes of the excellent Super Hexagon, which is absolutely fine by me and fits perfectly with the game’s old-skool feel. Fingervals is available for iPad and there’s a pocket version for iPhone too.

The Tapping Dead

Pixel art is all the rage these days and zombie platformer, the Tapping Dead, is a perfect example of those 8-bit graphics that we all love. The gameplay is also suitably simplistic, with a tap and hold mechanic being employed to help you guide the hero away from the game’s zombie infested cities. Your character automatically runs through each level, negotiating ladders and drops as they’re encountered. Touching the screen stops them in their track and is the only mechanism in place to stop you bumping into each of the level’s zombie inhabitants. Survival is about quick reaction and timing as you decide when best to halt your hero’s progress in order to avoid having your brain munched. With 150 levels on offer, there’s plenty to keep you entertained. The Tapping Dead is available for iOS and Android.

Zombie Apocalift

Staying with the zombie theme, Zombie Apocalift is a casual arcade game where you have to look after three survivors as they ride an elevator during a zombie apocalypse. Each survivor is armed and you must help them fend off the zombie horde that’s hellbent on bursting into the elevator and putting an end to your escape plans. The simple aim is to travel as high as possible in the elevator. To achieve that you’ll need to kill as many of the shuffling undead as possible as they try to prevent your escape. Weapons upgrades and player boosts are on offer and you’ll need to use them fairly across your team if you want to make it to the top. Zombie Apocalift is easy to pick-up and good fun. Check it out on the Apple App Store, Google Play, or the Amazon App Store.

Iron Force

Stage3D holds bags of promise but Flash and AIR are still very much seen as platforms for 2D games development. So it’s good to see the full potential of Stage3D being realised in Iron Force – a really cool multiplayer tank battle game. Pick from seven powerful tanks and battle online in a free-for-all or as part of a team. During your campaigns you can make various upgrades to your tank including increasing your firepower, speed, and rate of fire. With close to ten thousand ratings on the Apple App Store and an average score of five out of five, it’s a perfect example of what can be produced with AIR and the Stage3D API.