This post is long overdue as I put a lot of effort into the code behind this and when it was finally finished, I just never got around to blogging about it.

A little while ago katopz a new member of the JigLibFlash team started work on Flash Player 10 specific version of JigLibFlash. Once he got it up and running I started work on optimizing it’s performance. I had done performance optimizations for many different projects in the past,  but I had never undertaken an optimizing task quite this complex. Overall it was a very great learning experience, learning the ins and outs of the Flash Player and gaining more knowledge on the weird thing that is the Flash Compiler. While I thought I understood people’s frustrations with the Flash Compiler, it wasn’t until my second week into making performance tweaks that I began to see how poorly the Flash Compiler actually works.

In the end my work finally paid off as JigLibFlash began performing 150% faster than the previous version.

Once that was complete I fixed up the JigLibFlash FIVe3D plugin to make it work with a slightly modified version of FIVe3D (just modified enough so it would compile under Flash Player 10). This is the point when I decided that since I had learned so much about FP10 and the Flash Compiler, I should take a stab at creating a properly FP10 version of FIVe3D. What I thought would be a quick task ended up evolving into me completely rewriting the library. When this new version was complete it ran well over twice as fast as the old one. I contacted Mathieu (creator of FIVe3D) so see if he wanted a copy. It turned out that during the same time period he was also working on an FP10 version of FIVe3D.

Not all was lost, he sent me an alpha version of the library, so I could perform some benchmarks. While my code performed better in certain situation, his performed better in normal uses cases. With this new information in hand I began work trying to incorporate some of my feature enhancements into his version of the library. The most important feature being the addition of ‘direct transform matrix manipulation’. Mathieu and I had spoke of about this feature a few times prior, but understandably he had more important items to tackle. For people that don’t know ‘direct transform matrix manipulation’ is so important because it is a requirement for JigLibFlash to work. This is why in the past to get FIVe3D and JigLibFlash to work together you had to download a custom Sprite3D class from my site.

After a lot of thought I managed to come up with a way to not only incorporate this feature, but also make the library a little bit faster in the process. I sent the modified version back to Mathieu and this code has since been added to the FP10 version of the FIVe3D library. Mathieu was also nice enough to add me as a contributor to the library.

This means that need to download a custom Sprite3D class is no longer required. All the code (minus the Cube class) for using JigLibFlash together with FIVe3D is now added to their respective libraries. This also means that things are a lot faster and in the end; speed = fun.

All the pieces you with need to download:

• JigLibFlash FP10 – http://code.google.com/p/jiglibflash
• FIVe3D FP10 – http://code.google.com/p/five3d
• FIVe3D FP10 Cube Class – http://blog.almostlogical.com/resources/Cube.as

To see the demo click here.

To get the source for this example click here.

Note: This demo is the same as my first FIVe3D JigLibFlash example the only difference being it is using the FP10 version of both JigLibFlash and FIVe3D.

If you missed the first part of this Unity3D series you can read it here.

This example demonstrates how to interact with with objects in Unity.

The mouse cursor was removed and replaced with a cursor in the middle of the screen similar to an FPS. When this cursor is over an object that support interactivity, the cursor changes and the GUI will display a message based on the possible interaction. This is achieved by creating an abstract class called ‘Interactive’ with two abstract functions GetInteractionMessage() and Interact(). All interactive objects will inherit this class and support these two functions.

Within the Update() in the GUI class a Physics.Raycast is done using a ray moving outward from the center of the screen. This returns the first GameObject in which this ray collides. Then it tests to see if this object or a parent of this object has a component of type ‘Interactive’. If type ‘Interactive’ is detected it then can retrieve information about the possible interaction or if the left mouse button is down tell this object to perform an action.

In this example clicking on each TV changes its channel (based on multiple materials) and rotates its dial.

As you may have noticed the TV model has received a significant upgrade. A thanks goes out to Calin Reimer for creating this new model.

