CocosCreatorでゲームコントローラーを使用する方法

CocosCreatorでゲームコントローラーを使用する方法

1. シーンレイアウト

2. ハンドルリスナーを追加する

1. イベントの変更を監視する

オリジナルマウスシリーズからタッチシリーズへ変換

  1. touchstart タッチプレス、mousedown に相当
  2. touchmove タッチ移動。mousemove と同等
  3. touchend タッチアップ、mouseup と同等
  4. touchcancel タッチがキャンセルされ、他のイベントによって終了しました。ESC キーを押すのと同じです。

2. 座標設定

タッチが押されると、押下位置が変わります(ワールド座標変換を使用)、タッチが解除されると元の位置に戻ります(直接 0 に設定、0 座標はデフォルトの相対座標です)。
setPosition() は親ノードに対する座標を設定します。

  onTouchMove(e:cc.Event.EventTouch){

         // e.getLocation() はクリックされた位置、つまりワールド座標です。 // ワールド座標をローカル座標に変換する必要があります。 let parent=this.node.parent; // 親ノード (円形シャーシ)
        pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation()); とします。
        ノードの位置を設定します。

    }

    オンタッチキャンセル(){
      this.node.setPosition(cc.v3(0,0,0));
    }

3. ハンドルをトレイに固定する

方位角を使用してエッジの位置を特定します。 pos.normalize() メソッドは、(0, 0) を基準とした点の (cos, sin) を返し、Vec2 オブジェクトを返します。

let parent=this.node.parent; // 親ノード(円形シャーシ)
pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation()); とします。
// 点の位置 (cos, sin)
direction:cc.Vec2=pos.normalize() とします。
// 境界内に制限する let maxR = 100-20;   
//クリックした点からトレイの中心までの距離 let r : number = cc.Vec2.distance(pos, cc.v2(0,0));

r > maxR の場合
{
	pos.x = maxR * 方向.x; 
	pos.y = maxR * direction.y;
}
// cc.log("相対位置: " + pos.x + ", " + pos.y);
this.node.setPosition( pos );

3. 車のコントロールを追加する

1. 車の回転

cc.Node.angle
回転角度を示します。反時計回りが正です。公式の推奨では、cc.Node.rotationa.signAngle( b) は使用しないでください。
a と b は 2 つのベクトルであり、戻り値は a と b の間の角度 (ラジアン単位) です。
ラジアン = a.signAngle(b)
(1)aはbから時計回り:角度は正
(2)aはbから反時計回り:角度は負

ローテーションの実装:
属性 car: cc.Node=null; を追加して、車ノードを取得します。
cc.find() パラメータでは除算記号を区切るためにスラッシュ「/」を使用していることに注意してください。そうしないと認識されません。

オンロード(){
     this.car=cc.find("Canvas/車");
}
let radian = pos.signAngle (cc.v2 (1,0)); //クリック位置と水平線の間の角度を計算します let ang = radian / Math.PI * 180; //ラジアンを角度に変換します this.car.angle = -ang; //反時計回りが正なので、ここで時計回りに調整します

2. 車の動き

  1. 車のスクリプトに前進アニメーションを追加し、update(dt) メソッドで、各フレームの x と y に x 軸と y 軸上の対応する速度成分を追加します。
  2. ハンドル制御スクリプトの car ノードの下のスクリプトを取得します。上記で取得した方向角度は、car スクリプトに渡されます。方向を制御することで車の動きを制御します。

車の移動スクリプト

方向: cc.Vec2 = null;
速度: 数値 = 3;

オンロード() {

}

始める() {

}

更新(dt) {
	if (this.direction == null) return; // 停止 let dx = this.speed * this.direction.x;
	dy = this.speed * this.direction.y とします。

	pos = this.node.getPosition(); とします。
	位置x += dx;
	正のy座標 += dy座標;
	ノードの位置を設定します。
}

ゲームパッド制御スクリプト

車: cc.Node = null;
carscript: cc.Component = null;
// ライフサイクルコールバック:

オンロード() {
	this.car = cc.find("Canvas/car");
	this.carscript = this.car.getComponent("CarMove");
}

始める() {
	this.node.on('touchstart', this.onTouchStart, this);
	this.node.on('touchmove', this.onTouchMove, this);
	this.node.on('touchend', this.onTouchCancel, this);
	this.node.on('touchcancel', this.onTouchCancel, this);
}

オンタッチスタート() {

}

