davidochmann.de

Consoles, Smartphones, Tablets. Motion tracking is everywhere. Here is a simple way to utilise camera motion tracking in your Flash Projects.

 

example:

 

A quick rundown on how the motion tracking demo works.

1. Take pictures.

Use the Camera and Video Object to get a steady stream of images. Write each image into BitmapData Object 1.

2. Create a time-delayed copy of each picture.

One frame (or TimerEvent) later copy BitmapData Object 1 into a second BitmapData Object (BitmapData Object 2).

3. Compare the two images.

Use BlendMode.DIFFERENCE to merge the two images. The originated image displays the differing parts between image one and two. Copy it into BitmapData Object 3. If you use the BitmapData function “getColorBoundsRect” you can now return a Rectangle Object. Whenever the with or height of this Object is bigger than 0 motion occurred.

In the Demo, a ColorMatrixFilter and a BlurFilter help to get rid of unimportant motion in the image (slight color changes or background motion). You can use a Sprite container with two added Bitmaps to store the first two BitmapData Objects. This gives you the option to apply filters to the container without having to reapply them every frame.

 

The example can also be used to create a simple spy cam, using Adobe Air to write BitmapData Object 3 to the File System. This application is also included in the download below.

 

You can download both motion detection demos, including their source files, from the following URL:

download – motion detector demos

 

I decided to release some of my games as free open source downloads, using the MIT license.
The following URL provides you with three games: “Meteornaut”, “Crash Lines” and “Decypher Me”.

download – meteornaut_decypherme_crashlines.zip

While “Meteornaut” and “Crash Lines” are fairly complete games, “Decypher Me” is more of a proof of concept, with one level and no title screen or menus.

A few words about each game:

Meteornaut:
Meteornaut is a variant of the classic Asteroids game. It differentiates itself by implementing mouse based controls and a combo system.

To publish the game, use the Flex 4.1 compiler (try FDT, Flash Develop or Flash Builder) using Flash Player 10. The Main Class is: “src/de/davidochmann/games/meteornaut/Meteornaut.as”.

Crash Lines:
Crash Lines is two player Tron Lightcycle Game. Race against a friend to see who can stay alive the longest.

Use the “source/crashlines.fla” to compile the game.

Decypher Me:
Decipher cryptic Texts with “Decypher Me”. The game gives you hints to where a certain letter is used within the text. After that it’s up to your combination abilities to solve the riddle.

Use the “source/DecypherMe.fla” to compile the game.

Follow me in the creation of my latest game METEORNAUT, a simple variant of the all time classic Asteroids.

This post documents the development milestones of the game, beginning with the first beta to the release of version 1.0.

Play the current version:

The current milestones:

v0.01 – davidochmann.de/swf/assets/projects/games/btshooter_v0_01/

Version 0.01 is an early mock-up to test the core framework, performance and animation. The game freezes as soon as a meteor hits the ship and as for now the level has no clear end.

v0.10 – davidochmann.de/swf/assets/projects/games/btshooter_v0_10/

The second version deviates a little from the asteroids concept. I implemented a new gamplay mechanic that rewarded players for destroying meteors of the same size (circled) by multiplying the score (pending score x destroyed meteors of the same size within two seconds).

v0.12 – davidochmann.de/swf/assets/projects/games/btshooter_v0_12/

This version has a new combo mechanic. The size of the meteors is now irrelevant for increasing the multiplier. Gaining a 10x and 20x combo will give you a power up (two, than three missles per shot).

Also new in this version:

Locked Levels, reduced user interface, new animations.

v0.13 – davidochmann.de/swf/assets/projects/games/btshooter_v0_13/

More of a re refinement than anything else this version features, a new name, new graphics, new levels, a title screen, screen transitions, button animations and a few gameplay tweaks.

Powerups are now given after multiplier 10 and 100 instead of 10 and 20.
The ship is no longer able to fly through one end of a level to end up on the opposite side.

v0.14 – davidochmann.de/swf/assets/projects/games/btshooter_v0_14/

Version 0.14 adds a stats screen to the game that displays your current level-completion time, the highest level combo and your high score. It also fixes a bug that used to show a wrong max-score in certain levels (e.g. 15).

I also updated the graphics a little, by overhauling the title screen and improving buttons and the background (with dirt :D).

