# 遊戲設計期末

## 2024-06-05

### 基本規劃

地板材質：草地（上面有樹當作障礙）、馬路（單向、雙向、多線）、鐵道、河流（上面有木頭漂流和荷葉）

吃金幣可以增加點數，點數夠多可以購買新角色（預設小雞，可以多做一兩個模型）

Camera 要隨著主角移動

想了一下好像可以隨機產生無限地圖

左右方向有隱形牆壁不可超越

好像需要做個 UI（取個遊戲名字）

Optional：Camera 隨時間移動，不可以超過範圍

### 場景製作進度

先用最簡單顏色 Material 代表上述提到地板材質（細節後續再美化）

地板為 3D plane，因考量後續角色跳動位置，需較精準計算 scale
主角暫時先用 3D cube 代替
規劃：地板 x-scale 調為 0.1 時與 x-scale=1 的 cube 等寬
以上截圖為 cube x-scale=0.8 時的效果，不會與地板材質邊緣直接貼齊
以上設計有點像把遊戲地板切割成 grid（格子設計），再來設計主角移動較好計算

> [name=聖允提醒] 在捏主角或其他物品 3D 模型時盡量拿一個 x-scale=1、y-scale=1 的 cube 當作比例參考，這個 cube 要跟主角一樣，其他物品也可以參照主角比例去製作～到時候合在一起時大小比較好調整喔！

Camera 角度：

視角：

規劃短期 TODO：
* Script 隨機生成延伸地板材質
* 主角前後左右移動，Camera 跟隨
* 主角移動時的跳動動畫設計

隨機生成的完整場景視角：

再調整一下 Camera：

新視角（視野小一點）：

路面用 Plane 好像不夠好，應該要有一點立體感，不然太平了，明天改

## 2024-06-06

* 完成基本角色移動邏輯
* 角色移動同時延伸無限場景
* 避免因為延伸場景造成系統負荷越來越高，將超出視角範圍的地板 Distroy



用 GameObject Array 暫存地板，並在 Instantiate 新的之前依序 Destroy 舊的
* 更改地板成 Cube 並有高低之差，更有立體感
* 套用各種不同的 Texture 材質

## 2024-06-07

* 將主角換成製作好的小雞模型，並加上 RigidBody
<iframe width="560" height="315" src="https://www.youtube.com/embed/JKvn7yZTcyM?si=ccQofONQgtjtNlAG&amp;start=3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br />
得到一隻可以往前也有物理特性、碰撞效果、但是會絆倒的笨小雞
* 開始加入跳躍特效，嘗試多種不同的方法，包括 AddForce、Lerp 等，最後用 Coroutine


<iframe width="560" height="315" src="https://www.youtube.com/embed/QxN1tmZNcks?si=Aemx6DHlgmqavIkD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br />
平衡感不佳、會自己摔倒的小雞（馬路還沒過就摔死了）

最後鎖定 RigidBody 的 Rotation 解決
Mass = 0.66 配合移動速度設定，有較好落下效果

* 可以正常行走後，開始加入場景細節
加上製作好的樹木模型，並組合三種不同的樹木排列 Prefab，隨機選擇增加隨機性。
<iframe width="560" height="315" src="https://www.youtube.com/embed/xPkVdEDGaDE?si=kzmz3UlzHq_NEhlF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br />
開始加入車子，遊戲開始時在馬路上面 Instantiate，並加入 RigidBody
<iframe width="560" height="315" src="https://www.youtube.com/embed/wfCmNit6ON4?si=r237nlBtZTl_MsGx&amp;start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br />

嘗試用 AddForce 改變車子速度，但發現不適合，最後直接更改 velocity
設定畫面上車子的總數，才不會過多車子導致效能問題。一樣用循環更新的
車子從起點開始，有一個行走範圍，超過範圍就回到起點，也是為了效能考量
<iframe width="560" height="315" src="https://www.youtube.com/embed/SXkJQ3ywh_w?si=ZaqMpDATCmD4unX3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

增加車子隨機性(隨機顏色、隨機速度、隨機間距)

更改各個地板材質出現機率分佈：

加入準備跳躍的小動畫：
<iframe width="560" height="315" src="https://www.youtube.com/embed/JndRqh9TLhg?si=SUrbFCt1kYs9Up-2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br /> 按下鍵盤時蹲下醞釀，放開時跳出去的感覺

同時因為加入這個特效，要改變一下 Camera 邏輯：
原本是直接作為主角的 Child，但這個蹲下的動作同時會影響 Camera 的位置
所以將 Camera 獨立，y 軸不跟著動：

今日總進度：
<iframe width="560" height="315" src="https://www.youtube.com/embed/kc8O86VAI2o?si=FQRv1PIU9bKC4DAs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

明日計劃：
* 左右移動和後退?
* 漂流木
* 火車和紅綠燈
* 左右邊界
* Optional: 相機移動造成後方邊界
* 被撞時 GameOver 判斷（配上簡單 UI）
* 金幣、分數（走幾步）

