topic Re: Scaleform Progress Bar in Stingray Forum (Read Only)

Scaleform Progress Bar

Anonymous — Fri, 29 Apr 2016 02:56:19 GMT

Howdy All,

I can't seem to find a way to update Scaleform Progress Bar through Flow or Lua. If there are additional documentation on how to set this up that would be Awesome!

Cheers

Re: Scaleform Progress Bar

Anonymous — Fri, 29 Apr 2016 22:08:05 GMT

I found a Progress Bar example along with some other widget examples, in

C:\Program Files\Autodesk\Stingray\1.2.564.5\editor\ScaleformStudio\content\projects\WidgetCollection\WidgetCollection.s2dproj

My exercise is to turn a Progress Bar into a Health Bar. I hope to come up with something. If anyone has a solution to this exercise feel free to post. 😃

Re: Scaleform Progress Bar

Anonymous — Sat, 30 Apr 2016 01:02:53 GMT

Yup... great scaleform widget examples in WidgetCollection.s2dproj file.

Re: Scaleform Progress Bar

Anonymous — Sat, 30 Apr 2016 04:31:52 GMT

I confess I am so new to game programming... can someone explain the intent for these lines of code from Progress Bar Widget.lua

scaleform.AnimationComponent.goto_label(mainContainer, "started");

scaleform.AnimationComponent.goto_label(mainContainer, "normal");

This is a lua code to make a Progress Bar into a Health Bar using the ProgressBarWidget. If it does not work, drop me a line.

--
-- IMPORTANT: This script resource may be attached to all progress bar widgets created by the Widget Creator panel.
--            If modifications are required, then first copy this file to a unique path and fix all necessary
--            script components' resource paths.
--

--[[ Create this Function in any *.lua file but make sure there is a 'require' associated with it, 
in my case its in Project.lua so no 'require' needed. Then you can call it in Flow.

function Project.updateShipHealth(myVar)
    local actorProgressBar = scaleform.Stage.actor_by_name_path("Scene0.Ship_Health_PB");
	local widget = scaleform.Actor.component_by_name(actorProgressBar, "WidgetBase");
	local widgetApi = scaleform.ScriptComponent.script_results(widget);
	
	widgetApi.setProgress(myVar);
end

]]--

-- Modified ProgressBarWidget.lua

local thisActor = ...;
local currentProgressBarPercentage = 101;
scaleform.Actor.set_mouse_enabled_for_children(thisActor, false);

local emitEvent = function(func, param)
    local comp = scaleform.Actor.component_by_name(thisActor, "WidgetHandler");
    if comp ~= nil then
        local handlerObject = scaleform.ScriptComponent.script_results(comp);
        if handlerObject ~= nil then
            if handlerObject[func] ~= nil then
                if (param) then
                    handlerObject[func](param);
                else
                    handlerObject[func]();
                end
            end
        end
    end
end

-- Helper function to set the current progress of the widget (0 to 100)
local setProgress = function(progressPercentage)

    if (progressPercentage < 0) then progressPercentage = 0; end
    if (progressPercentage > 100) then progressPercentage = 100; end

    local mainContainer = scaleform.Actor.container(thisActor);
    
    -- Process only if progression has changed.
    if (currentProgressBarPercentage ~= progressPercentage) then

        currentProgressBarPercentage = progressPercentage;
        
        if (currentProgressBarPercentage > 0) then
            if (currentProgressBarPercentage == 100) then
                emitEvent("started");
            end
            --scaleform.AnimationComponent.goto_label(mainContainer, "started");
        else
           --scaleform.AnimationComponent.goto_label(mainContainer, "normal");
        end

        if (currentProgressBarPercentage > 0) then
            local bitmap = scaleform.ContainerComponent.actor_by_name(mainContainer, "bitmap");
            
            if (bitmap) then
                scaleform.Actor.set_local_scale( bitmap, {x=currentProgressBarPercentage/100.0, y=1.0} ) ;
                emitEvent("onProgress", currentProgressBarPercentage);
            end
        end

        if (currentProgressBarPercentage <= 0) then
            --Old version if (currentProgressBarPercentage == 100) then
            emitEvent("complete");
        end
    end
end

-- Helper function to increment the current progress of the widget (0 to 100)
local incrementProgress = function()
    if (currentProgressBarPercentage < 100) then
        setProgress(currentProgressBarPercentage+1);
    end
end

-- Helper function to reset the current progress of the widget.
local resetProgress = function()
    --setProgress(0);
    setProgress(100);
end

-- Helper function to get  the current progress of the widget.
local getProgress = function()
    return currentProgressBarPercentage;
end

-- Save the methods below in this script component to use them from elsewhere
local exports = {
    incrementProgress = incrementProgress;
    setProgress = setProgress;
    resetProgress = resetProgress;
    getProgress = getProgress;
}
return exports;

Re: Scaleform Progress Bar

paulkind — Mon, 02 May 2016 12:59:09 GMT

Hi Joseph

If you double click within the widget you will notice there is an animation timeline in there.

scaleform.AnimationComponent.goto_label(mainContainer, "started");

scaleform.AnimationComponent.goto_label(mainContainer, "normal");

Both of these lines are telling to the animation component to set the playhead (goto_label) within the timeline of the animation component to jump to "started" and "normal" respectively. Markers are on the timeline in this case within "AnimationComponent" and are used to designate a specific frame within an animation.

Paul

Re: Scaleform Progress Bar

Anonymous — Mon, 02 May 2016 20:43:12 GMT

Paul,

Oh interesting. The progress bar widget defers to the animation timeline as a form of measurement.

Thanks!

Re: Scaleform Progress Bar

Shanii2 — Sun, 14 Aug 2016 18:04:09 GMT

I think i found away to create a custom progress bar of any shape or sizes instead of straight bar. and without use of code 😉 .. for this

Create a background actor with total dimension of the actual length of progress bar.

Make it animation component container to contain more actors.

Now add a bitmap image fill color to fill the background of same size in width and height..

You can further use animated type as well. in form of fill

Now dublicate the background layer and it as a masking layer to mask the fill layer..

Keep the mask over to the side so that its no longer covering the fill. make sure the masking layer is of same size as that of background.

Go to the timeline of masking layer and mark keyframes from 1 to 100 frames.

Now animate the mask layer at 1 frame to just a bit over the fill to reveal small amount i.e (1%).. and at 100. move it along all the way over the fill i.e 100%

Now mark each step on timeline so that at every frame you get increamental orders of percentage over timeline And Wollahh!!.. you have custom progress bar. Now you just have to send command to go to such and such frame on timeline and you'll get the progress of it because you have divided your timeline of 100 frames as a form of measurement and you can directly plug the number of frame to play based of any increamental stages you want.

For Continues progress bar instead of marking each frame ad linear tween between 1 to 100 frames and at stop action at frame 1 and whenever you want to start just set it to go to frame 2 to play as continues progress bar..

with this structure you can have any style of progress bar as either rectangular, circular, spherical, fills etc its only a matter of how you animate the mask layer. 🙂