The demo used BitmapData along with the “difference” blendmode to extract the edges from the webcam feed. Using BitmapData’s hitTest method, I was able to check whether my sprite is hitting an edge. This was a pretty quick and simple demo (1hr and 147 lines of code! Woot!), so that I could actually see this thing in action. “Line Rider” anyone?

Press down, drag, and release when your doodle is done. Try to draw the 4 shapes and test out its accuracy.

When you release the mouse, the shape it detects should light up, if it doesn’t recognize it then none of the 4 shapes should light up. What I like about this method is that you don’t need to “close” the shapes you draw. You can draw a spiral and it should detect that it’s a circle.

Compares the constituent colors of the display object with the colors of its background, and subtracts the darker of the values of the two constituent colors from the lighter value. This setting is commonly used for more vibrant colors.

For example, if the display object has a pixel with an RGB value of 0xFFCC33, and the background pixel has an RGB value of 0xDDF800, the resulting RGB value for the displayed pixel is 0×222C33 (because 0xFF – 0xDD = 0×22, 0xF8 – 0xCC = 0×2C, and 0×33 – 0×00 = 0×33).

So as an example, let’s say I have two Sprites, sprite “A” & sprite “B”:

If I was to set sprite B’s blendMode property to BlendMode.DIFFERENCE and place it on top of sprite A, I would end up with something like this:

So why is this useful?

Other than for creating cool visuals, we can use this feature to detect edges within any display object. So let’s pretend I used a second instance of sprite A in place of sprite B and went through the same steps, I would pretty much end up with a black box since there is no difference in pixels between the two sprites. But if I was to move that second instance of sprite A 1 pixel down and 1 pixel right, I would end up with something like this:

Notice how only the edges of our star symbol is visible, making everything else (close to) black. Because of the gradient background we used in our sprites, there is a difference between the pixel values in the black areas when we moved our second sprite to be slightly unaligned with the first. The difference isn’t visible, but it is there. To solve this problem we can use BitmapData to “flatten” these two sprites and using the threshold() method, we can turn any pixels that have a value close to black into any color we choose, including pure black (0×000000).

Okay…now what?

Since blendMode is a property of DisplayObject, we can use it with any objects that inherit from it, including Video:

This example uses 2 video objects in place of the 2 sprites we used in the earlier examples, we could probably increase performance by taking “snapshots” of the video and doing the same steps using 2 bitmaps instead of 2 Video instances, but I decided to keep it simple.

Using this info, we can then interact with edges extracted from the webcam to do some real-time edge detection, a cool webcam game perhaps? Or catching some snowflakes*? but I’ll save that for another post.

Over & out.

*Grant’s example was created in Flash 8(as2), which might have used a method similar to what I mentioned here, but I’m not completely sure.

While developing the game was loads of fun, there were a couple challenges that we had to overcome in order to get this game off the ground…(OH SNAP! See what I did there? off the ground? traveling? airplane? no?…okay)

After being presented with the idea, the first thing that came to mind was how to manage the HUGE map the player had to travel around in. I’m talkin’ loading and moving a 6400×1600 bitmap without sacrificing image quality or performance.

Many tests later, we decided that the best way to solve the filesize issue was to seperate the map into 800×600 tiles, keeping low resolution tiles embedded in the swf file so the player can start the game as soon as possible. While the player travels, the high resolution tiles are being loaded in the background, replacing the low res images one by one as they finish loading. Not only does this reduce the total filesize of the main swf, but it also lets the player continue without having to wait for the giant map to load.

As for performance, most of us know that moving something as big as 6400×1600 around on screen can be choppy. To improve the animation, I used the display object’s scrollRect property. For those who aren’t familiar with this handy feature, it basically acts like a mask, displaying only a section of a display object on screen but with way better performance than a mask. Read more about it in the docs here.

So that takes care of the map, but what about the mini games?

In order to keep the games organized, each one is a separate swf file that gets loaded. This let’s me encapsulate each mini game, keeping its functionality hidden from the rest of the game. A manager had to be created in order to keep track of all the different games and is in charge of displaying a game when needed, communicating the user’s performance to the main swf, and cleaning up after a game so the game engine can be reused.

Videos…so many videos…

