• <nav id="yisao"><rt id="yisao"></rt></nav>
  • 競技對抗小游戲《單挑籃球》開發歷程 | Cocos技術派第12期


    ?本文來自于“Cocos 榮耀講師”征稿活動第1期,最先發表于 Cocos 中文社區,作者 ID:蟹老板,2017年加入社區,文章作品包括《獵頭專家的開發歷程》等。

    Cocos 技術派第12期,由蟹老板從立項,創意,技術、迭代四個方面來分享小游戲《單挑籃球》的開發歷程。

    “立項”

    在小游戲平臺上的籃球游戲,99%都是純投籃類小游戲,沒有一款真正意義上的競技對抗型籃球游戲。我們參考了 Basketball Battle,這是一款輕度、有趣的1v1籃球對抗游戲,但存在游戲表現力和玩法深度不足的問題,比如:角色及動作太Q,AI 存在明顯的 Bug,數值壓制無力吐槽……

    所以我們僅借鑒其 2D 橫版的游戲表現方式,在角色形象、動作、操作方式上做了大量創新,代入原創的數值及 AI 系統,打造出了這樣一個易上手,但又有足夠深度的競技小游戲。

    你沒看錯!這是一款“橫版”游戲。在微信小游戲平臺上,做橫版游戲代表提前“放棄”了一部分玩家。SAGITEAM 的第一款游戲《開心射手》也是橫版。那時選擇橫版是因為不了解小游戲平臺的玩法,而這次立項選擇橫版,是因為《單挑籃球》必須做成橫版才能滿足競技游戲的操作需求。

    競技+籃球這個獨特的小品類,與小游戲平臺上爆款特征不沾邊。SAGITEAM 希望不盲目追隨市場爆點,專心打造一個優質的產品,在小游戲的下半場持續磨練團隊和產品的競爭力。

    《單挑籃球》目前已在四個平臺上線,歡迎品鑒!

    “創意”

    場景

    調整好籃框和角色的大小比例,球場大小可以控制在一屏顯示完整,不需要移動鏡頭,這對于 1v1 的對抗表現完全夠用。

    角色

    不同于大部分街籃游戲使用的 Q 版三頭四頭身風格,我們參考了《羽毛球高高手》的美術設定,使用五到六頭身,外形更接近真實人身比例,這樣角色的動作細節有更大的表現空間,每個角色有多至 26 個不同的全身動作,力求做到真實。

    主界面

    進入游戲主界面后,你會看到默認角色“超級新人“在訓練,這就是在告訴你,這不是一款投籃機游戲,你看到的就是游戲中的真實效果。

    新手引導

    親切的”西安教練”會告訴你游戲的基本操作,當然,只是基本操作,更高級的,就得你自己去摸索了……

    操作

    為了增強玩家的操作性,我們在游戲中加入了 ActionButton,實現防守時可搶斷,進攻時可突破的功能,如果深度體驗,你還會發現假動作、后仰跳投、蓋火鍋…… 下圖標明了四個鍵的分布,同時,我們放大了按鈕的觸摸區,讓玩家可以更好的盲操作。

    數值及 AI

    體育類游戲的數值實際上是有上限的,簡單地說,就是角色的表現不能太離譜,比如跑動速度,彈跳力,投籃命中率,不然就會感覺很“假”,要避免這種情況,就不能純粹使用數值來做壓制,而是更多使用分級 AI 來幫助玩家成長,下面兩張圖就是初級 AI 與最高 AI 的行為樹配置,可看出復雜程度差別還是比較大的。

    道具系統

    如果你想贏得輕松點,可以在賽前來點興奮劑,但作為一個公平競技游戲,還希望玩家提升硬實力才是。

    “技術”

    物理表現

    我們拋棄了 Box2D,所有碰撞計算都是自行用代碼實現,主要是基于兩個原因:

    • Box2D 性能在小游戲平臺上實在堪憂
    • 籃球游戲所用到的物理公式非常簡單

    不過我們依然使用了 cc.Intersection 來做碰撞檢測。

    游戲中的物理運動,無外乎移動,加速,重力、反彈、拋物線五種,網上教程很多,這里不詳述,比較值得一說的是本游戲內的拋物線實現,主要運用在兩個地方:1是球出手到觸框(板)的飛行軌跡,2是扣籃時角色的起跳軌跡。

    這兩處拋物線最初使用的是比較常見的勻速線性公式,無法表現出球在飛行的初/中/末段的速度變化,也無法表現出角色在扣籃時的起跳爆發力及滯空效果,后來我改為使用三階貝塞爾曲線,通過改變兩個控制點的位置,較好地模擬了非線性拋物線效果,上圖中的白點即為貝塞爾曲線在每幀繪制的坐標點,并附上三階貝塞爾曲線的生成代碼。

    export default class Bezier {?  /**   * 獲得貝塞爾曲線的點的具體坐標   * @param cps [[起點],[控制點1],[控制點2],[結束點]]   * @param t [0-1]   * @return [number, number]   */  public static getPoint (cps: number[][], t: number) {    let ax, bx, cx    let ay, by, cy    let tSquared, tCubed    let result = [0, 0]?    cx = 3.0 * (cps[1][0] - cps[0][0])    bx = 3.0 * (cps[2][0] - cps[1][0]) - cx    ax = cps[3][0] - cps[0][0] - cx - bx?    cy = 3.0 * (cps[1][1] - cps[0][1])    by = 3.0 * (cps[2][1] - cps[1][1]) - cy    ay = cps[3][1] - cps[0][1] - cy - by?    tSquared = t * t    tCubed = tSquared * t?    result[0] = (ax * tCubed) + (bx * tSquared) + (cx * t) + cps[0][0]    result[1] = (ay * tCubed) + (by * tSquared) + (cy * t) + cps[0][1]?    return result  }}

    ECS 框架

    本游戲使用了開源 ECS 框架:

    https://github.com/darkoverlordofdata/entitas-ts

    ECS 框架的好處不必多介紹,有興趣的同學自行找資料學習吧,這里簡單貼一下我設計的系統與組件。

    export default class LogicSystem extends Systems {  constructor (context: GameContext, service: Service) {    super()?    let pool: Pool = Pool.instance?    this.add(pool.createSystem(new GameInitSystem(context, service)))    this.add(pool.createSystem(new EnergySystem(context, service)))    this.add(pool.createSystem(new BehaviorTickSystem(context, service)))    this.add(pool.createSystem(new PlayerInputSystem(context, service)))    this.add(pool.createSystem(new ActorMoveSystem(context, service)))    this.add(pool.createSystem(new BallMoveSystem(context, service)))    this.add(pool.createSystem(new CollisionFactorySystem(context, service)))    this.add(pool.createSystem(new CollisionCheckerSystem(context, service)))    this.add(pool.createSystem(new CollisionHandlerSystem(context, service)))    this.add(pool.createSystem(new StealSystem(context, service)))    this.add(pool.createSystem(new CatchSystem(context, service)))    this.add(pool.createSystem(new DunkSystem(context, service)))    this.add(pool.createSystem(new CloseSystem(context, service)))    this.add(pool.createSystem(new SkillCheckSystem(context, service)))    this.add(pool.createSystem(new TimerSystem(context, service)))  }}?export enum ComponentIds {  Data,         // 數據組件  Render,       // 渲染組件  Player,       // 玩家  Robot,        // 機器人  Shadow,       // 投影  Actor,        // 角色  Ball,         // 球  Action,       // 動作組件  Parabola,     // 實現拋物線  ActorMove,    // 實現人移動(速度, 重力)  BallMove,     // 實現球移動(速度, 摩擦力, 空氣阻力, 重力)  Collider,     // 碰撞組  Contact,      // 碰撞關系  Collision,    // 碰撞事件  Body,         // 坐標及體積  State,        // 角色狀態  Timer,        // 定時器  Behavior,     // 行為器?  totalComponents}

    AI 行為樹

    本游戲使用 一個可視化的行為樹編輯器:

    https://github.com/behavior3/behavior3editor

    要聊起行為樹,篇幅就不夠了,所以,就此打住……,這里僅奉上行為樹節點的名稱供參考。

    UI 設計

    本游戲 UI 使用的是:

    http://www.fairygui.com/

    這主要是為了方便美術同學,因為美術同學覺得 fgui 比 Creator 好用……你要問我 fgui 好不好,我只能說有好有壞吧,可以省掉開發同學一些拼界面的工作量,但坑也是有一些的。

    性能調優

    由于小游戲平臺的限制,對游戲包體的大小和運行性能要求都比較嚴格,我從以下幾個方面做了優化:

    • 砍掉沒有使用的模塊,可以將 cocos2d-js-min.js 由 1.6mb降低至 900kb。
    • 將 main.scene 所需的 logo 及白底圖放在首包內,使其啟動即渲染,避免黑屏。
    • 拆分 fgui 生成的包資源,做一個小的 loading 包,在 logo 及健康忠告的掩護下優先載入 loading 包。
    • 對合圖進行 tinypng 壓縮,將 1.8mb 的合圖壓至 500kb。
    • 非必須資源在使用時異步加載(如音頻、紋理、spine)。

    “迭代”

    籃球從立項到上線(微信)小范圍測試,歷經了三個多月,之后保持著一周一到二個版本的迭代,迭代的方向是針對游戲數據進行調優,主要就是留存/活躍/時長/付費四個指標,但這四個指標并不孤立,而是一個整體,比如我們試著提出以下問題:

    • 游戲界面信息是否足夠清晰?
    • 新手引導的完成度如何?
    • 玩家玩到第幾局后會流失?
    • 游戲是否太難(或簡單)?
    • 玩家的成就感和挫敗感在哪里?
    • 卡點是否合理?
    • 如何提升玩家的付費意愿?
    • ……

    這些問題都需要通過詳細的打點來分析,好游戲一定是調出來的,每一次調整都要有清晰的目標,充分驗證假設。

    每個版本做出一些調整,觀察數據的變化,會發現,四個指標是同步上升的,我以上面的問題 2、4 作個簡單的回答:

    新手引導的完成度如何?

    回答: 雖然我們認為新手引導已足夠清晰,但最初的通過率只有 70%,通過對新手引導共 16 步提示進行打點分析,發現有三步引導(滯空跳投,前進上籃、前進扣籃)的通過率非常低,判斷是由于是組合鍵操作,基礎較低的玩家初次接觸無法很好掌握而放棄。于是我們對這三個引導進行了簡化調整,通過率上升至 90%,反映到新增次留上,可以提升 3%以上。

    游戲是否太難(或簡單)?

    回答4: 最初的 AI 等級只有五級,與積分掛鉤,后來發現五級不夠,難度曲線太陡,玩家每升一個 level,勝率就會降低 10 多個 %,后來改為 10 個 level,并根據玩家最近 10 場的勝負狀況動態調整AI配置,讓玩家成長曲線更平滑,反映到游戲時長上,由最初的 500 秒升至最高的 800 秒。

    “總結”

    小游戲行業門檻低,每天都會有無數新游上線,但行業儼然已是紅海,99%的游戲進來可能連個泡都沒冒就沉底,這是每個 CP 都不愿看到的結果,希望我們分享的《單挑籃球》的創作過程能給大家帶來一些啟示。

    ———— / END / ————

    再次向作者的分享致以謝意!歡迎大家點擊文末【閱讀原文】進入原貼與作者及廣大開發者一同交流,為作者點贊!

    如果您在使用 Cocos Creator 的過程中,獲得了獨到的開發心得、見解或是方法,并且樂于分享出來,幫助更多開發者解決技術問題,加速游戲開發效率,期待您與我們聯系!

    實現戰旗類游戲《火焰紋章》移動范圍效果

    用攝像機實現殘影幻影拖尾效果

    Cocos Creator 通用框架設計:網絡

    自定義渲染組件及材質介紹

    小姐姐的發絲高光怎么用 Creator 3D 實現?

    小時候玩掌機,長大了開發掌機游戲

    小游戲《快上車3D技術分享

    3D 案例《彈彈樂》技術實現分享

    女人脱裤子让男生桶爽免费看,久青草无码视频在线播放,精品国产人成亚洲区,久久精品国产亚洲一区二区