Archive for May, 2007

Thursday, May 31st, 2007

Photo Sharing and Video Hosting at PhotobucketBe sure to check out the APE physics engine for flash

The library contains particles to assign to movieclips that appy the physics.  These base objects can be extended in many ways to create complexity from simplicity.

APE (Actionscript Physics Engine) is an AS3 open source 2D physics engine for use in Flash and Flex. APE is written and maintained by Alec Cove.

CircleParticles
-fixed or non-fixed
-variable mass, elasticity, and surface friction

RectangleParticles
-rotatable
-fixed or non-fixed
-variable mass, elasticity, and surface friction
-corner particles that can be attached to other particles with SpringConstraints

WheelParticles
-traction and angular velocity
-fixed or non-fixed
-variable mass, elasticity, and surface friction
-edge particles that can be attached to other particles with SpringConstraints

SpringConstraints
-stiffness
-collidable or non-collidible
-collidable constraints have variable width and scale

Licensing
-non restrictive LGPL

 [demo]

Hopefully we will have a tutorial soon here using APE and some other excellent libraries released recently with the onslaught of AS3 code and kits that will be fluid in their frequency. Another coming physics library is from polygonal labs called the Motor Engine.

Wednesday, May 30th, 2007

Photo Sharing and Video Hosting at PhotobucketThe Algorithmist posted an AS3 character rigging class library. The kit includes some really specific classes for building characters and is quite well done.

The library includes all you need to rig up characters in flash and includes the source, samples for flex and what the hell more could you ask for?

The Algorithmist calls it the Singularity Package and it contains:

Singularity Package Contents (character rigging classes)

All rigging classes are in the Singularity package, which must be added to your path when building a new Flex project. The current package organization for the rigging classes is as follows,

Singularity.Rigs
Arm – 2-link bone chain representing right or left arm in a humanoid biped.

BaseBone – Base class encapsulating functionality common to Bones and Connectors.

Biped – Used to create and animate humaniod biped characters.

Bone – Represents a single bone with support for fast propagation of FK transformations in bone chains. The Bone class is optimized for linking bones together in chains.

Chain – Manager class for a single chain of bones.

Clavicle – 1-link connector representing right or left clavicle in a humanoid biped.

Connector – Optimized container for multiple single-bone chains with a single input and multiple terminators. Chains or additional connectors linked forward at each terminator.

  Foot – 1-link connector representing right or left foot in a humanoid biped.

  Hand – Multi-link connector representing right or left hand in a humanoid biped.

  Head – 1-link connector representing a humanoid biped head.

  IBone – Bone interface – represents all functionality a bone must implement.

  IChain – Chain interface – represents all functionality a bone chain must implement. Chains and Connectors implement IChain and are considered interchangeable when propagating FK.

Leg – 2-link bone chain representing right or left leg in a humanoid biped.

Neck – 1-link connector representing the neck of a humanoid biped.

Pelvis – Multi-link connector representing the pelvis of a humanoid biped.

SimpleSpine – 1-link connector providing the simplest representation of a humanoid biped spine. Used for very simple (but fast) game characters.

Template – Templates are used to skin (or draw bones) for segmented characters. Refer to SimpleSkinTest for examples.

When developing physics and character based animation rigging can help to really speed things along in 3d and here in this case in 2d flash.  This allows the developer/animator more freedom to work on the animation and not about redrawing.  It also helps to create characters that can be animated from the beginning rather than an afterthought which usually leads to less troublesome issues. 

The AS3 rigging classes are used for skelton rigging and skinning of 2D characters. The rigging class library is organized around the development of highly specific articulated rigs. The current focus is on humaniod bipedal characters. In a 3D animation package or game engine, a bone hierarchy would normally be represented as a tree structure. In this class library, bones and chains are organized in a structure that is easier to deconstruct and understand by OOP programmers. This structure has some performance advantages, particularly when propagating FK in a 2D rig.

The only drawback to this kit is it is not fully open source and commercial use must be approved.

The Singularity AS3 parametric curve library requires the Flash 9 player and a development environment supporting Actionscript 3. All demonstration programs were created with FlexBuilder 2. The AS 3 character rigging classes are copyrighted and licensed for personal, experimental usage. Please contact me to obtain authorization for commercial use. The download includes the entire Singularity package (which includes the parametric curve library).

Download library (.zip) here. Before running any example programs, place the Singularity package in your build path.

Tuesday, May 29th, 2007

Photo Sharing and Video Hosting at PhotobucketObligatory posting on FlashDevelop3 Alpha being released.  To people like me alpha means “old school” released.  I am ready to use it today!

Download it here

If you are not using FlashDevelop for your coding portion of your flash application, you might be missing out.  There is a reason some of the best actionscripters (ahem actioncoders) use it.

Sunday, May 20th, 2007

