Game Scoring with images

Question

I've tried to add a scoring to my game, using numbers. My score is composed of 5 numbers as you can see on the image below

To display the starting score (00000), i used 5 images (scoreB.png is the image of the number zero) :

    score_nul_1 = display.newImage( "scoreB.png")
    score_nul_1.x = score_title.x+180---center the sprite horizontally
    score_nul_1.y = 35 --center the sprite vertically
    screenGroup:insert(score_nul_1)
    score_nul_1.isVisible=true

    score_nul_2 = display.newImage( "scoreB.png")
    score_nul_2.x = score_title.x+220---center the sprite horizontally
    score_nul_2.y = 35 --center the sprite vertically
    screenGroup:insert(score_nul_2)
    score_nul_2.isVisible=true

    score_nul_3 = display.newImage( "scoreB.png")
    score_nul_3.x = score_title.x+263---center the sprite horizontally
    score_nul_3.y = 35 --center the sprite vertically
    screenGroup:insert(score_nul_3)
    score_nul_3.isVisible=true

    score_nul_4 = display.newImage( "scoreB.png")
    score_nul_4.x = score_title.x+306---center the sprite horizontally
    score_nul_4.y = 35 --center the sprite vertically
    screenGroup:insert(score_nul_4)
    score_nul_4.isVisible=true

    score_nul_5 = display.newImage( "scoreB.png")
    score_nul_5.x = score_title.x+349---center the sprite horizontally
    score_nul_5.y = 35 --center the sprite vertically
    screenGroup:insert(score_nul_5)
    score_nul_5.isVisible=true

Then, i used a sprite to change the number from 1 to 9 :

local sheetData_scorea = { width=43, height=53, numFrames=10, sheetContentWidth=430, sheetContentHeight=53}
    local mySheet_scorea = graphics.newImageSheet( "scoreA.png", sheetData_scorea )
    local sequenceData_scorea = 
    {
        {name = "0", frames={10}, loopCount=0, time=1000 },
        {name = "1", frames={1}, loopCount=0, time=1000 },
        {name = "2", frames={2}, loopCount=0, time=1000 },
        {name = "3", frames={3}, loopCount=0, time=1000 },
        {name = "4", frames={4}, loopCount=0, time=1000 },
        {name = "5", frames={5}, loopCount=0, time=1000 },
        {name = "6", frames={6}, loopCount=0, time=1000 },
        {name = "7", frames={7}, loopCount=0, time=1000 },
        {name = "8", frames={8}, loopCount=0, time=1000 },      
        {name = "9", frames={9}, loopCount=0, time=1000 },      
        {name = "10", frames={10}, loopCount=0, time=1000 },


    }

    score_a1 = display.newSprite( mySheet_scorea, sequenceData_scorea)
    score_a1.x = score_title.x+306--center the sprite horizontally
    score_a1.y = 35 --center the sprite vertically
    screenGroup:insert(score_a1)
    score_a1.isVisible=false

And to update the score, i use this function :

if mydata.score >=100 and mydata.score<1000 then

            score_nul_4.isVisible=false
            score_nul_3.isVisible=false
        end

        if mydata.score < 100 then
            score_a.isVisible=true
            score_nul_4.isVisible=false
            score_a.x = score_title.x+306
            score_a:setSequence(i)
            score_a:play()
            i = i +1


        end

        if mydata.score>=100 then
            i=1
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(b)
            score_a1:play()
            b=b+1
        end
        if mydata.score>=200 then
            i=2
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(c)
            score_a1:play()
            c=c+1
        end
        if mydata.score>=300 then
            i=3
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(d)
            score_a1:play()
            d=d+1

        end
        if mydata.score>=400 then
            i=4
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(e)
            score_a1:play()
            e=e+1
        end

        if mydata.score>=500 then
            i=5
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(f)
            score_a1:play()
            f=f+1

        end
        if mydata.score>=600 then
            i=6
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(g)
            score_a1:play()
            g=g+1
        end

        if mydata.score>=700 then
            i=7
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(h)
            score_a1:play()
            h=h+1
        end
        if mydata.score>=800 then
            i=8
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(j)
            score_a1:play()
            j=j+1
        end
        if mydata.score>=900 then
            i=9
            score_a.x = score_title.x+263
            score_a.isVisible=true
            score_a:setSequence(i)
            score_a:play()

            score_a1.isVisible=true
            score_a1:setSequence(k)
            score_a1:play()
            k=k+1
        end

So my question is : Is it possible to have more "simple" way to make my scoring using images ?

Answer 1

Represent each digit of your 5 digit score by a display group of 10 display objects, with only one of the 10 display objects that has visible = true at any moment:

local digits = {}
local yPos = 100
local digitWidth = 20 -- pixels occupied by each digit

function createScoreDigit(digitNum)
    digits[digitNum] = display.newGroup()
    function addNumber(filename)
        local digit = display.newImage(filename)
        digit.visible = false
        digit.y = yPos
        digit.x = x0Pos + (digitNum-1) * digitWidth
        digits[digitNum].insert(digit)
    end
    addNumber('number0.jpg', 1)
    addNumber('number1.jpg', 1)
    ...
    addNumber('number9.jpg', 1)
    digits[digitNum][1].visible = true -- number 0
end

createScore(1)
createScore(2)
createScore(3)
createScore(4)
createScore(5)

This will display "0 0 0 0 0" assuming that "number0.jpg" is your digit 0. Of course you could use image sheet but the idea is the same, just the details of specifying the image for a given number, you can work that out.

Then when you increase your score you have to compute the new indices needed. For example when score increases by 10 you would have {0,0,0,1,0}, and you would toggle the correct visibility flags:

digits[4][1].visible = false -- make "0" invisible
digits[4][2].visible = false -- make "1" visible

Since the images are re-used across all display groups, the texture memory used should be minimal.

Answer 2

Yeah there are some easy ways to simplify this that I can think of.

The first way would be to split the score into single digits and loop through them.

So a score of 203 would become an array of 2,0,3. Loop through that (reverse) and get the last number: 3, then assign the appropriate image to update to the frame 3 (or it might be 4 in your case).

I can't actually write the code at the moment, but something down that road could help you.

Along those lines you could also check for the length of the score, so if it's 203, the length is 3 so then you use a for loop that starts at the length (3) and counts up until however many digits long you want and have it turn off those digits.