iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Software Development

From State Machine to XState系列 第 6

Day06 - 根據需求畫出 Flowchart 或是 State Diagram

今天嘗試將 2D RPG 角色移動模組根據規格畫出 Flowchart 和 State Diagram
https://img.craftpix.net/2017/10/2D-Game-Police-Character-Free-Sprite-Sheets.gif

規格

  • 按下 ⇦、⇨ 可控制玩家移動
    https://ithelp.ithome.com.tw/upload/images/20210921/201307219TztySrnqz.png
  • 按下 B 是跳躍
    https://ithelp.ithome.com.tw/upload/images/20210916/20130721V6OathELrO.png
  • 長按 ⇩ 是匍匐前進 → 放開 ⇩ 是起身
    https://ithelp.ithome.com.tw/upload/images/20210921/20130721zAJunkp3mU.png

Flowchart

首先我們先嘗試使用 Flowchart ,假設從最開始的需求,只有跳躍而已(下圖一),

圖一
https://ithelp.ithome.com.tw/upload/images/20210921/201307214cHkqY0btk.png

到最後除了跳躍,還要有匍匐、前進、後退等,隨著功能增加,添加了許多 flag 儲存不同狀態,以及為了使角色功能正常運作的防呆檢查,最後會像是非常驚人的圖(下圖二),

圖二
https://ithelp.ithome.com.tw/upload/images/20210921/20130721lSbIQLjB7j.png

不要問我花多久時間畫出來的 QwQ,怕~(說不定還有畫錯?!等待廣大網友們幫我除錯XDD)
(更新:發現我好像有哪裡漏思考畫錯,但沒保留原檔,不願意面對,以後有時間再回去重畫吧)

假設今天有人很認真開發、也很注意每個 if, else 的小細節,也細心思考過每個狀態下的防衛(Guard)跟防呆(Fallback),而且還願意多花自己的時間補齊文件(加班?!),最後畫出一張詳細的流程圖在上方...。

我感到敬佩跟尊重,但不曉得一般人,不管工程師或 PM ,到底願意花多少心力細看上圖二。

假設真的遇到錯誤、bug,不管有沒有這張圖,應該也會迷失在茫茫 bug 海吧?

而且圖中,顯現太多邏輯判斷的細節,其實不需要為外人所知,這些邏輯判斷,也只不過是為了達成規格書要求所產生的。

State Diagram

假設我們今天嘗試採取比較高抽象層次的觀點來著手,還記得昨天提到的

  • 他們都有一個初始狀態
  • 整個實體、物件或是對象,都有一系列不同的狀態們
  • 還有一系列不同的事件,可能會導致狀態轉移
  • 還有一張紀錄著什麼事件配什麼狀態會發生轉移的地圖、對應表
  • 有限數量的結束狀態( 0 - n 個 )

我們先從一個實體對象(entity, object)的觀點出發,假設我們今天實體對象就是玩家操縱的角色,

我們的商業需求,目前有跳躍、俯臥、前後移動,3種主要的大動作,我們可以來細細思考,我們可能需要怎樣的狀態及事件。

先想想,玩家一開始抵達我們的系統會是什麼樣子,應該可以有一個靜止的站姿吧(初始狀態)?
https://ithelp.ithome.com.tw/upload/images/20210921/20130721QWljLMxVRL.png

接著先對應到跳躍(Jump)

1. 按下 B 是跳躍

https://ithelp.ithome.com.tw/upload/images/20210916/20130721V6OathELrO.png

我們可能有跳躍前、跳躍後...,跳躍是個動作、動詞,所以我們姑且先將他視為一種事件,那這個事件的前後應該是什麼狀態呢?

跳躍依照規格「可能」只能從靜止時開始,所以跳躍前的狀態應該為靜止站姿,進行跳躍時,就要轉換到跳躍中的狀態,跳躍結束時,應該會回到地面靜止站姿的狀態,所以可能應該要有個降落的事件,讓玩家回去。

如果對上述的整理已經產生不肯定、疑惑時,這就是一個去跟 PM 釐清規格很好的時機,不用等到開發下去才再回去改。

https://ithelp.ithome.com.tw/upload/images/20210921/20130721UKACbiTpfq.png

再來我們看移動

2. 按下 ⇦、⇨ 可控制玩家移動

https://ithelp.ithome.com.tw/upload/images/20210921/201307219TztySrnqz.png

移動同樣是個動詞、動作,我們應該可以視為一種事件,那移動這個事件應該從什麼狀態開始什麼結束呢?

常理(或照規格)應該是從靜止開始吧?所以站姿靜止狀態經過一個開始移動的事件後,應該要轉移到一個狀態,我們姑且稱這個狀態為站姿移動中,而這個移動中,應該要有個停止,才有辦法回到靜止的狀態,所以我們也應該實作一個停止移動的事件(即放開 ⇦、⇨ )。

一樣,如果對上述的整理已經產生不肯定、疑惑時,這就是一個去跟 PM 釐清規格很好的時機。

https://ithelp.ithome.com.tw/upload/images/20210921/20130721cqFt01E0UK.png

最後來看俯臥與匍匐前進

3. 長按 ⇩ 是匍匐前進 → 放開 ⇩ 是起身

https://ithelp.ithome.com.tw/upload/images/20210921/20130721zAJunkp3mU.png

如何匍匐前進、後退?
假設從站立到臥倒,我們可能要一個臥倒的動作及俯臥中的狀態,以及對應回去的起身的動作。
https://ithelp.ithome.com.tw/upload/images/20210921/20130721uZv7WmAAH0.png

而同上的站姿移動,臥倒中要移動,可能也必須要仰賴開始移動的事件來到匍匐移動中,而停止移動,則可返回靜止臥倒狀態。
https://ithelp.ithome.com.tw/upload/images/20210921/20130721jBCZlwFMPx.png

如此我們便完成了一張狀態圖
https://ithelp.ithome.com.tw/upload/images/20210921/20130721Kh6DzCoDyK.png

假設今天不管這張圖是從工程師這邊畫出來或從 PM 那邊拿到,是不是比較能輕易理解?

接著明天會將 Flowchart 、 State Diagram 做一個比較

參考文獻

圖片引用


上一篇
Day05 - 開始、結束與有限狀態機
下一篇
Day07 - Flowchart versus State Diagram 讓我們比一比
系列文
From State Machine to XState31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
TD
iT邦新手 4 級 ‧ 2021-09-21 21:18:25

最後面的圖容易理解多了 XD

Ken Chen iT邦新手 4 級 ‧ 2021-09-22 12:18:12 檢舉

/images/emoticon/emoticon37.gif

0
TD
iT邦新手 4 級 ‧ 2021-09-21 21:18:47

整個實體、物件或是對「像」,都有一系列不同的狀態們

對象 :p

Ken Chen iT邦新手 4 級 ‧ 2021-09-22 12:14:48 檢舉

感謝XD

0
LeoYeh
iT邦新手 5 級 ‧ 2022-10-02 22:45:28

第二張 FlowChart 直接跳過。XD

我要留言

立即登入留言