Tic-Tac-Toe Whaddyaknow is the first eLearning product offered by Novatek.

We are exploring the notion that we could sell eLearning tools for use by other developers, so we are giving away the first one to the community. Created in Flash with the Engage SDK, instances are authored using Articulate Engage, a commercial template-driven eLearning development tool we use quite often.

I hope that once learners experience a simple game like this the response will drive instructional designers to come back to buy more.

Got a nice mention on Articulate‘s Word Of Mouth blog, and the downloads have begun!

We shall see.

Adding objects to a scene is very similar to the process for adding a character. According to the documentation the only difference is that objects are static, and they require less memory resources from the engine to exist on the stage.

You can use any method to create the graphics that make up an object. I used a prop in Poser and set it to an angle that I hoped would fit in my layout. You can create multiple angles using the same method as with characters. Keep the pixel dimensions of the object bitmap as small as possible – I keep a high-res version and make smaller copies from it. Make sure to set the export properties so that ActionScript can find it:

You can store multiple objects in a single fla/swf. I approach them as any shared library – you can organize libraries by project, theme or other principle that meets your project’s requirements. They don’t have to be placed on the stage as I’ve done either.

Create a definition file for your library to enable ffilmation to utilize it. The name should be the same as the swf name, only with an .xml extension. Here is a sample:

<?xml version="1.0" encoding="utf-8" ?>
<definitions>
<media src="../media/medicalProps.swf"/>
 <objectDefinition name="LabTube">

 <displayModel>
 <sprite angle="0" src="LabTube"/>
 </displayModel>

 <collisionModel>
 <box width="116" depth="70" height="200"/>
 </collisionModel>

 <shadowModel>
 <shadow type="sprite"/>
 </shadowModel>

 </objectDefinition>

</definitions>

Then you must add the library swf and object definition to your scene definition file.

In the head section add this:

<definitions src="../definitions/medicalProps.xml"/>

In the body section:

<object id="labTube" definition="LabTube" x="422" y="224" z="0" orientation="0"/>

You will probably need to experiment with a few details of your object: the location of the origin in the MovieClip and the collision area shape and dimensions. If you see light between the bottom-most parts of your object and/or weird Z-sorting, the origin is probably too high. I set mine near the bottom and center. I start the collision shape and dimensions that match as closely to my bitmap pixel dimensions and then test with a character in the game.

If you use png format when importing bitmaps your game will look better in low quality, since the quality setting will not effect their display, unlike shapes. Compare the gurney to the vacuum chamber in the screenshot. Also notice the built-in support for transparency in the object and the shadows, and Z-sorting.

I found a few posts that explained the trick to creating isometric renderings using Poser. A trick is necessary because Isometric cameras in Poser are orthogonal only. The trick is to tilt the model instead of the camera – duh. But yes, I did search for this “trick”.

It is a good idea to create a reference object in Poser to “lock down” the angles to match your game’s POV, and use the Front Camera. I created a box prop and set the angles that worked with ffilmation: X:45, YU:0, Z:30. I made the box 2% yScale so that it would be used as a tile.

For walking characters it is recommended that the reference tile be sized to match the game tile. This can be confirmed by superimposing a render of the tile from poser over a default game screenshot with a grid visible. The character footprint should be contained within the tile boundary like a chess piece.

When you import third-party props they will appear in a default angle.

The Rotation settings that worked for the character and the reference tile didn’t work for the props.

I had to manually adjust the rotation settings of all three axis to get desired angles. This is not as simple as could be because Poser limits rotation transformations to cardinal planes, and our model is oblique to at least 2 of them.

I used the reference tile to confirm that I was close to the correct compound angles by intersecting the props in various places.

Once the prop was close enough I exported a .png, which preserves alpha transparency in Flash.

If I need another angle of the prop, another manual setup is required because the other iso camera angles are generally useless.

I use a copy of the same prop. I recommend doing a final render with all prop angles instances in the frame together. This keeps the lighting angle consistent, and I can cut and stack them in Fireworks to preserve their coordinate registration.

The developer of ffilmation created an AIR app that can be used to create scenes and levels. It will read, edit and write new definition files so that components can be created by a team of asset developers and integrated without writing any additional code. This includes putting in jump-points to teleport the character to other levels, lighting, materials, layout, z-sorting, geometry and some properties.

Scenes can be developed and changed over time by an external process that writes changes to the XML files.

The project folder structure must adhere to the names and relative locations used in the demo project to enable use of the editor.

The editor

The editor in geometry mode with Flash Player displaying the same scene.