未來：
* 增強 UI
* Build exe (apk 可能要再處理一下)
* PPT 和影片

## 2024-06-08

開始處理河流，加入 Script 特效讓水看起來在流動，而且流速隨機
<iframe width="560" height="315" src="https://www.youtube.com/embed/0AMgXX0pqH0?si=-3vanbAkExKnDz26&amp;start=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br />

製作木板 Prefab 並計算相對位置：

隨機速度、隨機長度、可以站在上面、碰到水會掉進去：
<iframe width="560" height="315" src="https://www.youtube.com/embed/7syAwK_i7cc?si=o2zK9bybzRaX0Ypn" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

有先量了一下，雞的 y 位置小於 -1.2 時應判為遊戲結束

左右跳躍完成：
<iframe width="560" height="315" src="https://www.youtube.com/embed/WDGosyCHDdI?si=R4XMxMDLopOjZ2Q_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

增加一些石板路，提醒玩家是否走偏（走偏有可能撞樹）：

算好相對距離，接出一列火車：

火車設計：在一範圍內快速移動，到盡頭後回到原點等待，用 Coroutine 配 while 迴圈循環：
<iframe width="560" height="315" src="https://www.youtube.com/embed/yGANGHaYSFg?si=YvCmiH8MZr7OotCN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/2VRicXYItRU?si=zm0BDInks3jDi-RS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

火車隨機等待時間以及速度

限制人物左右移動距離：
<iframe width="560" height="315" src="https://www.youtube.com/embed/ohgajvM7fUA?si=EV-CKLSUIr-ShHrf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

準備開始 Collision 判斷：
* 將車子、火車加上 Tag

GameOver 判斷：碰撞時和落入水中時
且在 GameOver 時加入相機震撼晃動效果，同時停止相機跟隨主角：
<iframe width="560" height="315" src="https://www.youtube.com/embed/JGdqCwhkCno?si=JMf8JvB7VN5AHJuu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

晃動效果動畫用 Coroutine 實現：

整體遊玩體驗（大致完成，剩下 UI 和一些小 Bug）：
<iframe width="560" height="315" src="https://www.youtube.com/embed/ovh1Fe1jZbo?si=YjbJ8NpMjhGmdHhN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/HNHzDmpztWw?si=wDzkjb93tGhDbvmy" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/k2tu74GlOfc?si=hXcEfa1IoEF8YAnL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><br /><br />

> [name=聖允] 再來就是交給妳做 UI 了，有幾個 Function 可以運用
> 
> 所有 GameOver 行為都會導到這邊，所以遊戲結束的 UI行為加在這個 Function
> 
> 這個 Function 可以回傳分數，看如何應用在 UI
> 其他還有一些遊玩小 bug 我有時間再處理，目前大致上可以遊玩了
> 重新開始的按鈕，剛剛查一下，可以用 reload scene 的方法，不會很難！

沒有做的項目：
* 火車警示
* 後退（因為已經走過的場景會被刪掉，我懶得為了後退再生回來）
* 相機移動造成後方邊界
* 金幣（嘗試放上去但我有點不知道怎麼運用比較好，先跳過）
* 更換角色（沒時間做了啊啊啊啊）
* 所有的 UI（如果要加「重新開始」按鈕，重新開始的功能也沒做）
* 手機遊玩的方式

後續要再更改的項目：
* 相機抖動係數 0.04
* 車子物件上限再提高
* 火車等待時間 8~15
* 改成 Window 模式

## 2024-06-09
加上了計分和重新開始遊戲的UI 跟完成他們的功能

遊戲開始時畫面

## 2024-06-11

修改：
* 修正會扭曲的石板
* Camera 抖動係數
* 提高車子數量
* 火車等待時間
* 修正雞會陷進鐵軌的問題（加上 box collider 同時忽略 train layer）
* 新增往後跳，同時限制相機移動
* 修改一些 UI

## 2024-06-12

* 優化起始時主角動作
* 又將遊戲變更難：連續車道會正向逆向交錯

## Bug 整理
* 一次太多連續的馬路或河流
* 河流流速有時候無法配合導致無法通過
* 會撞到隱形的東西
* 石頭地會扭曲
* 小雞可以快速通過河流(輕功水上漂)

## 模型製作進度

角色們

預計主題

* 樹
------>

* 車車
----------->

* 火車
----------->

## 幕後花絮（一些讓我笑出來的畫面）

<iframe width="560" height="315" src="https://www.youtube.com/embed/lDvjNTij434?si=6HmAZSWomu9UvoMK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

求小雞心裡陰影面積?

<iframe width="560" height="315" src="https://www.youtube.com/embed/5_3_aIJTM5Y?si=NDMUk_4ooEurQFt6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
新竹的車子，風大到飛起來用滾的（好像也是種不錯的前進方式？）