動きと遠近感を制御するテレコントローラの3Dサンプルプロジェクト。

効果

原則

大食いバトルでヘビの動きを考えて実装！ ではジョイスティックコントローラーを使用していましたが、2Dレベルでした。

ロッカー

ジョイスティックの原理は、タッチポイントの位置を目的の部品に伝えるというものです。

タッチ・イベントを聞いた後、座標変換をする必要があります。 UITransformComponent Cocos 3Dでは座標変換はコンポーネントを使って行われます。

そして、座標と角度をイベントとして送信するだけです。

onTouchMove(e: EventTouch) {
 const location = e.getUILocation();
 // 座標変換
 let pos = this.uITransform.convertToNodeSpaceAR(new Vec3(location.x, location.y));
 // 半径に応じて位置を制限する
 this.clampPos(pos);
 // 中点の位置を設定する
 this.midNode.setPosition(pos.x, pos.y, 0);
 // で角度を計算する。
 let angle = this.covertToAngle(pos);
 // コールバックをトリガーする
 this.joyCallBack.forEach(c => c.emit([pos, angle]));
}

動きと視点

ここでは3つのノードに分かれており、それぞれノードの移動、キャラクターの回転、視点の回転を制御します。

ジョイスティックが返す結果を使って、モデルの初期状態とカメラの角度から移動速度と回転速度を計算することができます。

/** ジョイスティックを動かしてコールバックをトリガーする*/
joysitckCallback(vector: Vec3, angle: number) {
 // カメラの角度によって回転する
 Vec3.rotateZ(vector, vector, Vec3.ZERO, this.node_camera.eulerAngles.y * macro.RAD);
 this._vector = vector.normalize();
 if (angle) {
 // モデルは最初正面を向いている。
 this.node_role.eulerAngles = new Vec3(0, angle + 90 + this.node_camera.eulerAngles.y, 0);
 }
}
/** ジョイスティックを回転させてコールバックをトリガーする*/
joysitckAngleCallback(vector: Vec3, angle: number) {
 this._vectorAngle = vector.normalize();
}

スピードにもよりますが、位置と角度を毎フレーム更新するだけです。

fix_update(dt: number) {
 if (this._vector.lengthSqr() > 0) {
 this.node.setPosition(this.node.position.add3f(this._vector.x * SPEED * dt, 0, -this._vector.y * SPEED * dt));
 } 
 if (this._vectorAngle.lengthSqr() > 0) {
 this.node_camera.eulerAngles = this.node_camera.eulerAngles.add3f(0, -this._vectorAngle.x, 0);
 }
}

概要

座標変換！回転ジャンプ止まらない

上の写真はCocos Creator 3D v1.1.1を使って "ジョイスティック・コントローラー！"を実装したWhite Jade Without Iceです。 技術の共有。お友達と共有することを歓迎します！

モチベーションを上げられない人は、他の才能がどんなに素晴らしくても、平凡なものに甘んじてしまう人に違いありません。

全コード