天天看點

Cocos文檔案例遊戲設計的梳理與分析

    導語:這是一篇新手教程,适用于已看完Cocos官方文檔,但還對遊戲設計、運作流程不熟悉的新人。這篇教程是對文檔【快速上手】裡那款名叫"摘星星"的坑爹小遊戲(文檔原話)流程的梳理,以期望見微知著,得到遊戲設計的一些普适性的方法,為看完文檔仍然迷迷糊糊的新人提供一個遊戲制作、運作的大體方向。

一、遊戲元素

Cocos文檔案例遊戲設計的梳理與分析

1、圖檔資源

    ·背景圖 background

    ·開始按鈕 btn_play

    ·主角 PurpleMonster

    ·地面 ground

    ·星星 star

2、場景

        ·Game

    3、腳本

        ·Game.js

        ·Player.js

        ·Star.js

    4、字型及聲音

        ·jump

        ·score

        ·mikado_outline_shadow

    5、預制資源

        ·Star

二、遊戲場景

    場景Game:

Cocos文檔案例遊戲設計的梳理與分析

    官方:在 Cocos Creator 中,遊戲場景(Scene)是開發時組織遊戲内容的中心,也是呈現給玩家所有遊戲内容的載體。遊戲場景中一般會包括以下内容:

        ·場景圖像和文字(Sprite,Label)

·角色

·以元件形式附加在場景節點上的遊戲邏輯腳本

當玩家運作遊戲時,就會載入遊戲場景,遊戲場景加載後就會自動運作所包含元件的遊戲腳本,實作各種各樣開發者設定的邏輯功能。是以除了資源以外,遊戲場景是一切内容創作的基礎。

    1、渲染根節點——Canvas

        可以了解為一塊要展示的黑闆,後續需要添加的各種資源都會在這塊"黑闆"上。

    2、背景圖——background

        在這款遊戲中,可以了解為整個遊戲的背景。

    3、地面——ground

        地面覆寫了一部分背景圖,也算是整個遊戲靜态背景的一部分。

    4、角色——Player

    5、分數——Score

    6、層級渲染關系

        顯示在下方的節點的渲染順序是在上方節點的後面,也就是說下方的節點是在上方節點之後繪制的。

三、腳本

    1、遊戲邏輯腳本——Game.js

        Game.js的内容可分為四部分,分别是屬性、onload函數、update函數與其他函數。

        ·屬性

            a. star預制資源

            b. star消失時間範圍

            c. 地面節點

d. Play節點

e. Label分數節點

f.得分音效

        ·onLoad函數

            onLoad方法會在場景加載後立刻執行,初始化相關的操作和邏輯都放在這裡面。

            a. 得到地面坐标

            b. 初始化計時器

            c. 生成新的星星

            d. 初始化計分

        ·update函數

            update在場景加載後就會每幀調用一次,一般把需要經常計算或及時更新的邏輯内容放在這裡。

            a. 計時器更新

            b. 逾時判斷

        ·其他函數

            a. 生成星星

            b. 生成星星的随機位置

            c. 得分

            d. 遊戲結束

    2、Player節點腳本——Player.js

        這個腳本綁定的是場景元素Player,也包含屬性、onload函數、update函數與其他函數。

        ·屬性

            a. 跳躍高度

            b. 跳躍持續時間

            c. 移速

            d. 加速度

            e. 音效資源

        ·onload函數

            a. 執行跳躍

            b. 監聽初始化

            c. 加速度

            d. 水準速度

            a. 速度更新

            b. 速度限制

            c. 位置更新

            a. 跳躍

            b. 輸入控制

            c. 播放聲音

    3、Star節點腳本——Star.js

        star.js為Star預制資源的腳本。Star預制資源為腳本Game.js屬性Star的引用。

            a. 星星與player的距離

            b. Game對象引用

        ·onLoad

            a. 根據屬性a判斷位置

            b. 星星的生成與銷毀

            c. 調用得分方法

        ·update

            a. 判斷距離

            b. 星星透明度的變化

四、小遊戲分析

    1、白話文版本

        在一個背景圖中有一個會不斷跳躍的小妖怪,并且場景裡會随機生成一個星星。當小妖怪把星星吃掉時,星星消失,得分加一,并生成新的星星,星星消失時仍然沒有被吃掉,小妖怪GG,遊戲結束。

    2、正式版本

        綁定到根節點的Game.js腳本負責遊戲主邏輯,它負責生成背景圖(background&ground)等各種資源(見Game.js屬性),以及不同資源的調配(見Game.js函數)。場景中有一隻會不斷跳躍(Player.js)的小妖怪(Player)供玩家操作。場景随機産生(腳本中動态生成)一個星星(見star.js函數b)。當玩家按下鍵盤上的鍵時,觸發Player節點的輸入控制函數(Player.js.其他函數.b),對輸入進行篩選,并更改加速度及方向的屬性。當星星與Player的距離小于屬性規定的距離時,星星消失,加一分,再生成新的星星。當星星逾時消失,遊戲結束。

    3、圖示

Cocos文檔案例遊戲設計的梳理與分析

五、遊戲設計流程的梳理

    在這個遊戲中,我們可以看到這款遊戲得以運作的三要素(資源、腳本、場景)。其中資源和場景負責遊戲的視覺、圖像效果,而腳本則是串聯各資源,既可以是單個元素的腳本(Player.js),也可以是整個遊戲流程、規則的腳本(Game.js)。

    除了上述提到 的遊戲運作需要的條件,一個遊戲的推出還需要其他要素的支援,如激勵、劇情、互動等。

Cocos文檔案例遊戲設計的梳理與分析

六、改進與進階

    1、在原遊戲模式上的改進

        ·對觸屏事件的處理。(cc.Node.EventType.TOUCH_START等)

·加入菜單子產品,添加重新開始、暫停、退出等功能。

·加入手遊搖杆(見附錄)。

        ·加入邊界,限制Player移到螢幕外。

    2、略微改變遊戲模式的案例——貪吃蛇

        ·星星改為食物,該子產品可直接複制。

        ·加入手遊搖杆,控制蛇身移動。

        ·重新定義蛇身類。

        ·基于案例小遊戲的貪吃蛇正在醞釀之中,挖坑後填。

附錄:

    手遊搖杆系列

            ·

四方向搖杆 八方向搖杆 跟随式搖杆

繼續閱讀