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


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 拆分清楚?除了任務管理之外,還有一點就是: “每個開發人員都有義務寫出讓別人看得懂的程式

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


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

 

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

新推文通知
通知我
guest
2 Comments
從舊到新
從新到舊 最多推
Inline Feedbacks
View all comments
肥宅熊熊

推前端,很缺啊!!

Leopard

我們也很缺阿
你都推掉了惹 那可以考慮考慮敝公司~~XDD