Didier Brun of ByteArray just keeps throwing down.  Here is another great showcase of the power of AS3 and the tools that can be built with it, strongly based on alogorithms proven in other hardcore languages. This project is a Mouse Gesture Recognition lib for AS3 (demo)

Photo Sharing and Video Hosting at Photobucket

Mouse gesturing can be used for recognition of letters, numbers or even just programmable actions by gesture.  Imagine an application that allows you to just make a gesture (even if its not a drawing program or letter recognition) that would open when you make an open gesture, or close a file with a slash gesture. I have many uses for this planned. Very inspiring stuff.

A bit on the algorithm from Didier at ByteArray, I just don’t think it can be made any more simple:

Photo Sharing and Video Hosting at Photobucket

  1. Each letter is defined by a n ‘ 8-directions gesture sequence
  2. The mouse moves are saved with the same 8-directions sensibility
  3. A Levenshtein distance is calculated from each letter to the user moves
  4. The algorithm return the best candidate (lowest levenshtein cost)

Usage

Example for the B :

gesture=new MouseGesture(stage);
gesture.addGesture("B","260123401234");
gesture.addEventListener(GestureEvent.MATCH,matchHandler);

function matchHandler(e:GestureEvent):void{
 trace (e.datas+" matched !")
}

This project is OPEN SOURCE under RPL License.
2007-05-17 v1.0 mouse_gesture_v1_0.zip

Thursday, May 17th, 2007

Darren David has posted a WPF animation kit to help bring it to Actionscript level of one line animation calls such as to packages like Tweener for Flash.  

Essentially this kit helps to take most of the quirks out of learning animation in WPF early on and making it more like Flash code animation which is a requirement for anything like games, random, visualizations that have no limitations.  I am happy to see this toolkit and more like it soon.  It may help crossover but it also provides a base level platform that allows developers to ride and make solutions in either platform with similar syntax (hrm like the Java to C# toolsets).  Good solutions are not only on one platform but this is only for WPF so far. Found via Zeh.

Wednesday, May 16th, 2007

Here is a small tutorial on scripting and its great changes in AS3 from AS2/AS1 thinking, we are focusing on mouse events currently.

The great thing about Flash9 and specifically AS3 (Actionscript3) is that it is starting to become a real programming platform and losing many of the silly hacks that is used to have. This is a good thing.

Old hacks like tellTarget are finally gone. Pixel level manipulation is possible and even faster. Real frameworks, excellent structured animation kits and even 3d engines are being built everyday. And invisible buttons are not needed anymore!

Like when people migrated from desktop to web, or VB6 to .NET, or OO to functional, we tend to try to reimplement the same solutions in new platforms even if there are better options because it worked before.

How to make movieclip buttons without invisible buttons via AS3 script…

Anything can be clickable and a button in AS3. Link a class to an object in a movie, dynamicly drawn asset or external asset and you are ready to make it a button.

Take for instance:

package draw.logic.tests
{
 import flash.display.*;
 import flash.events.*;

 public class GamePlayButton extends MovieClip
 {
  public function GamePlayButton ()
  {
   this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
  }
  function onMouseClickEvent(event:Event):void
  {
    trace("mouse clicked on me");
  }
 }
}

You will note the addition of the event to the movie clip which makes it clickable.

this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);

This again makes the movieclip clickable by listenting for the MouseEvent.CLICK event. This sample class can be linked to a movieclip for instance from the FLA library by going to Library > Properties then linking the class which would be draw.logic.tests.GamePlayButton in the above sample.

Great so we have a button now, on the MouseEvent.CLICK we are going to go to trace a message. All done right? Nope if you will notice the button does not get the linkable hand.

Make the Button Show the Mouse Cursor Hand

Well in old skool AS we might just slap an invisible button on there or make it a button type. Better yet let’s just set the this.buttonMode = true; in code which makes it a clickable button, listens to the click event, and get the hand to notify the user that it is a clickable item.

Sample script for a ‘play’ button

package draw.logic.tests
{
 import flash.display.*;
 import flash.events.*;

 public class GamePlayButton extends MovieClip
 {
  public function GamePlayButton ()
  {
   this.buttonMode = true;
   this.addEventListener(MouseEvent.CLICK, onMouseClickEvent);
  }
  function onMouseClickEvent(event:Event):void
  {
    parent.gotoAndPlay("game");
  }
 }
}

Good Architecture and Design

In the past most items could be moved to .as files but you would have this mix of people that still put onEnterFrames or button click on(release) code in the FLA itself. AS3 I think finally makes it fully possible to remove code entirely from the FLA with only stop(); scripts for different frames.

