女教师高潮叫床视频在线观看,国产成人在线看,亚洲精品黄色

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

CocosCreator v2.3.1

node.js v10.16.0

vscode 1.46.1

游戲引擎概念

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

一般分為6各部分：

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

關(guān)于Cocos Creator

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

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

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

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

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

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

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

安裝 Cocos Creator API 適配插件

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

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

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

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

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

使用 VS Code 激活腳本編譯

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

新建項目

1.新建一個空白項目

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

2.資源管理器

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

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

3.場景

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

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

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

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

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

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

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

5.節(jié)點綁定

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

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

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

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

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

onLoad onLoad 回調(diào)會在節(jié)點首次激活時觸發(fā)，比如所在的場景被載入，或者所在節(jié)點被激活的情況下。而且onLoad 總是會在任何 start 方法調(diào)用前執(zhí)行，通常我們會在 onLoad 階段去做一些初始化相關(guān)的操作。
start start 回調(diào)函數(shù)會在組件第一次激活前，也就是第一次執(zhí)行 update 之前觸發(fā)。start 通常用于初始化一些需要經(jīng)常修改的數(shù)據(jù)，這些數(shù)據(jù)可能在 update 時會發(fā)生改變。
update 游戲開發(fā)的一個關(guān)鍵點是在每一幀渲染前更新物體的行為，狀態(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)聽鼠標(biāo)點擊事件
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ù)學(xué)習(xí)，可嘗試使用動態(tài)加載
type: cc.AudioClip //音頻類型
}
},
onClickButton() {//設(shè)置點擊按鈕方法
this.num = 0;//將num重置為0
this.sign = true;//設(shè)置控制游戲是否繼續(xù)的標(biāo)識符為真
this.buttonNode.active = false;//讓按鈕節(jié)點不可見
this.overNode.active = false;//讓控制“游戲結(jié)束”文本的overNode節(jié)點不可見
this.birdNode.y = 50;//點擊按鈕后小鳥的位置歸位
this.power = 0;//將力量因素變?yōu)?，防止小鳥復(fù)活后下落太快
this.scoreNode.getComponent(cc.Label).string = "" + this.num;//將分?jǐn)?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++) {//設(shè)置一個循環(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(() => { //設(shè)置延時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); //加載具體的預(yù)置資源并賦值給node
cc.find("Canvas").addChild(node); //將node節(jié)點添加到Canvas幕布下
}
node.opacity = 0;//設(shè)置node節(jié)點的透明度為0；
node.scale = 0.1;//設(shè)置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() { //設(shè)置游戲結(jié)束方法
this.sign = false;//游戲結(jié)束，將游戲繼續(xù)標(biāo)識符變?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() { //設(shè)置加分方法
this.numberNode.opacity = 255;//讓分?jǐn)?shù)節(jié)點numberNode的.opacity元素（透明度）為255
this.num++;//讓num值++
this.scoreNode.getComponent(cc.Label).string = "" + this.num;//讓分?jǐn)?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)?，防止游戲再開始時，得分繼承上局的分?jǐn)?shù)
this.scoreNode.getComponent(cc.Label).string = "" + 0;//設(shè)置分?jǐn)?shù)初始值為0
this.speed = 5;//設(shè)置相對位移速度為5
this.power = 0;//設(shè)置力量參數(shù)為0
this.checkStill = true;//檢查游戲是否進行參數(shù)變?yōu)閠rue
this.curFrame = 0;//定義一個變量用于循環(huán)skinnode列表
this.sign = false;//定義一個標(biāo)識符控制游戲是否開始，初始值為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) {//設(shè)置讓游戲暫停的標(biāo)識符
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小幅度值漸變達(dá)到讓小鳥平滑移動
this.birdNode.angle = this.speed * this.power;//通過力量和速度參數(shù)控制小鳥上升和下降的角度
if (this.skyNode.x < -1200) {//判斷當(dāng)背景和起點相隔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];
}
}
})

CocosCreator經(jīng)典入門項目之flappybird 總結(jié)

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

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