Bugshake

A custom preloader in Unity part 3/3

admin — Thu, 10 Dec 2009 14:29:02 +0000

The third and final alternative. Lemme warn you, its complicated, but its worth it. Because you will be able to make a flash preloader for a unity scene, which basicly gives you the ultimate freedom (well unless you wanna have a 3D preloader, then refer to part 2 of this tutorial).

There’s 4 components to this solution.

main unity file – the actual, 100 MB unity file which contains your awesome game
unity preloader file – this is a very, very minimal preloader written in unity, which receives a query parameter containing the movie to load and will use Application.ExternalCall to inform it’s html page of the loading progress. It’s reusable and you can download it here.
swf preloader file – this is a relatively small flash movie, which will show the graphics of your preloader. It will use ExternalInterface.addCallback to listen to the events the unity-preloader fires.
javascript/html framework – you’ll need some javascript to receive calls from unity and relay those to flash. You’ll also need to hide and show the swf and unity files when it’s appropriate

Once you downloaded the preloader and you have a little flash preloader animation which listens to ExternalInterface, your biggest problem will be to make the hosting html page a bit organized.

What I did, was use swfobject to load the flash movie and u3dobject to load the unity movie.

u3dobject offers loads of premade functionality to communicate between flash and unity, which I am not using because this wrapper is more complex then the original code (for this purpose) and it’s extra bytes which we don’t want in a preloader. I imagine for larger applications it’s invaluable because it allows flash movies to listen to unity events and visa versa in a very elegant way.

To the left here, you can see a little diagram of the lifetime of these 4 components. Made with the most time-saving UML tool out there: mspaint.

You can see an example of this method here:

http://kominski.net/demo/unityswfpreloader/

It’s actually a bit of a bad example, since in this version you have to click the image to see the preloader (or if its loaded the unity scene directly).

So, to make the flash preloader, add the following code to your document class constructor:

ExternalInterface.addCallback("onPreloadStart", onPreloadStart);
ExternalInterface.addCallback("onPreloadProgress", onPreloadProgress);
ExternalInterface.addCallback("onPreloadCompleted", onPreloadCompleted);

and then the definitions for those functions:

private function onPreloadStart():void {
	// called when the preloader.unity3d starts actually loading the main unity file
}
 
private function onPreloadProgress(progress:String):void {
	// progress contains a number from 0.0 to 1.0 indicating progress
}
 
private function onPreloadCompleted():void {
	// called when the preloader.unity3d finished loading and is about to call stream.LoadUnityWeb()
}

Your html page will not look much like the generated unity template, but it’s based on the u3dobj template. Here’s the short version of what it will look like:

And that should do it. I have not elaborated too much on stuff because it’s an advanced topic so you don’t want too much clutter. If you have questions, just post a comment, I’ll be happy to answer.

A custom preloader in Unity part 2/3

admin — Thu, 10 Dec 2009 10:42:43 +0000

The second way to do it resembles very much how it works in flash: first you load a small movie, which is just the preloader, which will load the big movie.

A completely empty unity scene compiles to about a 7kB .unity3d file. Very small and very nice for making a preloader. If you’re preloader gets larger, you might wanna consider having a look at part 1 of this tutorial to skin it with a back color and logo matching your website.

So, to use this method, I am assuming you have a working project, say myProject.unity3d which is 15MB in size. Now, make a new unity scene, create en empty game object named “application” and attach a behaviour script to it named “main.cs” or “main.js”. (Or whatever language you prefer). This scene will need to have some sort of animation to show the loading progress. In this example I will be fading a GUITexture from 0 to 100% opacity.

Here’s what it could look like:

public var fileUrl = "http://www.unity3d.com/webplayers/Lightning/lightning.unity3d";
public var progressImage:GUITexture;
 
function Start ()
{
	progressImage.color = new Color(.5, .5, .5, 0);
 
	var stream = new WWW (fileUrl);
	while (!stream.isDone)
	{
		progressImage.color = new Color(.5, .5, .5, stream.progress * .5);
		yield;
	}
	stream.LoadUnityWeb();
}

I used it for this preloader (shown when you click the image).

If you want to reuse the same preloader, you can choose to simply pass the name of the main unity file you wish to load as a parameter. The html embed will look something like this:

