Libgdx游戲開發(2)——接水滴游戲實現

原文:Libgdx游戲開發(2)——接水滴游戲實現 - Stars-One的雜貨小窩本文使用Kotlin語言開發通過本文的學習可以初步瞭解以下基礎知識的使用: Basic file access Clearing the screen Drawing images Using a camera ...

原文:Libgdx游戲開發(2)——接水滴游戲實現 - Stars-One的雜貨小窩

本文使用Kotlin語言開發

通過本文的學習可以初步瞭解以下基礎知識的使用:

Basic file access
Clearing the screen
Drawing images
Using a camera
Basic input processing
Playing sound effects

游戲玩法

游戲的主要玩法有以下5點:

使用桶接水滴
桶只能左右移動
水滴會從頂部並加速下落
玩家可以通過滑鼠或鍵盤來移動桶
游戲沒有結束一說,可以一直玩

預覽動圖:

步驟

1.創建項目

由於我是要使用Kotlin開發,所以勾選了Kotlin開發的選項

實際上,創建出來的項目,還是Java文件寫的,所以,為了方便,我用了Android Studio把Java文件轉為了Kotlin文件

2.添加資源文件

之後,我們需要添加該有的素材文件,總共有四個文件

drop.wav 水滴掉落在桶里的聲音
rain.mp3 雨聲(背景聲)
bucket.png 桶圖片
drop.png 水滴圖片

都放在assets資源文件夾中

資源文件下載可以點擊下載藍奏雲下載

3.設置游戲配置

找到desktop文件夾目錄下的代碼文件,進行代碼的修改,調整游戲視窗大小為800*480,並開啟垂直同步

//設置游戲視窗大小為800*480
config.setWindowedMode(800, 480)
//設置開啟垂直同步
config.useVsync(true)

4.載入資源文件

我們進入到core目錄下的CatchWater文件,可以看到具體的代碼結構

這裡可以看到我們的類是繼承ApplicationAdapter,從名字上就可以讓我們猜測到是使用的設計模式中的適配器模式來相容不同平臺(沒深入驗證,僅是猜測)

ApplicationAdapter是抽象類方法,提供了幾個需要重寫的方法,感覺和Android開發中的Activity差不多,應該就是Libgdx游戲的生命周期方法了,這裡先不深入擴展了

因為在游戲開始前,我們得先載入上述我們複製到項目的一些圖片和音樂的資源文件,所以我們選擇在create()方法中進行初始化我們的資源文件

添加以下代碼:

lateinit var dropImage: Texture
lateinit var bucketImage: Texture
lateinit var dropSound: Sound
lateinit var rainMusic: Music

override fun create() {
    // load the images for the droplet and the bucket, 64x64 pixels each
    dropImage = Texture(Gdx.files.internal("drop.png"))
    bucketImage = Texture(Gdx.files.internal("bucket.png"))

    // load the drop sound effect and the rain background "music"
    dropSound = Gdx.audio.newSound(Gdx.files.internal("drop.wav"))
    rainMusic = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"))

}

這裡需要註意下,我們兩張圖片(水滴和桶)解析度都是64*64

我們使用了Gdx.files.internal()方法來獲取assets文件夾里的內容,之後游戲如果是運行在Android平臺上,這個方法也是通用的

如果是assets文件夾里還有一層文件夾,可以這樣寫:

Gdx.files.internal("iamge/myimg.png")

稍微講解下用到的幾個類,具體知識得後面再新開文章進行研究

Texture 這個英文翻譯是紋理,但其實可以看做成圖片的記憶體對象,類似Android開發里的Bitmap
Sound 比較短的那種音效文件
Music 時長較長的音頻文件

5.播放背景音樂

之後我們可以實現播放背景音樂了,這個我們也直接在資源文件載入完畢之後播放吧

//設置迴圈播放背景音樂
rainMusic.setLooping(true)
rainMusic.play()

這個時候,我們可以進入到desktop里的那個文件,點擊箭頭運行游戲

游戲界面是黑屏的,但是已經開始播放音樂了,這裡就不放圖了

6.繪製圖形

上述載入資源文件,我們已經得到了兩個Texture對象,這個時候我們需要將其畫出來,可以通過SpriteBatch這個類來實現

我們直接新建一個全局變數,然後也是在create()方法初始化即可

之後,在render()方法里,將我們的圖片繪製出來

override fun render() {
    //設置屏幕背景色
    ScreenUtils.clear(0f, 0f, 0.2f, 1f)
    
    //繪製圖片
    batch.begin()
    batch.draw(bucketImage, 400f, 400f)
    batch.end()
}

效果如下圖所示:

這裡需要註意一個問題:

