Multiline WordWrap DynamicText3D in FIVe3D

June 23rd, 2009 by Devin Reimer

FIVe3D Word Wrap Screenshot

For those of you that have never heard of FIVe3D, it is a lightweight vector based 3D library now written in AS3. You can check it out for yourself, http://five3d.mathieu-badimon.com.

In working on a small project using FIVe3D I discovered that while the 3D text part of the library is awesome it did not support multiline word wrap. I had seen examples of people using muliple DynamicText3D objects to fake text being multiline, but I wanted the text to be able to support dynamically word wrapping.

So I created a class called DynamicText3DMultiline which works the exact same way as the normal DynamicText3D class, but adds multiline wordwrap functionality. To use wordwrapping, simply set the width of the object and then set wordwrap equal to true.

var dynText:DynamicText3DMultiline;
dynText = new DynamicText3DMultiline(HelveticaMedium);
dynText.width = 200;
dynText.size = 14;
dynText.wordWrap = true;

There is next to no overhead in using this class instead of the DynamicText3D class when you don’t need the word wrapping feature, so as in my example this is now my standard text rendering class. Also it does have the added benefit have having a textHeight function.

To play the demo click here.

To get the demo source and the new DynamicText3DMultiline class click here.

Source Requirements: You will need both FIVe3D 2.1.2 and TweenMax to compile the demo source.

Actionscript Object Class Generator using Flex

June 1st, 2009 by Devin Reimer

Actionscript Object Class Creator Shot

I have been working with Flex for a little while now mostly working on little experiments. So I decided it was time to create something useful. The idea for this project came to me while working on a large very object-oriented project.

All standard object class are similar in layout, but different enough that you really can’t copy and paste them. After creating tons of these classes by hand I knew there must be an easier way. At that moment ‘Actionscript Object Class Generator’ was born. This web-based application lets the user fill in a few fields and options like package path, class name, variables, variable types and also specify if getters and/or setters are needed. Once complete it will auto generate the properly formatted object class code which you then can paste directly into Actionscript file.

Check it out here.

Please leave me some feedback. Let me know if you like it, what features should be added or changed. If enough people find this application useful I might turn it into an AIR app that will save out files automatically.

Real-time Webcam Head Tracking with Speech Balloon

May 16th, 2009 by Devin Reimer

I have been doing some experiments with head and eye tracking within flash for the last few months. Just recently I discovered a open source port of a head tracking library called Marilena. This is yet another amazing library from the Spark Project. This library takes care of most of the hard work when it comes to head tracking, but it is does not naively video.  So once I got these library to work with my application it ran at about 4 fps. The good part was the head tracking algorithm was much better than anything I had created. Some tweaks later I got the application to around 18 fps. Which is better but still not acceptable. So after some searching I found an article by a guy named Mario Klingemann from over at Quasimondo. He had added some performance enhancements to the Marilena library. (Check out his article here). This got my application up to around 22 fps, which was much closer to where I wanted it. Finally I wrote a little function the cuts down the search area depending on if head has been found on the last time around, this at last got the frame rate up to 27 fps, which is completely usable.

This application allows you to type text into a text area which then gets updated into the speech balloon which is positioned directly above your head in the webcam video.

To try out the demo (webcam required) click here.

To get the source click here

JigLibFlash Rewrite – Video Game Case Physics Example

April 13th, 2009 by Devin Reimer

Video Game Case Physics Screenshot

Over the past 2 months the JigLibFlash team has been re-architecting the whole JigLibFlash project and the new version is now available. Using this re-architected library is quite a bit different from the old version. So before I convert some of my older stuff over, I decided to making a new demo of the updated library in action.

In this demo randomly positioned and oriented video game cases drop one on top of the other until 7 cases are on the screen. Then it resets and starts all over again. It is a very simple example, but it will give you a place to start.

To play the demo click here.

To get the source click here.

Source Requirements: You will need Papervision3D , JigLibFlash and bulk-loader to compile the source.