Release.
After version 0.14 I released the game on kongregate.com and newground.com.
You can check it out by clicking one of the the following URLs:

http://www.kongregate.com/games/mrwut4/meteornaut

http://www.newgrounds.com/portal/view/561058

A few weeks ago I had the idea of creating a multiplayer Flash game, using the new peer to peer connection capabilities of FlashPlayer 10. Here is the result.

Start the game:

Building a multiplayer game comes with it’s own set of challenges. The first one being the initial creation of a p2p connection, which basically comes down to four steps:

 

• Connecting to Adobes Cirrus server (formerly Stratus) using a personalised Cirrus server address and a developer key. For more info click here: http://labs.adobe.com/technologies/cirrus/
• Receiving a peer ID from the Cirrus Server.
• Sending that peer ID to the second Player.
• Sending the peer ID from the second Player to the Cirrus server.

 

I decided to simplify that process by using SWFAddress, creating a custom URL + peer ID that could be send to the second player. This prevented him from being forced to re-enter the peer ID into his client. After that you have to find a convenient way of sending the game URL to the second Player.

In a second step I would have tried to add a social media component to the Game. For example: Using a Twitter login to start and immediately publish a game request.

Since debugging and testing the game is somewhat of a hassle, I decided to stop development on it. You can however download the complete source code from here:

DOWNLOAD – P2PShooter (204 KB)

Before you start editing the code, be sure to get a Cirrus developer key and connection URL first (see step 1).

Insert your developer key and server address into the static constants in MPShooter.as.

To compile the Game use the MPShooter.as in the package de.davidochmann.games.mpshooter (I used FDT, but Flash Develop should work fine to). Using FlashPlayer 10 as target player is required.

Please be aware that the game in its current state is a proof of concept. There aren’t a whole lot of code comments, and some approaches aren’t very good (e.g. try using registerClassAlias instead of relying on the anonymous Data object).

DoSite is a simple AS3 framework that helps you to create Flash microsites.

DOWNLOAD – DoSite v0.61 (4,2 MB)

The Library simplifies a lot of chores that occur during Flash-Website development, such as: sub-site creation, site transitions, content handling or external library connection (e.g. SWFAddress or Analytics).

Click on the image to see DoSite in action:

The basic idea:
DoSite allows you to distribute your project using independent swfs for each part of the website. The interplay between swf files being handled trough the framework.

(You can however use a single swf to carry all of your code using the embed method. See example “05_single_swf”.)

How it works:
In general DoSite uses two xml files to build the content of the website. The first defines the paths to the content of the website (the swf, jpg, xml files etc.), the second the composition (position, url, names etc.).

The framework than combines the content according to the “id” property of each xml tag.
The visual representation of the content is held in the “DoSite.container():Sprite” that can be added to the stage after including the content.

Every website element is either a fixed content (always visible) or a sub-site.
At runtime only one sub-site is displayed at once (!), although this might change in future releases.

Please take a look at the examples to get a closer look at how DoSite works.

The examples:

01 basic: A simple DoSite setup This example shows you the basic structure of both xml files as well as simple sub-site navigation with DoSite.

02 external xml: How to pull the xml information out of the fla and into separate files.

03 animation: A simple sub-site animation example using TweenMax.

04 swf address: How to connect your website to SwfAddress for sub-site browser navigation.

05 without xml: How to build a DoSite project without using xml.

06 single swf: A full-fledged DoSite example using the embed tag to bundle the website content into a single swf.

Example 01 to 04 use the same layout and content to exemplify the functions of DoSite.
Example 05 however was created as a school project. The website had to run locally, which forced me to dispense external swf or xml files to avoid security restrictions.

I will extend this website with examples and documentations as DoSite evolves.

Have fun with DoSite,

David

Changelog:
v0.61

Added a Data class that holds every framework property. It replaces the content and composition classes in the “xmlparser” package.

It is no longer necessary to assign the content or composition xml to the framework. All properties can now be set via the new Data class or directly with DoSite.compositon() or DoSite.content() after initializing DoSite.

DoSite can now be initialized without an open SubSite. This is important for utilizing a See-and-Point navigation structure.

Removed a bug that caused the content to align to the wrong position when the container align is set to „tl“.

Renamed the addSubsite function to addSubsiteContainer.

Renamed the addFixed function to addFixedContainer.

Various code optimizations.