前提どのような技術的知識を学んだとしても、公式ドキュメントが最初のチュートリアルになるはずです。そのため、この記事を読む前に、少なくとも「Getting Started」セクション (http://docs.cocos.com/creator/manual/zh/getting-started/) を読んでください。 ここでは、 Cocos Creatorが正常にインストールされていることを前提としています。 TypeScript と JavaScriptもちろん、ここでは利点についてのみお話します。 コードエディタの選択ここでは 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 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の他の関連記事もご覧ください。 以下もご興味があるかもしれません:
|
<<: コマンドラインを使用してUbuntuのバージョンを検出する方法
この記事では、LinuxでMySQL 8.0をインストールする方法を紹介します。具体的な内容は次のと...
コードをコピーコードは次のとおりです。 <hr style="width:490px...
現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...
HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...
まずディレクトリを作成する cd /etc/nginx mkdir ssl cd ssl CA と自...
[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...
この記事では、MySQL 5.6.23のインストールと設定のチュートリアルを参考までに紹介します。具...
1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...
この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
I. 概要HTML テンプレートを作成するときに、テキスト レイアウトの手段としてスペースが使用さ...
多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...
フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...
目次アイデアホスト構成confを変更する再起動テストスレーブ 1 の構成スレーブ2の構成マスターとス...
この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...