DEV STUFF

Damien Pegoraro

Scaleform, Unity3D & FlashDevelop

scaleform

If you’ve ever tried building GUI with Unity3D, you may know how painful it can be.
Made by Autodesk, Scaleform gives you the ability to add a Flash layer to your 3D projet to make things easier.

Here’s a little walthrough to start creating GUI in a Unity + Flash Develop context.

This tutorial is meant to be as simple as possible and is focused on the workflow. No big code involved!

First of all, download an evaluation copy of Scaleform and unzip it somewhere. (give a valid mail to grab your licence key).

http://gameware.autodesk.com/scaleform/public/downloads

Scaleform Public SDK Downloads  Autodesk Gameware - Google Chrome

Create a new Unity3D project without using any default package.

Import Scaleform unitypackage to your project.

Assets -> Import package -> custom package -> your Scaleform_Unity_Integration-Evaluation.unitypackage

This operation may take a while. Grab a coffee.

If this error shows up, just forget it, we don’t care about 3DS max for now.

3ds Max could not be found.
Make sure that 3ds Max is installed and the max file has 3ds Max as its ‘Open with’ application!

Let’s try the sample scene:

Open Assets/scenes/main_level , don’t save your empty useless opened scene, and hit run.

Play with the demo to get a quick overview of the features :

– Sweet fonts, render textures, 3D-> flash -> 3D interactions …

Unity - main_level.unity - TutoScaleform - PC, Mac & Linux Standalone

My Unity was crashing at this point because of some DX11 issue. I just had to convert my project to DX9 :

Edit -> Project Settings -> Player -> untick use Direct3D 11

That’s cool, but what we’re really trying to achieve is building our first GUI from scratch.

Now let’s create our own scene named myfirstgui in Assets/scenes.

What we’re trying to achieve is a SWF gui with a button calling a Unity method.
This method will invoke some callback on our SWF.

First of all, create a C# script that will be the proxy for our SWF:

Assets/scripts/ScaleFormGUI.cs

using System;
using System.Collections;
using UnityEngine;
using Scaleform;

public class ScaleFormGUI : Movie {

protected Value theMovie = null;
private SFCamera parent = null;

public ScaleFormGUI(SFCamera parent, SFManager sfmgr, SFMovieCreationParams cp) :
base(sfmgr, cp)
{
this.parent = parent;
SFMgr = sfmgr;
this.SetFocus(true);
}

public void OnRegisterSWFCallback(Value movieRef)
{
Debug.Log("SWF REGISTERED") ;
theMovie = movieRef;
}

public void TestCallback()
{
Debug.Log("CALLED ") ;
theMovie.Invoke("fromUnity");
}

}

We put two callbacks : OnRegisterSWFCallback will be called when swf is ready, TestCallback will be called on mouse click.

We then have to write a Scaleform camera script :

using UnityEngine;
using System.Runtime.InteropServices;
using System;
using System.IO;
using System.Collections;
using Scaleform;

public class ScaleformCamera : SFCamera {

public ScaleFormGUI myGUI = null ;

new public IEnumerator Start()
{
// The eval key must be set before any Scaleform related classes are loaded, other Scaleform Initialization will not
// take place.
#if (UNITY_STANDALONE_WIN || UNITY_STANDALONE_OSX || UNITY_EDITOR) && !UNITY_WP8
SF_SetKey("XDXSTZCND3W*************9TETWFON4J434KHRLA6DB96KV");
#elif UNITY_IPHONE
SF_SetKey("");
#elif UNITY_ANDROID
SF_SetKey("");
#elif UNITY_WP8
sf_setKey("");
#endif

InitParams.TheToleranceParams.Epsilon = 1e-5f;
InitParams.TheToleranceParams.CurveTolerance = 1.0f;
InitParams.TheToleranceParams.CollinearityTolerance = 10.0f;
InitParams.TheToleranceParams.IntersectionEpsilon = 1e-3f;
InitParams.TheToleranceParams.FillLowerScale = 0.0707f;
InitParams.TheToleranceParams.FillUpperScale = 100.414f;
InitParams.TheToleranceParams.FillAliasedLowerScale = 10.5f;
InitParams.TheToleranceParams.FillAliasedUpperScale = 200.0f;
InitParams.TheToleranceParams.StrokeLowerScale = 10.99f;
InitParams.TheToleranceParams.StrokeUpperScale = 100.01f;
InitParams.TheToleranceParams.HintedStrokeLowerScale = 0.09f;
InitParams.TheToleranceParams.HintedStrokeUpperScale = 100.001f;
InitParams.TheToleranceParams.Scale9LowerScale = 10.995f;
InitParams.TheToleranceParams.Scale9UpperScale = 100.005f;
InitParams.TheToleranceParams.EdgeAAScale = 0.95f;
InitParams.TheToleranceParams.MorphTolerance = 0.001f;
InitParams.TheToleranceParams.MinDet3D = 10.001f;
InitParams.TheToleranceParams.MinScale3D = 10.05f;

InitParams.UseSystemFontProvider = false;
return base.Start();
}

new public void Update()
{
CreateGameHud();

}

private void CreateGameHud()
{
if (myGUI == null)
{
myGUI = Util.CreateSwf("mygui.swf", true, new Color32(255, 255, 255, 0));
}
else
{
myGUI.SFMgr.ProcessCommands() ;
}

}
}

Replace your licence key and attach this script to your camera.

We now have to make our mygui.swf with a single button. So let’s create a new AS3 FlashDevelop project.