For the videos, we wanted to do something simple, using only basic controls to toggle between play and pause states plus a couple events that we can listen for. The FLVPlayback component, while convenient, has too many bells and whistles for our purpose and using the Video class didn’t give us the amount of control that we wanted. So I decided to go with the built-in VideoPlayer class, which is also a subclass of the Video object but a lot simpler than the FLVPlayback component.

#$%@#!!!

While this wasn’t an issue, it was something that was completely new to me and thought I’d share the experience. Since this is a children’s game after all, we needed to make sure that text inputs filter out “no-no” words. Luckily, there’s only one text input in the entire game (*high-five!). Instead of clearing the field when a bad word is detected, I chose to just disable the “go” button. This makes it less frustrating for children with names like “Dickson”.

Now, how am I suppose to detect inappropriate words? Should I just type out every word I could think of?….Interwebz to the rescue!!! Check out the list. Now the only thing I needed to do was copy the entire list and write a quick script to format it the way I want, instant digital earmuffs.

So in the end, I would have to say that this project was probably one of the biggest I had the opportunity to code on my own (yes, I’m a big boy now). I had a chance to take my time, lay out an architecture, and execute smoothly and with ease. While there were some speed bumps along the way, mostly flash “gotchas”, there was definitely a lot to learn from this project.

And I’m not quite sure why I did it, but I added a rollover effect on the dots as well…go ahead, put your mouse over those dots, you know you want to!

Looking back at this, and some recent BitmapData work, I’m getting a bit excited and starting to crave some more experimental work, I’ve already got a few ideas in mind! Superfluous rollover effects and all!

-Carlo

So you’re a master penguin-flinger and finished all the levels? Not so fast! There’s more levels to conquer ranging from beginner levels all the way up to expert. You can also grab the lite version (iTunes link) to test the frozen waters and make sure your fingers can handle the pure penguin awesomeness.

Zinc Roe also launched a brand new game for the iPhone/iPod touch featuring the Zimmer Twins!

Stack Master (iTunes link for Canada, iTunes link everywhere else) gives you control of the magical tray and your task is to stack and balance random items as high as you can. Simple right? It’s harder than it sounds! You gotta watch out for energy-draining swirls and 13’s sneak attacks! Go check it out for yourself!

You’ve flung some penguins and built the tallest tower, but still want more? Check out some other games in the app store from Zinc Roe!

over and out.

Here are the topics I covered:

• Camera.activityLevel – A brief explanation on using the Camera object’s activityLevel property
• Bitmap.getPixel() – Using the BitmapData class to check for motion
• Augmented Reality & Marker Tracking – What it is and how it can be used in different applications.
• Moving MovieClips with your hand (or other limbs) using the webcam – An example of how you can use the motion detection stuff to move a MovieClip around the screen using only your hands and a webcam.

So check out my post over at the Metal Fish Eggs blog and let me know what you think!

Arctic Shuffle is a fun little arcade game. Start with ice curling, then mix in some mini-golf, exploding penguins and cloning devices and you have an idea of what the game play is all about.

To play, you just aim and fire your penguin pal trying to land him on a target. Look out for obstacles that block, bounce, drown and destroy your precious penguin. The initial release has 52 levels and look out for new levels in future updates. Arctic Shuffle flinging good fun!

You’ll find screenshots on our site…
http://www.zincroe.com/portfolio/show/arctic_shuffle

And video of the game play on vimeo…
http://vimeo.com/3443065

Arctic Shuffle is available for $2.99 on the App Store…
http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=%20306757969&mt=8

We’re a small interactive studio based in Toronto. We have been building casual games for a while, but this is our first effort for the iPhone so we’re keen to gather as much feedback as we can.

Arctic Shuffle screenshots for the iPhone/iPod Touch

http://www.psyked.co.uk/adobe/flash/superscript-and-subscript-with-actionscript.htm

http://blog.ggshow.com/index.php/reference/2007/04/19/how_to_use_subscript_aamp_superscript_in

Pretty neat, eh?

-Carlo

The great thing about this article is it shows you the different phases of IA and the details of what should be done during each phase. This not only gives you a check list, but also provides you with ammunition when a client asks why they are being billed for the time.