And your unity file will have a bit of code like this (in C# this time):

string[] url = Application.srcValue.Split('?');
if (url.Length > 1) {
   string[] args = url[1].Split('&');
   foreach (string arg in args) {
     string[] keyvalue = arg.Split('=');
     if (keyvalue[0] == "file") fileUrl = keyvalue[1];
   }
}

A custom preloader in Unity part 1/3

admin — Thu, 10 Dec 2009 10:06:26 +0000

Unity 2.6 is now out and they made the indie version free! Thanks unity team!

Unity is used a lot for offline and iphone content and perhaps not so much as a 3D replacement for flash. As a flash programmer, there’s certain things you wanna know, like how to make a preloader.

I will describe 3 ways to make a preloader, the last being the most complex and most impressive

The first way is just to customize the default preloader.

Here’s what the preloader looks like by default:

There’s 5 elements in there, that you can customize by passing parameters to the object and embed tags in html:

bordercolor : the border is always there and its always 1 pixel
backgroundcolor
logoimage : will replace the unity logo, will be centered, and will never stretch till the edges, it will leave a 10pixel margin
progressbarimage : the image of the actual bar, it will be stretched and it shows what the empty bar looks like
progressframeimage : what a full progress bar looks like, it’s not stretched, just covered by the progressbarimage

Here’s where those elements go:

This is what it looks like in code:

















bordercolor="337af1" backgroundcolor="ffcc99" logoimage="logo.png" progressbarimage="bar.png" progressframeimage="frame.png" pluginspage="http://www.unity3d.com/unity-web-player-2.x" />

Custom tween in Tweener

admin — Tue, 18 Aug 2009 11:40:59 +0000

I recently needed a tween that is different from the ones you see on the cheat sheet. All tweens you’ll find there have the property that the movement hardly goes outside the bounds of begin-to-endpoint (0…1). What I needed, was a tween that swings completely beyond its target, almost as far as the begin point (0…-1…1).

So what you do is use a custom function, here’s how:

Tweener.addTween(mc,
   {rotation: 100, time:1, transition:myFunc});

The tweener documentation will tell you this function needs 4 params, it actually needs 5, like this:

var easeOutSwing:Function = function(
      t:Number, b:Number, c:Number, d:Number,
      p_params:Object = null):Number
   {
      ...
   };

Where

t = time from 0…1
b = begin value
c = change to value (delta)
d = total duration (ms)
not used

To make one yourself, you can use the tool the tweener documentation suggests, the easing generator. A quintic bezier is not the only option, but its handy for most purposes I imagine.

For my purpose i entered the values 7, -9, 7 and -.17 for P1,2,3,4, resulting in a function like this (with extra param):

var myFunc:Function = function(
      t:Number, b:Number, c:Number, d:Number,
      p_params:Object = null):Number
   {
      var ts:Number=(t/=d)*t;
      var tc:Number=ts*t;
      return b+c*(175.7*tc*ts + -499.7*ts*ts + 510*tc + -220*ts + 35*t);
   };

Digging into CS4 perspective

admin — Mon, 13 Jul 2009 11:41:22 +0000

I finally managed to completely copy the flash internal perspective with a manual perspective.

In flash cs4, you can make a plane, say, a 100×100 plane sitting on (0,0). Then, you can rotate it in 3D, using the properties rotationX, rotationY and rotationZ. Say you would rotate it by x and y by 20 degrees each, you end up with a nice plane in perspective.

Now this is really cool, but if would be quite a pain to display a 3D mesh in such a way.

Now I have been digging into how to display a 3D mesh using the two new functions transformVectors and drawTriangles. Without z-sorting, I could render a 1500 poly textured mesh in 3 miliseconds. Which is very, very fast and certainly opens op possibilities. Here’s a screenshot:

Basicly, what you do, is you have an array of world coordinates in 3D, you transform them using transformvectors, and then you add a sort of perspective function to make stuff smaller when its further away:

The big problem was, getting the standard flash rotationX / rotationY to work with this, more lowlevel method of getting perspective. The solution was surprisingly simple. You get the focal length from the main perspective transform like this:

var f:Number = parent.transform.perspectiveProjection.focalLength;

Then, you will have some z-coord, which should not be lower then -f (-f is where your eye is in real life, focal length is the distance from your eye to the physical piece of glass that you call your screen). The scaling for any point (x,y,z) will then be:

var s:Number = f / (f + z);

In my sample code, I create a bunch of 20×20 squares, randomly placed in 3d. I allow you to rotate them using the mouse. This part is all using standard rotationX and rotationY.

Then I have something which I called an ‘overlay’, which is a series of 3d points and connecting lines, which I make sure are the exact same squares.

Finally, I rotate both according to the mouse movements and voila! the overlay (red lines) matches the movieclips (blue/white shapes).

Download the source code here.

View the result here

Rtmp protocol released

admin — Tue, 16 Jun 2009 08:12:31 +0000

Adobe finally released the RTMP protocol to the developer community, so reverse engineering it should no longer be needed if you wanna work with the flash networking protocol, but cannot afford Flash Media Server or are not working with a flash client.

http://www.adobe.com/devnet/rtmp/

This is great news, because now we (programmers) can all use the more difficult AMF0 and media streaming features of it!

We should be seeing an increase in live streaming applications now.

Making a 3D map with google maps and flex4

admin — Tue, 02 Jun 2009 16:42:01 +0000

It has been ages since I last posted cause I have been really busy working on a 3d world in Unity3D to which I cannot yet show you a link, but you can see the presentation Paul gave on it here: http://www.adobeusergroup.nl/site/list_messages/270

Anyway as most flash developers know, in flash player 10 any sprite can have a 3D rotation and position to create the illusion of 3D. Now, I wanted to test out the latest version of the google maps flash api, so I figured why not throw the google map on a plane in 3D space and see if it still works.

Amazingly enough: it does!

Here it is: http://bugshake.com/pages/googleflex4/

The fact that it works is quite positive. It shows how thorough adobe has been with the new 3D rotations, since I am quite certain the google api does not know it it’s map is displayed on a 3d plane. Even scrolling and clicking markers work fine.

In the above application you should see the map of amsterdam, focussed on the outdoor theatre that is in the center of the Vondelpark. You should be able to scroll the map around in 3D. A white circle should be projected on the map, right around your cursor and a blue ’streetsign’ should also be visible under your cursor. Using the mouse wheel you should be able to zoom in and out.

Using the geocoding api, I am showing the lowest level zoom address of the cursor location on the blue sign.

Source code later!

c# style trace

admin — Tue, 14 Apr 2009 15:51:53 +0000

Hi, just a little handy AS3 snippet I thought I’d share. It simulates the string.format from dotnet in a trace statement. I decided to name it tracef like printf in c (f = format)

tracef("my location = ({0}, {1}), my name is {2}", x, y, name)

Here’s the debug function:

private function tracef(msg:String, ...arguments):void
{
   for( var i:uint = 0; i < arguments.length; ++i )
   {
      msg = msg.split("{"+i+"}").join(arguments[i]);
   }
   trace( msg );
}

Btw, msg’s are bad for you, at least in your food, but that’s a different story.

HP Service

admin — Wed, 11 Mar 2009 15:12:51 +0000

Allow me to flame the Hewlet Packard helpdesk a bit while helping others with the same problem. This issue should be in their FAQ, but… well… it isn’t.

The problem is that you get random reboots, hangups or BSOD’s (blue screen of death). It happens on my HP Pavilion Media PC (8170.nl), which comes with Microsoft Vista.

The cause, or at least part of the cause, became apparent after I completely reinstalled the computer, including a hardrive format. It worked fine, but after installing the windows auto update nvidia drivers, the problem came back.

Turns out, nvidia offers much newer drivers on their website then windows update does.

Something else I changed has to do with IRQ’s, and this might have helped as well. Googling the message on my BSOD resulted in lots of posts about IRQ’s (interrupts) conflicting. Now you really, really have to look for those settings in windows vista. I never found where to change the IRQ some driver uses, but I did find a list of devices, organised by IRQ, in which it was possible to ‘disable’ a device. Lucky for me, the 2 devices that shared IRQ 14 were 2 things i don’t use: tv tuner and wireless lan. Also lucky for me, microsoft didn’t forget to put that disable button there.

Anyway, does that sounds like an issue HP should know about? I’d say so. “Windows autoupdate will make your computer crash every 10 minutes”. Applies to: pavilion 8170.nl, with default software and hardware installed. Maybe I am the only one who bought this model. Who knows.

But they didn’t know. Nor is it in the FAQ. It took me 35minutes of telephone time (24 euro’s) to get to the point where the dude on the phone promised me I would be called back with a price indication of having my computer picked up and brought back, working again. Needless to say, I never received that call.

Luckily, I am the guy in my family and in my group of friends who people ask which computer to buy. Well: not HP! HAHA, revenge!

Dynamic Textfield with custom font

admin — Wed, 18 Feb 2009 14:51:40 +0000

I noticed a little bug in flash (at least, in my version), for which I wanted to share the fix.

The bug is as follows: you create a TextField, you change it’s text and then it looks empty.

Here’s the code that triggers the bug:

// create
var fmt = new TextFormat("Arial", 10, 0x000000); // make sure you embedded this
var label = new TextField( );
label.text = "Default text";
label.setTextFormat(fmt);
addChild(label);
// use
label.text = "Custom text";

You’d expect it to say “Custom text” but instead the label is empty. What worked for me is to first call the replace function and replace the first character with the first character. Like this:

// create
var fmt = new TextFormat("Arial", 10, 0x000000); // make sure you embedded this
var label = new TextField( );
label.text = "Default text";
label.setTextFormat(fmt);
label.replaceText(0, 1, "D");
addChild(label);
// use
label.text = "Custom text";

Now it will say “Custom text”. Speaking of bugs, there’s a related one, where your text doesn’t show up at all. This is when you assign the text after the textformat. So this will not work:

label.setTextFormat(fmt);
label.text = "Default text";

But this will:

label.text = "Default text";
label.setTextFormat(fmt);

Go figure.