iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Software Development

用KorGE開發自己的Kotlin小遊戲系列 第 16

[Day16] GamePlay設計-角色之外星人走走跳跳!

不曉得各位還記得Day9我們學過用SpriteAnimations來做會走路的綠色外星人嗎?
是的,這次我們要寫程式來設計角色的內容了,首先我們要來定義外星人的狀態,會有走路、跳耀,掉落,受傷,死亡,跟過關這幾個狀態。

所以設計一個狀態的enum class如下:

enum class STATUS {
    WALK,
    JUMP,
    FALL,
    HURT,
    DEAD,
    GOAL
}

我們把外星人設計一個類別class Alient繼承Container,因為也要加到GamePlay的Scene,初始狀態會給走路STATUS.WALK。其餘載入素材的部分,就從Day9我們寫好的程式碼複製過來,走走走!
https://ithelp.ithome.com.tw/upload/images/20200925/20129789873f4TBXKs.png

Aline.kt 載入走路動畫程式碼

class Alien: Container() {

    var status = STATUS.WALK
    lateinit var spriteMap: Bitmap
    lateinit var walkAnimation: SpriteAnimation
    lateinit var walkSprite: Sprite

    suspend fun load() {
        spriteMap = resourcesVfs["green_alien_walk.png"].readBitmap()
        walkAnimation = SpriteAnimation(
                spriteMap = spriteMap,
                spriteWidth = 72,
                spriteHeight = 97,
                marginTop = 0,
                marginLeft = 0,
                columns = 11,
                rows = 1,
                offsetBetweenColumns = 0,
                offsetBetweenRows = 0
        )
        sprite = sprite(walkAnimation) {
            spriteDisplayTime = 0.1.seconds
        }

    }

再來我們要對外星人多加一個跳耀動作,做到跳的動作基本上只要一張圖就能做效果,當然你也可以有多一兩張的圖片做起來更生動囉。

在Allen.kt 的 load()部分我就會在多一張jump的圖片,跳跳跳!
https://ithelp.ithome.com.tw/upload/images/20200925/20129789qcSXEegn8P.png

Aline.kt 載入跳的圖片程式碼

lateinit var jumpBitmap: Bitmap
suspend fun load() {
   jumpBitmap = resourcesVfs["green_alien_jump.png"].readBitmap()
}

圖片跟動畫載入完了,接下來加上外星人的走路跟跳耀動作,walk()跟jump()

Aline.kt 走路的程式碼
狀態會變為WALK,然後walk的播放速度就是0.1秒換下一張,然後直接重複播放

fun walk() {
    status = STATUS.WALK
    walkSprite = sprite(walkAnimation) {
            spriteDisplayTime = 0.1.seconds
        }.apply {
            playAnimationLooped()
    }
}

Aline.kt 跳耀的程式碼
跳耀需要不是正在跳也不是在跳落的狀態,才會改變狀態成跳耀的狀態,然然sprite變成跳耀的圖片。

fun jump() {
    if (status != STATUS.JUMP && status != STATUS.FALL) {
        changeStatus()
        sprite = sprite(jumpBitmap)
        status = STATUS.JUMP
    }
}

Alien.kt狀態改變的程式碼
因為換圖片需要先把動畫停止,跟把圖片移掉,才能更換成其他圖片顯示,沒做這個動作的時候,發現走路圖片跟跳耀圖片一直會疊加上去,所以就特別加了這段程式。

fun changeStatus(){
    sprite.stopAnimation()
    sprite.removeFromParent()
}

Alien.kt掉落的程式碼
當外星人跳到最高點要掉下去時,狀態改變成掉落。

fun fall() {
    status = STATUS.FALL
}

Alien.kt狀態更新程式碼
每次更新時,若在跳躍狀態會減少垂直y數值,直到比預設值還少100時會準備進到掉落狀態,而到了跳落狀態,會一直增加垂直y數值,直到掉回地平面上,然後回到走路狀態。

fun update() {
    when (status) {
        STATUS.JUMP -> {
            y = y - 4
            if (y <= defaultHeight - 100) {
                fall()
            }
        }
        STATUS.FALL -> {
            y = y + 6
            if (y >= defaultHeight) {
                changeStatus()
                walk()
            }
        }
    }
}

回到GamePlay.kt程式碼開始初始化加入東西
終於開始慢慢把遊戲物件加入,記得物品一開始都放在sceneInit()裡,前一篇練習的背景跟物件也一起加進來。
輪到外星人給加到Scene裡時,把外星人的位置相對於地板的物件上,這樣就不用特別計算外星人在地板上的位置,然後記住外星人的預設地板高度defaultHeight,讓外星人才知道掉回地板位置,接著把外星人放在離左邊畫面的一個單位位置,看起來比較順眼。

lateinit var alien: Alien
lateinit var background: Background
override suspend fun Container.sceneInit() {

    //加入背景
    background = Background().apply { load() }
    addChild(background)

    //加入地板、障礙物、敵人
    ItemManager.init()
    ItemManager.load(this)

    //加入外星人
    alien = loadCharacter()
    addChild(alien)
    alien.alignBottomToTopOf(ItemManager.BASE_FLOOR!!)
    alien.defaultHeight = alien.y
    alien.x = ItemManager.BASE_WIDTH * 1

}

GamePlay.kt程式碼偵測外星人跳躍
然後SceneMain()加上空白鍵盤的偵測,按下down會呼叫外星人的alien.jump()跳耀動作!

override suspend fun Container.sceneMain() {

    keys {
        down(Key.SPACE) {
            alien.jump()
        }
    }

    addHrUpdater {
        alien.update()
    }
}

Alien的狀態更新檢查update()會放在GaemPlay的addHrUpdater()去更新,最後如果要有跑酷的效果(可能有人要吐槽是走酷,因為外星人的素材只有走路…),只要把金幣跟地板還有敵人move() 也放到addHrUpdater,就會一起動起來了!

addHrUpdater {
    ItemManager.move()//金幣、敵人、地板都放在這裡管理,所以一起移動
    alien.update()
}

執行程式的結果! 外星人又走又跳囉!!!!

總結
基本上遊戲的玩法已經寫得五成左右了,相信大家一定還覺得這個Demo哪裡怪怪的!?沒錯,吃到金幣怎麼沒有消失呢,碰到敵人也沒消失,還有也沒有記到外星人的吃的金幣數等等資訊,所以下一回跟下下回我們就會開始介紹遊戲畫面上的UI顯示資訊跟怎麼處理角色跟物件接觸的情況了!


上一篇
[Day15] GamePlay設計-背景、地面、物品
下一篇
[Day17] GamePlay設計-UI介面(分數、血條、計時)
系列文
用KorGE開發自己的Kotlin小遊戲30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言