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

推薦する

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

nginx プロキシ ポート 80 からポート 443 への実装

nginx.conf設定ファイルは次のとおりです。 ユーザー nginx; ワーカープロセス 1; ...

IE7でソースファイルを含むページを開くとページが空白になる問題の解決方法

質問:私のブログのエンコーディングは utf-8 です。ページを開くと空白になっていることもあります...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

JS を使用して要素がビューポート内にあるかどうかを確認する方法

序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

Nginx ベースのアクセス制御と接続制限の実装

序文Nginxの組み込みモジュールは、同時リクエスト数の制限とリクエストのソースの制限をサポートして...

継続的インテグレーションテストにおけるDocker Swarmの適用の詳細な説明

背景アジャイル モデルは広く使用されており、テストは特に重要です。新しいバージョンは頻繁にリリースす...

MySQL/MariaDB でピボット テーブルを実装する方法のサンプル コード

前回の記事では、Oracle でピボット テーブルを実装するいくつかの方法を紹介しました。今日は、同...

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...

Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...

ウェブデザイナーは適した人材

<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...

地域のカスタムカラーのためのechars 3Dマップソリューション

目次質問伸ばす問題を解決する要約する質問プロジェクトの要件に従って、以下の州地図で個々の都市を(異な...

CentOs でノード バージョンを手動でアップグレードする方法

1. 対応するNode.jsパッケージを見つけます。https://nodejs.org/downl...