CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

前提

どのような技術的知識を学んだとしても、公式ドキュメントが最初のチュートリアルになるはずです。そのため、この記事を読む前に、少なくとも「Getting Started」セクション (http://docs.cocos.com/creator/manual/zh/getting-started/) を読んでください。

ここでは、 Cocos Creatorが正常にインストールされていることを前提としています。

TypeScript と JavaScript

もちろん、ここでは利点についてのみお話します。
1. ts は js のスーパーセットであり、ts はすべての js 構文をサポートします。
2. ts はほぼ完璧なコードヒントをサポートしますが、js はほとんどコードヒントをサポートしません。
3. ts には型定義があり、コンパイル時に発生する多くの無意味なエラーを排除できます。
4. ts はリファクタリングが可能で、大規模なプロジェクトに適しています。
5. ts は es6 async などのすべての新しい構文を使用できます。ただし、js Cocos Creator はまだ es6 を完全にサポートしていません。
6. 最も重要な点: 今後のチュートリアルはすべて ts で記述されます。tsを使用しないと、永遠に私を失うことになります

コードエディタの選択

ここでは 2 つの推奨事項を紹介します。

  1. ビジュアルスタジオコード
  2. ウェブストーム

VS Code の利点は、高速で、Cocos Creator と適切に統合されていることです。ただし、一部の機能では、プラグインを自分でインストールする必要があります。

Webstorm の利点は、必要な機能がすべて組み込まれていることです。欠点は、メモリを消費することであり、個人的には少し見苦しいと思います。

私自身は、職場では WebStorm を使用し、自宅では VS Code を使用しています。

まだどちらを使うべきかわからない場合は、以下のコンテンツは VS Code 用なので、まずは VS Code を使うことをお勧めします。

TypeScriptを学ぶ

ts を使用してゲームを開発したいので、ts の構文を知っておく必要があります。この記事で ts の構文をすべて説明することは不可能なので、https://www.tslang.cn/docs/home.html を参照してください。もちろん、一度にすべてを読む必要はありません。最初に目を通してから、問題が発生したときに確認することができます。

TypeScript環境設定

任意のプロジェクトを開き、これらすべてをクリックします。

コンソールに出力されます

エディターを開くと、creator.d.tsというスクリプトが見つかります。

作成者のプロンプトはすべてこのスクリプトに依存しており、エンジンの API の変更によってもこのスクリプトが適時に更新される必要があるため、エンジンを更新するたびに、上記の「VS Code の更新ではプロンプト データのみを表示できます」をクリックして、creator.d.ts を再生成する必要があります。

リソース マネージャーを右クリックして、新しい ts スクリプトを作成します。開くと、役に立たないものがたくさん見つかり、プロンプト エラーも表示されます (1.81)。 。 。

// - [英語] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/typescript/index.html
// 属性を学習:
// - [中国語] http://www.cocos.com/docs/creator/scripting/reference/attributes.html
// - [英語] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/reference/attributes/index.html
// ライフサイクルコールバックを学ぶ:
// - [中国語] http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html
// - [英語] http://www.cocos2d-x.org/docs/editors_and_tools/creator-chapters/scripting/life-cycle-callbacks/index.html

const {ccclass、プロパティ} = cc._decorator;

@ccクラス
デフォルトクラス NewClass をエクスポートし、cc.Component を拡張します。

    @property(cc.ラベル)
    ラベル: cc.Label = null;

    @財産
    テキスト: 文字列 = 'hello';

    // ライフサイクルコールバック:

    // onLoad() {},

    始める () {

    },

    // 更新 (dt) {},
}

エディターの右上隅にある「プログラムのインストール パスを開く」をクリックします。

static-》template-》new-script.ts
このスクリプトは新しいtsスクリプトのデフォルトスタイルです。これを再編集してみましょう。編集後のスクリプトは次のようになります。

const {ccclass、プロパティ} = cc._decorator;

