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. This is very interesting, You are a very skilled blogger. I have joined your rss feed and look forward to seeking more of your wonderful post. Also, I ave shared your web site in my social networks!

  2. Wow, incredible weblog format! How lengthy are you currently blogging pertaining to? you made blogging glimpse easy. The full look of your respective website is excellent, let alone the content!

  3. I precisely needed to thank you so much yet again. I do not know the things I would’ve accomplished without these thoughts shown by you about that industry. This has been the frustrating difficulty for me personally, nevertheless encountering this specialized technique you dealt with it forced me to cry over contentment. I’m just happier for the guidance and in addition expect you really know what a great job that you are putting in teaching people today through the use of your web blog. I’m certain you haven’t got to know all of us.

  4. It’s appropriate time to make some plans for the future and it is
    time to be happy. I’ve read this post and if
    I could I wish to suggest you some interesting things or advice.
    Perhaps you could write next articles referring to this
    article. I want to read even more things about it!

  5. It is the best time to make some plans for the future and it
    is time to be happy. I have read this put up and
    if I could I desire to recommend you few attention-grabbing issues or suggestions.
    Perhaps you could write subsequent articles referring to this article.

    I wish to learn even more things approximately it!

  6. Whoa! This blog looks exactly like my old one! It’s on a completely different subject but it has pretty much the same layout
    and design. Great choice of colors!

  7. There is noticeably a bundle to know about this. I assume you created specific nice points in functions also.

  8. I wish to get across my appreciation for your generosity giving support to men and women that must have assistance with your niche. Your very own commitment to passing the solution along appeared to be really insightful and has continually allowed regular people much like me to realize their endeavors. This warm and friendly publication indicates a lot a person like me and still more to my mates. Best wishes; from each one of us.

  9. Ahaa, its fastidious dialogue regarding this paragraph here at this blog, I have read
    all that, so at this time me also commenting at this place.

  10. I wanted to thank you for this fantastic article, I certainly loved every small bit of it. I have bookmarked your web site to look at the newest stuff you post.

  11. I’ve been surfing online more than 4 hours today, yet I never found any
    interesting article like yours. It is pretty worth enough for me.
    In my view, if all site owners and bloggers made good content as
    you did, the net will be much more useful than ever before.

  12. Thank you a lot for providing individuals with an extraordinarily special chance to read from this website. It’s always so fantastic and stuffed with fun for me personally and my office fellow workers to search the blog at least thrice per week to learn the latest stuff you have got. And definitely, I’m at all times motivated considering the splendid tricks served by you. Selected 4 facts in this posting are clearly the best I have ever had.

  13. My spouse and I stumbled over here by a different website and thought I might as well check things out.

    I like what I see so i am just following you. Look forward to checking out your web page repeatedly.

  14. I have been surfing on-line greater than 3 hours as of late,
    but I never discovered any interesting article like yours.
    It’s pretty price enough for me. In my view, if all website owners and bloggers made good content as you probably did, the web will likely be a lot more useful than ever before.

  15. Needed to write you the very little remark to finally give thanks yet again for your personal magnificent guidelines you’ve provided in this case. This has been simply strangely generous with you to supply freely what many individuals would have sold for an electronic book in making some dough for themselves, specifically since you might have tried it in the event you decided. These guidelines as well served as the fantastic way to realize that most people have the identical eagerness really like my very own to understand a little more around this problem. I am certain there are several more pleasurable opportunities ahead for those who go through your site.

  16. You made some really good points there. I checked on the net to find out more about the issue and found most people will go along with your views
    on this web site.

  17. Ahaa, iits nic conversation about this piece of
    writing at tis pllace att this blog, I hace ead all that, so aat
    tuis time mee alswo commenting here.

  18. Thanks so much for giving everyone an exceptionally marvellous possiblity to read from this web site. It can be so superb and also jam-packed with a lot of fun for me and my office acquaintances to search the blog at the least three times a week to find out the fresh issues you have got. And definitely, I am also usually astounded with the beautiful knowledge you give. Certain 4 facts in this posting are indeed the most effective I’ve ever had.

Leave a Reply

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