Halp!: Placing Flash on top of a Unity web player

I had this idea of a trick for integrating Unity (web) with a Flash-based GUI. The main concept was to put the SWF in front of the Unity game kinda like this:

Yeah kinda like this
I have  the theory that the SWF movie will “cancel” the mouse events in Unity, just like Flash, when you place a MovieClip in front of a button, disabling the events for that button. But obviously I had to load a Flash movie of the same size of the Unity game to make it unplayable (like a selection screen or pause menu), to deal with that I could unload the SWF or call another with a smaller size (like a score displayer.. or something that Unity could not do with the fanciness of Flash)

Since I’m not very experienced in HTML/JavaScript/CSS I searched for ideas on the web.

My first try was using the <div> tag. Within the tag I could set the z-index of the Flash HTML container the Unity game would be in the main HTML, and then load the HTML containing Flash. I used z-index, to force the Flash container to be infront of the main page.

My next try was loading Flash and Unity into separate IFrames, and forcing each IFrame to have a specific z-index so I could be sure both of them having a strict order, but Unity was still on top.

Using separate iFramesThat yellow label’s actually from Flash, and should not be  cropped


Other try was a trick used by some annoying flash banners (those ones that pop out in front of the main content), the example I found was using FlashObject (yeah when it was called like that). The result was not succcessful.

annoying ad techniqueSame problem

I tested it in Firefox, Opera, Chrome and IE.
Technically everything went well about placing “my Flash” over the main HTML (the “Unity container”). If you take a closer look at the second image in this post, the SWF is in front of the red background (HTML Unity container) BUT the Unity game keeps being at the top… and I don’t know what else to do, I see that as some kind of “bug” on graphics processing (I don’t even know what I’m talking about). So… if someone has some idea about a workaround or something for placing Flash on top of Unity content please let me know 🙂

I’ll upload my source files soon (so you can have  a look).

Thanks!

Update: Seems like someone had this problem too and no solution was found (except the one sayin “don’t place stuff on top of plugin rects” but that’s not quite a solution) :\ http://forum.unity3d.com/viewtopic.php?t=9989

Communicating Flash and Unity

This is a very simple example of connecting Flash and Unity through JavaScript. I did this example like 2 weeks ago but didn’t blog it (just tweeted it :-P)
Like Flash, Unity also has it’s own “ExternalInterface.call()” function called “Application.ExternalCall()“, since both Flash and Unity can call a function in JavaScript, communication between them (inside a browser) is easy.

For this example I just made a cube in Unity named “UnityCube”, added it to the scene, then created a new C# script and attached it to the cube. The important function in the CubeScript.cs is OnMouseDown, which invokes the JavaScript function called “resizeSquare” that will make a square to resize in Flash. It also has a function called “moveCSharp” which moves UnityCube in different directions.

On the Flash side, with ExternalInterface.call(“moveJS”, param) the function “moveJS” in JavaScript will be called and the cube in Unity will move in different directions dependig on the parameter sent (left, right, forward, backwards and jump). And function “resizeSquare” changes the size of the red square in the SWF.

Now for JavaScript, there are of course two functions, the one called from Unity (resizeSquare), and the one called from Flash (moveJS):

//This function is called from Flash (when one of the buttons is clicked) via ExternalInterface.call();
function moveJS(direction)
{

//sendMessage(); calls a function that belongs to an instance
//the firts parameter is the name of the target instance in Unity, next the name of the function we want to call, and finally, the parameter to send.

GetUnity().SendMessage(“UnityCube”, “moveCSharp”, direction);
}

//This function is called from Unity (when the cube is clicked) via Application.ExternalCall();
function resizeSquare()
{

//check how to call the ActionScript function depnding on the OS
if (navigator.appName.indexOf(“Microsoft”) != -1)
{
FlashUnity.resizeSquare();
}
else
{
window.document.FlashUnity.resizeSquare();

}

}

You can check the example (and source) here.

Communicating Nintendo DS with Adobe Air

Now that UDP is supported in AIR, communication with a Nintendo DS is no big deal.  Let’s start with the requirements:

–  NDS (with WFC already configured)

– A Flashcard (I have an R4, but Ezflash or M3 would be ok too)

– DS2Key (for sendig data from DS to your computer)

– Know your DS and computer’s IP.

– Of course a computer, a router, Flex (or FDT, FlashDevelop, whatever) and AIR sdk 2 beta (and runtime).

The code is very simple actually for this example, it just reads the coordinates where the stylus is pressing the touchscreen, I’m just showing the important parts:

//IP & port for this computer
private var localIP:String = “xxx.xxx.xxx.xxx”;
private var localPort:int = 55555;

//IP & port for NDS
private var targetIP:String = “yyy.yyy.yyy.yyy”;
private var targetPort:int = 55555;

private function init():void
{

datagramSocket = new DatagramSocket();
datagramSocket.addEventListener(DatagramSocketDataEvent.DATA, dataReceived);

datagramSocket.bind(localPort, localIP);

datagramSocket.receive();

//Need to actually send comething to receive data… don’t know why, sorry
var data:ByteArray = new ByteArray();
data.writeUTFBytes(“Some data”);
datagramSocket.send( data,0,0, targetIP, targetPort);
}

private function dataReceived(event:DatagramSocketDataEvent):void
{

//get the data, X and Y position of the DS stylus
var pos:String = event.data.readUTFBytes(event.data.bytesAvailable);

// we receive for example “/m120.90.3”
// 120 is the value in the X axis, and 90.3 the value for Y

var separate:String = StringUtils.beforeFirst(pos, “.”);
var firstPart:String = StringUtils.remove(separate,”/m”);

var secondPart:String = StringUtils.afterFirst(pos, “.”);

//Your stuff

}

(As you can see I used Grant Skinner’s StringUtils which is here).

That’s all we need to receive and handle data from the NDS.

Now, to send data from the NDS, the DS2Key is needed (grab it here), to install it we just copy the DS2key.nds to the flashcard. Insert the flashcard into the NDS, run DS2Key to set the target computer’s IP and the port (55555 in this case).

And that’s it! Very easy. Of course, this is not limited to just reading the X and Y values of a point in the touchscreen being pressed with the stylus, button (x, y, b, a, etc. ) states can also be read. At first I had problems getting the data from the DS, so make sure the port you are using is open, that solved it for me.

I did a simple drawing application:

You can download the source here.



Yay, Hello world!

Ok so.. i’ll start blogging all my Unity and Flash stuff here. This is like the 3rd attempt of doing a “serious” blog (I have another one, but its just randomness, and it’s in Spanish). Since English its not my native languaje, please try to use your imagination to understand what I’m trying to say hahah.