@ccクラス
エクスポートクラス NewClass は cc.Component を拡張します {

}

新しい ts スクリプトを作成すると、編集したばかりのデフォルトのスクリプトと同じように見えることがわかります。

独自の宣言ファイルを構成する

d.ts というサフィックスを持つファイルは宣言ファイルとして認識されます。creator.d.ts はエンジンの宣言ファイルです。独自の宣言ファイルを定義することもできます。宣言ファイルはアセット ファイルの外側に配置する必要があることに注意してください。アセット ファイル内のスクリプトはエンジンによってコンパイルされるためです。宣言ファイルの目的はコードの作成時にプロンプ​​トを表示することであり、コンパイル後は不要になります。

たとえば、プロジェクトのルートディレクトリにglobal.d.tsファイルを追加します。

その後、プロジェクト内のスクリプトは対応するプロンプトを取得できます

型定義の詳細については、https://www.tslang.cn/docs/handbook/declaration-files/introduction.html を参照してください。

属性型宣言

定数 LEVEL = cc.Enum({EASY:1,HARD:2});

@ccクラス
エクスポートクラスGameはcc.Componentを拡張します。
    // 整数 @property (cc.Integer)
    intVar: 数値 = 0;
    // 浮動小数点型 @property(cc.Float)
    浮動小数点数: 数値 = 0;
    // ブール型 @property (cc.Boolean)
    boolVar: ブール値 = false;
    // ノード@プロパティ(cc.Node)
    ノード変数: cc.Node = null;
    // ノード配列 @property([cc.Node])
    ノードArrVar: 配列<cc.Node> = [];
    // ラベル
    @property(cc.ラベル)
    ラベル変数: cc.Label = null;
    // プレハブ @property(cc.Prefab)
    プレファブ変数: cc.Prefab = null;
    //ポイント @property(cc.Vec2)
    vec2Var: cc.Vec2 = cc.v2();
    // カスタム ノード @property(Player)
    プレイヤー変数:プレイヤー = null;
    // ここでポイントとなるカスタム列挙/**
     * グローバル変数* const LEVEL = cc.Enum({EASY:1,HARD:2});
     */ 
    @財産({
        タイプ:レベル
    })
    enumVa = レベル.EASY;
}

TypeScriptでゲームを書く

最後に、TypeScript の柔らかさと滑らかさを体験してみましょう。

よく知られているゲームを選んで書きましょう。公式ドキュメントには星を選ぶゲームがあります。これを Ts を使って書き直してみましょう。

ステップ1: 新しいプロジェクトを作成する

ステップ2: スクリプトをいくつか書く

ゲーム.ts

「./Player」から { Player } をインポートします。

const { プロパティ、ccclass } = cc._decorator;

