Forum Discussion

TaylerMarshall-'s avatar
TaylerMarshall-
Community Member
6 months ago

Variable Formatting

Does anyone know how to change a variable style? I'm making a game using a count variable, and once my score gets above 1,000, the variable displays as 1000. I'd like to add the comma into the displayed variable but I'm not sure how. Can anyone tell me how to change the displayed variable so that numbers include commas?  

  • Hi Tayler, 

    Thanks so much for reaching out regarding your question surrounding variables! 

    Great call opening support case. One of our talented support engineers will be in touch shortly via email. Thanks for your patience. 

    We'll continue the conversation over in your case. 

    Have a wonderful start to your week! 

      • hey2ya's avatar
        hey2ya
        Community Member

        Bummer. thank you! I tried searching the forum and didn't see what I was looking for. Chat GPT offered something, but I couldn't get it to work.

  • You need to use Javascript to format it, then return it to SL in a text variable.  There are numberous examples here on the forum.

  • TaylerMarshall- the solution for this is as follows:

    You need to define two variables, for example:

    1. SCORE type = number
    2. SCORE_DISPLAY type = text
    3.  

    SCORE will be used to track the users SCORE and SCORE_DISPLAY will be used to display the users SCORE with the appropriate formatting.

    In order to set the SCORE_DISPLAY, you would use a simple piece of JavaScript. I have wrapped the script in a function called updateSCORE which we can call when we need to.

    The window. before the function name makes it available to call outside of the slide, but you also need to put this function somewhere it will be included on the slides you need it to be available, for example, a template. In this example, I've just added it to the master template, and so this function will be available on every page in my module.

    updateSCORE = function()
    {
    	// Assign the Storyline Player to player
    	const player = GetPlayer();
    	// Assign the users SCORE to score (force to be a number)
    	const score = Number(player.GetVar("SCORE"));
    	// Convert the score to formatted string
    	const formattedNumber = score.toLocaleString();
    	// Set the SCORE_DISPLAY variable to the formattedNumber value
    	player.SetVar("SCORE_DISPLAY", formattedNumber);
    }

    I can then add the following function call to any trigger such as timeline start, button click, animation end etc.

    window.updateSCORE();

    In the example attached, the trigger is added to a button click after inputting the SCORE into the input field.