Note: The case is a scan of my copy of ‘Left 4 Dead’, if you want to read a good article on how the actual case artwork came to be, check out this link: http://www.l4d.com/blog/post.php?id=2353

JigLibFlash Object Rotation – Pitch, Yaw and Roll

March 27th, 2009 by Devin Reimer

JigLibFlash Rotation Example Screenshot

I get asked the following question a lot: “How do I rotate a JigLibFlash object?”. I do understand why people have this question as rotating pieces of geometry in JigLibFlash is not very straight forward. It also can end up being kind of challenging if your not familiar with exactly how rotation matrix work. The bottom line is it is not as easy as Papervision3D ( ex: pitch(10) ). So instead of me trying to explain any formulas I decided to add a few functions to the RigidBody class in JigLibFlash to make it easier for people to use.  I have created the following functions.

public static var toDEGREES:Number = 180/Math.PI;
public static var toRADIANS:Number = Math.PI/180;
 
public function pitch(angleDeg:Number):void
{
	SetOrientation(JMatrix3D.multiply(CurrentState.Orientation, JMatrix3D.rotationX(angleDeg*toRADIANS)));
}
 
public function yaw(angleDeg:Number):void
{
	SetOrientation(JMatrix3D.multiply(CurrentState.Orientation, JMatrix3D.rotationY(-angleDeg * toRADIANS)));
}
 
public function roll(angleDeg:Number):void
{
	SetOrientation(JMatrix3D.multiply(CurrentState.Orientation, JMatrix3D.rotationZ(angleDeg*toRADIANS)));
}
 
public function setRotationsDegrees(xRotation:Number, yRotation:Number, zRotation:Number):void
{
	SetOrientation(JMatrix3D.euler2matrix(new JNumber3D(xRotation, yRotation, zRotation)));
}
 
public function get rotationX():Number
{
	return JMatrix3D.matrix2euler(CurrentState.Orientation).x;
}
 
public function get rotationY():Number
{
	return JMatrix3D.matrix2euler(CurrentState.Orientation).y;
}
 
public function get rotationZ():Number
{
	return JMatrix3D.matrix2euler(CurrentState.Orientation).z;
}

You can copy this into the RigidBody Class within JigLibFlash (jiglib/physics/). Or you can click here to download a modified version of the RigidBody class to add to your JigLibFlash source. Once complete you can now use these functions from any standard JigLibFlash geometry object.

What you might notice is this source is missing a set function for rotationX, rotationY and rotationZ. I have included commented out version of my function in the source, but be advised that they are commented out because they can cause some weird results when rotating on more then one axis. You are free to use them, but you have been warned. I’m not a math genius so if anyone has any optimizations or additions please let me know.

These functions should hold everyone over until the JigLibFlash team has finished its rewrite of this project.  To read more about what the new syntax will be when completed, check out this recent post by drojdjou.
http://code.google.com/p/jiglibflash/wiki/New_API_Very_Short_Tutorial

To play the demo click here.

To get the demo source click here.

Update: As of April 12 (rev. 81), these functions are now part of JigLibFlash source, so you will no longer need to copy in these functions into your project. :)

Papervision3D Lecture – Winnipeg Code Camp (3D Video Game Case Example)

March 17th, 2009 by Devin Reimer

Papervision3D Lecture Winnipeg Code Camp

Winnipeg Code Camp is over and it was a success. I hope everyone that was able to attend my lecture thought it was informative. If anyone has any feedback on how I could make my next presentations better, please drop me a line.

To see one of my presentation demos click here.

To get the source click here.

Papervision3D Lecture – Winnipeg Code Camp

March 9th, 2009 by Devin Reimer

Winnipeg Code Camp Banner

