欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CocosCreator經(jīng)典入門項目之flappybird

 更新時間:2021年04月14日 11:33:55   作者:冏尼  
這篇文章主要介紹了CocosCreator經(jīng)典入門項目之flappybird,詳細說明了制作的每個步驟,還有詳盡的代碼,對CocosCreator感興趣的同學,一定要看一下

開發(fā)環(huán)境

CocosCreator v2.3.1

node.js v10.16.0

vscode 1.46.1

游戲引擎概念

可以理解為一套已經(jīng)編寫好的代碼,它封裝了對底層接口的使用,是游戲開發(fā)的核心功能提供者。

一般分為6各部分:

  1. 圖像渲染:控制電腦對游戲繪畫的繪畫操作,直接影響游戲質(zhì)量
  2. 音頻UI:提供音頻特效,以及游戲UI部分,讓游戲與用戶交互更好
  3. 設備輸入:鍵盤、鼠標、陀螺儀等
  4. 腳本引擎:提供腳本接口,為游戲開發(fā)者提供“筆墨”
  5. 網(wǎng)絡引擎:數(shù)據(jù)交互模塊,用服務器為客戶端提供交互
  6. 物理引擎(高級):模擬現(xiàn)實的物理效果(重力加速度、物體間的碰撞等)。

關于Cocos Creator

項目結(jié)構(gòu)

ProjectName(項目文件夾)
├──assets 資源文件夾----------用來放置游戲中所有的本地資源、腳本和第三方庫文件
├──library 資源庫----------------這里文件的結(jié)構(gòu)和資源格式將被處理成最終游戲發(fā)布時需要的形式
├──local 本地設置-------------存放項目本機刪的配置信息(編輯器面板布局、窗口大小、位置等)
├──packages 擴展插件文件夾—存放項目的自定義擴展插件
├──settings 項目設置-------------保存項目的相關設置,如構(gòu)建發(fā)布菜單里的包名、場景和平臺選擇
├──temp 臨時文件夾----------用于緩存CocosCreator在本地的臨時文件
└──project.json 驗證文件-------------作為驗證CocosCreator項目合法性的標志

下面開始進入真正的項目上手

配置代碼編輯環(huán)境

Visual Studio Code (以下簡稱 VS Code)是微軟新推出的輕量化跨平臺 IDE,支持 Windows、Mac、Linux 平臺,安裝和配置非常簡單。使用 VS Code 管理和編輯項目腳本代碼,可以輕松實現(xiàn)語法高亮、智能代碼提示等功能。

安裝 Cocos Creator API 適配插件

該操作會將 Cocos Creator API 適配插件安裝到 VS Code 全局的插件文件夾中,安裝成功后在 控制臺 會顯示綠色的提示:VS Code extension installed to ...。這個插件的主要功能是為 VS Code 編輯狀態(tài)下注入符合 Cocos Creator 組件腳本使用習慣的語法提示。

在項目中生成智能提示數(shù)據(jù)

如果希望在代碼編寫過程中自動提示 Cocos Creator 引擎 API,需要通過菜單生成 API 智能提示數(shù)據(jù)并自動放進項目路徑下。

選擇主菜單的 開發(fā)者 -> VS Code 工作流 -> 更新 VS Code 智能提示數(shù)據(jù)。該操作會將根據(jù)引擎 API 生成的 creator.d.ts 數(shù)據(jù)文件復制到項目根目錄下(注意是在 assets 目錄外面),操作成功時會在 控制臺 顯示綠色提示:API data generated and copied to ...

使用 VS Code 激活腳本編譯

使用外部文本編輯器修改項目腳本后,要重新激活 Cocos Creator 窗口才能觸發(fā)腳本編譯,我們在新版本的 Creator 中增加了一個預覽服務器的 API,可以通過向特定地址發(fā)送請求來激活編輯器的編譯。

新建項目

1.新建一個空白項目

2.資源管理器

