[HOW-TO] [TUTORIAL] Create your own scaleform using Flash + GFxExporter

[manups4e]

solution here: Can someone help with getting this Custom Scaleform tutorial project to build properly please? - #2 by manups4e

[DrHouse93]

Hello there! I followed your tutorial and everything went smooth…up until this point:

@manups4e

GFxExporter will strip the images and leave only red shapes (yeah the same you saw into other scaleforms) the trick is here… the exporter will take the stripped pics and turn them into .DDS files with weird naming, if you put those .DDS files into a custom .YTD file and place it near your .GFX file with the same name and bam… the scaleform will load the shapes automatically

I can’t seem to make the game load images properly. For instance, I’m rebuilding the whole phone interface, and I tried to add a simple .png background in my scaleform. The scaleform gets successfully loaded into the game, but instead of the phone background, it shows a white rectangle:

(Ignore the black background, it’s just the oversized BOUNDING_BOX, needed to be that big to help me figure out how does it work)

However, back to the .png, this is the directory of my project:

As you can see, the images have been turned into a .tga file from the gfxexporter, rather than a .dds, as you said in the tutorial. Maybe is that the problem?

[manups4e]

ok if you want a better way to load pngs inside your scaleform is by doing this

• First of all… add an empty movie clip inside your project and call it txdLoader
  
  like this
  
  
  
  the class you wanna link is com.rockstargames.ui.media.ImageLoaderMC
• Then in your script in the MAIN.as file of your project add these 3 public functions

    function ADD_TXD_REF_RESPONSE(txd, strRef, success)
    {
        com.rockstargames.ui.utils.Debug.log("ADD_TXD_REF_RESPONSE - " + arguments.toString());
        if (success == true)
        {
            var pMC = this.CONTENT;
            var il = com.rockstargames.ui.media.ImageLoaderMC(eval(pMC + "." + strRef));
            if (pMC != undefined)
            {
                il.displayTxdResponse(txd);
            }
        }
    }

    function TXD_HAS_LOADED(txd, success, strRef)
    {
        com.rockstargames.ui.utils.Debug.log("TXD_HAS_LOADED - " + arguments.toString());
        if (success == true)
        {
            var pMC = this.CONTENT;
            var il = com.rockstargames.ui.media.ImageLoaderMC(eval(pMC + "." + strRef));
            if (pMC != undefined)
            {
                il.displayTxdResponse(txd,success);
            }
        }
    }

    function TXD_ALREADY_LOADED(txd, strRef)
    {
        com.rockstargames.ui.utils.Debug.log("TXD_ALREADY_LOADED - " + arguments.toString());
        var pMC = this.CONTENT;
        var il = com.rockstargames.ui.media.ImageLoaderMC(eval(pMC + "." + strRef));
        if (pMC != undefined)
        {
            il.displayTxdResponse(txd,true);
        }
    }

• Then use the attachMovie() function to add the txdLoader in your code wherever you want…

• When you want to load any txd, txn (DUI or ingame or streamed) use this function around your code to dynamically load your txd-txn via scaleform natives

function SetClip(targetMC, textureDict, textureName, w, h, callback, scope)
{
	var alreadyLoaded = true;
	if (targetMC.textureFilename != textureName && targetMC.textureDict != textureDict)
	{
		var alreadyLoaded = false;
	}
	targetMC.init("YOUR-GFX-NAME",textureDict,textureName,w,h);
	var splitPath = String(targetMC).split(".");
	var pathWithoutContent = splitPath.slice(2).join(".");
	com.rockstargames.ui.tweenStar.TweenStarLite.removeTweenOf(targetMC);
	targetMC._alpha = 100;
	targetMC.requestTxdRef(pathWithoutContent,alreadyLoaded,callback,scope);
}

I made the function SetClip to dynamically load any texture without the need to Load it before via natives… the scaleform will load it and draw it for you…

SetClip has these parameters:

• targetMC: the txdLoader movieClip you reference
• textureDict: the texture dictionary (runtime, dui, ingame, streamed… who cares)
• textureName: the name of the texture to load
• w, h: width and height of the texture you wanna draw
• callback: any function you wanna call whenever the load is finished (optional)
• scope: i usually use “this” to reference all the class i’m using… for example if i’m drawing a badge in ScaleformUI inside a UIMenuItem i reference this as the whole UIMenuItem isntance inside the function (that’s how flash works )

example:
– this function is called inside UIMenuItem in NativeUI-scaleform_flash in my github

	function SetLeftBadge(id)
	{
		this.leftBadgeId = id;
		if (this.leftBadgeId != com.rockstargames.ScaleformUI.utils.Badges.NONE)
		{
			if (this.leftBadgeMC.isLoaded)
			{
				this.leftBadgeMC.removeMovieClip();
			}
			this.leftBadgeMC = this.itemMC.attachMovie("txdLoader", "LeftBadge", this.itemMC.getNextHighestDepth());
			var sprite_name = com.rockstargames.ScaleformUI.utils.Badges.getSpriteNameById(id, this.highlighted);
			var sprite_txd = com.rockstargames.ScaleformUI.utils.Badges.GetSpriteDictionary(id);
			SetClip(this.leftBadgeMC,sprite_txd,sprite_name,24,24,this.leftBadgeLoaded,this);
			this.itemMC.labelMC._x = 28.25;
		}
		else
		{
			if (this.leftBadgeMC.isLoaded)
			{
				this.leftBadgeMC.removeTxdRef();
				this.leftBadgeMC.removeMovieClip();
				this.itemMC.labelMC._x = 5;
			}
		}
		this.updateLabelWidth();
	}

	function leftBadgeLoaded()
	{
		this.leftBadgeMC._visible = true;
		this.leftBadgeMC._width = 24;
		this.leftBadgeMC._height = 24;
		this.leftBadgeMC._x = 0.5;
		this.leftBadgeMC._y = 0.5;
		this.updateLabelWidth();
	}

[manups4e]

Also… rebuilding the ingame phone is a big project… i would start from something smaller… and grow step by step…

[DrHouse93]

Oh, finalmente qualcuno che risponde, e anche celermente
Anyway, thanks for the quick reply, I appreciate that! I’ll start working on it in the following days. I think
I know it’s a big project, but I don’t really like the many NUI phones out there (I don’t like NUIs in general, I prefer scaleforms) and the default phone is good, but very limited. So that’s why I had the idea to rebuild it (consider it the upgraded model )
But anyway, I’m used to hard work, I’m not afraid of the coding part^^ (now, about the graphic part, that’s another story…)

[manups4e]

Ahahahah tranquillo se posso rispondo sempre!

Anyway the code I provided you gives you should help loading dynamically any texture… you can check ScaleformUI main Readme on GitHub join my community and we can help you

[DrHouse93]

Your code is very clear…except for one part

SetClip()

From what I understood, I need to call this function to load txds from my scripts, I get that (I guess the appropriate native would be this: CallScaleformMovieMethodWithString)
My only doubt is the scope. How can I pass it as a parameter from, say, a .lua script? All the other parameters are fine, scope is the only one I can’t figure out how to pass

[manups4e]

The only thing you pass from lua is TXD,TXN, WIDTH, HEIGHT all other params are internal to flash
Scope is flash way to say “in the callback what can I see outside the callback itself?”

[DrHouse93]

Got it. So I need to create an intermediate function that receives the parameters from the script, and then calls SetClip?

Something like this:

function DataFromLua(txd,txn,width,height) {
    SetClip(targetMC, txd, txn, width, height, callback, scope)
}