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

1. シーンレイアウト

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

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

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

touchstart タッチプレス、mousedown に相当
touchmove タッチ移動。mousemove と同等
touchend タッチアップ、mouseup と同等
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)
（１）aはbから時計回り：角度は正
（２）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. 車の動き

車のスクリプトに前進アニメーションを追加し、update(dt) メソッドで、各フレームの x と y に x 軸と y 軸上の対応する速度成分を追加します。
ハンドル制御スクリプトの 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) {}

最終結果