第 5 章 — 将游戏转换为 Composer

物理设置

由于此游戏显然仍然会利用物理引擎，因此没有理由将该设置推迟到以后。将您的物理设置命令从 main_original.lua 复制并粘贴到场景可访问的game.lua 的 空间中，紧跟在场景初始化之后

local composer = require( "composer" )

local scene = composer.newScene()

-- -----------------------------------------------------------------------------------
-- Code outside of the scene event functions below will only be executed ONCE unless
-- the scene is removed entirely (not recycled) via "composer.removeScene()"
-- -----------------------------------------------------------------------------------

local physics = require( "physics" )
physics.start()
physics.setGravity( 0, 0 )

图像表单

接下来我们需要图像表单配置。让我们将其粘贴在物理命令下方

local physics = require( "physics" )
physics.start()
physics.setGravity( 0, 0 )

-- Configure image sheet
local sheetOptions =
{
    frames =
    {
        {   -- 1) asteroid 1
            x = 0,
            y = 0,
            width = 102,
            height = 85
        },
        {   -- 2) asteroid 2
            x = 0,
            y = 85,
            width = 90,
            height = 83
        },
        {   -- 3) asteroid 3
            x = 0,
            y = 168,
            width = 100,
            height = 97
        },
        {   -- 4) ship
            x = 0,
            y = 265,
            width = 98,
            height = 79
        },
        {   -- 5) laser
            x = 98,
            y = 265,
            width = 14,
            height = 40
        },
    }
}
local objectSheet = graphics.newImageSheet( "gameObjects.png", sheetOptions )

初始变量

在图像表单设置之后，粘贴来自 main_original.lua 的以下局部变量

local objectSheet = graphics.newImageSheet( "gameObjects.png", sheetOptions )

-- Initialize variables
local lives = 3
local score = 0
local died = false

local asteroidsTable = {}

local ship
local gameLoopTimer
local livesText
local scoreText

显示组

在我们最初的版本中，我们创建了三个显示组来对我们的游戏对象进行排序和分层：backGroup、mainGroup 和 uiGroup。我们将继续使用它们，但由于我们使用的是 Composer，因此需要进行一些小的修改。

在上一章中，您学习了如何将场景对象插入到场景的**视图**组 (sceneGroup) 中。现在，一个需要理解的重要概念是显示组实际上可以插入到其他显示组中！因此，我们可以维护原始游戏中的三个显示组，**并将**它们放入场景的视图组中。

为了方便这一点，我们将推迟实际创建我们的三个组，直到我们创建场景。但是，我们现在仍然需要使用您之前学到的**前向声明**方法来定义变量。因此，不要将每个变量与 display.newGroup() 关联，暂时让它们未定义

local ship
local gameLoopTimer
local livesText
local scoreText

local backGroup
local mainGroup
local uiGroup

游戏函数

当我们继续 melewati titik ini di `main_original.lua`, kita sampai pada fungsi lokal yang memberdayakan fungsionalitas inti game kita. Pada dasarnya, ini dapat disalin langsung ke file `game.lua` Anda, ditempel langsung di bawah variabel yang baru saja kita definisikan.

Pertama, salin fungsi `updateText()`

local backGroup
local mainGroup
local uiGroup


local function updateText()
    livesText.text = "Lives: " .. lives
    scoreText.text = "Score: " .. score
end

Ikuti ini dengan fungsi `createAsteroid()`

local function updateText()
    livesText.text = "Lives: " .. lives
    scoreText.text = "Score: " .. score
end


local function createAsteroid()

    local newAsteroid = display.newImageRect( mainGroup, objectSheet, 1, 102, 85 )
    table.insert( asteroidsTable, newAsteroid )
    physics.addBody( newAsteroid, "dynamic", { radius=40, bounce=0.8 } )
    newAsteroid.myName = "asteroid"

    local whereFrom = math.random( 3 )

    if ( whereFrom == 1 ) then
        -- From the left
        newAsteroid.x = -60
        newAsteroid.y = math.random( 500 )
        newAsteroid:setLinearVelocity( math.random( 40,120 ), math.random( 20,60 ) )
    elseif ( whereFrom == 2 ) then
        -- From the top
        newAsteroid.x = math.random( display.contentWidth )
        newAsteroid.y = -60
        newAsteroid:setLinearVelocity( math.random( -40,40 ), math.random( 40,120 ) )
    elseif ( whereFrom == 3 ) then
        -- From the right
        newAsteroid.x = display.contentWidth + 60
        newAsteroid.y = math.random( 500 )
        newAsteroid:setLinearVelocity( math.random( -120,-40 ), math.random( 20,60 ) )
    end

    newAsteroid:applyTorque( math.random( -6,6 ) )
