How to use scaleforms!

As there seems to be a lack of much info to do with scaleforms, I felt like this are too useful to not show how to use a few of them to create simple, but nice looking displays, such as this one:

Right, so lets say we wanted to create something like this but says “Wasted”. We would begin with requesting the scaleform by using: RequestScaleformMovie(scaleform) and replacing scaleform with the desired scaleform (I will leave a link to a file full of all the scaleforms, and I will also show how to use the functions too) In this case, we would want to request the scaleform mp_big_message_freemode therefore, it would look a bit like: RequestScaleformMovie("mp_big_message_freemode") Id reccomend using it in a variable so you dont have to type the same thing out over a few times.

So, for the Requesting of the scaleform it would look a bit like this in my case:

scaleform = RequestScaleformMovie("mp_big_message_freemode")
while not HasScaleformMovieLoaded(scaleform) do
    Citizen.Wait(0)
end

After you have done this, we can get to adding the text to it, which we can find in the correct .as file of the decompiled scaleform (see bottom for a full download of them). Upon entering the file you will see a lot of functions, the one i recommend for mp_big_message_freemode would be SHOW_SHARD_WASTED_MP_MESSAGE as it seems to work the best when adding the description section below the larger message.

Now onto the displaying portion. If we wanted to use the function SHOW_SHARD_WASTED_MP_MESSAGE you would do something like PushScaleformMovieFunction(scaleform, "SHOW_SHARD_WASTED_MP_MESSAGE") Change the scaleform part to the name of your scaleform unless you did what i did with using a variable on the requesting part of the scaleform like my example. Next, we want to show the text, since we want to show text we would push a string, like so: PushScaleformMovieFunctionParameterString("TEXT HERE") right after the pushing the movie function.

so in this case so far it would look like:

scaleform = RequestScaleformMovie(scaleform)
    while not HasScaleformMovieLoaded(scaleform) do
        Citizen.Wait(0)
    end
    PushScaleformMovieFunction(scaleform, "SHOW_SHARD_WASTED_MP_MESSAGE")
    PushScaleformMovieFunctionParameterString("~r~WASTED") -- the message we want to display

if we wanted a description, you would create another line and then push a string again such as “You commited suicide” or something like that,

after doing this, you would end the function off by doing PopScaleformMovieFunctionVoid() also note that some scaleforms allow you to use multiple functions, so for them cases you would push another function after popping the last one.

Finally, depending on if you wanted to make it fullscreen or not you would use:
DrawScaleformMovieFullscreen(scaleform, red, green, blue, alpha, unk)
Or:
DrawScaleformMovie(scaleformHandle, x, y, width, height, red, green, blue, alpha, unk)

The way I would go about doing all of this would look something like:

Citizen.CreateThread(function()
    function Initialize(scaleform)
        local scaleform = RequestScaleformMovie(scaleform)

        while not HasScaleformMovieLoaded(scaleform) do
            Citizen.Wait(0)
        end
        PushScaleformMovieFunction(scaleform, "SHOW_SHARD_WASTED_MP_MESSAGE")
        PushScaleformMovieFunctionParameterString("~r~WASTED")
        PushScaleformMovieFunctionParameterString("You commited suicide")
        PopScaleformMovieFunctionVoid()
        return scaleform
    end
    scaleform = Initialize("mp_big_message_freemode")
    while true do
        Citizen.Wait(0)
        DrawScaleformMovieFullscreen(scaleform, 255, 255, 255, 255, 0)
    end
end)

Which would in turn look like:

and thats it!
Sorry if it wasnt too good of an explaination, it isnt something im really good at, i just wanted to let people know of how useful this stuff can be. Finally, here is the list of scaleforms:

Full list of scaleforms decompiled!

@Vespura’s list of scaleforms online!
http://scaleform.devtesting.pizza

20 Likes

Now all there’s left to do is add GTA 2 “Wasted”

and it’s perfect.

3 Likes

I tried:
http://illusivetea.me/WhyIsThereSoManyFuckingRpServers/7u218U13g.png
Just cant remove the white lines

I meant the sound :smile:

Wouldn’t be difficult :smiley: there’s already a resource that lets you play custom sounds, so I don’t see why it wouldn’t be possible :stuck_out_tongue:

Having no idea how to use scaleform at all – this explains it pretty well, at least for that one example. I’m like 0/10 knowledge on scaleform.

Would it be possible to use this to create a help dialogue that can display the picture of a control with some text – like the one that normally comes up on the top-left of screen … just moved somewhere else. I wish I could use that, but the chat gets in the way.

As I’m not currently on my PC with all the scale forms on, I cannot say for sure, but there could also be a different native you could use possible. I have linked st the bottom of the tut a near full list of all the scale forms decompiled, you could always check and see if they’re on there :smiley: if I remember I will upload all of the scale forms and maybe list some other neat scaleforms

