I wrote a tutorial for ActiveTuts+ (previously known as FlashTuts+) about parallax scrolling, an effect you can use to make 2D games appear to have more depth. You can see the effect in the little demo above.

Click here to check the tutorial out.

Actually, it explains a few more things beyond the parallax effect, like how to make your game’s “camera” (or “viewport”) appear to follow the player, and how to create infinitely repeating backgrounds á la Scooby Doo

It’s pretty long, so I tried to lay it out in such a way that you don’t have to read the whole thing to benefit from it. For example, you only have to read the first half or so in order to understand how to make a side-scroller.

I’ll be following the comments there in the same way that I follow comments on my own blog, so if you have any questions, please post them over on ActiveTuts+.

And if you make anything cool with the effect, I would love to see it

© MichaelJW for Michael James Williams, 2009. | Permalink | One comment | Add to del.icio.us
Post tags: activetuts+, backgrounds, depth, parallax, scrolling, Tutorial

Feed enhanced by Better Feed from Ozh

Nicolás Lamolina was kind enough to offer to translate my AS3 Avoider Game tutorial (itself based on an AS2 avoider game tutorial by FrozenHaddock) into Spanish!

He’s made a few additions too — for example, his graphics are a great improvement on mine, and he’s added some extra challenges, split into easy, medium and advanced difficulties.

The first part is up already, and Nicolás assures me that the second part will be up soon. Here’s an introduction from him:

Mi Nombre es Nicolás Lamolina y estoy actualmente haciendo una traducción al español del tutorial “Avoider Game” de Michael James Williams. Cuando comence a estudiar ActionScript 3.0 no pude encontrar una buena guía que me explicase las cosas claramente hasta que llegue a este blog. Espero que este tutorial ayude a las personas de habla hispana que no saben ingles tanto como me ayudo a mí. Para los interesados pueden acceder a la primera parte del tutorial aquí.

Thanks, Nicolás

EDIT: Parts two, three and four are up too.

© MichaelJW for Michael James Williams, 2009. | Permalink | No comments | Add to del.icio.us
Post tags: as3, Avoider Game, espanol, spanish, translation, Tutorial

Feed enhanced by Better Feed from Ozh

Have you ever written code like this:

newBullet.x = hero.gun.x;
newBullet.y = hero.gun.y;

…and found that the bullet appears in a seemingly random place compared to the hero’s gun?

Or have you ever traced tank.turret.rotation and found that it always returns zero, even when it’s clearly pointing diagonally?

Maybe you’ve compared the width of two identical objects, one obviously double the size of the other, and found that Flash thinks they are the same.

Every Flash dev I know has run across one of these and sat scratching their head — myself included!

So what’s going on?

Well, it’s all to do with addChild()…

(...)
Read the rest of Understanding Flash’s Coordinate Systems

© MichaelJW for Michael James Williams, 2009. | Permalink | 22 comments | Add to del.icio.us
Post tags: addChild, coordinate systems, coordinates, globaltolocal, localtoglobal, rotation

Feed enhanced by Better Feed from Ozh

This week, Matthew Ammann has provided two subjects for avoidergame.com.

First up is his tutorial for building a SoundObject class. This class makes it easy to manage switching and muting music and other sounds within your game.

Click here to read all about it.

Second is a new game he’s made, Robot Saga: Escape. Aside from the game itself, Matthew’s put up posts on his blog explaining the process of making it. I love reading that kind of thing!

Cheers, Matthew

© MichaelJW for Michael James Williams, 2009. | Permalink | 2 comments | Add to del.icio.us
Post tags: bgm, completed games, guests, MatthewAmmann, music, sound, SoundObject, Tutorial

Feed enhanced by Better Feed from Ozh

Your API fails when you focus on making it simple to use the second time, rather than the first.

I’ve been getting emails asking for help with implementing various APIs. Mochi and Facebook are the most requested, unsurprisingly.

One issue that keeps coming up regards both the MochiAds preloader and the Mochi leaderboards widget. By default, each of these run play() on their container window when they’re finished; if they’ve been added directly to the stage this can lead to some very strange behaviour.

It’s not a difficult issue to solve; you can simply override the default play() call with an empty function. This solution is in the DevDocs too — and yet, the question keeps appearing over and over again.

(...)
Read the rest of Why Your API Fails

© MichaelJW for Michael James Williams, 2009. | Permalink | 7 comments | Add to del.icio.us
Post tags: api, documentation, instructions, manual, RTFM