然后你需要在資源管理中創(chuàng)建項目中最重要場景、腳本文件,以及導入游戲所需要的紋理(圖片資源)。這里的文件夾不是默認創(chuàng)建的,你需要手動創(chuàng)建,便于管理你的項目。需要說明的是resources是CocosCreator(以下簡述cocos)中特殊的資源文件夾,所有需要通過cc.loader.loadRes動態(tài)加載(后續(xù)會提到這個方法)的資源,都必須放置在resources文件夾和它的子文件夾下。如果一份資源僅僅是被resources中的其他資源所依賴,而不需要直接被cc.loader.loadRes調(diào)用,就不需要放在resources文件夾里。

3.場景

在scenes中新建場景,scenes–右鍵–新建scenes場景,在 Cocos Creator 中,游戲場景(Scene) 是開發(fā)時組織游戲內(nèi)容的中心,也是呈現(xiàn)給玩家所有游戲內(nèi)容的載體。游戲場景中一般會包括以下內(nèi)容:

  • 場景圖像和文字(Sprite,Label)
  • 角色
  • 以組件形式附加在場景節(jié)點上的游戲邏輯腳本

當玩家運行游戲時,就會載入游戲場景,游戲場景加載后就會自動運行所包含組件的游戲腳本,實現(xiàn)各種各樣開發(fā)者設置的邏輯功能。所以除了資源以外,游戲場景是一切內(nèi)容創(chuàng)作的基礎。現(xiàn)在,讓我們來新建一個場景。入門項目flappybird只需要新建一個場景,你完成這個項目后的效果大致是這個亞子。

4.場景編輯器、層級管理器、屬性檢查器

雙擊你所創(chuàng)建的bird場景,cocos就會在 場景編輯器層級管理器 中打開這個場景。打開場景后, 層級管理器 中會顯示當前場景中的所有節(jié)點和它們的層級關系。我們剛剛新建的場景中只有一個名叫 Canvas 的節(jié)點,Canvas 可以被稱為畫布節(jié)點或渲染根節(jié)點,點擊選中 Canvas,可以在 屬性檢查器 中看到他的屬性。

從資源包里面的texture目錄下將名為的sky背景圖片拖到Canvas中,作為游戲背景。調(diào)整Canvas和sky的size尺寸大小。sky的size至少要大于Canvas,不然你制作的游戲可能會有很大的黑邊。然后用相似的方法把bird0(其他兩張是為了配合作出簡易幀動畫,模擬小鳥的飛行)、pipe1(下管道)、pipe2(上管道)添加到Canvas下。上下管道為一組,我復制了4組,一共5組。通過腳本控制背景和每組管道向左移動來達到小鳥持續(xù)向前飛行的效果。

5.節(jié)點綁定

需要注意,Canvas下的元素都是以node節(jié)點的形式來被管理的。在script中新建腳本文件—game.js,將其拖入Canvas中,或者直接綁定到Canvas上。確保在加載場景時腳本被一并加載。

6.生命周期回調(diào)

Cocos Creator 為組件腳本提供了生命周期的回調(diào)函數(shù)。用戶只要定義特定的回調(diào)函數(shù),Creator 就會在特定的時期自動執(zhí)行相關腳本,用戶不需要手工調(diào)用它們。

目前提供給用戶的生命周期回調(diào)函數(shù)主要有:

  • onLoad onLoad 回調(diào)會在節(jié)點首次激活時觸發(fā),比如所在的場景被載入,或者所在節(jié)點被激活的情況下。而且onLoad 總是會在任何 start 方法調(diào)用前執(zhí)行,通常我們會在 onLoad 階段去做一些初始化相關的操作。
  • start start 回調(diào)函數(shù)會在組件第一次激活前,也就是第一次執(zhí)行 update 之前觸發(fā)。start 通常用于初始化一些需要經(jīng)常修改的數(shù)據(jù),這些數(shù)據(jù)可能在 update 時會發(fā)生改變。
  • update 游戲開發(fā)的一個關鍵點是在每一幀渲染前更新物體的行為,狀態(tài)和方位。這些更新操作通常都放在 update 回調(diào)中。以下四個回調(diào)函數(shù)在此項目中不會用到
  • lateUpdate
  • onDestroy
  • onEnable
  • onDisable