end

Fungsi berikutnya, `fireLaser()`, harus mengikuti

    newAsteroid:applyTorque( math.random( -6,6 ) )
end


local function fireLaser()

    local newLaser = display.newImageRect( mainGroup, objectSheet, 5, 14, 40 )
    physics.addBody( newLaser, "dynamic", { isSensor=true } )
    newLaser.isBullet = true
    newLaser.myName = "laser"

    newLaser.x = ship.x
    newLaser.y = ship.y
    newLaser:toBack()

    transition.to( newLaser, { y=-40, time=500,
        onComplete = function() display.remove( newLaser ) end
    } )
end

ship:addEventListener( "tap", fireLaser )

ship:addEventListener( "tap", fireLaser )

ship:addEventListener( "touch", dragShip )

gameLoopTimer = timer.performWithDelay( 500, gameLoop, 0 )

Runtime:addEventListener( "collision", onCollision )

Pada dasarnya, sisa dari场景可访问的ruang Anda harus diisi sebagai berikut

local function dragShip( event )

    local ship = event.target
    local phase = event.phase

    if ( "began" == phase ) then
        -- Set touch focus on the ship
        display.currentStage:setFocus( ship )
        -- Store initial offset position
        ship.touchOffsetX = event.x - ship.x

    elseif ( "moved" == phase ) then
        -- Move the ship to the new touch position
        ship.x = event.x - ship.touchOffsetX

    elseif ( "ended" == phase or "cancelled" == phase ) then
        -- Release touch focus on the ship
        display.currentStage:setFocus( nil )
    end

    return true  -- Prevents touch propagation to underlying objects
end


local function gameLoop()

    -- Create new asteroid
    createAsteroid()

    -- Remove asteroids which have drifted off screen
    for i = #asteroidsTable, 1, -1 do
        local thisAsteroid = asteroidsTable[i]

        if ( thisAsteroid.x < -100 or
             thisAsteroid.x > display.contentWidth + 100 or
             thisAsteroid.y < -100 or
             thisAsteroid.y > display.contentHeight + 100 )
        then
            display.remove( thisAsteroid )
            table.remove( asteroidsTable, i )
        end
    end
end


local function restoreShip()

    ship.isBodyActive = false
    ship.x = display.contentCenterX
    ship.y = display.contentHeight - 100

    -- Fade in the ship
    transition.to( ship, { alpha=1, time=4000,
        onComplete = function()
            ship.isBodyActive = true
            died = false
        end
    } )
end


local function onCollision( event )

    if ( event.phase == "began" ) then

        local obj1 = event.object1
        local obj2 = event.object2

        if ( ( obj1.myName == "laser" and obj2.myName == "asteroid" ) or
             ( obj1.myName == "asteroid" and obj2.myName == "laser" ) )
        then
            -- Remove both the laser and asteroid
            display.remove( obj1 )
            display.remove( obj2 )

            for i = #asteroidsTable, 1, -1 do
                if ( asteroidsTable[i] == obj1 or asteroidsTable[i] == obj2 ) then
                    table.remove( asteroidsTable, i )
                    break
                end
            end

            -- Increase score
            score = score + 100
            scoreText.text = "Score: " .. score

        elseif ( ( obj1.myName == "ship" and obj2.myName == "asteroid" ) or
                 ( obj1.myName == "asteroid" and obj2.myName == "ship" ) )
        then
            if ( died == false ) then
                died = true

                -- Update lives
                lives = lives - 1
                livesText.text = "Lives: " .. lives

                if ( lives == 0 ) then
                    display.remove( ship )
                else
                    ship.alpha = 0
                    timer.performWithDelay( 1000, restoreShip )
                end
            end
        end
    end
end


-- -----------------------------------------------------------------------------------
-- Scene event functions
-- -----------------------------------------------------------------------------------

Kerja bagus! Sekarang kita memiliki semua场景可访问的kode yang disalin. Di beberapa bagian berikutnya, kita akan mengilustrasikan bagaimana fungsi `scene:` Composer menyatukan game kita.

过渡效果

Meskipun kita tidak menggunakannya untuk adegan menu, perintah composer.gotoScene() memungkinkan Anda untuk menentukan **efek transisi** seperti memudar, meluncur masuk dari tepi layar,cross-fadingdari adegan sebelumnya, dll. Tentu, ada durasi **waktu** yang terkait dengan awal dan akhir transisi adegan, dan di sinilah **fase adegan** ikut berperan.

