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.1、フィルター1.2、地図1.3、減らすHigher Order fu...

JavaScript ファクトリーパターンの説明

目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...

MySQL データベースのバックアップをスケジュールするいくつかの方法 (包括的)

目次1. データをバックアップするためのmysqldumpコマンド2. 一般的なmysqldump操...

VMware 仮想マシンに Centos7.3 をインストールするチュートリアル図

VMware の準備 CentOS の準備、こちらは CentOS 7.3 CentOS-7-x86...

JavaScript の絶妙なスネーク実装プロセス

目次1. HTML構造を作成する2. テーブルを作成する3. ヘビの頭と体を作る4. 食べ物を作る5...

CentOS8 システムをベースにした Gitlab を構築するために Docker を使用する詳細なチュートリアル

目次1. Dockerをインストールする2. GitLabをインストールする3. GitLabを初期...

MySQLデータベースでスロークエリログを有効にする方法の詳細な説明

データベースはスロークエリログを有効にします設定ファイルを変更する設定ファイルmy.iniに次の2つ...

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

ウェブページでメモの詳細が灰色になる問題に対処する

1. IE では、相対的な配置、つまり <div style="background...

Windows 上の MySQL 5.6 で my.ini 設定ファイルを見つける方法

忘れてしまった場合に後で戻って確認できるようにメモしておいてください。問題の説明:今日はちょっとした...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...

HTML 背景画像と背景色_PowerNode Java アカデミー

1. HTML 画像 <img> 1. <img> タグとその src 属性...

JavaScript 配列の重複排除とフラット化関数の紹介

目次1. 配列の平坦化(配列の次元削減とも呼ばれる)方法1: 削減メソッドを使用する方法2: スタッ...