I think I found it. instructional_buttons, but I’m not sure if that just draws the button… or if I can add text too

I’ll be able to position it wherever with the DrawScaleformMovieFullscreen I assume. I’ll have to do some testing.

Edit: Tried playing around with it… still completely lost. Lol

Illusive made a tutorial? whaaaaaat? anyways, thanks for the tutorial on scaleforms, doubt ill use it tho.

The best thing to do to find out is to delve into the scaleforms themselves.

So, if you wanted to find out what you can do with instuctional_buttons you can look into that. For example, instuctional_buttons has a function called SET_DATA_SLOT which looks like it is used to add buttons.

So, to add a button you probably do (edit, found this, you can probably take these and look at what the raw functions do)

function addInstructionalButton(instructionCount --[[index to put this button in, start at 0]], buttonId --[[the button to draw]], text --[[the text to show with the button]] )

    PushScaleformMovieFunction(scaleform, "SET_DATA_SLOT")
    
    PushScaleformMovieParameterInt(instructionCount) -- index
    PushScaleformMovieParameterInt(buttonId) -- button
    
     BeginTextComponent("STRING")
     AddTextComponentString(text)
     EndTextComponent()

    PopScaleformMovieFunctionVoid()
end
1 Like

Also it needs to be in a loop :wink:

AFAIK, only the drawing needs to be in the loop. You can add the buttons and stuff once.

That’s what I get for not reading it :stuck_out_tongue:

Just made a meh video that shows me using one, hopefully this makes sense more than the text tut

http://illusivetea.me/WhyIsThereSoManyFuckingRpServers/2U856b47A.mp4

2 Likes

Also note that if a scaleform sets a text value by using .htmlText (like this.CONTENT.txt_copy.htmlText in the video) then you can use HTML inside the string.

For example:

PushScaleformMovieFunction(scaleform, "SET_TEXT")

PushScaleformMovieFunctionParameterString("Quit")
PushScaleformMovieFunctionParameterString("<b>Bold</b> <i>Italics</i> ~r~Coloured")

PopScaleformMovieFunctionVoid()

will produce:

4 Likes

I think I’m in love with scaleform now. I’m at work, so I can’t look into your earlier reply quite yet. In the decompiled scripts – is there a spot in there that shows what functions you can do? Like the SET_DATA_SLOT? How do you know how many parameters it can take? Again, at work, so I can’t look into it yet… sorry :stuck_out_tongue:

So lets say for the example i used in the video, MISSION_QUIT in the actionscript file you will see functions, like:

function SET_TEXT(title, copy)
   {
      this.CONTENT.txt_title.text = title;
      this.CONTENT.txt_copy.htmlText = copy;
   }

As you can see, next to the SET_TEXT that shows how many parameters it can take, however for some odd reason some functions will just have no params in the brackets but will still take them, such as the wasted eg i used

For some (like the SET_DATA_SLOT ones) you have to delve deep into the scaleforms code… If they don’t explicitly tell you the parameters in the function (like the SET_TEXT one being shown) then they generally use arguments (which is just an array of all arguments being passed).

For example, the SET_DATA_SLOT function uses the arguments array like so:

var _loc6_ = arguments[0]; //this is the first int passed
if(_loc6_ != this.ICON_INVALID) // 9999
{
    // it does everything else
}

It then splices the arguments removing the first element and leaving the rest (in this case an int and string).

var _loc4_ = arguments.slice(1); // _loc4_ is now the array of arguments without the very first element (the int used above)

Later on in the scaleform createItem is called with the button created earlier (this is the spliced array used in SET_DATA_SLOT) and you can see how the button is created there, if it encounters a string it creates a text field and if it encounters a number, it sets the icon (AFAIK, you can’t pass objects so we ignore that):

         if(typeof item[_loc2_] == "string")
         {
            _loc5_.push(true);
            _loc4_.push(this.generateTextField("TF_" + _loc2_,item[_loc2_],_loc8_));
         }
         if(typeof item[_loc2_] == "number")
         {
            _loc5_.push(false);
            _loc4_.push(this.createButtonIcon(item[_loc2_],_loc8_));
         }

Now, if the instructional_buttons are “clickable” then you also need to pass a number and boolean before the rest of the data (as indicated with the lines below, see Array#shift for array shifting).

      if(this.CLICKABLE)
      {
         _loc9_ = Number(item.shift());
         _loc10_ = Boolean(item.shift());
      }

TL;DR: If the fuction doesn’t explicitly tell you the parameters to pass (in some cases, as well as the explicitly set parameters) you will need to delve into the decompiled code.

Currently making a gist of any neat scaleforms i find:
http://illusivetea.me/FiveM/scaleforms.html

1 Like

I see – sort of. I looked into a little. Makes a litttttle bit more sense now :smile:

Is the “main” script we will be looking into always going to be ...\scripts\__Packages\com\rockstargames\gtav\levelDesign\(ScaleformName.as)