主要代碼

game.js

cc.Class({
    extends: cc.Component,

    properties: {
        skyNode: cc.Node,//定義天空節(jié)點
        pipeNode: cc.Node,//定義管道節(jié)點
        birdNode: cc.Node,//定義小鳥節(jié)點
        clickLayerNode: cc.Node,//定義監(jiān)聽節(jié)點  監(jiān)聽鼠標點擊事件
        scoreNode: cc.Node,//定義得分節(jié)點    總得分節(jié)點
        buttonNode: cc.Node,//定義按鈕節(jié)點   開始游戲按鈕
        numberNode: cc.Node,//定義數(shù)字節(jié)點   加分combo
        overNode: cc.Node,//定義游戲結(jié)束節(jié)點  結(jié)束按鈕
        spriteFrame: {//定義精靈框架節(jié)點,
            default: [],//數(shù)組類型,將會綁定bird0、bird1、bird2三張圖片精靈,通過在update()方法中不斷更換,形成動畫
            type: cc.SpriteFrame //圖片精靈類型
        },
        clip: {//定義音效節(jié)點
            default: [],//同樣為數(shù)組類型,便于綁定多個資源。后續(xù)學習,可嘗試使用動態(tài)加載
            type: cc.AudioClip  //音頻類型
        }
    },
    onClickButton() {//設置點擊按鈕方法   
        this.num = 0;//將num重置為0
        this.sign = true;//設置控制游戲是否繼續(xù)的標識符為真
        this.buttonNode.active = false;//讓按鈕節(jié)點不可見
        this.overNode.active = false;//讓控制“游戲結(jié)束”文本的overNode節(jié)點不可見
        this.birdNode.y = 50;//點擊按鈕后小鳥的位置歸位
        this.power = 0;//將力量因素變?yōu)?,防止小鳥復活后下落太快
        this.scoreNode.getComponent(cc.Label).string = "" + this.num;//將分數(shù)節(jié)點的string值變?yōu)?,this.scoreNode.getComponent(cc.Label).string
        let list = this.pipeNode.children;//用一個list存儲金屬管道的子節(jié)點(.children)
        for (let i = 0; i < list.length; i++) {//設置一個循環(huán),終止條件是i小于list的長度
            let child = list[i];//let 一個child變量用于在循環(huán)中存儲每個list[i]
            child.x += 1000;//將管道節(jié)點的x右移1000
        }
        cc.audioEngine.playMusic(this.clip[0], true);
    },
    onClickBagButton(event, data) {  //定義背包按鈕方法
        // cc.log(event, data);
        if (data == "bag") {//判斷傳過來的參數(shù)等于某event的CustomEventData
            this.showBag();  // 調(diào)用顯示背包函數(shù)
        }
    },
    showBag() {  //定義顯示背包函數(shù)
        if (this.bagPrefab == null) {  //如果資源加載沒有成功
            setTimeout(() => {  //設置延時0.5s后繼續(xù)調(diào)用顯示bag方法
                this.showBag();
            }, 500);
            return;
        }
        //資源加載完成
        let node = null;    //定義一個node賦值為空
        if(this.isOpen){  //判斷背包是否打開,this.isOpen初始值為false
            node = cc.find("Canvas/panelBag");
            node.active = true;
        }
        else{
            node = cc.instantiate(this.bagPrefab);  //加載具體的預置資源并賦值給node
            cc.find("Canvas").addChild(node);  //將node節(jié)點添加到Canvas幕布下
        }
        node.opacity = 0;//設置node節(jié)點的透明度為0;
        node.scale = 0.1;//設置node節(jié)點的初始縮放為0.1;
        let ac = cc.spawn(  //封裝并行的動畫并賦值給ac
            cc.fadeIn(0.5),  //0.5s的速度淡入
            cc.scaleTo(0.5,1),//0.5s的速度縮放到1
        );
        node.runAction(ac); //用runAction函數(shù)執(zhí)行封裝好的ac
        this.isOpen = true;//將背包打開參數(shù)賦值true
    },
    gameOver() {    //設置游戲結(jié)束方法
        this.sign = false;//游戲結(jié)束,將游戲繼續(xù)標識符變?yōu)閒alse
        this.checkStill = false;//檢查游戲是否進行參數(shù)變?yōu)閒alse
        this.buttonNode.active = true;//游戲結(jié)束,讓開始按鈕this.buttonNode為可見
        this.overNode.active = true;//游戲結(jié)束,讓“游戲結(jié)束”文本的overNode節(jié)點可見
        cc.audioEngine.stopMusic(this.clip[0]);  //游戲結(jié)束停止背景音樂
    },
    addScore() {    //設置加分方法
        this.numberNode.opacity = 255;//讓分數(shù)節(jié)點numberNode的.opacity元素(透明度)為255
        this.num++;//讓num值++
        this.scoreNode.getComponent(cc.Label).string = "" + this.num;//讓分數(shù)節(jié)點的string元素=空的的字符串“” 加num
        this.numberNode.y = this.birdNode.y;//讓加分combo節(jié)點numberNode的y和小鳥節(jié)點的y相等
        this.numberNode.runAction(//讓加分combo節(jié)點numberNode漸入漸出runAction,spawn,fadeOut,moveBy
            cc.spawn(
                cc.fadeOut(0.5),
                cc.moveBy(0.5, cc.v2(0, 50))
            )
        )
        cc.audioEngine.playEffect(this.clip[2]);  //加分音樂
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        // cc.director.getCollisionManager().enabled = true;     //打開碰撞管理系統(tǒng)cc.director.getCollisionManager().
        this.bagPrefab = null;//定義bagPrefab變量賦值為空
        // cc.loader.loadRes(路徑,資源類型,回調(diào)函數(shù));error如果錯誤,打印錯誤信息,data為加載成功的資源
        cc.loader.loadRes("prefab/panelBag", cc.Prefab, (error, data) => {
            if (error) {//判斷如果錯誤信息不為空
                cc.log(error);//打印錯誤信息
                return;         
            }
            this.bagPrefab = data; //將加載到的資源賦值給this.bafPrefab
        });
    },

    start() {
        this.isOpen = false;//定義背包是否打開變量并置為false;
        this.num = 0;//將num參數(shù)變?yōu)?,防止游戲再開始時,得分繼承上局的分數(shù)
        this.scoreNode.getComponent(cc.Label).string = "" + 0;//設置分數(shù)初始值為0
        this.speed = 5;//設置相對位移速度為5
        this.power = 0;//設置力量參數(shù)為0
        this.checkStill = true;//檢查游戲是否進行參數(shù)變?yōu)閠rue
        this.curFrame = 0;//定義一個變量用于循環(huán)skinnode列表
        this.sign = false;//定義一個標識符控制游戲是否開始,初始值為false
        this.checkState = false;// false-非碰撞檢測狀態(tài) true-碰撞檢測狀態(tài)
        this.up = 0;//
        this.clickLayerNode.on(cc.Node.EventType.TOUCH_START, () => {//誰.on(cc.Node.EventType類型.事件,執(zhí)行匿名方法() =>)
            this.power = 4;//將初始的力量參數(shù)直接由0置為4,確保每次監(jiān)聽到點擊小鳥有比較明顯的上升
            this.up++;
            cc.audioEngine.playEffect(this.clip[1]);
        })

        cc.audioEngine.playMusic(this.clip[0], true);
    },

    update(dt) {
        if (!this.sign) {//設置讓游戲暫停的標識符
            return;
        }
        cc.log(2);
        this.skyNode.x -= this.speed;//通過控制天空節(jié)點的x值來控制背景移動   
        this.birdNode.y += this.power + this.up;//通過小鳥節(jié)點的y值和初始的力量參數(shù)來控制小鳥自由下落的速度
        this.power -= 0.2;//通過讓power小幅度值漸變達到讓小鳥平滑移動
        this.birdNode.angle = this.speed * this.power;//通過力量和速度參數(shù)控制小鳥上升和下降的角度
        if (this.skyNode.x < -1200) {//判斷當背景和起點相隔1200像素時,讓背景節(jié)點skyNode.x歸位=0(無限循環(huán)背景)
            this.skyNode.x = 0;
        }
        //node.children即管道節(jié)點的子節(jié)點
        let list = this.pipeNode.children;//用一個list存儲金屬管道的子節(jié)點(.children)
        let checkNode = null;//定義檢查管道節(jié)點變量并賦值為null
        for (let i = 0; i < list.length; i++) {//用循環(huán)賦值所有管道節(jié)點 并賦予速度
            let child = list[i];//let一個child變量來存儲list中的每個元素
            child.x -= this.speed;//控制管道節(jié)點的x-=this.speed
            // cc.log(child);
            if (child.x < -600) {
                child.x = 600;//判斷child出界< -600時讓child歸位到600
                child.y = (Math.random() - 0.5) * 200;//通過Math.random()(其值在0-1之間)函數(shù)來控制管道通過口隨機出現(xiàn),緩和值為200
            }
            let dis = Math.abs(this.birdNode.x - child.x)//let一個變量dis用于計算小鳥和管道的x的差值(Math.abs取絕對值)
            let width = (this.birdNode.width + child.children[0].width) / 2;//定義width變量用于存儲小鳥和管道碰撞的臨界值
            if (dis < width) {//判斷 dis <= width,就給檢查管道節(jié)點變量賦值child
                checkNode = child;
            }
        }
        if(this.birdNode.y + this.birdNode.height / 2 > cc.winSize.height / 2  //判斷小鳥的頭部大于屏幕的上邊緣或者小鳥的底部小于屏幕的下邊緣
            || this.birdNode.y - this.birdNode.height / 2 < -cc.winSize.height / 2){
                this.gameOver();//執(zhí)行游戲結(jié)束方法
            }
        if(checkNode) {//直接判斷checkNode,如果未被賦值即為空
            this.checkState = true;//狀態(tài)從無到有,將檢查狀態(tài)變量checkState賦值為true
            //判斷矩形小鳥的上邊框(.y + height/2)大于等于通道上邊框(checkNode.y+100)或者小鳥的下邊框小于等于通道
            if (this.birdNode.y + this.birdNode.height / 2 > checkNode.y + 100
                || this.birdNode.y - this.birdNode.height / 2 < checkNode.y) {
                this.gameOver();//游戲結(jié)束
            }
        }else{
            if (this.checkState && this.checkStill) {//判斷檢查狀態(tài)變量和檢查游戲是否進行變量是否都為true(&&)
                this.addScore();//調(diào)用加分函數(shù)
            }
            this.checkStill = true; //將檢查游戲是否進行變量賦值true
            this.checkState = false;//將檢查狀態(tài)變量賦值為false
            this.up = 0;
        }
        this.curFrame++;//小鳥幀率變量自增
        if (this.curFrame > 2) {//判斷如果幀率變量大于2,將幀率變量變?yōu)?;
            this.curFrame = 0;
        }
        if (this.birdNode.y) {//如果力量參數(shù)大于0
            //讓小鳥節(jié)點的Sprite組件的spriteFrame參數(shù)隨幀率參數(shù)變化
            this.birdNode.getComponent(cc.Sprite).spriteFrame = this.spriteFrame[this.curFrame];
        }
    }
})