On March 14th I will be speaking at this year’s Winnipeg Code Camp. My lecture is titled ‘3D Web Development – Papervision3D and Beyond’. This lecture will include a brief history of 3D content on the web, how to get started in Papervision3D including functional examples and an overview of where this technology is headed. Knowledge of ActionScript is not required to get a lot out of this session. Event registration begins at 8:00 am and did I mention this is a free event. Head on over to their official site for more information (http://www.winnipegcodecamp.com).

3D Ball Adventure (JigLibMotionSpringCamera3D) Part 3

February 22nd, 2009 by Devin Reimer

3D Ball Adventure Version 3 Screenshot

Over the passed week and an half, I went through almost every line of code in this project and rewrote and refactored it. After a bit of work, I discovered the cause of the major camera bug that would cause the camera to freak out when pointed north. This issue is now fixed. The springiness of the camera has also been loosened up a bit, so the camera motion is a lot smoother.

Since I got the new camera system to work, I decided to make it a nice and programmer friendly class called JigLibMotionStringCamera3D. I am aware that this name is terrible and long, but it describes the camera’s function perfectly. The camera uses a JigLibFlash RigidBody object as its target and moves based on its motion not the direction it is facing. Part of the camera’s smooth motion is achieved by extending the SpringCamera3D class. While this camera does have specific job, I know that there are a lot of uses for a camera like this. If you find a cool use for it, drop me a line.

The viewable area of this version has been increased and a little challenge has been added to the end of the level for those who played the last version.

If anyone has created any cool levels using the xml level creator send me an email. I would love to incorporate them in my next version.

To play the demo click here.

To get the source click here.

Note: You will need Papervision3D, JigLibFlash and Tweener to compile the source.

Update: The swf example has been updated to fix an issue when viewed on any page but the main page. Thanks to Chris Hill for pointing this out.

3D Ball Adventure (JigLibFlash, SpringCamera3D, Papervision3D) Mashup Part 2

February 9th, 2009 by Devin Reimer

I have been busy over the past week improving the ‘3D Ball Adventure’ game. While the use of the SpringCamera3D in the last version was usable, it did have a problem, it was locked onto to two planes of motion and had no rotation. So I under took the challenge of creating an easy to use 3rd person camera view using SpringCamera3D. I greatly under estimated the challenge of creating a camera system that competently followed the motion of the ball but also gave the user the freedom to make camera corrections. While this version isn’t perfect, it is still pretty cool.

I also have updated the xml level generator with new features like object groups, player start position, standardized objects. Also instead of x,y,z being the center of a box, it is now the top, close, left corner (which is way easier to design for).

To play the demo click here.

To get the source click here.

Note: As before you must have Papervision3D and JibLibFlash to run the source.

3D Ball Adventure (JigLibFlash, SpringCamera3D, Papervision3D) Mashup Part 1

February 2nd, 2009 by Devin Reimer

3D Ball Adventure Version 1 Screenshot

A couple of weeks ago a new 3D physics engine for AS3 called JigLibFlash was released into early alpha. I’ve been playing around with different 3D physics engine for Papervision3D for a little while now. The problem was I could not get the ease of use and performance I wanted out of anything that was currently available. This finally changed when I came across JigLibFlash. This library is relatively easy to use and the performance is quite good. Check out the code base at http://code.google.com/p/jiglibflash/ or jump over to their blog at http://www.jiglibflash.com/blog/. Important Note: This library is currently undocumented, has no tutorials and is in early alpha so it is not for the faint of heart, but if that does not bother you go check it out, you will be impressed.

I have been working on a new camera type for a while that would realistically follow around a 3D buggy. I thougth this class was starting to get pretty good, that was until Benoit Beauséjour release his SpringCamera3D class, which blew the version I’ve been working on out of the water. This class is easy to use and will make your 3D apps look a lot more profession. For a good example on how to use the new SpringCamera3D class in Papervision3D check out a demo at http://pv3d.org/2009/01/23/springcamera3d-and-driving-a-car/

So while playing around with both these very cool new developments I thought wouldn’t it be great if I mashed these two together and create a cool game. At that moment 3D Ball Adventure was born.

Continue reading for a working demo and source code.

Read the rest of this entry »