@ccクラス
エクスポートクラスGameはcc.Componentを拡張します。
    // このプロパティはスターのプレハブリソースを参照します @property(cc.Prefab)
    プライベート starPrefab: cc.Prefab = null;
    // 星が生成されてから消えるまでのランダムな時間範囲 @property(cc.Integer)
    プライベートmaxStarDuration = 0;
    @property(cc.Integer)
    プライベート minStarDuration = 0
    // 星生成の高さを決定するために使用される地上ノード @property(cc.Node)
    プライベート groundNode: cc.Node = null;
    // プレイヤーノード。主人公の跳ね返りの高さを取得し、主人公のアクションスイッチを制御するために使用されます @property(cc.Node)
    パブリック playerNode: cc.Node = null;
    // スコアラベルへの参照 @property(cc.Label)
    プライベートスコアラベル: cc.Label = null;
    // スコアリング効果音リソース @property(cc.AudioClip)
    プライベートスコアオーディオ: cc.AudioClip = null;

    // 地上ノードの Y 軸座標 private groundY: number;
    //タイマーpublic timer: number;
    // 星の存在期間 public starDuration: number;
    // 現在のスコア private score: number;

    保護されたonLoad() {
        // 地面の Y 軸座標を取得します。this.groundY = this.groundNode.y + this.groundNode.height / 2;
        // タイマーを初期化します this.timer = 0;
        this.starDuration = 0;
        // 新しい星を生成します this.spawnNewStar();
        // スコアリングを初期化します this.score = 0;
    }

    // 新しい星を生成する public spawnNewStar() {
        // 指定されたテンプレートを使用してシーン内に新しいノードを生成します。let newStar = cc.instantiate(this.starPrefab);
        // 新しく追加されたノードを Canvas ノードに追加します。this.node.addChild(newStar);
        // 星のランダムな位置を設定します newStar.setPosition(this.getNewStarPosition());
        // Game コンポーネントのインスタンスをスター コンポーネントに渡します newStar.getComponent('Star').init(this);
        // タイマーをリセット this.starDuration = this.minStarDuration + cc.random0To1() * (this.maxStarDuration - this.minStarDuration);
        this.timer = 0;
    }

    // 新しい星の位置 public getNewStarPosition() {
        randX = 0 とします。
        // 地面の位置と主人公のジャンプの高さに基づいて、星の y 座標をランダムに取得します。let randY = this.groundY + cc.random0To1() * this.playerNode.getComponent('Player').jumpHeight + 50;
        // 画面の幅に基づいて星の x 座標をランダムに取得します。let maxX = this.node.width / 2;
        randX = cc.randomMinus1To1() * maxX;
        // 星の座標を返します return cc.p(randX, randY);
    }

    // フレームごとに呼び出される
    保護された更新(dt: 数値) {
        // フレームごとにタイマーを更新します。制限を超えて新しい星が生成されない場合は、ゲーム失敗ロジックが呼び出されます。if (this.timer > this.starDuration) {
            ゲームオーバー();
            戻る;
        }
        this.timer += dt;
    }

    // スコア public gainScore() {
        this.スコア += 1;
        // scoreDisplay Label のテキストを更新します。this.scoreLabel.string = 'Score: ' + this.score.toString();
        // スコアのサウンド効果を再生します // as any を追加しないとエラーが発生します。信じられない場合は、cc.audioEngine.play(this.scoreAudio as any, false, 1); を試してください。
    }

    // ググ
    プライベートgameOver() {
        this.playerNode.stopAllActions(); //プレイヤーノードのジャンプアクションを停止します cc.director.loadScene('game');
    }

}

プレイヤー.ts

const { ccclass, property } = cc._decorator;