onTouchMove(e: cc.Event.EventTouch) {

	// e.getLocation() はクリックされた位置、つまりワールド座標です。// ワールド座標をローカル座標に変換する必要があります。// let parent=this.node.parent;// 親ノード (円形シャーシ)
	// pos:cc.Vec2=parent.convertToNodeSpaceAR(e.getLocation()); とします。
	// this.node.setPosition(pos);

	let parent = this.node.parent; // 親ノード(円形シャーシ)
	pos: cc.Vec2 = parent.convertToNodeSpaceAR(e.getLocation()); とします。
	// 点の位置 (cos, sin)
	方向を指定します: cc.Vec2 = pos.normalize();
	// 境界内に制限する let maxR = 100 - 20;

	r: number = cc.Vec2.distance(pos, cc.v2(0, 0))とします。

	(r>maxR)の場合{
		pos.x = maxR * 方向.x;
		pos.y = maxR * direction.y;
	}
	// cc.log("相対位置: " + pos.x + ", " + pos.y);
	ノードの位置を設定します。

	let radian = pos.signAngle(cc.v2(1, 0)); //クリック位置と水平方向の間の角度を計算します。let ang = radian / Math.PI * 180; //ラジアンを角度に変換します。this.car.angle = -ang; //反時計回りが正なので、ここで時計回りに調整します。this.carscript.direction = direction;

}

オンタッチキャンセル() {
	this.node.setPosition(cc.v3(0, 0, 0));
	// 車を停止するには方向を null に設定します this.carscript.direction = null;

}
// 更新 (dt) {}

最終結果

上記は、CocosCreator でゲーム コントローラーを使用する方法の詳細です。CocosCreator コントローラーの例の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • CocosCreator 入門チュートリアル: ネットワーク通信
  • Cocos2d-x 3.x 入門チュートリアル (パート 2): ノード クラス
  • Cocos2d-x 3.x 入門チュートリアル (I): 基本概念
  • Cocos2d-x 入門チュートリアル (詳細な例と説明)
  • CocosCreatorでシューティングゲームを作る詳しい解説
  • CocosCreatorでクールなレーダーチャートを描く方法
  • CocosCreator MVCアーキテクチャの詳細な説明
  • CocosCreatorメッセージ配信メカニズムの詳細な説明
  • CocosCreatorでWeChatゲームを作成する方法
  • CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明
  • CocosCreator Huarongdaoデジタルパズルの詳しい説明
  • CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

<<:  MySQLのジョイントインデックス機能の分析と使用例

>>:  Linuxでスワップパーティションファイルを作成する方法

推薦する

JavaScriptのアンチシェイクとスロットリングとは

目次1. 関数デバウンス1. 画像安定化とは何ですか? 2. 関数のスロットリング2.1 タイマーの...

CSS の複数行テキストがオーバーフローする場合の省略記号の例

複数行のテキストがオーバーフローすると省略記号が表示されますこの記事では 2 つの方法を推奨します。...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

MySQL データ定義言語 DDL の基本ステートメント

MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

ネイティブJSで禁止すべきメソッドの記述

目次ブロックレベル関数オブジェクトのプロトタイプを直接変更すると呼び出された人発信者評価ブロックレベ...

Vue のすべてのカプセル化方法の簡単な概要

目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

HTML ページをスクロールするときに一部のコンテンツを固定位置に固定する方法

この記事では主に、レイアウトに役立つ、HTML ページ内の一部のコンテンツを固定してスクロール時にス...

Virtualbox で Ubuntu 16.04 の起動時に共有ディレクトリを自動的にマウントする最良の方法

仮想マシンを使用する人は通常、操作と使用を容易にするために仮想マシン用の共有ディレクトリを設定します...

Linux のごみ箱メカニズムの実装プロセスと使用方法の詳細な説明

序文: Linux システムでの rm は元に戻せません。コマンドの設計自体に問題はありません。問題...

JavaScript配列の一般的なメソッドの概要

目次1. JavaScriptで配列を作成する方法2. 配列メソッドの概要3. 方法の詳細な説明1....

Nexus を使用して Docker リポジトリを作成する方法

公式の Docker レジストリを使用して作成されたウェアハウスでは、イメージを削除してもデフォルト...

大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス

目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...

Vue3 AST パーサー - ソースコード分析

目次1. AST抽象構文木を生成する2. ASTのルートノードを作成する3. 子ノードの解析4. テ...