Clients Login
Search tips and advanced search
Lets Socialize
Hybrid Mindset on Twitter  Hybrid Mindset on LinkedIn  Hybrid Mindset on Facebook  Hybrid Mindset RSS Feed 
Unlock The Possibilities, Call 602.456.0433
Blog Page Heading
Featured Blog

My PushButton Engine Experience Week 3...7

Serialization, Serialization...

Posted Date: 2010-08-24   Posted Time: 01:24:59
Print Blog PostPrint  Tweet Blog PostTweet This Comment On Blog PostComment 

Blog Posts

View All

How to Create Isometric Assets and Box2D Collision Shapes in Flash IDE

Created: Friday, June 18, 2010 @ 04:40 PM  

This is a quick overview of how to get assets perfectly aligned on their origin into your Isometric Scenes in the PushButton Engine and build form fitting collision shapes for them.

Open your isometric Image in the Flash IDE

Import your asset into the flash IDE and position it on the stage. Select it, go to the top menu and click Modify -> Convert to Symbol. Name it and choose MovieClip from the drop down. Jump into the new movie clip and position the image to where you would like to origin to lye. The origin position of your movie clip will be the 0,0 cordinate of your Isometric Object when imported into the PushButton engine.

Draw the collision shape around your asset

Now that you have your isometric image positioned, use the pen tool and draw points arrow the images to define the form fitting collision shape. Once you have closed the shape take the paint bucket and fill it with a color. Select the whole shape and do the same thing as you did in the previous step and "Convert to Symbol". Once you have created these movie clips they will appear in your library bin. For the vector shape that you just drew you want to right click on the asset in the library and go to "Properties".

Define your vector collision shape settings for export

For the vector shapes in your library change the base class of your symbol to flash.display.Sprite, and give it a class name. You can leave the image assets set to flash.display.MovieClip. The class name will be the name that you pass in your call to createPolygonFromLibrary() using the IsoBox2DSpatialComponent. Make sure Export for ActionScript and Export in frame 1 are checked. Click ok and you may see a popup saying something like, "A definition for this class can not be found in the classpath". Just hit "OK".

**Key Point - When you want to export a MC or Bitmap from your library into the exported swf make sure you right click on it in the Library panel in Flash and export it for actionscript. Bitmap Images should always extend BitmapData class and have Compression (Photo JPEG) with smoothing turned on. 

The resulting swf file can then be imported into your project and embedded to reference the building asset and building collision shape you just created. To import just a symbol from an embedded swf use the symbol key in your embed tag as such: 

[Embed(source="assets/swfs/Building.swf", symbol="buildingShape")]
public var buildingCollisionShape : Class;

The symbol name corresponds to the class name you set back in the flash IDE. You can register this embedded asset with the ResourceManager in PBE as well, but thats a topic for another post. A good resource on this topic is the PBE doc.

Collisions shapes shown with box2d debug drawer

This shows you the collision shape that I created in the flash IDE applied to the isometric building in my PBE iso scene.

 Twitter Feed