@ccクラス
エクスポートクラス Player は cc.Component を拡張します {
    // 主人公のジャンプの高さ @property(cc.Integer)
    プライベートジャンプ高さ: 数値 = 0;
    // 主人公のジャンプの持続時間 @property(cc.Integer)
    プライベートジャンプ期間: 数値 = 0;
    // 最大移動速度 @property(cc.Integer)
    プライベートmaxMoveSpeed: 数値 = 0;
    // acceleration@property(cc.Integer)
    プライベートアクセル: 数値 = 0;
    // ジャンプ効果音リソース @property(cc.AudioClip)
    プライベートjumpAudio: cc.AudioClip = null;

    プライベートxSpeed: 数値 = 0;
    プライベート accLeft: ブール値 = false;
    プライベート accRight: ブール値 = false;
    プライベートジャンプアクション: cc.Action = null;

    プライベートsetJumpAction() {
        // 上にジャンプ let jumpUp = cc.moveBy(this.jumpDuration, cc.p(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 落下 let jumpDown = cc.moveBy(this.jumpDuration, cc.p(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // アクションが終了したときに定義した他のメソッドを呼び出すためのコールバック関数を追加します。let callback = cc.callFunc(this.playJumpSound, this);
        // 継続的に繰り返し、着地アクションが完了するたびにコールバックを呼び出してサウンドを再生します。 return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
    }

    プライベートplayJumpSound() {
        //サウンド エンジンを呼び出してサウンドを再生します cc.audioEngine.play(this.jumpAudio as any, false, 1);
    }

    プライベートaddEventListeners() {
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN、this.onKeyDown、this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP、this.onKeyUp、this);
        cc.find("Canvas").on(cc.Node.EventType.TOUCH_START、this.onScreenTouchStart、this);
        cc.find("Canvas").on(cc.Node.EventType.TOUCH_CANCEL、this.onScreenTouchEnd、this);
        cc.find("Canvas").on(cc.Node.EventType.TOUCH_END, this.onScreenTouchEnd,this);
    }

    プライベートmoveLeft() {
        this.accLeft = true;
        this.accRight は false です。
    }

    プライベートmoveRight() {
        this.accLeft = false;
        this.accRight を true に設定します。
    }

    プライベートstopMove() {
        this.accLeft = false;
        this.accRight は false です。
    }

    プライベート onScreenTouchStart(イベント: cc.Event.EventTouch) {
        (event.getLocationX() > cc.winSize.width/2)の場合{
            これを右に動かします。
        } それ以外 {
            これを左へ移動します。
        }
    }

    プライベートonScreenTouchEnd() {
        this.stopMove();
    }

    プライベート onKeyDown(イベント: cc.Event.EventKeyboard) {
        switch ((イベントをanyとして).keyCode) {
            cc.KEY.aの場合:
            ケースcc.KEY.left:
                これを左へ移動します。
                壊す;
            cc.KEY.dの場合:
            ケースcc.KEY.right:
                これを右に動かします。
                壊す;
        }
    }

    プライベート onKeyUp(イベント: cc.Event.EventKeyboard) {
        switch ((イベントをanyとして).keyCode) {
            cc.KEY.aの場合:
            ケースcc.KEY.left:
                this.stopMove();
                壊す;
            cc.KEY.dの場合:
            ケースcc.KEY.right:
                this.stopMove();
                壊す;
        }
    }

    // 初期化にこれを使用
    保護されたonLoad() {
        // ジャンプアクションを初期化します this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);

        // 加速方向スイッチ this.accLeft = false;
        this.accRight は false です。
        // 主人公の現在の水平速度 this.xSpeed ​​= 0;

        // 入力リスニングを初期化します this.addEventListeners();
    }

    // フレームごとに呼び出される
    保護された更新(dt: 数値) {
        // 現在の加速方向に応じてフレームごとに速度を更新する if (this.accLeft) {
            this.xSpeed ​​-= this.accel * dt;
        } それ以外の場合は (this.accRight) {
            this.xSpeed + = this.accel * dt;
        }
        // 主人公の速度が最大値を超えないように制限します if (Math.abs(this.xSpeed) > this.maxMoveSpeed) {
            // 速度が制限に達した場合は、現在の方向で最大速度を使用します
            this.xSpeed ​​= this.maxMoveSpeed ​​* this.xSpeed ​​/ Math.abs(this.xSpeed);
        }

        // 現在の速度に応じて主人公の位置を更新します this.node.x += this.xSpeed ​​* dt;
        (this.node.x <= -this.node.parent.width / 2) の場合 {
            this.node.x = this.node.parent.width / 2;
        }
        (this.node.x > this.node.parent.width / 2)の場合{
            this.node.x = -this.node.parent.width / 2;
        }
    }

}

スター.ts

「./Game」から Game をインポートします。

const {ccclass,property} = cc._decorator;