在Libgdx中,預設坐標系是以左下角為原點,也就是常規的數學坐標系,當然,也可以通過Camare進行修改,具體如何修改,這裡先不研究

上述代碼,我們將圖片對象的左下角,繪製到屏幕的(400,400)坐標位置上

上面雖然我們成功繪製了一個圖片,但是考慮到下述幾個問題:

雨滴掉落需要改變y坐標,但是y坐標如何存儲呢?
桶左右移動,需要改變x坐標,x坐標應該如何存儲呢?
如何確認雨滴和桶的邊界關係呢?

考慮到上述的問題,單純的坐標點記錄會使後續的流程代碼變得十分的複雜,這個時候我們可以引入一個範圍來記錄相關的坐標點信息

這裡我們可以選用矩形Rectangle來存儲我們的圖片繪製位置

PS:實際上,不只有Rectangle矩形,還有其他的形狀,但具體的使用,還是留在後面教程再進行補充吧

我們通過定義矩形的左上角(x,y)坐標點和寬高,就可以確認一個Rectangle矩形範圍了,如下代碼所示:

val bucket = Rectangle().apply {
    //桶放中間
    x = (800 / 2 - 64 / 2).toFloat()
    y = 20.toFloat()
    width = 64.toFloat()
    height = 64.toFloat()
}

由於此矩形區域是我們用來找回進行邊界關係的比對,所以將其寬高都設置為與圖片圖像的解析度一樣(64*64)

這樣一來,我們使用batch.draw()方法繪製的時候,能將圖片對象剛好覆蓋到矩形範圍里

batch.begin()
batch.draw(bucketImage, bucket.x, bucket.y)
batch.end()

7.雨滴下落實現

按照上述的邏輯,我們也創建一個雨滴的矩形範圍,並將其繪製出來

雨滴預設在最上面,由於繪製圖片的時候以左下角來繪製的,所以,最大y坐標減去64,即是雨滴開始的固定高度

然後雨滴的x坐標是隨機的,但是最大範圍為800減去寬度64

MathUtils是Libgdx提供的隨機數工具類

val rainDrop = Rectangle().apply {
    //x坐標隨機
    x = MathUtils.random(0, 800 - 64).toFloat()
    y = (480 - 64).toFloat()
    width = 64.toFloat()
    height = 64.toFloat()
}

override fun render() {
    batch.projectionMatrix = camera.combined
    batch.begin()
    batch.draw(dropImage, rainDrop.x, rainDrop.y)
    batch.end()
}

效果如下所示:

接下來,我們需要實現雨滴的下落功能,這裡,我們可以採用時間作為變數,隨著時間的變長來改rainDrop對象的y坐標數值

override fun render() {
    batch.begin()
    batch.draw(dropImage, rainDrop.x, rainDrop.y)
    batch.end()

    rainDrop.y -= 200 * Gdx.graphics.deltaTime
}

效果如下:

可以看到,下落效果實現了,但是似乎出現了重覆的東西,其實就是我們在開始的沒清除掉上次繪製的圖像,加上清除的代碼即可:

override fun render() {
     //清除並設置屏幕背景色
    ScreenUtils.clear(0f, 0f, 0.2f, 1f)
    
    batch.begin()
    batch.draw(dropImage, rainDrop.x, rainDrop.y)
    batch.end()
    
    //每幀的時間,高度減少200
    rainDrop.y -= 200 * Gdx.graphics.deltaTime
}

8.判斷雨滴是否掉落在桶里

這裡,就是需要判斷邊界了,上面也說到,使用Rectangle矩形,就是方便我們判斷是否水滴和桶接觸了

Rectangle對象中,有個overlaps()方法,就是專門來判斷兩個矩形是否重疊了

//判斷兩個矩形的接觸面積有重疊,即水滴掉落在桶里
if (rainDrop.overlaps(bucket)) {
    //播放音效
    dropSound.play()
}

9.鍵盤控制改變桶位置

上面的功能已經基本完成了,那麼還差通過鍵盤來控制桶的位置就能實現了

我們判斷是否按下方向鍵左或右來改變桶對應矩形的x坐標,這樣就能改變桶的繪製位置了

override fun render() {
    //清除設置屏幕背景色
    ScreenUtils.clear(0f, 0f, 0.2f, 1f)
    batch.projectionMatrix = camera.combined

    batch.begin()
    batch.draw(bucketImage, bucket.x, bucket.y)
    batch.draw(dropImage, rainDrop.x, rainDrop.y)
    batch.end()

    rainDrop.y -= 200 * Gdx.graphics.deltaTime

    //鍵盤輸入判斷
    if (Gdx.input.isKeyPressed(Input.Keys.LEFT)) bucket.x -= 200 * Gdx.graphics.deltaTime
    if (Gdx.input.isKeyPressed(Input.Keys.RIGHT)) bucket.x += 200 * Gdx.graphics.deltaTime

    //判斷兩個矩形的接觸面積有重疊,即水滴掉落在桶里
    if (rainDrop.overlaps(bucket)) {
        //播放音效
        dropSound.play()
        //模擬消失(讓水滴圖片消失在游戲屏幕內)
        rainDrop.y = -64f
    }
}

