0. ドキュメント
1. ダウンロード
cocos 公式 Web サイトにアクセスして、ダウンロードしてCocos Dashboard
インストールします。オプションの安装 Visual Studio 2017チェックを外すこともできます
。 注:Cocos Dashboardショートカット ファイル名はCocosDashboard.exe、インストール ファイルと間違えられません。
2. 登録とログイン
3. Cocos ダッシュボードの設定言語
Cocos Dashboard、右上隅の歯車アイコンをクリックして
設定インターフェイスを開き
Language(Choose a display anguage.)、简体中文
右下隅のボタンをクリックして返回設定インターフェイスを終了するように変更します。
4. エディタをインストールする
Cocos Dashboard(Cocos Dashboard)、バージョン管理ソフトウェア。Node.js の nvm や Python の conda と同様に、プロジェクトがどのエンジンのバージョンに基づいているかに関係なく、ゲーム プロジェクト
を管理できます。Cocos Creator
Cocos Dashboard、右上隅にある歯車アイコンをクリックして、
エディターのディレクトリを独自の判断で変更します。この設定により、エディターの保存場所が変更されます。
左側のサイドバーをクリックし、右下隅のボタンを编辑器クリックしてバージョンを選択し、右側のダウンロード アイコンをクリックします。この記事ではサービス契約インターフェイスをダウンロードすることを選択し、ボタンをクリックしてダウンロードシステム プロンプトが表示されるまで待ちます (退屈している場合は、タスク マネージャーを開いて CPU 使用率とディスク使用率を確認できますが、とにかく役に立ちません)エディターが正常にインストールされたことを示すシステム プロンプトが表示されます。下载编辑器
CocosCreator 3.7.2同意Cocos Creator 3.7.2 下载成功 正在解压中Cocos Creator 3.7.2 安装成功 欢迎使用Cocos Creator 3.7.2
5. 新しいプロジェクト
左側のサイドバーをクリックし、右下隅のボタン项目をクリックします。エディタのバージョンは、デフォルトで新しくインストールされたテンプレートの選択になります。プロジェクト名を入力します(プロジェクト名に特殊文字、スペースを使用することはできません。また、プロジェクト名に特殊文字、スペースを使用することはできません) 。デフォルトまたは自分で変更したものです。右下隅のボタンをクリックして読み込みを待ちます新建3.7.2Empty(2D)HiCocos创建
6. Cocos Creator 設定言語
Preferencesメニューバー - ファイル - 環境設定、ウィンドウを開く
一般カテゴリ、言語を変更してウィンドウを中文
閉じるPreferences
7. コードエディターを設定する
プラグインPrettierをインストールしてts スクリプトをフォーマットします
フォーマット ショートカット キーShift+Alt+F、初めて ts スクリプトをフォーマットするときに、デフォルトのフォーマッタを設定しますPrettier
VSCode の左下隅にある歯車アイコンを選択し、設定し、検索Prettier: Tab Widthします。4
VSCode がインストールされている場合、Cocos Creator はデフォルトで VSCode を見つけることができます。スクリプト ファイルをダブルクリックすると、自動的に開きます。通常、設定する必要はありません (それでも見つからないふりをしますが、コンソールのプロンプト
は次のようになります (プロンプトはまだ古いです) 为更好地打开脚本，请在 偏好设置 -> 外部程序 -> 默认脚本编辑器 里配置打开脚本的应用程序:)
スクリプトをダブルクリックし、スクリプト エディターが関連付けられていないことを示すプロンプトが表示された場合は、以下の手順に従って VSCode
ダウンロード チュートリアルを設定し、
インストールして実行してwhere.exe codeパスを取得しC:\Program Files\Microsoft VS Code\bin\code
、VSCode インストール フォルダー、C:\Program Files\Microsoft VS Code\Code.exe
Cocos Creator、メニュー バー、ファイルを見つけます。 、環境設定、プログラム マネージャー、デフォルトのスクリプト エディター、右側の虫眼鏡アイコンをクリックして次のように
設定します。Code.exe
8. シーンエディターウィンドウを展開します。
一般に、シーン エディタ ウィンドウが大きいほど見やすく、他のウィンドウをいつでもドラッグして元に戻すことができます。マウスをウィンドウの境界線に置き、
マウス ポインタが両方向の矢印に変わったら、ウィンドウをドラッグして元の位置に戻すことができます。シーンエディターが大きくなる
9. ノードの名前を変更する方法
階層マネージャー、変更するノードを選択します。 、
をクリックして右クリックし、名前の変更を選択するか、プロパティ インスペクターの最初の行で名前を変更します。F2Enter
10. プレーヤーを追加する
左上隅の階層マネージャーを右クリックし、ノードをCanvas作成し、空のノードを作成し、名前を次のように変更します。玩家
11. プレイヤーの子ノード スプライトを追加する
左上隅の階層マネージャーを右クリックし玩家、作成し、2D オブジェクト、スプライト (エルフ) を選択し、名前を変更して身体
選択身体し、右側にプロパティ インスペクターを表示して最後から 2 番目の項目を表示しSprite Frame、その横にあるマウス アイコンをクリックして
スプライト フレームを変更します
ボディとして使用するボタンを選択し、default_btn_normal
階層は図のとおりです。階層が間違っている場合は、GIFを参照してドラッグ＆ドロップできます。
12. スクリプトの追加
左下隅のエクスプローラー、右クリックassets、作成、フォルダー、名前を付けます脚本
右クリック脚本、作成、スクリプト (TypeScript)、NewComponent、名前を付けますPlayerController
13. プレーヤー読み込みスクリプト
左上隅の階層マネージャーで、玩家
右側のプロパティ・インスペクターを選択し、添加组件ボタンをクリックし
て展開し自定义脚本、 をクリックしてPlayerController
ロードを完了します。
14. プレハブを作る
左下隅のエクスプローラーを右クリックしassets、フォルダーを作成し、名前を付けます预制体
左上隅の階層マネージャーを右クリックし、2D オブジェクト、スプライト (elf) を作成し、右側のプロパティ インスペクターCanvasに名前を変更し、 に設定します。浮岛Sprite Framedefault_btn_disabled
作成したものをフォルダ浮岛にドラッグ＆ドロップ 階層マネージャーで作成したものを削除预制体浮岛
15. シーンを保存する
左下隅のエクスプローラーを右クリックしassets、フォルダーを作成し、名前を付けます场景
ショートカットキーCtrl+S（またはメニューバー→ファイル→シーン保存（CTRL+S）をクリック）すると、シーン保存ウィンドウが表示されますので、フォルダー
に入り、ファイル名を変更して保存してください。场景scene.scene游戏.scene
16. スクリプトの編集
左下隅のエクスプローラー、アセット、スクリプト、PlayerController、ファイルをダブルクリックして VSCode エディターを開き、コードを編集します
16.1 テンプレートの変更
デフォルトのコードを表示する.\HiCocos\assets\脚本\PlayerController.ts
import {
_decorator, Component, Node } from 'cc';
const {
ccclass, property } = _decorator;
@ccclass('PlayerController')
export class PlayerController extends Component {
start() {
}
update(deltaTime: number) {
}
}
このチュートリアルのテンプレートに変更します
// import 导入位置1
import {
_decorator, Component, Node } from "cc";
const {
ccclass, property } = _decorator;
// export 常量位置1
@ccclass("PlayerController")
export class PlayerController extends Component {
// Animation 动画属性1
// private 私有属性1
// private 私有属性2
// 组件第一次激活时调用的方法
start() {
}
// 激活后关闭鼠标监听的方法
// 重置方法
// 监听鼠标输入方法
// 根据步数跳跃方法
// 监听跳跃结束的方法
// 根据每次的更新来计算角色最新的位置方法
update(deltaTime: number) {
}
// 直到教程结束, 此处的"}"符号一直作为脚本最后一个字符
// ↙
} ←
// ↖
// 它的配对符号必须为"export class PlayerController extends Component {"中的"{"
// VSCode会把这对花括号对"{}"显示为相同的颜色表明它们的配对关系, 点击其中一个, 两个符号会同时显示一个小边框
16.2 このチュートリアルのすべてのインポートに PlayerController を追加する
意思
// import 导入位置1
に変更されました
// import 导入位置1
import {
Vec3, EventMouse, input, Input, AnimationComponent } from "cc";
16.3 マウス入力を監視する方法を追加
意思
// private 私有属性1
に変更されました
// private 私有属性1
private _startJump: boolean = false;
private _jumpStep: number = 0;
private _curJumpTime: number = 0;
private _jumpTime: number = 0.3;
private _curJumpSpeed: number = 0;
private _curPos: Vec3 = new Vec3();
private _deltaPos: Vec3 = new Vec3(0, 0, 0);
private _targetPos: Vec3 = new Vec3();
16.4 キャラクターの動きの計算
// 根据步数跳跃方法
に変更されました
// 根据步数跳跃方法
jumpByStep(step: number) {
if (this._startJump) {
return;
}
// 动态计算_jumpTime
this._startJump = true; // 标记开始跳跃
this._jumpStep = step; // 跳跃的步数 1 或者 2
this._curJumpTime = 0; // 重置开始跳跃的时间
this._curJumpSpeed = this._jumpStep / this._jumpTime; // 根据时间计算出速度
this.node.getPosition(this._curPos); // 获取角色当前的位置
Vec3.add(
this._targetPos,
this._curPos,
new Vec3(this._jumpStep, 0, 0)
); // 计算出目标位置
// 播放动画
// 增加步数
}
16.5 マウスが左クリックされたか右クリックされたかを判断する
// 监听鼠标输入方法
に変更されました
// 监听鼠标输入方法
onMouseUp(event: EventMouse) {
if (event.getButton() === 0) {
this.jumpByStep(1);
} else if (event.getButton() === 2) {
this.jumpByStep(2);
}
}
16.6inputモニター入力の使用
// 组件第一次激活时调用的方法
start() {
}
に変更されました
// 组件第一次激活时调用的方法
start() {
input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
}
16.7inputモニター入力の使用
// 根据每次的更新来计算角色最新的位置方法
update(deltaTime: number) {
}
に変更されました
// 根据每次的更新来计算角色最新的位置方法
update(deltaTime: number) {
if (this._startJump) {
this._curJumpTime += deltaTime; // 累计总的跳跃时间
if (this._curJumpTime > this._jumpTime) {
// 当跳跃时间是否结束
// end
this.node.setPosition(this._targetPos); // 强制位置到终点
this._startJump = false; // 清理跳跃标记
// 调用监听跳跃结束的方法
} else {
// tween
this.node.getPosition(this._curPos);
this._deltaPos.x = this._curJumpSpeed * deltaTime; //每一帧根据速度和时间计算位移
Vec3.add(this._curPos, this._curPos, this._deltaPos); // 应用这个位移
this.node.setPosition(this._curPos); // 将位移设置给角色
}
}
}
16.8 走ってみる、動きが分かりにくい
16.9 移動アクションの拡大
意思
// export 常量位置1
に変更されました
// export 常量位置1
export const BLOCK_SIZE = 40; // 添加一个放大比
また// 根据步数跳跃方法jumpByStep真ん中で
this._curJumpSpeed = this._jumpStep / this._jumpTime; // 根据时间计算出速度
に変更されました
this._curJumpSpeed = this._jumpStep * BLOCK_SIZE/ this._jumpTime; // 根据时间计算出速度并放大
また// 根据步数跳跃方法jumpByStep真ん中で
Vec3.add(
this._targetPos,
this._curPos,
new Vec3(this._jumpStep, 0, 0)
); // 计算出目标位置
に変更されました
Vec3.add(
this._targetPos,
this._curPos,
new Vec3(this._jumpStep * BLOCK_SIZE, 0, 0)
); // 计算出目标位置
17. 走る
Cocos Creator のヘッドアップ位置に戻り
、三角形の実行ボタンをクリックします
18.アニメーション
リソース マネージャーの左下隅で、 を右クリックし、フォルダーを作成し、assets次の名前を付けます。动画动画oneStep
それを選択し身体、右側にプロパティ インスペクターを表示し、クリックして添加组件
選択します。アニメーション - アニメーションがプロパティにドラッグされ
、から変更されます。oneStep身体ClipsClips01
アニメーション エディタのプロンプトのショートカット キー(またはに切り替えます)を選択します身体。アニメーション エディタのプロンプトの左下隅にある属性リスト(マウスを置く上部の境界線、マウスが ⬍ 上下の矢印に変わり、ドラッグ アンド ドロップすると拡大します) にドラッグします。アニメーション エディタで、横の + をクリックします。 プラス記号を追加してプロパティ トラックを追加し、選択して [新規] をクリックします(フレームのプロパティを記録するには、Y 座標をデフォルト値から削除し、手動で入力する必要があります) に設定します。プロパティインスペクタはボディの Position を変更し、Y 座標はに設定され、プロパティインスペクタはボディの Position を変更し、Y 座標は に設定され、属性インスペクタはボディの Position を変更し、Y 座標はCtrl+6控制台动画编辑器进入动画编辑模式(Ctrl/Cmd+E)(拖拽动画剪辑资源到面板上)oneStep动画编辑器动画编辑器
positionposition
帧00
帧1080
帧200
アニメーション エディターの使用中に、Ctrl+S を押して保存します。
アニメーション エディター、三角形のアイコン ボタンをクリックして再生し、玩家シーン エディター ウィンドウにジャンプします。
同様に、プロパティにドラッグするtwoStep
もう1つを作成し、編集からフレームセットに、Y座標からフレームセットに、Y座標からフレームセットに、Y座標をに変更します。twoStep身体ClipsClips12twoStep002080400
アニメーション エディターの使用中に、Ctrl+S を押して保存し、
Ctrl+Q を押してアニメーション エディター モードを終了します。
19. スクリプトの編集（アニメーションコードの再生）
左下隅のエクスプローラー、アセット、スクリプト、PlayerController、ファイルをダブルクリックして VSCode エディターを開き、コードを編集します
。
// Animation 动画属性1
に変更されました
// Animation 动画属性1
@property(AnimationComponent)
BodyAnim: AnimationComponent = null;
作成が完了したら、保存し、 BodyAnim:Animation = null;Cocos Creator 設定玩家のBody Anim
左上隅にあるレイヤーマネージャーに戻り、それを選択して玩家
、右側身体のプロパティインスペクターの上部Ctrl+Sにドラッグします。Body Anim
VSCode に戻ると、
jumpByStep が実行されます。// 播放动画
// 播放动画
に変更されました
// 播放动画
if (this.BodyAnim) {
if (step === 1) {
this.BodyAnim.play("oneStep");
} else if (step === 2) {
this.BodyAnim.play("twoStep");
}
}
Cocos Creator に戻ってゲームを実行し、左クリックで小さなジャンプ、右クリックで大きなジャンプを行います (ただし、_jumpTime がまだ変更されていないため、フォールバックは非常に奇妙です)
_jumpTime を
JumpByStep in に変更します。// 动态计算_jumpTime
// 动态计算_jumpTime
に変更されました
// 动态计算_jumpTime
if (step === 1) {
const oneStep = "oneStep";
const state = this.BodyAnim.getState(oneStep);
this._jumpTime = state.duration;
} else if (step === 2) {
const twoStep = "twoStep";
const state = this.BodyAnim.getState(twoStep);
this._jumpTime = state.duration;
}
もう一度ゲームを実行し、左クリックで小さなジャンプ、右クリックで大きなジャンプを実行し、通常に戻ります。
20. ゲームマネージャー
左下隅のリソースマネージャー
を右クリックし脚本、作成、スクリプト（TypeScript）、NewComponent、名前を付けますGameManager
左上隅の階層マネージャーを右クリックしCanvas、ノードを作成し、空のノードを游戏管理层级
選択游戏管理层级し、名前を選択済みに変更します。プロパティインスペクターをクリックして添加组件
展開し自定义脚本、 をクリックするとGameManager、読み込みが完了します
ダブルクリックしGameManagerて編集します
20.1 テンプレートの変更
デフォルトのコードを表示する.\HiCocos\assets\脚本\GameManager.ts
import {
_decorator, Component, Node } from 'cc';
const {
ccclass, property } = _decorator;
@ccclass('GameManager')
export class GameManager extends Component {
start() {
}
update(deltaTime: number) {
}
}
テンプレに変更する
// import 导入位置1
// import 导入位置2
import {
_decorator, Component, Node } from "cc";
const {
ccclass, property } = _decorator;
// enum 枚举1
// enum 枚举2
@ccclass("GameManager")
export class GameManager extends Component {
// 预制体
// 道路长度
// 地图数据
// 属性2
// 组件第一次激活时调用的方法
start() {
}
// 初始化的方法
// 控制游戏状态的读取器
// 生成地图的方法
// 根据所需的数量和前1个位置来生成方块
// 根据 BlockType 生成方块
// 响应 开始游戏 按钮按下的事件
// 判断跳坑失败或游戏完成的方法
// 更新计步器的显示并判断"跳坑失败或游戏完成"
// 没有用到update，注释掉
// update(deltaTime: number) {}
// 直到教程结束, 此处的"}"符号一直作为脚本最后一个字符
// ↙
} ←
// ↖
// 它的配对符号必须为"export class PlayerController extends Component {"中的"{"
// VSCode会把这对花括号对"{}"显示为相同的颜色表明它们的配对关系, 点击其中一个, 两个符号会同时显示一个小边框
20.2 このチュートリアルのすべてのインポートに GameManager を追加します
意思
// import 导入位置1
// import 导入位置2
に変更されました
// import 导入位置1
import {
CCInteger, instantiate, Label, Prefab, Vec3 } from "cc";
// import 导入位置2
import {
BLOCK_SIZE, PlayerController } from "./PlayerController";
20.3 boxPrefabの追加
意思
// 预制体
に変更されました
// 预制体
@property({
type: Prefab })
public boxPrefab: Prefab | null = null;
Cocos Creator に戻って
選択し游戏管理层级
、浮岛属性インスペクターをBox PrefabCtrl
+S にドラッグして保存します
20.4 列挙型 BlockType の追加
意思
// enum 枚举1
に変更されました
// enum 枚举1
enum BlockType {
BT_NONE,
BT_STONE,
}
20.5 spawnBlockByType
// 根据 BlockType 生成方块
に変更されました
// 根据 BlockType 生成方块
spawnBlockByType(type: BlockType) {
if (!this.boxPrefab) {
return null;
}
let block: Node | null = null;
switch (type) {
case BlockType.BT_STONE:
block = instantiate(this.boxPrefab);
break;
}
return block;
}
20.6 spawnBlockByCount
// 根据所需的数量和前1个位置来生成方块
に変更されました
// 根据所需的数量和前1个位置来生成方块
spawnBlockByCount(lastPos: number, count: number) {
let block: Node | null = this.spawnBlockByType(BlockType.BT_STONE);
if (block) {
this.node.addChild(block);
block?.setScale(count, 1, 1);
block?.setPosition(
(lastPos - (count - 1) * 0.5) * BLOCK_SIZE,
-(BLOCK_SIZE + 1.5),
0
);
}
}
20.7 roadLength 和 _road
意思
// 道路长度
// 地图数据
に変更されました
// 道路长度
public roadLength: number = 50;
// 地图数据
private _road: BlockType[] = [];
20.8 マップの生成
// 生成地图的方法
に変更されました
// 生成地图的方法
generateRoad() {
// 清理上次的结果
this.node.removeAllChildren();
this._road = [];
// startPos 开始位置必须是方块
this._road.push(BlockType.BT_STONE);
// 随机的方法生成地图
for (let i = 1; i < this.roadLength; i++) {
if (this._road[i - 1] === BlockType.BT_NONE) {
this._road.push(BlockType.BT_STONE);
} else {
this._road.push(Math.floor(Math.random() * 2));
}
}
let linkedBlocks = 0;
for (let j = 0; j < this._road.length; j++) {
if (this._road[j]) {
++linkedBlocks;
}
if (this._road[j] == 0) {
if (linkedBlocks > 0) {
this.spawnBlockByCount(j - 1, linkedBlocks);
linkedBlocks = 0;
}
}
if (this._road.length == j + 1) {
if (linkedBlocks > 0) {
this.spawnBlockByCount(j, linkedBlocks);
linkedBlocks = 0;
}
}
}
}
20.9 start でgenerateRoadを呼び出してマップを作成します
// 组件第一次激活时调用的方法
start() {
}
に変更されました
// 组件第一次激活时调用的方法
start() {
this.generateRoad();
}
20.10 実行
ゲームを実行すると浮島が生成されます
21. カメラはプレイヤーを追跡します
レイヤ マネージャCamera、レイヤからレイヤCanvasへドラッグ アンド ドロップします。ゲームを実行します。カメラはプレーヤーを追跡します。玩家
22. 後続のデュアルカメラカメラで同じオブジェクトが重複して表示されないよう、カメラの表示内容を事前に計画する
-
階層マネージャーで、
Canvas
プロパティ インスペクターを選択し、図に示すようにプロンプトLayerに変更します。Ctrl +Sをクリックして保存します。DEFAULT
连同修改子节点 -
浮岛
エクスプローラー、プレハブ、属性インスペクターをダブルクリックすると、Ctrl+SLayerに変更されてDEFAULT
保存され、Ctrl+Q に変更されて編集プレハブ モードが終了します。 -
Camera
階層マネージャー、キャンバス - プレーヤー - カメラ、属性インスペクターにチェックを入れ、チェックを外しVisibility、チェックをUI_2D付けたままにしますVisibilityDEFAULT
23. ゲームメニュー
階層マネージャー、最上位を右クリックして游戏
作成、UIコンポーネント、Canvas（キャンバス）
と名前を付けますUICanvas
右クリックしてUICanvasノードを作成し、空のノードを作成し、名前を付けます开始菜单
右クリックUICanvas、作成、2Dオブジェクト、ラベル(テキスト)、名前を步数
Positionプロパティに変更-440、プロパティ280
をクリアString
右クリックして2D オブジェクト、スプライト( elf) を作成し、属性开始菜单として名前を付け、属性を属性から属性に変更します。背景
Content Size400250
Sprite Framedefault_spritedefault_panel
TypeSIMPLESLICED
を右クリックし开始菜单、作成し、UI コンポーネント、ボタン (ボタン) に名前を付けます。プロパティを に変更し开始菜单按钮
、展開して、プロパティを に変更します。开始菜单按钮Position0-80开始菜单按钮LabelString开始游戏
右クリック、作成、2Dオブジェクト、ラベル(テキスト)、プロパティ変更、プロパティ変更プロパティ変更プロパティ変更プロパティ変更开始菜单と名前を付けます。开始菜单标题
Position080
Color#000000
String跳跳乐 2D
Font Size40
右クリック开始菜单、作成、2Dオブジェクト、ラベル(テキスト)、名前を开始菜单提示
Positionプロパティ変更0、40
Colorプロパティ変更#000000
Stringプロパティ変更とします。操作：左键小跳，右键大跳
24. UICanvasのカメラの可視レイヤーを変更する
Hierarchy Manager の UICancas で、Camera
Property Inspector を選択し、チェックを外しVisibility、チェックを付けたDEFAULTままにしますVisibilityUI_2D
UICanvas のデフォルトのレイヤーは ですUI_2D。変更する必要はありません。
25. ゲームの状態
25.1 戻って PlayerController を変更する
25.1.1 開始 PlayerController を変更する
// 组件第一次激活时调用的方法
start() {
input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
}
に変更されました
// 组件第一次激活时调用的方法
start() {
// input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
}
25.1.2 setInputActive PlayerController の変更
// 激活后关闭鼠标监听的方法
// 激活后关闭鼠标监听的方法
setInputActive(active: boolean) {
if (active) {
input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
} else {
input.off(Input.EventType.MOUSE_UP, this.onMouseUp, this);
}
}
25.1.3 リセット PlayerController を追加
// 重置方法
に変更されました
// 重置方法
reset() {
}
25.2 列挙型 GameManager の追加
意思
// enum 枚举2
に変更されました
// enum 枚举2
enum GameState {
GS_INIT,
GS_PLAYING,
GS_END,
}
25.3 GameManager プロパティの追加
// 属性2
に変更されました
// 属性2
@property({
type: Node })
public startMenu: Node | null = null; // 开始的 UI
@property({
type: PlayerController })
public playerCtrl: PlayerController | null = null; // 角色控制器
@property({
type: Label })
public stepsLabel: Label | null = null; // 计步器
25.4 init GameManager の追加
// 初始化的方法
に変更されました
// 初始化的方法
init() {
if (this.startMenu) {
this.startMenu.active = true;
}
this.generateRoad();
if (this.playerCtrl) {
this.playerCtrl.setInputActive(false);
this.playerCtrl.node.setPosition(Vec3.ZERO);
this.playerCtrl.reset();
}
}
25.5 curState GameManager の追加
// 控制游戏状态的读取器
に変更されました
// 控制游戏状态的读取器
set curState(value: GameState) {
switch (value) {
case GameState.GS_INIT:
this.init();
break;
case GameState.GS_PLAYING:
if (this.startMenu) {
this.startMenu.active = false;
}
if (this.stepsLabel) {
this.stepsLabel.string = "0"; // 将步数重置为0
}
setTimeout(() => {
//直接设置active会直接开始监听鼠标事件，做了一下延迟处理
if (this.playerCtrl) {
this.playerCtrl.setInputActive(true);
}
}, 0.1);
break;
case GameState.GS_END:
break;
}
}
25.6 ゲーム管理レベルのプロパティを変更する
Cocos Creator エディタに戻り、変更したプロパティを Ctrl+S にドラッグして
保存游戏管理层级します。
开始菜单Start Menu
玩家Player Ctrl
步数Steps Label
26. バインディングボタンイベント
// 响应 开始游戏 按钮按下的事件
に変更されました
// 响应 开始游戏 按钮按下的事件
onStartButtonClicked() {
this.curState = GameState.GS_PLAYING;
}
保存
Cocos Creator エディターに戻り、プロパティ(cc.Button カテゴリの下)
を変更し、項目 [0] にドラッグアンド ドロップするように設定し、選択して开始菜单按钮
Click Events01游戏管理层级GameManageronStartButtonClicked
ゲームを実行し、正常に実行すると、
ピットを踏んでもプレイヤーが反応しないことがわかり、ピットを踏んで失敗するゲームロジックを追加します
27. ジャンプの終わりを聞いた後、PlayerController.ts を変更します。
1. 属性を追加する
// private 私有属性2
に変更されました
// private 私有属性2
private _curMoveIndex: number = 0;
// 重置方法
reset() {
}
に変更されました
// 重置方法
reset() {
this._curMoveIndex = 0;
}
// 增加步数
に変更されました
// 增加步数
this._curMoveIndex += step;
// 监听跳跃结束的方法
に変更されました
// 监听跳跃结束的方法
onOnceJumpEnd() {
this.node.emit('JumpEnd', this._curMoveIndex);
}
// 调用监听跳跃结束的方法
に変更されました
// 调用监听跳跃结束的方法
this.onOnceJumpEnd();
28. ジャンプの終了を監視した後、GameManager.ts を変更します。
1. 空の onPlayerJumpEnd を追加します
// 更新计步器的显示并判断"跳坑失败或游戏完成"
に変更されました
// 更新计步器的显示并判断"跳坑失败或游戏完成"
onPlayerJumpEnd(moveIndex: number) {
}
2.スタート
// 组件第一次激活时调用的方法
start() {
this.generateRoad();
}
に変更されました
// 组件第一次激活时调用的方法
start() {
this.curState = GameState.GS_INIT;
this.playerCtrl?.node.on("JumpEnd", this.onPlayerJumpEnd, this);
}
3.チェック結果
// 判断跳坑失败或游戏完成的方法
に変更されました
// 判断跳坑失败或游戏完成的方法
checkResult(moveIndex: number) {
if (moveIndex < this.roadLength) {
if (this._road[moveIndex] == BlockType.BT_NONE) {
//跳到了空方块上
this.curState = GameState.GS_INIT;
}
} else {
// 跳过了最大长度
this.curState = GameState.GS_INIT;
}
}
4.PlayerJumpEnd にデータを入力します
// 更新计步器的显示并判断"跳坑失败或游戏完成"
onPlayerJumpEnd(moveIndex: number) {
}
に変更されました
// 更新计步器的显示并判断"跳坑失败或游戏完成"
onPlayerJumpEnd(moveIndex: number) {
if (this.stepsLabel) {
this.stepsLabel.string =
"" +
(moveIndex >= this.roadLength ? this.roadLength : moveIndex);
}
this.checkResult(moveIndex);
}
29. 基本完成品
公式チュートリアルはここまで
1. レベルクリア
2. 直接失敗
他の
Cocos Creator2 と比較すると、Cocos Creator3 にはコントロール ライブラリがありません。階層ウィンドウで右クリックして作成できます。