總結(jié)

上述關于小鳥、鋼管是否碰撞的檢測是通過數(shù)學計算的方法實現(xiàn)的。不過我的項目文件中還保留了使用cocos碰撞組件的版本,具體表現(xiàn)為每個pipe節(jié)點、entrance節(jié)點身上的BoxCollider組件,以及bird.js。另外還有我學習制作的一個背包,主要通過預置(cc.prefab)節(jié)點實現(xiàn)了背包窗口以及在窗口中動態(tài)加載道具圖片(sprite)。本人也在學習階段,有問題歡迎評論區(qū)交流。筆者后續(xù)還準備分享一些其他項目!包括單機和局域網(wǎng)聯(lián)機版本的對比項目;可能還會用到一些優(yōu)化策略如:資源管理器、網(wǎng)絡通訊管理器、信號槽等,不足之處希望各位大佬輕噴。

以上就是CocosCreator經(jīng)典入門項目之flappybird的詳細內(nèi)容,更多關于CocosCreator制作flappybird的資料請關注腳本之家其它相關文章!

相關文章

  • js完美的div拖拽實例代碼

    js完美的div拖拽實例代碼

    文章實現(xiàn)的div拖拽程序可以根據(jù)按鈕來控制是要種拖拽方式與位置 ,下面希望有需要的朋友可參考
    2014-01-01
  • 微信小程序swiper左右擴展各顯示一半代碼實例

    微信小程序swiper左右擴展各顯示一半代碼實例

    這篇文章主要介紹了微信小程序swiper左右擴展各顯示一半代碼實例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-12-12
  • JavaScript 完成注冊頁面表單校驗的實例

    JavaScript 完成注冊頁面表單校驗的實例

    下面小編就為大家?guī)硪黄狫avaScript 完成注冊頁面表單校驗的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • JS實現(xiàn)打字游戲

    JS實現(xiàn)打字游戲

    這篇文章主要為大家詳細介紹了JS實現(xiàn)打字游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • webpack4 升級遷移的實現(xiàn)

    webpack4 升級遷移的實現(xiàn)

    這篇文章主要介紹了webpack 4 升級遷移的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解使用Next.js構(gòu)建服務端渲染應用

    詳解使用Next.js構(gòu)建服務端渲染應用

    這篇文章主要介紹了詳解使用Next.js構(gòu)建服務端渲染應用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • JS中的6種打斷點的方式實例總結(jié)

    JS中的6種打斷點的方式實例總結(jié)

    斷點調(diào)試是啥?難不難? 斷點調(diào)試其實并不是多么復雜的一件事,簡單的理解無外呼就是打開瀏覽器,打開sources找到js文件,在行號上點一下罷了,下面這篇文章主要給大家介紹了關于JS中6種打斷點方式的相關資料,需要的朋友可以參考下
    2022-04-04
  • 漂亮實用的頁面loading(加載)封裝代碼

    漂亮實用的頁面loading(加載)封裝代碼

    要做一個異步登錄,打算給用戶做一點提示,所以就網(wǎng)上找了點代碼,自己修改新增了一些,做了一個html+css+js的功能封裝,供大家參考,需要的朋友參考下吧
    2017-02-02
  • JavaScript6 let 新語法優(yōu)勢介紹

    JavaScript6 let 新語法優(yōu)勢介紹

    這篇文章主要介紹了JavaScript6 let 新語法優(yōu)勢介紹的相關資料,需要的朋友可以參考下
    2016-07-07
  • JavaScript 匿名函數(shù)(anonymous function)與閉包(closure)

    JavaScript 匿名函數(shù)(anonymous function)與閉包(closure)

    JavaScript 匿名函數(shù)(anonymous function)與閉包(closure) ,學習js的朋友可以參考下。
    2011-10-10

最新評論