Hints and Gotchas:

• Use an abstract class as the parent class for all interactive objects, this way you won’t have to rewrite the basic interaction code for each object. This method also make detection a lot easier.
• To create a Ray moving outward from the center of the screen, use the following code: Camera.main.ScreenPointToRay(new Vector3(Screen.width/2,Screen.height/2));
• Use layers to have certain materials ignore light sources (ie. TV Screen), then use a Self-Illumin shader to brighten this material.
• If you can get someone else to model for you, do it. It speeds up development

To check out the demo click here.

To get the source (unitypackage) click here.

Source Requirements: Unity 2.6, but you will still need Unity Pro to use the Render Texture feature.

I’ve been working with Unity for a while now so this article was long overdue. Initial I was planning on doing some entry level stuff, like what is a Rigidbody, adding materials, etc. As more and more good video tutorials began appearing online I decided that I would do something a little more advanced than that. Don’t worry it not much more advanced.

I recently purchasing Unity Pro and have been digging into some Pro only features. One of my favorites so far is Render Textures. Render Textures simply put allows you to render the output of a camera to a texture. More detail on Render Textures can be found here

For this example I modeled a TV in Blender (don’t laugh at the model it is my first) with an empty space for where the screen would be.

Steps in Creating a Working TV That Displays What You See.

1. Add basic environment objects (ground, skybox, First Person Controller,lights etc)
2. Import a tv model into Unity and place it within the scene
3. Create a plane within Unity and position it within the TV model to be used as the TV screen (using Render Texture with planes is easiest).
4. Right click within the Project panel to create a ‘Render Texture’
5. Add a second camera as a child to the ‘Main Camera’ within the First Person Controller.
6. Set the ‘Target Texture’ property of this camera to the newly created Render Texture.
7. Add this texture to a material
8. Add this material to the tv screen
9. Hit play and you should have a working TV

Hints and Gotchas:

• You will need to rotate the render camera 180 degrees on its z-axis so that it will render the scene the right way up Update: Incorrect, looks like I had my rotations messed up. If the plane you are rendering to is rotated correct the render material will appear the right way up.
• You will need to use at a least two cameras when using Render Texture because the camera that is rendering to screen can not also render to a texture
• If you have added a Skybox to your main camera you will need to add this Skybox to the render camera(s).
• If you have multiple cameras it may be easier to set the Skybox material within Render Settings instead of setting each camera’s skybox individually.

To check out the demo click here

To get the source click here

Source Requirements: You will need need Unity Pro to use the Render Texture feature.

I’m a Flash Developer and a few months ago I decided to start doing Unity development. If you don’t know what Unity is or why I am developing in it, you can read about my decision to start working with Unity in my previous post.

Before I start posting example projects and code for Unity, I thought I would put together some steps on what I think would be the best way to learn Unity if you are a Flash Developer.

1. First download Unity (it’s now free) and play around with the pre-installed demo.

2. Learn the Unity interface basics.
http://unity3d.com/support/documentation/Manual/Learning%20the%20Interface.html

3. Watching the first three video tutorials in the ‘Unity for Flash Developers‘ series by the guys over at Ethical Games.
The other videos are also good, but I think one should get a little more experience with Unity before watching them.

4. While this may sound stupid, stop working with Unity and learn Blender (or another piece 3D model software). I wish I would have learned basic Blender skills earlier then I did. I found that not being able to create basic models was a major sticking point even when all I wanted to do was code.
I would recommend going through ‘Blender 3D: Noob to Pro‘ wiki tutorials.

If you read up until ‘Detailing Your Simple Person 2′ in Chapter Two you should have the skills required to work within Unity a little more comfortably. Once you become more familiar with Unity I would then carry on with the tutorials from where you left off.
Note: I found the learning curve for Blender insanely steep, so chances are you will to. Don’t lose hope to soon as after a little while Blender does become second nature even for a programmer like myself.