场景阶段

Faktor penting untuk dipahami(berbeda dengan `scene:create()`)adalah bahwa Composer memanggil fungsi `scene:show()` **dua kali**. Tentu saja penting untuk mengetahui **kapan** masing-masing panggilan ini terjadi sehingga kita dapat mengambil tindakan yang tepat pada waktu yang tepat. Perbedaan ini diberikan melalui `event.phase` dalam `scene:show()`. Pada dasarnya, panggilan/fase `scene:show()` bekerja seperti ini

1. Panggilan pertama terjadi ketika adegan siap untuk ditampilkan, pada dasarnya setelah setiap perintah dalam `scene:create()` telah dieksekusi. Dalam hal ini, `event.phase` adalah ` "will"`, yang secara efektif menunjukkan bahwa adegan "akan ditampilkan" dan efek transisi akan segera terjadi.

2. Panggilan kedua terjadi segera **setelah** adegan ditampilkan — pada dasarnya, ketika transisi adegan telah selesai. Dalam hal ini, `event.phase` adalah ` "did"`, yang berarti adegan "telah ditampilkan" dan efek transisi selesai.

-- show()
function scene:show( event )

    local sceneGroup = self.view
    local phase = event.phase

    if ( phase == "will" ) then
        -- Code here runs when the scene is still off screen (but is about to come on screen)

    elseif ( phase == "did" ) then
        -- Code here runs when the scene is entirely on screen

    end
end

Sekarang setelah Anda memahami konsep ini, cukup tempel kode dari file `main_original.lua` Anda ke dalam klausa kondisional yang tepat. Untuk game ini, pada dasarnya kita ingin memulai permainan — menelurkan asteroid, mendeteksi tabrakan, dll. — setelah adegan sepenuhnya ditampilkan di layar(fase ` "did"`). Jadi, di file `game.lua` Anda, di dalam fungsi `scene:show()`, tambahkan tiga perintah yang disorot

-- show()
function scene:show( event )

    local sceneGroup = self.view
    local phase = event.phase

    if ( phase == "will" ) then
        -- Code here runs when the scene is still off screen (but is about to come on screen)

    elseif ( phase == "did" ) then
        -- Code here runs when the scene is entirely on screen
        physics.start()
        Runtime:addEventListener( "collision", onCollision )
        gameLoopTimer = timer.performWithDelay( 500, gameLoop, 0 )
    end
end

Pada dasarnya, perintah-perintah ini menyelesaikan hal berikut:

1. 使用 physics.start() 重新启动物理引擎（记住我们在 scene:create() 中暂停了它）。
2. 启动碰撞检测。
3. 使用我们原来的 timer.performWithDelay() 命令启动游戏循环。

事件链接

我们的 scene:hide() 函数现已完成，但我们需要采取最后几个步骤来确保它实际被调用。从逻辑上讲，除非您有意导致场景隐藏，否则场景永远不会隐藏，并且当您告诉 Composer 转到其他场景（composer.gotoScene()）时，就会发生这种情况。

在我们的游戏中，我们希望在玩家死亡且没有剩余生命时返回菜单 - 或者最终进入高分场景 - 此条件已在我们之前的代码中部分考虑到了，因此我们只需要在同一位置添加一个附加命令即可。

在 game.lua 中，找到您的 onCollision 函数，并在其末尾附近找到此条件块

                -- Update lives
                lives = lives - 1
                livesText.text = "Lives: " .. lives
                
                if ( lives == 0 ) then
                    display.remove( ship )
                else
                    ship.alpha = 0
                    timer.performWithDelay( 1000, restoreShip )
                end
            end
        end
    end
end

现在，直接在display.remove( ship )命令下方，添加以下突出显示的命令

                if ( lives == 0 ) then
                    display.remove( ship )
                    timer.performWithDelay( 2000, endGame )
                else
                    ship.alpha = 0
                    timer.performWithDelay( 1000, restoreShip )
                end
            end
        end
    end
end

timer.performWithDelay() 命令并不是什么新鲜事 - 此实例只是在 2000 毫秒（2 秒）后调用函数 endGame()。当然，我们实际上还没有编写 endGame() 函数，所以现在让我们编写它。直接在 onCollision() 函数**上方**添加此新函数

local function endGame()
    composer.gotoScene( "menu", { time=800, effect="crossFade" } )
end


local function onCollision( event )

    if ( event.phase == "began" ) then

目前，此函数只是通过调用 composer.gotoScene() 返回菜单。