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でスワップパーティションファイルを作成する方法

推薦する

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...

Dapr を使用してマイクロサービスをゼロから簡素化する例

目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...

UbuntuへのDocker CEのインストール

この記事は、Ubuntu 17.10 での Docker CE のインストールを記録するために使用さ...

MySQL で時刻と日付の型を保存する際の選択問題を分析する

一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

1. 実験環境シリアルナンバープロジェクトソフトウェアとバージョン1オペレーティング·システムCen...

MySQL学習エンジンの詳細な説明、説明、権限

エンジン導入InnodbエンジンInnodb エンジンは、データベース ACID トランザクションを...

CentOS8 で Docker を使用してオープンソース プロジェクト Tcloud をデプロイするチュートリアル

1. Dockerをインストールする1. 仮想マシンに Centos7 をインストールしました。Li...

Tomcat サーバーの応答が遅い場合の解決策

1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...

ページキャッシュを無効にするいくつかの方法を共有する

本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...

Mac での MySql の詳細なインストールと構成

1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...

MySQL マルチバージョン同時実行制御 MVCC の詳細な研究

MVCC MVCC (Multi-Version Concurrency Control) は、マル...

開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...

MySQL のインデックス障害の一般的なシナリオと回避方法

序文これまでにも、一部の SQL ステートメントを不適切に使用すると MySQL インデックスが失敗...

docker インストール後に hello-world を実行する問題を解決する

yumを使用してcentos7.3にDocker V1.13.1をインストールしましたしかし、doc...