Get your blits out for the lads

30.09.11 Alex Stanbury

At the moment I'm working on a Flash platform game in my spare time. This has given me the opportunity to experiment with some of the clever techniques employed by game makers of years-gone-by in order to squeeze every last bit of performance out of their game engines. One of these technique is called blitting which is used to decrease load on the processor and therefore increase the frame rate of the game.

Usually in Flash you would create Movieclips or Sprites for all your game objects and add them all to the display list when needed, moving them around using their x and y properties and so on. With blitting you do not use the display list for everything, rather you only have one Bitmapdata object added to the display list, commonly referred to as the canvas. The idea is to update the pixels of the canvas with the pixels of whatever it is you want to be displayed in your game. This method is much faster because the overhead of creating complex objects is avoided as you are working solely at the pixel level.

You can see a simple example of using blitting here - From looking at the code you can see that the Box is being drawn into the canvas at a different position on every frame, in this case the box will move diagonally down the screen. This is a very simplified version of the method I have implemented in my game but you should be able to see how it works and the benefits this technique provides. You'll notice that I have only added a few properties to the Box object - If I was using a Sprite or MovieClip then I would also be adding a lot more complexity which I wouldn't necessarily make use of.

Of course you'd want to be using something more interesting than a pink box in your game unless you were making a game where the protagonist was in fact a pink box...but that would be a pretty shit game. One way of adding your own graphics is by using sprite sheets, another very common practice used when making games. You can read more about sprite sheets here

With Adobe's recent anouncement of the Starling Framework (an open-source Actionscript API for utilising the GPU directly) game development using Flash may not be so much about optimisation as it has been in the past but it's still useful to know the techniques that many thousands of classic games such as Legend of Zelda and Super Mario World have used.

For more reading on this and other equally interesting subjects head over to 8-Bit Rocket where there are many well written and highly useful tutorials.

Also, there is an excellent 3 part video tutorial on gotoAndLearn.com that deals specifically with blitting and sprite sheets, well worth a watch!

What a load of blit.

zelda mario spritesheet




disturb's Rising Star

02.11.10 Disturb Media

Our very own Jason 'Font-Mad' Turner is featured in the current edition of 'Design Week' having grabbed their attention as a 'Rising Star' of Graphics.

Read the article here

Jace has been with us a year and, in addition to his passion for graphics, photography and, of course, fonts, he's 'quite good' at darts and dj'ing.

A keen sandwich-maker, 'Nice' Jason can often be found in the kitchen, providing he's not outside with the other 400 occupants of Clerkenwell Workshops, having prompted a visit from the Fire Brigade after some over enthusiastic toasting.

At disturb we're all certain that this feature in the industry press will help Jace, and our ravishing design team, continue to go from strength to strength.

Well done Jace.

Design Week's Centrefold




Playing with lines, shapes and time

22.10.10 George Profenza

I was playing with shapes and the timeline in Flash and liked the shapes that emerged when using the Onion Skin option. It's like freezing/collapsing time into one.

So I wrote a little script in the morning that would mimic that Onion Skin option but would actually store a graphic. It's far from finished and it currently only supports strokes and only works in CS5 for now, but feel free to download it.

Here's a little graphic I made using the script to freeze a bit of John Whitney's Arabesque.

Also there's a quick screencast to illustrate usage. It's pretty basic at the moment:

  1. Create your line shape tween
  2. Select the frame range. You can do that by just selecting the shape tween layer.
  3. Run the script via Commands > Copy Shape Tween As Graphic

In conclusion, have fun making complex graphics with very basic shape tweens.

And make sure you check out John Whitney's awesome animations, if you haven't already.

star 2 star 1 Whitney Tween Whitney Tween 2 Whitney Tween 3