效果如下圖:

10.隨機雨滴

最後,上述完成的只是一個雨滴,那麼,我們需要生成多個雨滴,可以使用一個List來存儲雨滴的位置

當雨滴掉落在地上,將雨滴從列表中移除;
當雨滴被桶接到,雨滴也從列表中移除;

class CatchWater : ApplicationAdapter() {
    lateinit var dropImage: Texture
    lateinit var bucketImage: Texture
    lateinit var dropSound: Sound
    lateinit var rainMusic: Music

    lateinit var camera: OrthographicCamera
    lateinit var batch: SpriteBatch

    //最後雨滴下落時間
    var lastDropTime = TimeUtils.millis()

    val bucket = Rectangle().apply {
        //桶放中間
        x = (800 / 2 - 64 / 2).toFloat()
        y = 20.toFloat()
        width = 64.toFloat()
        height = 64.toFloat()
    }

    val rainDropList = arrayListOf<Rectangle>()

    override fun create() {

        // load the images for the droplet and the bucket, 64x64 pixels each
        dropImage = Texture(Gdx.files.internal("drop.png"))
        bucketImage = Texture(Gdx.files.internal("bucket.png"))

        // load the drop sound effect and the rain background "music"
        dropSound = Gdx.audio.newSound(Gdx.files.internal("drop.wav"))
        rainMusic = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"))

        // start the playback of the background music immediately
        rainMusic.setLooping(true)
        rainMusic.play()

        // create the camera and the SpriteBatch
        camera = OrthographicCamera()
        camera.setToOrtho(false, 800f, 480f)
        batch = SpriteBatch()

        //開始先預設生成一個雨滴
        generateRainDrop()
    }

    private fun generateRainDrop() {
        val rainDrop = Rectangle().apply {
            //x坐標隨機
            x = MathUtils.random(0, 800 - 64).toFloat()
            y = (480 - 64).toFloat()
            width = 64.toFloat()
            height = 64.toFloat()
        }
        rainDropList.add(rainDrop)
    }
   
    override fun render() {
        //清除設置屏幕背景色
        ScreenUtils.clear(0f, 0f, 0.2f, 1f)

        // tell the camera to update its matrices.
        camera.update()

        // tell the SpriteBatch to render in the
        // coordinate system specified by the camera.
        batch.projectionMatrix = camera.combined

        batch.begin()
        batch.draw(bucketImage, bucket.x, bucket.y)
        //繪製雨滴列表
        rainDropList.forEach {
            batch.draw(dropImage, it.x, it.y)
        }
        batch.end()

        // 觸摸(手機端的操作和滑鼠操作)
        if (Gdx.input.isTouched) {
            val touchPos = Vector3()
            touchPos[Gdx.input.x.toFloat(), Gdx.input.y.toFloat()] = 0f
            bucket.x = touchPos.x - 64 / 2
            camera.unproject(touchPos)
        }

        //鍵盤操作
        if (Gdx.input.isKeyPressed(Input.Keys.LEFT)) bucket.x -= 200 * Gdx.graphics.deltaTime
        if (Gdx.input.isKeyPressed(Input.Keys.RIGHT)) bucket.x += 200 * Gdx.graphics.deltaTime

        //500ms生成一個雨滴
        if (TimeUtils.millis() - lastDropTime > 500) {
            generateRainDrop()
            lastDropTime = TimeUtils.millis()
        }

        val iter: MutableIterator<Rectangle> = rainDropList.iterator()
        while (iter.hasNext()) {
            val raindrop = iter.next()
            raindrop.y -= 200 * Gdx.graphics.deltaTime

            //如果雨滴掉落在地上
            if (raindrop.y + 64 < 0) iter.remove()

            //判斷兩個矩形的接觸面積有重疊,即水滴掉落在桶里
            if (raindrop.overlaps(bucket)) {
                //播放音效
                dropSound.play()
                //將此雨滴移除列表
                iter.remove()
            }
        }

    }

    override fun dispose() {
        //資源釋放
        dropImage.dispose();
        bucketImage.dispose();
        dropSound.dispose();
        rainMusic.dispose();
        batch.dispose();
    }
}

上面有個涉及到手機和滑鼠的操作,因為和Camera對象一起使用,還沒過於研究,之後看看再深入一下吧