@ccクラス
エクスポートクラス Star は cc.Component を拡張します {

    // 星と主人公の間の距離がこの値に達すると、コレクションが完了します @property(cc.Integer)
    プライベートpickRadius: 数値 = 0;
    プライベートゲーム:Game = null;

    パブリック init(ゲーム:ゲーム) {
        this.game = ゲーム;
    }

    プレイヤーの距離を取得する() {
        // プレイヤーノードの位置に基づいて距離を決定します。let playerPos = this.game.playerNode.getPosition();
        // 2 つのポイントの位置に基づいて 2 つのポイント間の距離を計算します。let dist = cc.pDistance(this.node.position, playerPos);
        dist を返します。
    }

    選択された() {
        // 星が収集されると、ゲーム スクリプト内のインターフェイスを呼び出して新しい星を生成します。this.game.spawnNewStar();
        //Game スクリプトのスコアリング メソッドを呼び出します。this.game.gainScore();
        // 次に、現在のスターノードを破棄します。this.node.destroy();
    }

    // フレームごとに呼び出される
    更新(dt:数値) {
        // 各フレームは、プレイヤーとメインキャラクター間の距離がコレクション距離より短いかどうかを判断します。if (this.getPlayerDistance() < this.pickRadius) {
            //コレクション動作を呼び出します this.onPicked();
            戻る;
        }
        // ゲーム スクリプトのタイマーに従って星の透明度を更新します。let opacityRatio = 1 - this.game.timer/this.game.starDuration;
        minOpacity を 50 にします。
        this.node.opacity = minOpacity + Math.floor(opacityRatio * (255 - minOpacity));
    }

}

上記は、TSで初めてのゲームを作る方法を解説したCocosCreator入門チュートリアルの詳しい内容です。CocosCreator TSを使ったゲーム作りの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • Unity3Dはカメラレンズの動きを実現し、角度を制限する
  • CocosCreatorで複数のタイマーを使用する方法の詳細な説明
  • CocosCreator 学習モジュールスクリプト
  • CocosCreator で物理エンジン ジョイントを使用する方法
  • CocosCreatorでJSZip圧縮を使用する方法
  • CocosCreator ソースコードの解釈: エンジンの起動とメインループ
  • CocosCreator 一般的なフレームワーク設計リソース管理
  • CocosCreatorでリストを作成する方法
  • CocosCreator で http と WebSocket を使用する方法
  • CocosCreator の新しいリソース管理システムの分析
  • CocosCreator でカメラトラッキングに cc.follow を使用する方法

<<:  コマンドラインを使用してUbuntuのバージョンを検出する方法

>>:  使用状況分析を備えたMySQL

推薦する

DockerはClickHouseをインストールし、データテストを初期化します

クリックハウスの紹介ClickHouse は、SQL クエリを使用して分析データ レポートをリアルタ...

Vue2とVue3のライフサイクルの比較の詳細な理解

目次サイクル比較使用法要約するサイクル比較ヴュー2ヴュー3作成前設定作成された設定マウント前マウント...

Unicode の一般的な文字の概要

初期のコンピューターのほとんどは ASCII 文字しか使用できませんでしたが、その後、主要な西洋のア...

Reactの仮想DOMとdiffアルゴリズムの詳細な説明

仮想DOMの役割まず、仮想 DOM の出現によってどのような問題が解決されるのかを知る必要があります...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Reactでコンポーネントがどのように通信するかの詳細な説明

1. 何ですかコンポーネント間の通信は、次の 2 つの単語に分けることができます。コンポーネントコ...

デザインリファレンス 美しく独創的なブログデザイン

以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...

Tencent インタビュー: SQL ステートメントの実行が非常に遅くなる理由は何ですか? ---後悔シリーズは見ないで(推奨)

正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...

Java+Tomcat 環境の展開とインストールのプロセス図

次に、Centos7 に Java+Tomcat をインストールします。インターネット上には多くの記...

WindowsにJDK8をインストールする方法

1. ダウンロード: http://www.oracle.com/technetwork/java/...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

Tomcat Nginx Redis セッション共有プロセス図

1. 準備ミドルウェア: Tomcat、Redis、Nginx Jar パッケージ: commons...

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

Docker で onlyoffice をインストールして展開する詳細なプロセス

0. システム要件CPU I5-10400F以上メモリ 16 GB、32 GBのメモリが最適ハードド...

VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)

1. インストールパッケージの準備VMware-player-15.0.4-12990004、非商...