A nice way to be is to have all script in external libraries and files removing all script from the FLA if possible. The script for buttons to the script for the main document class. The FLA is essentially just needed for library movieclips and AS3 real forces this separation. That combined with its general better structure makes this a much better platform than AS2 and Flash8, stop wasting your time developing in that and get to AS3 (take a gander at the better structured libraries in this migration link).

Best part of AS3 is the new clean event model, the basis on Javascript 2 spec and the clearer separation of code and assets for flash. More on the Mouse and Event model in AS3 and Timers, Loaders and more coming soon.

Tuesday, May 15th, 2007

Photo Sharing and Video Hosting at PhotobucketI have been waiting for this.  Polygonal labs released a pretty sweet package of core game development AS3 data structures (and other rich application development) tools that are common on other languages but not so in ActionScript.  The library is extremely well written and polygonal labs focuses on speed of the stuctures.

The methodology for these libraries is right along the lines I like.  Focused on speed and performance but also readbility and speed over patterns if needed.

I have tried to provide just the bare algorithm, coupled with a minimum set of methods I think are most useful to work with. Simplicity and performance were the key guidelines for the whole package.

I am especially intruiged because I am building our core gaming libraries for blipgames and have been doing a bit of this myself but the depth of this kit is many hours ahead and very well written.

Some of the classes include very common programming structures that are missing from flash/flex libraries. These will be pretty standard to most Java/C#/C etc developers but adding this to flash is just excellent. Here’s a list of the goodies in the kit.

Multi-Dimensional Arrays

The library contains a two-dimensional and three-dimensional array. They are both implemented by a single linear array rather than nested arrays…

Queue

This is also called a FIFO structure (First In – First Out).

Stack

Also commonly know as a FILO structure (First In – Last Out)…

Tree

A node-based structure. Every tree starts from a single node, called the root node…

Binary Tree

This is just a specialized kind of tree where each node is only allowed to have up to two children, called the left and right node…

Binary Search Tree (BST) and Hash Table

Both structures store data that can be retrieved quickly by using a key….

Linked Lists

A linked list is similar to an array. The main difference is that in an array, each cell contains just the data and is accessed by an index. A linked list consists of several node objects, which in addition to storing the data, manage a reference to the next node (singly linked) or to the next and previous node (doubly linked) in the list. Think of it as a more natural approach to work with sequential data…

Heap and Priority Queue

A Heap is a special kind of binary tree in which every node is bigger than its child nodes…

Graph

A graph is a loose node-based structure…

Bit Vector 

A bit vector is some kind of array in which you can store boolean values (true/false – 1/0) as close as possible without wasting memory.

Polygonal Labs has a tree sample up that has many possible usages from visualization of game states to building node based editors to anything really in game development.   I could easily see a mix of this and scene creation in papervision via a flash application/IDE.

I have to say I am excited to base my libraries on these kits and work to improve them as I can. Get on over there right now and check it out. Also, its under the MIT license so this instantly makes polygonal labs famous. Thanks Michael!

Sunday, May 13th, 2007

Mousewheel usage has been increasing now that almost everyone has a mouse with a wheel on it. Flash and specifically AS3 has capabilities to get lots of information about the mouse wheel movement and mouse movements in general.

In AS3 you wire up events like this:

stage.addEventListener(Event.RESIZE, onResizeEvent);

For mouse events you wire them up using the Mouse pseudo static enumeration MouseEvent:

stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelEvent);

Inside of our flash class that we are wiring up events for we need to put the event function that we pass as an argument.

function onMouseWheelEvent(event:Event):void
{
trace("onMouseWheelEvent!");
trace(event.delta);
}

As you can see the method passes the object in the event. Here we are getting the delta property of the object returned for the mousewheel event. You can get any of these properties that return (you can see this if you trace out the object).

 //[MouseEvent type="mouseWheel" bubbles=true cancelable=false eventPhase=2 localX=261 localY=241 stageX=261 stageY=241 relatedObject=null ctrlKey=false altKey=false shiftKey=false delta=-6]

[
MouseEvent
type="mouseWheel"
bubbles=true
cancelable=false
eventPhase=2
localX=261
localY=241
stageX=261
stageY=241
relatedObject=null
ctrlKey=false
altKey=false
shiftKey=false
delta=-6
]

The delta property is the amount and direction that the mouse wheel was moved up or down. If the delta is a positive integer then the mouse wheel was moved up, if negative it was moved down.

On my computer I have scrolling set to pages so it sets to 6 or -6 on all movements. Others that have different mouse customizations might only move 1 or 2 in either direction, mine moves six. This is important to note for game development or browsing with zoomable applications. Not all mousewheels are the same.

You can also see that there is a ctrlKey property and an altKey and shiftKey property to check if the user also has these down. This could be beneficial for navigation like in a 3d program or map where if you hold down shift or ctrl the application does different actions with the mouse wheel.