Feed enhanced by Better Feed from Ozh

I had a nice month off, but I’m back now. In my absence, a few awesome readers provided some guest posts over on avoidergame.com! Here’s a round-up…

First up is Bram Van Damme’s game, Wesley (with code based on the avoider game tutorial). It’s about a man trying to protect his pizza from rhinos using cola. Same old story. You can read more about it here, or just click here to go play it.

Next, a tutorial by DanielSidhion on a feature that’s been demanded for a long time: mouse follow.

(...)
Read the rest of Avoider Game: Two Tutorials, One Discussion (and a New Game!)

© MichaelJW for Michael James Williams, 2009. | Permalink | One comment | Add to del.icio.us
Post tags: Avoider Game, avoidergame.com, BramVanDamme, completed games, DanielSidhion, Guest Posts, mouse follow, nested loops, rescue86k, Tutorial

Feed enhanced by Better Feed from Ozh

Would you rather have more freedom of movement or shooting?

This is the complement to Move with the Mouse, Aim with the Keyboard, not surprisingly, which in turn is part of my mini-series on creating a shoot-’em-up. It’ll probably be easier to follow this if you’ve read the rest of the series already, but if you want to jump right in here and try anyway, you can download all the files you need here.

(...)
Read the rest of Move with the Keyboard, Aim with the Mouse

© MichaelJW for Michael James Williams, 2009. | Permalink | 16 comments | Add to del.icio.us
Post tags: Avoider Game, beginner, bullets, flash, mouse movement, MouseEvent, pythagorean distance, pythagorus, shmup, shoot-'em-up, Tutorial

Feed enhanced by Better Feed from Ozh

In Handling Basic Animation with a Divided Timeline we added animation states to a game’s characters by splitting each of their timelines up.

Now let’s take a look at the second method for handling animation in Flash games: using one MovieClip for each animation state.

If you didn’t follow the divided timeline tutorial, I recommend reading through it to get some idea of what that method involves. That goes double if you’re a little unclear on how to deal with animation in the first place; I’ll just skim over those basics in this post.

Just as in the last tutorial, I’ll start from a game that has no animation — so if you’ve already added animation using a divided timeline, you might want to revert to an earlier version of your FLA for this. The game I’m going to use is (as usual) the one from my AS3 avoider game tutorial, and you can download all the files I’ll be using from this link.

Here’s what it’ll look like when we’re done:

(...)
Read the rest of Handling Basic Animation with State MovieClips

© MichaelJW for Michael James Williams, 2009. | Permalink | 8 comments | Add to del.icio.us
Post tags: animation, as3, Avoider Game, beginner, divided timeline, flash, state movie clips, Tutorial

Feed enhanced by Better Feed from Ozh

Back in February I wrote Part 7 of my avoider game tutorial, which introduced keyboard control. I made a pretty big mistake without realising, accidentally allowing the player’s avatar to move outside the screen and thus avoid all of the enemies with no effort at all.

Once this was pointed out I figured it was no big deal; I could add it in as a “challenge” with a few hints, and let readers figure it out themselves. Maybe later I could write another tutorial explaining how to correct this.

This was another big mistake

(...)
Read the rest of Avoider Game: Boundaries, Diagonal Movement and a Forum

© MichaelJW for Michael James Williams, 2009. | Permalink | 5 comments | Add to del.icio.us
Post tags: Avoider Game, boundaries, diagonal movement, forum, frozenhaddock, rasmuswriedtlarsen

Feed enhanced by Better Feed from Ozh

This is a follow-up post to How to Use the Flash IDE as a Level Editor. If you haven’t read that yet, check it out first!

Now that our code can detect the layout of symbols we’ve positioned using the IDE, we can separate levels’ layout from their appearance.

Why bother? Here’s a few reasons:

• We’ve designed level layouts, but not the artwork to go with them.
• There may be different people handling the art and the level design.
• We might want to keep the same game but alter the appearance for different websites

Plus, once we’ve put the work in, other benefits will appear; I’ll show you some of these in this post.

First, let’s look at using this to experiment with different “themes”.

(...)
Read the rest of Separating a Level’s Layout from its Appearance

© MichaelJW for Michael James Williams, 2009. | Permalink | 5 comments | Add to del.icio.us
Post tags: flash, flash cs3, IDE, intermediate, layout, level design, level editor, oop, themes

Feed enhanced by Better Feed from Ozh