5. If you don’t already know C#, learn the basics. There are lots of general C# tutorials and they are pretty easy to find. I recommend coding in C# instead of Javascript as it is a much more robust language and will lead to a more structured project. While coming from a AS3 background it may seem like Javascript would be the logical choice, don’t be fooled. Spend the time and learn C#.

6. Get a copy of Visual Studio Professional and it you don’t know how to use it, learn it. Unity 2.6 now has Visual Studio integration which will save you a lot of time.

7. Go through the Official Unity FPS tutorials and convert them from Javascript to C#.
http://unity3d.com/support/resources/tutorials/fpstutorial
It’s hard to learn how something works by just copying and pasting. That is why I found converting these tutorials from Javascript to C# very helpful in learning how to code in Unity.

8. Follow the community on Twitter. Great tutorials, links and information are just a few follows away.

9. Go crazy and have fun. While learning Unity might take you a little while the process and final result are both very rewarding.

Finally if something helped you go from Flash Developer to Unity3D Developer and I haven’t mentioned it here, add a comment below.

So far the only FIVe3D JigLibFlash example I have shown is the Falling Cube Demo. So it was time to create something a little more practical. Dominos.

In this demo you can create, position and rotate dominos, then knock them over. You can also move the camera around the scene to get a better view.

This demo is my first use of flat shading in FIVe3D , which is a new feature in V2.1.2. Flat shading couldn’t be easier to implement, I simply set scene.ambientLightIntensity=.05 and then set all the sides of my dominos to flatShaded=true. I’m impressed with how easy it was to add and how much more visually appealing it made this demo.

This demo is also my first since joining the JigLibFlash team and adding FIVe3D support to the JigLibFlash library. This means the sample source does not contain any JigLibFlash classes, as they are now within the JigLibFlash library itself. Make sure you update your version of JigLibFlash rev 101 or higher.

To check out the demo click here.

To get the demo source click here.

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

I recently became a member of the JigLibFlash team. The first item of business was to add FIVe3D support into the library itself. You can read the brief article about it here. While you now will not need to download additional files for JigLibFlash you will still have to download the additional FIVe3D files (including the FIVe3D cube) from this site until they are supported features of FIVe3D. You can download those additional files here.

For those who have already implemented JigLibFlash with FIVe3D this new change should require no more effort than removing the old jiglib folder from my orignal source. An example of the new implementation is also available within the JigLibFlash library.

For those who haven’t heard of or used JigLibFlash yet check it out.

JigLibFlash Blog: http://www.jiglibflash.com/blog
JigLibFlash Source: http://code.google.com/p/jiglibflash/

If you haven’t already seen the demo here it is – FIVe3D JigLibFlash Demo.

If someone 3 months ago would have said to me, do you see any reason why you would stop devoting so much time to Flash/Flex in the next year. I would have said not a chance. I love interactive content on the web and more specifically interactive 3D within a browser. I have long history with AS3 and the only other “competitors” (Silverlight and HTML5)  aren’t capable of what I would need them to do.

My world got turned upside down the day I was shown the Unity Web Player. I froze, my jaw dropped, this was amazing. I had seen demos of Unity before in presentations about iPhone development, but this was different, this was in a browser. Most importantly it meant I could program full 3D in C# for the web.  So I went back to my original list of reasons why I was not interested in Unity the first time I saw it. Firstly it was really for iPhone and Wii development at the time, but now it’s also for the web.  The next reason being, I didn’t own a Mac. After doing some reading I realized that sure enough the Unity guys have dealt with that, the editor was now available for Windows. My last reason was price, but since this tool is so great I could deal with the price. In theory I would be in, but there was one other reason that hadn’t occurred to me. What about the thousands of hours I’ve put into AS3 development. Separation anxiety, going from a place where I know so much, to a place where I know nothing.

