1. 項(xiàng)目概述從“打螺絲”熱梗到可復(fù)現(xiàn)的Cocos Creator小游戲最近在刷短視頻時(shí)經(jīng)常能看到一個(gè)叫《打螺絲》的小游戲玩法簡單又上頭屏幕上不斷冒出螺絲你只需要快速點(diǎn)擊把它們“擰”掉伴隨著清脆的音效和分?jǐn)?shù)上漲那種瞬間的反饋感特別解壓。這個(gè)游戲巧妙地把“進(jìn)廠打螺絲”這個(gè)網(wǎng)絡(luò)熱梗做成了游戲擊中了大家工作學(xué)習(xí)之余想要放松一下的需求。作為一個(gè)用Cocos Creator做了幾年小游戲的開發(fā)者我第一反應(yīng)就是這游戲的實(shí)現(xiàn)邏輯應(yīng)該不復(fù)雜非常適合作為新手入門Cocos Creator的實(shí)戰(zhàn)案例。它涵蓋了2D精靈操作、動(dòng)畫控制、碰撞檢測、分?jǐn)?shù)UI更新、音效播放等核心模塊但每個(gè)模塊的難度都不高組合起來卻能做出一個(gè)完整、可玩性不錯(cuò)的作品。所以我決定把這個(gè)游戲的完整實(shí)現(xiàn)過程拆解出來從零開始手把手帶你用Cocos Creator 3.x版本復(fù)現(xiàn)一個(gè)屬于自己的“打螺絲消除”游戲。本文不僅會(huì)提供每一步的詳細(xì)操作和代碼還會(huì)解釋為什么這么做以及我在開發(fā)過程中踩過的坑和優(yōu)化技巧最后也會(huì)把完整的項(xiàng)目源碼分享出來。無論你是剛接觸Cocos Creator的新手還是想找一個(gè)輕量級(jí)項(xiàng)目練手的同學(xué)跟著這篇教程走下來你都能收獲一個(gè)可運(yùn)行、可擴(kuò)展的游戲并對Cocos Creator的基礎(chǔ)工作流有一個(gè)扎實(shí)的理解。2. 游戲核心玩法與設(shè)計(jì)思路拆解在動(dòng)手寫代碼之前我們必須先把游戲的設(shè)計(jì)思路理清楚。一個(gè)好的設(shè)計(jì)思路就像建筑的藍(lán)圖能讓我們在開發(fā)過程中避免很多返工。2.1 核心玩法機(jī)制分析《打螺絲消除》的核心玩法極其簡單可以歸納為“出現(xiàn)-點(diǎn)擊-消除-得分”的循環(huán)。螺絲生成游戲場景中會(huì)以一定的時(shí)間間隔例如每秒1-2個(gè)在隨機(jī)位置生成一個(gè)“螺絲”對象。玩家操作玩家通過鼠標(biāo)PC或手指移動(dòng)端點(diǎn)擊屏幕上的螺絲。反饋與消除點(diǎn)擊后螺絲需要有一個(gè)明顯的反饋比如播放一個(gè)“被擰動(dòng)”的動(dòng)畫或者直接縮小、旋轉(zhuǎn)消失同時(shí)播放“咔噠”的音效。計(jì)分系統(tǒng)每成功消除一個(gè)螺絲玩家的分?jǐn)?shù)就增加。為了增加趣味性可以設(shè)計(jì)連續(xù)點(diǎn)擊加分Combo或者不同螺絲有不同分值。游戲節(jié)奏隨著游戲時(shí)間推移螺絲生成的速度可以逐漸加快或者一次性生成多個(gè)螺絲增加游戲難度和緊張感。這個(gè)玩法模型在游戲設(shè)計(jì)中屬于典型的“反應(yīng)類”或“點(diǎn)擊消除類”游戲它的樂趣在于簡單的操作、快速的反饋和不斷攀升的分?jǐn)?shù)帶來的成就感。2.2 Cocos Creator實(shí)現(xiàn)方案選型基于以上玩法我們用Cocos Creator來實(shí)現(xiàn)需要規(guī)劃幾個(gè)關(guān)鍵技術(shù)方案場景與節(jié)點(diǎn)樹結(jié)構(gòu)我們將創(chuàng)建一個(gè)主場景GameScene。場景根節(jié)點(diǎn)下至少包含一個(gè)背景層、一個(gè)用于生成和管理所有螺絲的節(jié)點(diǎn)例如叫ScrewManager、一個(gè)UI層用于顯示分?jǐn)?shù)、倒計(jì)時(shí)等。螺絲預(yù)制體Prefab螺絲是游戲中會(huì)大量、重復(fù)生成的對象。在Cocos Creator中我們絕對不應(yīng)該在代碼里直接new一個(gè)復(fù)雜的節(jié)點(diǎn)。最佳實(shí)踐是創(chuàng)建一個(gè)“螺絲預(yù)制體”。這個(gè)預(yù)制體是一個(gè)模板里面包含了螺絲的圖片Sprite、動(dòng)畫組件Animation或緩動(dòng)控制、以及一個(gè)用于響應(yīng)點(diǎn)擊的碰撞體如BoxCollider2D和腳本。我們需要在游戲中動(dòng)態(tài)實(shí)例化這個(gè)預(yù)制體。對象池Object Pool優(yōu)化這是本教程的一個(gè)重點(diǎn)優(yōu)化技巧。如果游戲運(yùn)行中不斷創(chuàng)建instantiate和銷毀destroy螺絲預(yù)制體會(huì)對性能造成很大壓力尤其在低端手機(jī)上可能導(dǎo)致卡頓。對象池技術(shù)就是預(yù)先創(chuàng)建一定數(shù)量的螺絲對象放入“池子”中需要時(shí)從池中取用并設(shè)置位置、狀態(tài)為活躍消除時(shí)不是銷毀而是放回池中并設(shè)置為非活躍。這能極大減少運(yùn)行時(shí)內(nèi)存分配和垃圾回收。輸入事件處理Cocos Creator提供了完善的輸入事件系統(tǒng)。對于2D點(diǎn)擊我們可以直接在螺絲節(jié)點(diǎn)的碰撞體組件上掛載腳本監(jiān)聽onMouseDown或onTouchStart事件。更高效的方式是在腳本中使用this.node.on(Node.EventType.TOUCH_START, ...)來監(jiān)聽。UI系統(tǒng)分?jǐn)?shù)顯示我們使用Cocos Creator的Label組件。只需要在UI層創(chuàng)建一個(gè)Label節(jié)點(diǎn)然后在游戲邏輯腳本中持有它的引用當(dāng)分?jǐn)?shù)變化時(shí)更新其string屬性即可。注意為什么強(qiáng)調(diào)使用預(yù)制體和對象池這是從“玩具Demo”到“可發(fā)布游戲”的關(guān)鍵一步。很多新手教程會(huì)忽略性能直接動(dòng)態(tài)創(chuàng)建/銷毀做幾個(gè) demo 沒問題但一旦物體數(shù)量多、生成頻繁游戲馬上就會(huì)變得卡頓。提前建立對象池的意識(shí)是專業(yè)開發(fā)的良好起點(diǎn)。3. 開發(fā)環(huán)境準(zhǔn)備與項(xiàng)目創(chuàng)建工欲善其事必先利其器。我們先確保環(huán)境就緒。3.1 Cocos Creator安裝與版本選擇首先你需要安裝Cocos Creator。訪問Cocos官網(wǎng)的下載中心選擇最新的穩(wěn)定版本目前是3.8.x。我強(qiáng)烈建議使用3.4以上的LTS長期支持版本因?yàn)樗鼈兏€(wěn)定社區(qū)資源和插件兼容性更好。安裝過程很簡單一路下一步即可。安裝完成后打開Cocos Dashboard這是我們的項(xiàng)目管理器。3.2 新建項(xiàng)目與基礎(chǔ)設(shè)置在Dashboard中點(diǎn)擊“新建”按鈕。項(xiàng)目模板選擇“Empty(2D)”一個(gè)干凈的2D空項(xiàng)目最適合我們。項(xiàng)目名稱可以命名為ScrewElimination或你喜歡的任何名字。項(xiàng)目路徑選擇一個(gè)你熟悉的文件夾。編輯器語言根據(jù)喜好選擇中文或英文。點(diǎn)擊“創(chuàng)建并打開”編輯器會(huì)自動(dòng)啟動(dòng)并加載新項(xiàng)目。項(xiàng)目打開后我們先熟悉一下編輯器界面。中間是“場景”視圖右邊是“層級(jí)管理器”顯示節(jié)點(diǎn)樹和“資源管理器”顯示所有資源文件下方是“控制臺(tái)”左側(cè)是“場景”和“節(jié)點(diǎn)”的屬性檢查器。3.3 資源導(dǎo)入與目錄規(guī)劃一個(gè)清晰的項(xiàng)目結(jié)構(gòu)能讓你后期維護(hù)更輕松。在“資源管理器”面板右鍵點(diǎn)擊assets目錄創(chuàng)建幾個(gè)文件夾Scene存放場景、Script存放腳本、Prefab存放預(yù)制體、Texture存放圖片、Audio存放音效、Animation存放動(dòng)畫剪輯。將你準(zhǔn)備好的游戲素材拖入對應(yīng)文件夾。至少需要Texture: 一張螺絲的圖片如screw.png一張背景圖。Audio: 點(diǎn)擊螺絲時(shí)的音效如click.wav背景音樂可選。其他UI圖片如按鈕按需準(zhǔn)備。4. 游戲場景與核心預(yù)制體搭建現(xiàn)在我們從零開始搭建游戲世界。4.1 創(chuàng)建游戲主場景在assets/Scene文件夾上右鍵選擇“創(chuàng)建 - Scene”命名為Main。雙擊打開這個(gè)場景。在“層級(jí)管理器”中你會(huì)看到一個(gè)叫Canvas的節(jié)點(diǎn)這是UI的根節(jié)點(diǎn)。我們還需要一個(gè)用于游戲內(nèi)容的節(jié)點(diǎn)。右鍵點(diǎn)擊Canvas選擇“創(chuàng)建節(jié)點(diǎn) - 創(chuàng)建空節(jié)點(diǎn)”命名為Game。這個(gè)節(jié)點(diǎn)將用來掛載我們的游戲邏輯腳本并作為所有游戲?qū)ο笕缏萁z的父節(jié)點(diǎn)。同樣在Canvas下創(chuàng)建一個(gè)空節(jié)點(diǎn)命名為UI專門存放所有UI元素。4.2 制作螺絲預(yù)制體Prefab這是游戲的主角我們一步步來制作。創(chuàng)建螺絲節(jié)點(diǎn)在“層級(jí)管理器”中右鍵點(diǎn)擊Game節(jié)點(diǎn)選擇“創(chuàng)建節(jié)點(diǎn) - 創(chuàng)建渲染節(jié)點(diǎn) - Sprite(2D)”命名為Screw。添加圖片選中Screw節(jié)點(diǎn)在右側(cè)“屬性檢查器”中找到Sprite組件。將SpriteFrame屬性設(shè)置為你的螺絲圖片從資源管理器拖拽screw.png過來。添加碰撞體為了讓螺絲能被點(diǎn)擊需要添加一個(gè)碰撞組件。點(diǎn)擊“屬性檢查器”下方的“添加組件”按鈕選擇“Physics 2D - BoxCollider2D”。調(diào)整綠色線框的大小使其剛好包裹住螺絲圖片。關(guān)鍵一步確保勾選了Sensor屬性。因?yàn)槲覀冎恍枰獧z測點(diǎn)擊觸發(fā)事件而不需要真實(shí)的物理碰撞反應(yīng)勾選Sensor能提升性能。添加動(dòng)畫組件可選但推薦為了讓消除更有趣我們可以添加一個(gè)簡單的旋轉(zhuǎn)縮放動(dòng)畫。點(diǎn)擊“添加組件”選擇“Animation”。然后在“資源管理器”的assets/Animation文件夾右鍵“創(chuàng)建 - AnimationClip”命名為screw_eliminate.anim。將這個(gè)動(dòng)畫剪輯拖拽到Screw節(jié)點(diǎn)Animation組件的Clips屬性欄的第一個(gè)位置。錄制動(dòng)畫選中Screw節(jié)點(diǎn)點(diǎn)擊編輯器上方“動(dòng)畫”按鈕打開動(dòng)畫編輯器。點(diǎn)擊“添加屬性”選擇Screw節(jié)點(diǎn)的scale縮放和angle旋轉(zhuǎn)。我們設(shè)計(jì)一個(gè)簡單的消除動(dòng)畫在第0幀scale為(1,1)angle為0在第15幀約0.5秒scale為(0,0)angle為360。這樣螺絲會(huì)在半秒內(nèi)旋轉(zhuǎn)一圈并縮小消失。錄制好后保存。創(chuàng)建預(yù)制體這是最重要的一步。從“層級(jí)管理器”中將Screw節(jié)點(diǎn)拖拽到“資源管理器”的assets/Prefab文件夾中。你會(huì)看到它變成了一個(gè)藍(lán)色的預(yù)制體文件。此時(shí)層級(jí)管理器中的Screw節(jié)點(diǎn)名字會(huì)變成藍(lán)色表示它是預(yù)制體實(shí)例。現(xiàn)在你可以安全地刪除層級(jí)管理器中的這個(gè)Screw節(jié)點(diǎn)實(shí)例了因?yàn)槲覀兒竺鏁?huì)用代碼動(dòng)態(tài)生成它。4.3 搭建基礎(chǔ)UI界面分?jǐn)?shù)顯示在“層級(jí)管理器”中選中UI節(jié)點(diǎn)右鍵“創(chuàng)建節(jié)點(diǎn) - 創(chuàng)建渲染節(jié)點(diǎn) - Label”命名為ScoreLabel。在屬性檢查器中可以調(diào)整Label組件的字體大小、顏色、對齊方式如居頂中。將String屬性初始值設(shè)為“分?jǐn)?shù): 0”。調(diào)整其在屏幕上的位置如左上角。游戲控制按鈕可選你可以添加“開始”、“暫停”、“重新開始”按鈕。創(chuàng)建Button節(jié)點(diǎn)為其子節(jié)點(diǎn)Label設(shè)置文字即可。這部分邏輯我們稍后補(bǔ)充。5. 核心邏輯腳本編寫與詳解游戲的大腦是腳本。我們創(chuàng)建幾個(gè)關(guān)鍵的TypeScript腳本。5.1 游戲總控制器 GameManager這個(gè)腳本負(fù)責(zé)游戲的整體狀態(tài)如分?jǐn)?shù)、游戲是否進(jìn)行、對象池管理等。我們將它掛載在Game節(jié)點(diǎn)上。在assets/Script文件夾右鍵“創(chuàng)建 - TypeScript”命名為GameManager。雙擊用編輯器或你喜歡的IDE如VSCode打開開始編寫。// GameManager.ts import { _decorator, Component, Node, Prefab, instantiate, Label, director } from cc; const { ccclass, property } _decorator; ccclass(GameManager) export class GameManager extends Component { // 1. 暴露給編輯器的屬性螺絲預(yù)制體和分?jǐn)?shù)Label property(Prefab) screwPrefab: Prefab | null null; // 將我們在Prefab文件夾里制作的螺絲預(yù)制體拖拽到這里 property(Label) scoreLabel: Label | null null; // 將UI下的ScoreLabel節(jié)點(diǎn)拖拽到這里 // 2. 私有屬性對象池、當(dāng)前分?jǐn)?shù)、游戲狀態(tài) private screwPool: Node[] []; // 螺絲對象池 private currentScore: number 0; private isGameActive: boolean false; // 3. 初始化對象池預(yù)熱 start() { this.initScrewPool(10); // 游戲開始時(shí)預(yù)先創(chuàng)建10個(gè)螺絲放入池中 this.startGame(); // 游戲開始 } // 初始化對象池 initScrewPool(poolSize: number) { for (let i 0; i poolSize; i) { let screw instantiate(this.screwPrefab); // 實(shí)例化預(yù)制體 screw.active false; // 先設(shè)置為不可見 screw.parent this.node; // 設(shè)置父節(jié)點(diǎn)為GameManager所在節(jié)點(diǎn)即Game節(jié)點(diǎn) this.screwPool.push(screw); // 放入池中 } console.log(對象池初始化完成大小${this.screwPool.length}); } // 從對象池獲取一個(gè)螺絲 getScrewFromPool(): Node | null { // 遍歷池子找到第一個(gè)未激活的可用的螺絲 for (let screw of this.screwPool) { if (!screw.active) { screw.active true; return screw; } } // 如果池子里的螺絲都在用就動(dòng)態(tài)擴(kuò)容新建一個(gè) console.log(對象池已滿動(dòng)態(tài)擴(kuò)容); let newScrew instantiate(this.screwPrefab); newScrew.parent this.node; this.screwPool.push(newScrew); return newScrew; } // 回收螺絲到對象池 returnScrewToPool(screw: Node) { screw.active false; // 可以在這里重置螺絲的位置、縮放、動(dòng)畫狀態(tài)等為下次使用做準(zhǔn)備 screw.setPosition(0, 0); screw.setScale(1, 1); } // 生成一個(gè)螺絲在隨機(jī)位置 spawnScrew() { if (!this.isGameActive) return; let screw this.getScrewFromPool(); if (screw) { // 設(shè)置隨機(jī)位置假設(shè)屏幕中心為(0,0)范圍可自行調(diào)整 const minX -400, maxX 400; const minY -200, maxY 200; const randomX minX Math.random() * (maxX - minX); const randomY minY Math.random() * (maxY - minY); screw.setPosition(randomX, randomY); } } // 增加分?jǐn)?shù) addScore(points: number) { this.currentScore points; this.updateScoreUI(); } // 更新分?jǐn)?shù)顯示 updateScoreUI() { if (this.scoreLabel) { this.scoreLabel.string 分?jǐn)?shù): ${this.currentScore}; } } // 游戲開始 startGame() { this.isGameActive true; this.currentScore 0; this.updateScoreUI(); // 開始定時(shí)生成螺絲例如每秒生成一個(gè) this.schedule(this.spawnScrew, 1.0); } // 游戲結(jié)束 gameOver() { this.isGameActive false; this.unschedule(this.spawnScrew); // 停止生成螺絲 console.log(游戲結(jié)束最終分?jǐn)?shù), this.currentScore); } }代碼關(guān)鍵點(diǎn)解析property裝飾器這是Cocos Creator的核心特性之一它允許你將腳本中的變量暴露在編輯器屬性面板上從而可以通過拖拽節(jié)點(diǎn)或資源的方式進(jìn)行賦值極大提高了靈活性和可配置性。對象池邏輯getScrewFromPool和returnScrewToPool是核心。我們維護(hù)一個(gè)數(shù)組作為池子。獲取時(shí)尋找第一個(gè)active為false的對象回收時(shí)將其active設(shè)為false并重置狀態(tài)。動(dòng)態(tài)擴(kuò)容是一種保底策略避免游戲卡死。schedule與unscheduleCocos Creator內(nèi)置的定時(shí)器比直接用setInterval更易于管理且與引擎生命周期綁定。5.2 螺絲自身行為腳本 ScrewController這個(gè)腳本掛載在螺絲預(yù)制體上負(fù)責(zé)處理被點(diǎn)擊后的動(dòng)畫、音效和通知GameManager加分。創(chuàng)建腳本ScrewController.ts。將其拖拽到assets/Prefab文件夾中的螺絲預(yù)制體上在資源管理器中選中預(yù)制體然后在屬性檢查器下方添加組件。// ScrewController.ts import { _decorator, Component, Node, Animation, AudioSource, input, Input, EventTouch } from cc; const { ccclass, property } _decorator; ccclass(ScrewController) export class ScrewController extends Component { property(AudioSource) clickSound: AudioSource | null null; // 點(diǎn)擊音效的AudioSource組件可以掛在螺絲節(jié)點(diǎn)上或使用全局的 property scoreValue: number 10; // 這個(gè)螺絲的價(jià)值分?jǐn)?shù) private animation: Animation | null null; private isEliminated: boolean false; // 防止重復(fù)點(diǎn)擊 start() { // 獲取動(dòng)畫組件 this.animation this.getComponent(Animation); // 注冊觸摸事件 this.node.on(Node.EventType.TOUCH_START, this.onTouch, this); } onTouch(event: EventTouch) { if (this.isEliminated) return; // 如果正在消除或已消除則忽略點(diǎn)擊 this.isEliminated true; // 1. 播放音效 if (this.clickSound) { this.clickSound.play(); } // 2. 播放消除動(dòng)畫 if (this.animation) { this.animation.play(screw_eliminate); // 播放我們之前制作的動(dòng)畫剪輯 // 動(dòng)畫播放完成后需要回收螺絲。我們可以監(jiān)聽動(dòng)畫完成事件或者用定時(shí)器。 this.scheduleOnce(() { this.eliminateComplete(); }, 0.5); // 假設(shè)動(dòng)畫時(shí)長0.5秒 } else { // 如果沒有動(dòng)畫直接執(zhí)行消除完成邏輯 this.eliminateComplete(); } // 3. 通知GameManager加分 // 這里我們需要找到GameManager實(shí)例。一種簡單的方式是通過全局查找或者使用更優(yōu)雅的通信方式如事件系統(tǒng)。 // 我們先使用find查找適用于小型項(xiàng)目。 const gameManager this.node.parent?.getComponent(GameManager); if (gameManager gameManager.addScore) { gameManager.addScore(this.scoreValue); } } eliminateComplete() { // 通知GameManager回收這個(gè)螺絲這里需要GameManager提供一個(gè)公共方法 const gameManager this.node.parent?.getComponent(GameManager); if (gameManager gameManager.returnScrewToPool) { gameManager.returnScrewToPool(this.node); } // 重置狀態(tài)以便從對象池取出時(shí)使用 this.isEliminated false; if (this.animation) { this.animation.stop(); // 停止動(dòng)畫 } } onDestroy() { // 記得移除事件監(jiān)聽防止內(nèi)存泄漏 this.node.off(Node.EventType.TOUCH_START, this.onTouch, this); } }代碼關(guān)鍵點(diǎn)解析事件監(jiān)聽與移除在start中注冊觸摸事件在onDestroy中移除。這是良好習(xí)慣避免節(jié)點(diǎn)銷毀后事件回調(diào)還在導(dǎo)致錯(cuò)誤。動(dòng)畫播放與回調(diào)我們使用scheduleOnce來模擬動(dòng)畫播放完成后的回調(diào)。更嚴(yán)謹(jǐn)?shù)淖龇ㄊ潜O(jiān)聽Animation組件的finished事件。腳本間通信這里使用了getComponent在父節(jié)點(diǎn)上查找GameManager。對于更復(fù)雜的項(xiàng)目推薦使用Cocos Creator的事件系統(tǒng)director.getScene().emit和on進(jìn)行解耦這樣ScrewController完全不需要知道GameManager的存在只需要發(fā)射一個(gè)“螺絲被消除”的事件由GameManager監(jiān)聽并處理分?jǐn)?shù)。5.3 配置腳本與資源關(guān)聯(lián)編寫完腳本后需要將它們關(guān)聯(lián)到節(jié)點(diǎn)上。在“層級(jí)管理器”中選中Game節(jié)點(diǎn)。在“屬性檢查器”中點(diǎn)擊“添加組件 - 自定義腳本 - GameManager”。你會(huì)看到腳本中property聲明的兩個(gè)屬性出現(xiàn)在面板上。將assets/Prefab/screw.prefab拖拽到Screw Prefab屬性框。將UI/ScoreLabel節(jié)點(diǎn)拖拽到Score Label屬性框。配置螺絲預(yù)制體在“資源管理器”中雙擊打開screw.prefab。在“屬性檢查器”中點(diǎn)擊“添加組件 - 自定義腳本 - ScrewController”。如果你有音效可以在螺絲節(jié)點(diǎn)下添加一個(gè)AudioSource組件將音效文件拖進(jìn)去然后把這個(gè)AudioSource組件拖拽到ScrewController腳本的Click Sound屬性上。6. 功能增強(qiáng)與優(yōu)化實(shí)戰(zhàn)基礎(chǔ)功能完成后我們可以讓游戲變得更好玩、更健壯。6.1 實(shí)現(xiàn)游戲難度遞增現(xiàn)在的螺絲生成是固定間隔。我們可以讓游戲隨著時(shí)間推移生成速度加快或者一次性生成多個(gè)。 在GameManager.ts中修改spawnScrew方法和調(diào)度邏輯// GameManager.ts 新增屬性和方法 property spawnInterval: number 1.0; // 初始生成間隔秒 property spawnIntervalDecrease: number 0.05; // 每次生成后間隔減少量秒 property minSpawnInterval: number 0.2; // 最小生成間隔秒 private spawnCount: number 0; // 生成計(jì)數(shù)器 // 修改后的spawnScrew方法 spawnScrew() { if (!this.isGameActive) return; let screw this.getScrewFromPool(); if (screw) { // ... 設(shè)置隨機(jī)位置同上 } // 動(dòng)態(tài)調(diào)整生成間隔實(shí)現(xiàn)難度遞增 this.spawnCount; if (this.spawnCount % 5 0) { // 每生成5個(gè)螺絲加速一次 this.spawnInterval Math.max(this.minSpawnInterval, this.spawnInterval - this.spawnIntervalDecrease); this.unschedule(this.spawnScrew); // 取消舊的定時(shí)器 this.schedule(this.spawnScrew, this.spawnInterval); // 用新的間隔重新調(diào)度 console.log(生成加速當(dāng)前間隔: ${this.spawnInterval.toFixed(2)}秒); } }6.2 添加游戲計(jì)時(shí)與結(jié)束邏輯一個(gè)完整的游戲需要有開始和結(jié)束。我們添加一個(gè)60秒的倒計(jì)時(shí)。在UI層再創(chuàng)建一個(gè)Label節(jié)點(diǎn)命名為TimeLabel放在屏幕上方。在GameManager.ts中添加相關(guān)屬性和邏輯// GameManager.ts property(Label) timeLabel: Label | null null; // 將TimeLabel節(jié)點(diǎn)拖拽到這里 private gameTimeTotal: number 60; // 游戲總時(shí)長秒 private gameTimeLeft: number 0; startGame() { this.isGameActive true; this.currentScore 0; this.gameTimeLeft this.gameTimeTotal; this.updateScoreUI(); this.updateTimeUI(); this.schedule(this.spawnScrew, this.spawnInterval); // 啟動(dòng)一個(gè)每幀更新的計(jì)時(shí)器 this.schedule(this.updateGameTimer, 1.0); // 每秒更新一次 } updateGameTimer(dt: number) { // dt是距離上次調(diào)用的時(shí)間間隔 if (!this.isGameActive) return; this.gameTimeLeft - 1; // 因?yàn)槲覀冇胹chedule固定1秒一次所以減1 this.updateTimeUI(); if (this.gameTimeLeft 0) { this.gameTimeLeft 0; this.gameOver(); } } updateTimeUI() { if (this.timeLabel) { this.timeLabel.string 時(shí)間: ${Math.max(0, Math.ceil(this.gameTimeLeft))}; } } gameOver() { this.isGameActive false; this.unschedule(this.spawnScrew); this.unschedule(this.updateGameTimer); console.log(游戲結(jié)束最終分?jǐn)?shù), this.currentScore); // 這里可以顯示一個(gè)“游戲結(jié)束”的彈窗并展示最終分?jǐn)?shù) // 例如this.showGameOverDialog(); }6.3 使用事件系統(tǒng)進(jìn)行模塊解耦前面提到ScrewController直接查找GameManager的方式耦合度高。我們改用事件系統(tǒng)來優(yōu)化。定義一個(gè)事件名常量可以單獨(dú)一個(gè)文件或?qū)懺贕ameManager中// EventConstants.ts 或?qū)懺贕ameManager.ts頂部 export class GameEvent { public static readonly SCREW_ELIMINATED screw_eliminated; public static readonly GAME_OVER game_over; }修改ScrewController.ts的onTouch方法發(fā)射事件而非直接調(diào)用import { director } from cc; // ... 在onTouch方法內(nèi)替換加分邏輯 // 發(fā)射螺絲被消除的事件并攜帶分?jǐn)?shù)值 director.getScene().emit(GameEvent.SCREW_ELIMINATED, this.scoreValue);在GameManager.ts的start方法中監(jiān)聽事件start() { this.initScrewPool(10); // 監(jiān)聽螺絲消除事件 director.getScene().on(GameEvent.SCREW_ELIMINATED, this.onScrewEliminated, this); this.startGame(); } onScrewEliminated(scoreValue: number) { this.addScore(scoreValue); } onDestroy() { // 記得移除監(jiān)聽 director.getScene().off(GameEvent.SCREW_ELIMINATED, this.onScrewEliminated, this); }這樣ScrewController和GameManager就完全解耦了ScrewController只負(fù)責(zé)發(fā)出“我被打中了”的信號(hào)誰來處理、怎么處理它不用關(guān)心。7. 調(diào)試、構(gòu)建與發(fā)布7.1 在編輯器內(nèi)調(diào)試與預(yù)覽點(diǎn)擊編輯器上方的“預(yù)覽”按鈕三角形圖標(biāo)游戲會(huì)在瀏覽器中運(yùn)行。這是最快的調(diào)試方式。你可以打開瀏覽器的開發(fā)者工具F12查看console.log輸出的信息檢查對象池初始化、分?jǐn)?shù)更新、事件觸發(fā)是否正常。常見調(diào)試技巧屬性檢查在“場景”視圖或“層級(jí)管理器”中選中節(jié)點(diǎn)在“屬性檢查器”中實(shí)時(shí)查看和修改組件屬性包括腳本中property暴露的變量。控制臺(tái)日志善用console.log、console.warn、console.error輸出關(guān)鍵變量和流程。調(diào)試器對于復(fù)雜的邏輯可以使用Chrome DevTools的Sources面板找到你的TypeScript源碼通常位于temp/quick-scripts目錄下映射的設(shè)置斷點(diǎn)進(jìn)行單步調(diào)試。7.2 構(gòu)建為Web或小游戲平臺(tái)Cocos Creator支持一鍵構(gòu)建到多個(gè)平臺(tái)。點(diǎn)擊編輯器頂部菜單欄的“項(xiàng)目 - 構(gòu)建發(fā)布”。在構(gòu)建發(fā)布面板選擇目標(biāo)平臺(tái)例如“Web Mobile”H5或“微信小游戲”。關(guān)鍵配置主包壓縮類型選擇合并所有JSON或小游戲分包。對于小游戲需要注意包體大小限制。MD5 Cache勾選可以為構(gòu)建后的資源文件名添加MD5戳有利于緩存和熱更新。調(diào)試模式開發(fā)階段可以勾選會(huì)保留Source Map方便調(diào)試。點(diǎn)擊“構(gòu)建”。構(gòu)建完成后點(diǎn)擊“運(yùn)行”即可在模擬器或真機(jī)上預(yù)覽。7.3 針對微信小游戲的適配要點(diǎn)如果你要發(fā)布到微信小游戲還需要一些額外步驟配置game.json在構(gòu)建后生成的wechatgame目錄下修改game.json文件配置窗口模式、設(shè)備方向等。小游戲API調(diào)用如需調(diào)用微信登錄、分享、廣告等能力需要使用微信小游戲的API。Cocos Creator提供了wx全局對象在瀏覽器預(yù)覽時(shí)可能是模擬的你可以通過條件編譯或平臺(tái)判斷來調(diào)用。// 判斷是否在微信小游戲環(huán)境 if (typeof wx ! undefined) { // 調(diào)用微信API例如顯示激勵(lì)視頻廣告 // let videoAd wx.createRewardedVideoAd({ adUnitId: your-ad-unit-id }); }包體優(yōu)化微信小游戲有4M/8M/12M等包體限制。務(wù)必使用自動(dòng)圖集將大量小圖打包成一張大圖減少網(wǎng)絡(luò)請求和內(nèi)存占用。音頻壓縮使用小游戲支持的音頻格式如.mp3并控制碼率。引擎裁剪在構(gòu)建面板的“功能裁剪”中移除你用不到的3D、物理等模塊。8. 常見問題排查與進(jìn)階優(yōu)化在實(shí)際開發(fā)中你可能會(huì)遇到以下問題這里提供我的排查思路和解決方案。8.1 編輯器與運(yùn)行時(shí)常見錯(cuò)誤問題現(xiàn)象可能原因解決方案編輯器報(bào)錯(cuò)Cannot read property uuid of null1. 資源引用丟失如預(yù)制體被刪除但腳本還引用著。2. 場景中節(jié)點(diǎn)引用了不存在的資源。1. 檢查所有腳本中property引用的預(yù)制體、節(jié)點(diǎn)、組件是否有效。2. 在“層級(jí)管理器”中檢查節(jié)點(diǎn)屬性將紅色的丟失引用重新拖拽賦值。游戲預(yù)覽時(shí)點(diǎn)擊螺絲沒反應(yīng)1. 螺絲預(yù)制體上的BoxCollider2D未啟用或Sensor未勾選。2.ScrewController腳本未正確掛載或事件監(jiān)聽失敗。3. 腳本中節(jié)點(diǎn)路徑引用錯(cuò)誤如this.node.parent為null。1. 檢查預(yù)制體碰撞體設(shè)置。2. 在瀏覽器控制臺(tái)查看是否有JS錯(cuò)誤。3. 在ScrewController的start方法中加入console.log(this.node.name)確認(rèn)腳本正常執(zhí)行。對象池的螺絲回收后再次出現(xiàn)時(shí)狀態(tài)不對如還是縮小狀態(tài)回收時(shí)沒有完全重置節(jié)點(diǎn)的狀態(tài)。在GameManager的returnScrewToPool方法中確保重置了節(jié)點(diǎn)的scale,position,rotation以及ScrewController腳本內(nèi)部的isEliminated狀態(tài)。游戲運(yùn)行一段時(shí)間后變卡1. 內(nèi)存泄漏節(jié)點(diǎn)未正確銷毀或事件監(jiān)聽未移除。2. 對象池未生效仍在大量創(chuàng)建/銷毀對象。3. 每幀邏輯過于復(fù)雜。1. 檢查所有on監(jiān)聽是否有對應(yīng)的off。2. 在GameManager的getScrewFromPool中加入日志確認(rèn)是否頻繁“動(dòng)態(tài)擴(kuò)容”。3. 使用Chrome Performance工具錄制性能快照分析熱點(diǎn)函數(shù)。8.2 性能優(yōu)化進(jìn)階技巧Draw Call優(yōu)化Draw Call是CPU向GPU發(fā)送繪制指令的次數(shù)是2D游戲性能的關(guān)鍵。盡量減少。使用自動(dòng)圖集這是最有效的手段。在“資源管理器”中右鍵Texture文件夾選擇“創(chuàng)建 - Auto Atlas”。將相關(guān)小圖拖入構(gòu)建后這些圖會(huì)被合并渲染時(shí)Draw Call會(huì)大幅減少。合批確保靜態(tài)UI元素如背景、常駐按鈕和動(dòng)態(tài)元素螺絲使用不同的渲染層級(jí)并盡量讓可合批的節(jié)點(diǎn)在節(jié)點(diǎn)樹中連續(xù)排列。內(nèi)存優(yōu)化紋理壓縮對于不同平臺(tái)在構(gòu)建時(shí)選擇合適的紋理壓縮格式如Web平臺(tái)用PVRTC、ETC等需注意瀏覽器兼容性。及時(shí)釋放資源場景切換時(shí)使用director.loadScene并確保舊場景中無全局引用殘留。邏輯幀率優(yōu)化對于不需要每幀更新的邏輯如距離計(jì)算使用schedule間隔執(zhí)行而不是放在update里。減少在update中創(chuàng)建臨時(shí)對象如new Vec2盡量復(fù)用。8.3 項(xiàng)目擴(kuò)展思路這個(gè)基礎(chǔ)框架可以輕松擴(kuò)展出更多玩法多種螺絲類型創(chuàng)建多個(gè)預(yù)制體如普通螺絲、金色螺絲、炸彈螺絲在ScrewController中定義不同類型和分值在GameManager的spawnScrew中隨機(jī)生成。連擊系統(tǒng)在GameManager中記錄上次點(diǎn)擊時(shí)間如果短時(shí)間內(nèi)連續(xù)點(diǎn)擊則增加一個(gè)連擊倍數(shù)分?jǐn)?shù)加成更高。道具系統(tǒng)在場景中隨機(jī)生成道具如凍結(jié)時(shí)間、雙倍分?jǐn)?shù)點(diǎn)擊后觸發(fā)全局效果。數(shù)據(jù)持久化使用localStorage或小游戲的云存儲(chǔ)API保存最高分記錄。至此一個(gè)完整的、可玩的、性能優(yōu)化的《打螺絲消除》小游戲就完成了。從設(shè)計(jì)到實(shí)現(xiàn)我們不僅復(fù)現(xiàn)了玩法更深入講解了Cocos Creator的核心概念場景、節(jié)點(diǎn)、組件、預(yù)制體、對象池、事件系統(tǒng)、構(gòu)建發(fā)布。希望這個(gè)超詳細(xì)的教程能幫你打通任督二脈順利開啟你的Cocos Creator小游戲開發(fā)之旅。完整項(xiàng)目源碼已打包包含所有腳本、資源引用和場景設(shè)置你可以直接導(dǎo)入Cocos Creator運(yùn)行和修改。獲取方式關(guān)注我的公眾號(hào)【XXX】回復(fù)關(guān)鍵詞“打螺絲源碼”即可下載。在實(shí)際打包過程中記得根據(jù)最終的資源路徑調(diào)整腳本中的property引用。