Here’s my Main.as :

package
{
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

public class Main extends Sprite
{

private var s:Sprite;

public function Main():void
{
stage.scaleMode = StageScaleMode.NO_SCALE ;
stage.align = "TL" ;
init() ;
}

private function init():void
{
s = new Sprite() ;
addChild( s) ;

s.graphics.beginFill( 0x00FF00 ) ;
s.graphics.drawCircle( 200, 200, 50 ) ;
s.graphics.endFill() ;
s.addEventListener(MouseEvent.CLICK, callUnity ) ;

if ( ExternalInterface.available ){
ExternalInterface.call ("OnRegisterSWFCallback", this);
}
}

private function callUnity(e:MouseEvent):void
{
trace("click") ;
if ( ExternalInterface.available ) ExternalInterface.call("TestCallback") ;
}

public function fromUnity( ) : void
{
s.graphics.clear() ;
s.graphics.beginFill( Math.random() * 0xFFFFFF ) ;
s.graphics.drawCircle( 200, 200, 50 ) ;
s.graphics.endFill() ;
}
}

}

Just notice that calling a Unity method is the same thing as calling a Javascript method with ExternalInterface. Methods that will be called from Unity must be declared as public.

We made a code with a round button that calls a Unity method. This method calls flash again to change the button’s color to random.

Don’t forget to set the output in your Unity project StreamingAssets folder and build your swf.

Now we just have to run our Unity projet and if everything’s okay, clicking the green button should change it’s color.

You should see something like that:

Unity - myfirstgui.unity - TutoScaleform - PC, Mac & Linux Standalone_2

I added a cube on my scene just to show that there’s 3D running in the background…

Note that flash trace calls will be redirected to Unity debug console.

That was pretty easy! Tell me if you read something unclear or wrong!

640 Comments on “Scaleform, Unity3D & FlashDevelop

  1. I wanted to put you this very little remark to be able to give thanks once again for these exceptional tricks you’ve shared on this site. This is really tremendously open-handed with people like you to give publicly all numerous people could possibly have supplied as an electronic book to help make some money on their own, principally considering the fact that you might well have done it in case you considered necessary. The good ideas likewise acted to become a fantastic way to understand that other people online have the identical fervor the same as mine to see somewhat more with reference to this matter. I’m sure there are a lot more pleasant times in the future for individuals who find out your blog post.

  2. Keep up the fantastic piece of work, I read few blog posts on this site and I believe that your web page is actually interesting and has got units of outstanding info.

  3. It as not that I want to copy your web-site, but I really like the style. Could you let me know which design are you using? Or was it especially designed?

  4. I would like to show thanks to this writer just for rescuing me from this type of issue. Because of searching through the internet and getting principles which are not productive, I was thinking my entire life was gone. Existing minus the solutions to the issues you have sorted out by means of your website is a serious case, as well as the ones which might have badly damaged my career if I hadn’t come across the blog. Your good competence and kindness in playing with all the pieces was useful. I’m not sure what I would’ve done if I hadn’t come upon such a stuff like this. It’s possible to now relish my future. Thanks for your time very much for this expert and amazing help. I will not be reluctant to suggest the website to anyone who would need direction on this area.

  5. A lot of thanks for your entire hard work on this website. Kim delights in engaging in investigations and it’s obvious why. Many of us hear all concerning the lively ways you create helpful tricks through the web site and therefore welcome contribution from the others on that theme plus my simple princess is without question becoming educated so much. Take pleasure in the rest of the year. You are always carrying out a fantastic job.

  6. I simply wanted to appreciate you all over again. I do not know what I could possibly have carried out in the absence of those ways documented by you about my subject matter. This was an absolute challenging condition in my opinion, but considering your professional strategy you processed that made me to jump for delight. Extremely grateful for this advice as well as hope you comprehend what a great job your are carrying out instructing some other people through your site. I’m certain you’ve never come across any of us.

  7. I simply wanted to thank you very much once more. I do not know the things that I might have worked on in the absence of the aspects provided by you over my area. This has been a terrifying problem for me, nevertheless seeing the very expert tactic you solved it forced me to leap over joy. I am just thankful for your advice and even sincerely hope you really know what a great job you’re doing training most people via your website. I am sure you haven’t come across any of us.

  8. I actually wanted to make a quick word in order to say thanks to you for all the unique items you are giving here. My time consuming internet lookup has at the end of the day been paid with high-quality facts to talk about with my family. I ‘d believe that many of us readers are unequivocally blessed to exist in a wonderful site with so many perfect people with good solutions. I feel truly lucky to have encountered your entire web page and look forward to tons of more entertaining times reading here. Thanks again for everything.

  9. Thanks for all of the work on this blog. Kim really loves setting aside time for research and it’s easy to understand why. I learn all of the powerful way you offer good secrets on the blog and even boost response from others on this matter then our favorite child is truly learning so much. Take pleasure in the rest of the year. You have been doing a first class job.

  10. That is a really good tip especially to those new to the blogosphere. Brief but very accurate info Thank you for sharing this one. A must read post!

  11. I will right away clutch your rss as I can at to find your e-mail subscription link or e-newsletter service. Do you have any? Please permit me recognise so that I could subscribe. Thanks.

  12. Its hard to find good help I am forever proclaiming that its difficult to procure good help, but here is

  13. You completed certain good points there. I did searching on the subject matter and found most persons will go together with your blog

Leave a Reply

Your email address will not be published. Required fields are marked *