After a week of thought on the topic, I decided that Unity3D development was what I had to do. This was what I was waiting for, it just didn’t come in the form of a new Flash Player release. It has been roughly a month since the shift in my spare time over to Unity3D and I couldn’t be happier, the power and the opportunities are incredible.

So this is why there has been a little drought in examples on this blog, Unity3D has stolen my free time. This does not mean nothing new is coming, I’m actually finishing up some JigLibFlash stuff as I write this (so clearly Unity3D hasn’t stole all my free time). I am also hoping in the coming months that I will have some Unity3D examples to put up on this blog.

If you haven’t already done so please go check out Unity3D now.

I have one final comment and it is for Adobe: I know your plan is to unify the mobile player with the web player. In doing this you are slowing down the advancement of the web player to a point that by the time you have them ready to unify, there might not be anything left to unify.

Last week I spoke at ‘Flash in the Peg‘ – Winnipeg’s Adobe User Group. Here I got the opportunity to show a demo of JigLibFlash FIVe3D support that I have been working on for the last few weeks. After more hours than I would like to admit JigLibFlash FIVe3D support is now available for download. Like both JigLibFlash and FIVe3D these classes are released under the MIT License.

If you have used FIVe3D before you will know that there are no 3D object primitives built into the library, because of this I have also wrote a Cube class primitive for FIVe3D. Even if you do not need to use physics in your project you can still use this new Cube primitive.

Setting up JigLibFlash to work with FIVe3D is not quite as easy as Papervision3D, but it’s not a lot harder. The reason for this is FIVe3D does not allow for direct transformation matrix manipulations. In simpler terms a  few small changes needed to be made to the Sprite3D class within FIVe3D. You can use my modified version of the Sprite3D class to replace your current version, or just add it directly to your project using the same package folder structure. An example of how to do this is in my source below. The modifications to the Sprite3D class are small and should have no impact on your projects (with or without JigLibFlash).

To check out the demo click here.

To get the demo source, including all required files click here.

To just download the required files (JigLibFlash FIVe3D Plugin, modified Sprite3D class and new Cube primitive) click here.

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

Update: As I am now a JigLibFlash contributor, JigLibFlash library now has built-in FIVe3D support. For more information click here.

For those of you that have not read my original blog post on multiline wordwrap in FIVe3D. You can go read the article here.

I didn’t intend of expanding my DynamicTextMultiline class, but as I was working on another project I ended up adding to it and expanding its feature set. I have now implemented dynamic alignment (left,right,center) and line spacing, as well as fixed a small bug involving multiline text width. I have also updated the package path of the class to a more logical location (almostlogical.five3d.display).

Using dynamic alignment and line spacing is very easy:

var dynText:DynamicText3DMultiline;
dynText = new DynamicText3DMultiline(HelveticaMedium);
dynText.width = 200;
dynText.align =  DynamicText3DMultiline.CENTER;
dynText.lineSpacing = 5; 
dynText.wordWrap = true;

This class has been programmed in such a way that you can use it even if you don’t need to use word wrap because it has almost no additional performance impact when wordwrap=false. Plus now you get the added benefit of being able to dynamically align your text.

This demo is the same as Part 1 except it includes the ability to change the alignment of the text (left,right,center) in real-time.

Note: For performance reasons I recommend setting text.wordwrap=true as the very last property you set.

To play the demo click here.

To get the demo source, including the newest version of the DynamicText3DMultiline class click here.

To just download the newest version of the DynamicText3DMultline class click here.

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

Note: If you are having problems using word wrapping with generated fonts (not the default Helvetica fonts), please refer to the solution in the previous post.

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.

Update: I have been informed that people have not been able to get this class to work with their own generated typography files. I have discovered the issue, it turns out there is a small bug in the Typography Generator. Luckly the solution is easy. Once you create a new typography AS file, open it up and go to line 15. Change the variable ‘__heights’ to ‘__height’, and word wrapping will work.

Update 2: A new version of the DynamicText3DMultline class has been released with new features. Please check out the new post.