创建倒计时器

local secondsLeft = 10 * 60  -- 10 minutes * 60 seconds

local sheetOptions = {
    frames = {
        { x=0, y=0, width=24, height=48 },    -- 1
        { x=24, y=0, width=34, height=48 },   -- 2
        { x=58, y=0, width=28, height=48 },   -- 3
        { x=86, y=0, width=36, height=48 },   -- 4
        { x=122, y=0, width=30, height=48 },  -- 5
        { x=152, y=0, width=38, height=48 },  -- 6
        { x=190, y=0, width=34, height=48 },  -- 7
        { x=224, y=0, width=36, height=48 },  -- 8
        { x=260, y=0, width=38, height=48 },  -- 9
        { x=298, y=0, width=40, height=48 },  -- 0
        { x=338, y=0, width=22, height=48 }   -- :
    },
    sheetContentWidth = 360,
    sheetContentHeight = 48
}
local sheet = graphics.newImageSheet( "timer-digits.png", sheetOptions )

本教程不会解释上述配置的细节  —如果你需要进一步了解该主题，请参阅 图像表 指南。本质上，这段新代码定义了图像表的帧（共 11 个）并创建了一个图像表 (sheet)。

local digitSequence = { name="digits", start=1, count=11 }

local colon = display.newSprite( sheet, digitSequence )
colon.x, colon.y = display.contentCenterX, 80
colon:setFrame( 11 )

同样，本教程不会介绍精灵设置，所有这些都在 精灵动画 指南中进行了概述。基本上，我们定义了一个简单的11 帧序列 (digitSequence)，创建我们的第一个精灵 (colon)，将其定位在屏幕上，然后将其帧设置为 11（请注意，冒号是图像表中的第 11 帧）。

local minutesSingle = display.newSprite( sheet, digitSequence )
minutesSingle.x, minutesSingle.y = 0, 80
minutesSingle.anchorX = 1

local minutesDouble = display.newSprite( sheet, digitSequence )
minutesDouble.x, minutesDouble.y = 0, 80
minutesDouble.anchorX = 1

local secondsDouble = display.newSprite( sheet, digitSequence )
secondsDouble.x, secondsDouble.y = 0, 80
secondsDouble.anchorX = 0

local secondsSingle = display.newSprite( sheet, digitSequence )
secondsSingle.x, secondsSingle.y = 0, 80
secondsSingle.anchorX = 0

前两个对象代表分钟数字，后两个对象代表秒。不用担心每个对象的初始 x 位置为 0  — 在此增强版本中，我们实际上将在现有的 updateTime() 函数中使用修改来设置每个数字的帧和位置。但是请注意，我们确实为这四个对象指定了锚点，这是一个重要的方面，可确保每个数字与其周围元素保持适当的间距。

local function updateTime( event )

    if ( event ~= "init" ) then
        -- Decrement the number of seconds
        secondsLeft = secondsLeft - 1
    end

接下来，在函数的下方，删除clockText.text = timeDisplay命令，因为该对象不再存在。在其位置添加以下突出显示的代码块

    -- Time is tracked in seconds; convert it to minutes and seconds
    local minutes = math.floor( secondsLeft / 60 )
    local seconds = secondsLeft % 60

    -- Make it a formatted string
    local timeDisplay = string.format( "%02d:%02d", minutes, seconds )
    
    -- Get the individual new value of each element in time display
    local md = tonumber( string.sub( timeDisplay, 1, 1 ) )
    local ms = tonumber( string.sub( timeDisplay, 2, 2 ) )
    local sd = tonumber( string.sub( timeDisplay, 4, 4 ) )
    local ss = tonumber( string.sub( timeDisplay, 5, 5 ) )
    if ( md == 0 ) then minutesDouble:setFrame( 10 ) else minutesDouble:setFrame( md ) end
    if ( ms == 0 ) then minutesSingle:setFrame( 10 ) else minutesSingle:setFrame( ms ) end
    if ( sd == 0 ) then secondsDouble:setFrame( 10 ) else secondsDouble:setFrame( sd ) end
    if ( ss == 0 ) then secondsSingle:setFrame( 10 ) else secondsSingle:setFrame( ss ) end

    -- Reposition digits around central colon
    minutesSingle.x = colon.contentBounds.xMin
    minutesDouble.x = minutesSingle.contentBounds.xMin
    secondsDouble.x = colon.contentBounds.xMax
    secondsSingle.x = secondsDouble.contentBounds.xMax
end

本质上，第一个块确定时间读数中每个数字的值，并将它们相应地设置为四个变量（md、ms、sd 和 ss）。例如，如果格式化的 timeDisplay 字符串是 05:36，则这些变量将是0、5、3 和 6分别。

使用这四个值，每个精灵的帧将被设置为正确的值。需要注意的是，对于每个值，如果变量等于 0，我们将帧设置为 10，这实际上是图像表中的0数字。否则，我们将帧设置为变量的值，该值与图像表中的表示形式相对应。

在第二个代码块中，我们重新定位所有四个数字，从中心的冒号向外移动。基本上，minutesSingle 表示冒号左侧的数字。该数字被推到冒号的左侧，然后 minutesDouble 被推到 minutesSingle 的左侧。类似地，secondsDouble 表示冒号右侧的数字，因此它被推到冒号的右侧。最后，secondsSingle 被推到 secondsDouble 的右侧。所有这些看起来可能很复杂，但是使用 contentBounds 属性和锚点使其表现良好，消除了计时器倒计时时数字之间的多余间距。

-- Initialize timer to set/position the digit sprites
updateTime( "init" )

-- Run the timer
local countDownTimer = timer.performWithDelay( 1000, updateTime, secondsLeft )

正如您所记得的，我们在步骤 4（第 46 行）中为此添加了一个条件阻塞器。此 "init" 参数将仅在我们调用第 76 行上的 updateTime() 函数时存在，而不是在第 79 行上的 countDownTimer 计时器调用该函数时存在。因此，我们有效地将 updateTime() 函数用于两个目的：将计时器显示初始化为第 1 行设置的值，以及在计时器倒计时时设置每个数字的帧/位置。