老虎機前端開發 Part 1

大家好，本系列會從前端的角度跟大家介紹一些老虎機的開發設計和心法，帶大家認識一下老虎機遊戲前端開發的流程。老虎機看起來很簡單，但其實也可以很複雜，而在這麼競爭的市場裡要能脫穎而出，受到玩家的喜愛，常常都是細節比別人更好。本篇將為各位介紹老虎機前端開發的工作和任務:

Step 1 : 從畫面和功能去拆分元件和功能

只要是畫面上看的到的，全部都是前端要實現的，缺一不可，如果沒有畫面的 Preview (預覽圖) 素材，至少也要有企劃的示意圖，或是老闆跟你說: “跟某某遊戲一樣就對了” (這又是題外話了)。所以開發遊戲前端的第一個心法就是，看圖拆 Task (任務)，對於任務的分配、開發進度和時間的管理，都會有很大的幫助。以下面這款老虎機作範例:

從畫面上來看，我們可以試著拆分出各個 Task

遊戲標題 (game title)
使用者資訊 (user info)
Jackpot 資訊 (Mega, Major, Minor, Mini)
中獎線 (Line and Line number)
滾輪跟符號 (Reels and Symbols )
跑馬燈 (marquee)
按鈕和金錢資訊 (buttons and Info)
動畫特效、過場畫面等 (animation, effect)

Step 2 : 從拆好的 Task 去評估細節、製作方法、製作時間

其實拆分的一個重點就是: “我們要把他轉換成 Code“。每一個物件都是一個基本的 Component，每一個功能都是 Function 實現的，而遊戲就是許多物件和功能架構組合而成的。從上面我們拆分的各個 Task，我們繼續描述他的細節和預製作的功能:

遊戲標題
- 標題圖的顯示
- 切換語系
使用者資訊
- 頭像的來源
- 時間的數字、暱稱及其他資訊
Jackpot 資訊
- 文字格式、顏色
- 數字滾動效果
中獎線
- 中獎線的位置
- 中獎的表現、輪播
滾輪跟符號
- Symbol動畫
- Reels 滾動的速度和調整
- 特殊符號的效果
- 中獎的顯示
跑馬燈
- 資訊提示的種類和邏輯
- 文字遮罩範圍
- 跑馬燈效果
按鈕和金錢資訊
- 按鈕enable、disable的邏輯
- 按下對應的功能
- 金錢、賠率、賠付線等資訊顯示和資料串接
動畫特效、過場畫面等
- 素材的使用
- 顯示的層級
- 粒子特效
- free spin、bonus game 的做法和轉場表現 etc.

每一個細節在確認過後，都將會成為你程式中的一部分；而隨著經驗的提升，對自己的任務拆分和時間評估也應該要越來越準確。實現畫面對會寫程式的人員來說絕對不難，但把細節寫好寫清楚則是更重要的課題。

為什麼我們希望把 Component 拆分清楚？除了任務管理之外，還有一點就是: “每個開發人員都有義務寫出讓別人看得懂的程式”

每個基礎元件和功能切分好，命名和邏輯寫清楚，開發人員在閱讀程式碼時就能比較明白哪邊是做什麼，哪邊有什麼功能，並實現低耦合、高內聚的架構，以後在實作其他老虎機時，可以很快知道哪裡需要改、哪邊可以重用，對於整體開發絕對有正面的幫助。

後面的文章，將會陸續繼續為各位介紹更多，例如：工具、架構、資料處理、與各部門的合作或是一些開發的心法(如敏捷開發等)，如果喜歡這篇文章或是有任何看法，歡迎回應或分享，謝謝大家！

本文所有影片與圖片皆取材自網路，版權屬於原公司所有
本文章內容未經允許，不得轉載。若有文章授權需求請聯絡我們