---
# System prepended metadata

title: 9/19 Arcade再進化-空島跳躍者(1)
tags: [2022 iThome 鐵人賽]

---

---
tags: 2022 iThome 鐵人賽
title: 9/19 Arcade再進化-空島跳躍者(1)
AUTHOR: 黃郁鈞
---
# Arcade再進化
## 空島跳躍者
### 遊戲概念
> 相信許多人都有玩過google play內建的whirlybird
> ![](https://i.imgur.com/UOC7GlF.png =x150)
> 不僅操作簡單，也非常殺時間
> 本篇將會帶您親手用疊積木的方式製作一個可以在Arcade上遊玩的簡單版whirlybird
> [whirlybird-示範影片-5starGameplay](https://www.youtube.com/watch?v=7B6_Q1FghvA)

### 本篇內容

本篇將會做出地圖設置與基本的角色地面碰撞
效果如下

![](https://i.imgur.com/Ux7VMTs.gif)


#### 建立地圖

- 首先要先建立一張直向的地圖，好讓我們的角色可以在裡面活動
    從場景中拉出一個`貼圖地圖設為`並進入後面`tilemap`的編輯模式

    ![](https://i.imgur.com/oeWACoh.png)

    ![](https://i.imgur.com/JBWUlfB.png)

- 先到畫面左下角調整地圖大小
    因為是垂直地圖，所以x軸較窄，y軸較高。
    經過測試，x軸要設成10才能左右貼齊畫面，
- 至於y軸，就取決於你關卡的長度，這裡用50作為範例。

    ![](https://i.imgur.com/n0FVrZA.png)

- 設定好大小後，要先建立等等會用到的地面貼圖，也就是空島。
    再調整大小的上方有`My Tiles`與`Gallery`，
    其中`My Tiles`就是使用自訂的貼圖，`Gallery`就是使用官方的範例貼圖。
    我自己有畫了貼圖，附在最後的傳送門內，可自行取用。
- 做為測試，先將最底下一排鋪滿地面。

    ![](https://i.imgur.com/iWXLN6t.png)

這麼一來，基本的地圖設置就完成了🎊

### 建立角色及重力

- 與建置場景大同小異，從角色中拉出`變數mySprite設為`
    進入角色的貼圖編輯模式，將左下方大小設為10x10
    角色貼圖為了方便測試，先以邊框做角色即可。

    ![](https://i.imgur.com/yn4XnEq.png)

    ![](https://i.imgur.com/kvqH3Lh.png)

貼圖設立完成後就可以來處理重力及與地面的碰撞了。
- 從角色裡拉出`將mySprite加速度設為`
    此塊積木的作用為賦予角色y軸的重力加速度，後項參數愈高墜落速度愈高。

- 再設定角色初始位置，拉出`角色mySprite的位置設為`
    x座標設為至中80，但y座標較特殊，
    因角色的預設位置為地圖最上方，所以要將角色的y座標設到畫面外。
    此坐標系的原點為地圖左上角，示意圖如下。
    ![](https://i.imgur.com/LEBAQT0.png)
    
    經過測試後，發現y座標設為720的角色起始點最能符合y軸高度設為50的地圖，若高度不同需自行用左方的預覽畫面測試。
    
- 最後再從場景中拉出`鏡頭跟隨角色mySprite`使畫面聚焦在角色上就完成了。

![](https://i.imgur.com/8AWbyfR.png)

### 角色與地面碰撞彈跳

- 首先要做的就是偵測角色有沒有採到地板，
    這裡我們使用場景中`當角色sprite類別Player重疊貼圖`並將其中的貼圖選為剛剛設的地面貼圖。
    若是偵測到角色與地面貼圖重疊就會執行裡面的積木。
- 當角色與地面重疊後需要彈跳，換句話說要給角色一個向上的速度，
    這裡用`將角色的速度設為vx/vy`
    - 為了賦予角色一個向上的速度，要將`vy`(y軸速度)設成負的，原因在上面也解釋過。

- 至於速度要設成多少可以自行調整，在範例中我設成`-100`

![](https://i.imgur.com/mJYCDL6.png)

這麼一來基礎的角色彈跳就達成了🎉!

[專案傳送門✈️](https://makecode.com/_KukPwiAoaH2K)










###### edit by hua