ProtoPie 教學 Day5:牌卡互動實作 (Part.2)

本章節使用 Jump 製作牌卡後的互動,跳轉至其他 Scene,並使用 Chain 製作其他互動效果。

Sheng Pan
De-Magazine

--

為什麼要分場景做呢?

製作 Prototype 的方法有很多種,他們都可以達到一樣的效果。方法只有適不適合,沒有絕對的正解;但分場景的做法有這些好處:

1. 減少製作時的複雜度

試想卡片有互動,點擊卡片後展開資訊。這樣就要對三張堆疊起來的卡片設置展開的效果,而在畫面上卡片又是堆疊在一起的,設定起來就會增加難度。

2. 互動邏輯清楚,維護便利

每一個場景處理自己的元件互動,這樣在除錯時可以更快發現 Bug 在哪一個環節。如果都把互動設定在同個場景,除錯時就會看到右側的設定欄有一大堆的互動設定,找到問題都是一個問題了。

了解分場景的好處,就讓我們開始做吧!

場景中互動、場景間跳轉

影片中雖然製作了四個場景,但修改的範例以修改場景二為例。

將 Part.1 製作的場景複製幾份

複製場景會將設定好的觸發與反應一同帶入,在製作上就不須要從零開始設定觸發與反應。

[場景2] 刪掉用不到的元件

舉場景二為例,在場景二時黃卡是不存在的,所以我們要將黃卡刪掉。這時候會發現很多觸發與反應都跳橘色警示,因為元件找不到了。

[場景2] 修改Drag 、Chain 觸發的元件與參數

接下來就是把觸發的元件改為場景中的主角(場景中的第一張卡)。
舉場景二為例,場景二的畫面是橘卡上、紅卡下(共兩張卡),互動也會著重在橘卡的拖曳,所以我們要將:

  1. Drag 的觸發對象從黃卡改成橘卡
  2. Chain 旋轉的觸發對象從黃卡改成橘卡
  3. Chain 橘卡大小觸發,對象從橘卡改為紅卡
  4. Chain 橘卡位移觸發,對象從橘卡改為紅卡
  5. Chain 原先紅卡的大小、位移觸發都可以刪掉(因為紅卡已經取代為橘卡的位置了)
大致上場景三也是按照上述的邏輯調整被觸發的元件,在修改的時候別搞錯場景,要知道該場景哪個元件是要互動的

[場景2] 修改 Touch Up 觸發 Reset 對象

還記得 Part.1 在最上方卡片觸發 Touch Up 後,我們會 Reset 接下來的卡片。
舉場景二為例,我們也要將 Reset 的對象從橘卡改為紅卡。

[場景1] 在 Touch Up 觸發後增加 Jump 反應

大致上修改完場景二的元件互動,橘卡是可以拖曳的,滑出卡片後紅卡長回 100% 大小。接下來我們要回到場景一,在 Touch Up 觸發後加上 Jump 反應,Jump 到場景二。

這裡要注意的一點是,Jump 的發動時間,要將發動時間延後至 Move 和 Reset 的動畫完成之後,如果沒有特別設定,卡片飛出到一半就會直接跳到橘卡在第一張的場景二。

小結與預告

將互動分散至各場景中控制可以增加 Prototype 的易讀性與維護性,製作上也比較清楚簡潔,如果未來有更多互動要加也比較容易。

Part.3 將會獨立介紹點擊卡片展開的效果,大致上的原理也是使用動畫連貫加上場景跳轉達成。

--

--