The mouse positions are also passed so you could check if what to scroll specifically or zoom. These mouse positional properties are available in other mouse events as well, you can always trace(event) to the passed event to see what it contains. You can also attach these events inside individual classes so that they only reacte to their own mouse wheel events rather than on the main stage.

SAMPLE MouseWheel script test file (make a new file and set this to the document class)

package
{
 import flash.display.*;
 import flash.events.*;
 import flash.ui.*;
  public class MouseWheelMain extends MovieClip
  {
   public function MouseWheelMain()
   {
    stage.addEventListener(MouseEvent.MOUSE_WHEEL,   onMouseWheelEvent);
    }

    function onMouseWheelEvent(event:Event):void
    {
     trace("onMouseWheelEvent");
     trace(event);
     trace(event.delta); // amount mouse wheel moved
     // could do something like
     //movieToMove.x += event.delta/6; // or any property like scaleX, scaleY, y, depth etc.
    }
   }
 }

More on Mouse Events in AS3/Flash9/Flex here

Friday, May 11th, 2007

Photo Sharing and Video Hosting at PhotobucketSun has launched JavaFX using JavaFX Script which is a RIA kit for Java.  I will have to look further into this for a few specifics like 3d support but there is another great Java library for effects called processing.  But an RIA tool using Java applets may seem mid-ninties-ish but Java applets have been having some success online including many 3d viewers, games like runescape, mini apps, financial tools and ftp toolkits on their limited desktop and web usage. 

Market Direction?

This seems to confirm that the market is currently headed towards RIA applications with the three big development companies introducing new toolkits for RIA and interactive web apps (Microsoft Silverlight, Flash9/AS3, now Sun JavaFX).

This RIA kit is Open (Source) for Business

There is an open source community for this development at openjfx.org.  This could be one of the first results of the open sourcing of Java recently.

Additional Competition Possibly

I like this because its open source and because it will put pressure on the competition of Adobe vs. Microsoft possibly.  Adobe will be launching Flashlite 3 soon with FLV video support which is quite a race on the mobile side.  Most importantly, Java has a full consistent package now which may help its adoption since it spans mobile, tv, web, desktop. Historically Java kits have been all over the place.  Adobe may eventually be pressured into opening up Flash at some point if this gains traction and advances quickly.  Or this could be a dying flare thrown up in Java’s demise.  Personally now that it is open, I think that Java has only just started and gaining a second wind.

Duke is open for business. via Shaver as silly season continues

Sunday, May 6th, 2007

We recently had a tutorial on making isometric assets for 3dsmax but this is the same tutorial for Maya. 

Orthographic cameras are again an isometric rendering that has no correct perspective, all edges are parallel, there is no vanishing point.  This is great for gaming or maps where you need the items at the bottom of the screen to be the same size as the items in the distance.

Many popular RTS or strategy games use this technique.  What it does is make it possible to create assets that can be exported and placed all over the game without the need to render at different distances.

Here’s the HOWTO to make Maya orthographic views for isometric gaming assets:

  1. Open your file in Maya (here is a great free one from turboquid.com). You will usually be in persp or perspective view.  If not go to Panels > Perspective > persp.
    Photo Sharing and Video Hosting at Photobucket
  2. Create a new camera by going to Create > Cameras > Create Camera and Aim (this creates a target camera rather than a free camera)
  3. Position the camera (not the camera aim) by using the move tool on the camera to get it at a 45 degree angle at the corner). Then make sure the camera aim is at the base of the object (if you places it at 0,0,0 then it should be all set).
  4. Select the Camera.
  5. Now go to Panels > Cameras > View through Selected
  6. You are now viewing through the camera. Photo Sharing and Video Hosting at Photobucket
  7. Usually you have to adjust it a bit here so get it so that the camera is pointed at the corner of the building with the move tools on the selected camera.  Since this is a camera with aim you only have to move the camera and not worry about rotation and aim.  I have my aim set to the bottom of the building.
  8. After you get the view right (you can manually set the angle at 45 degrees up and to the side or aim it manually) jump into the camera by selecting it with the list, Photo Sharing and Video Hosting at Photobucket then clicking Panels > View though Selected.
  9. To make it orthographic in the properties select the Orthographic panel, then check “Orthographic”.
    Photo Sharing and Video Hosting at Photobucket
  10. At this point it will proabably zoom in so you need to move the view by zooming in our out to make it fit. 
    Photo Sharing and Video Hosting at Photobucket
  11. Now your model is in orthographic or isometric view so you can export it out to your game. 
    Photo Sharing and Video Hosting at Photobucket
  12. The ideal solution is to create a maya scene and import all your buildings, cars, or other game assets in individually and then export them individually with the same light and direction/angle so you can piece it together in the game and take advantage of reuse and loading only areas being shown.Photo Sharing and Video Hosting at Photobucket