はじプロ画面分割部のすすめ② 実装編

の続き

※この記事において [hoge] という記述は、ノードン名を指す。
　ex) [位置を角度に] は、位置を角度にノードン のこと

3. 実装

はじプロにおいて、ノードンによって角度の基準が異なることに注意をする必要がある。
[位置を角度に],[角度を位置に]：3時方向が 0° で、反時計回りに増えていく(0時方向が 90°)
[角度センサー],各種モノノードン：6時方向が 0° で、時計回りに増えていく(9時方向が 90°)

3.1. 画面オフセット

左右分割の場合

先に紹介した左右に分割した画面だが、それぞれの画面基準でキャラクターが正面を向いていない。
正面に向けるためには、角度や座標にオフセットを与える必要がある。
↓左画面だけオフセットするとこうなる。

与える角度(λ)は以下のように、カメラと自機を結んだ線の傾き(θ)から求められる。

ΔX = 自機の X座標 - カメラの X座標
ΔZ = 自機の Z座標 - カメラの Z座標
θ = arctan(ΔX/ΔZ)  ⇒　[位置を角度に] の横位置に ΔZ、縦位置に ΔX を入力することで計算できる
λ = 180 - θ

上下分割の場合

オフセット前

オフセット後

①上下分割の場合は、下準備として "カメラの座標(距離)" と "上画面の床の高さ" を決めておく。
カメラについては、画角を狭めにし、距離を遠くすると良い。
床の高さについては、カメラを決めたのち実際のゲーム画面で中央に来るように調整する。

②その後、下画面をカメラを中心とした円運動をさせ上画面のオフセット(d,λ) を求めていく。

③ カメラと下画面の床の距離と見た目の角度を求める。

ΔY = カメラのY座標 - 床のY座標
ΔZ = | カメラのZ座標 - 床手前のZ座標 |
r = √(ΔY^2+ΔZ^2)  ⇒　[ルート] に ΔY^2+ΔZ^2 を入力することで計算できる
θ = arctan(ΔY/ΔZ)  ⇒　[位置を角度に] の横位置に ΔZ、縦位置に ΔY を入力することで計算できる

④ ③で求めた値から d と λ を求める。

ΔY' = カメラのY座標 - h
ΔZ' = √(r^2-ΔY'^2)　⇒　[ルート] に r^2-ΔY'^2 を入力することで計算できる
φ = arctan(ΔY'/ΔZ')  ⇒　[位置を角度に] の横位置に ΔZ'、縦位置に ΔY' を入力することで計算できる

d = ΔZ' - ΔZ
λ = θ - φ

先のオフセット後を横から見るとこんな感じになっている。

以降は、「上下分割」＆「完全分離方式」を対象に記載する。

3.2. 座標計算

• 画面分割では、以下のような操作部のモノの位置関係を

　以下のように自機を中心とした位置関係に置き換える必要がある。

• 最終的に求めたい値、自機からの距離(X,Z)と、モノの向き θ を、操作部の情報から求める必要がある。

• X,Z については直接求めることができないため、距離 r と自機から見たモノの方向 λ を求める。
  r と λ が求まれば、X,Zは以下で求めることができる。

X = r * cosλ  ⇒　cos は [角度を位置に] の横位置出力
Z = r * sinλ  ⇒　sin は [角度を位置に] の縦位置出力

• r と λ は、操作部の情報から求めることができる。

ΔX = モノの X座標 - 自機の X座標
ΔZ = モノの Z座標 - 自機の Z座標
r = √(ΔX^2+ΔZ^2)  ⇒　[ルート] に ΔX^2+ΔZ^2 を入力することで計算できる
α = arctan(ΔZ/ΔX)  ⇒　[位置を角度に] の横位置に ΔX、縦位置に ΔZ を入力することで計算できる
β = 自機の Y角度
λ = α + β - 180

• モノの向き θ については、操作部のそれぞれの向きから求める。

• 以下の式で求められる。

β = 自機の Y角度
γ = モノの Y角度
θ = γ + (180 - β)

• 上記の流れをノードンガレージで組むと以下のようになる。
  (わかりやすさ重視のため、いくつか無駄ノードンはあります)

3.3. モノ移動

各画面のモノについて、3.2. で求めた座標、角度に移動させる。
一つ注意として、各画面の自機と同じ座標に始点となるモノを Y軸回転 0°で配置する必要がある。(自機は 180°で配置されておりこれを始点とすると、180°反対の位置にモノが移動してしまうため)
配置したモノを始点とし[フリースライド連結]と[Yヒンジ連結]でモノを連結すればよい。

• ノードンガレージで組むと以下のようになる(オフセット等はしていない)。わかりにくいが、右下の自機と書いてあるところに、自機となる [けだまる] と始点となる [球] が重なっている。
  下画面と書いているが、上画面も始点となる自機が変わるだけで同様である。

3.4. はみ出し対策

下画面と上画面が独立しているわけではないので、概要編で説明したように、そのままではモノがはみ出してもう一方の画面に干渉してしまう。そのため以下のようなはみ出し対策を行う必要がある。

①実際にはモノを動かすアニメーションで動いているように見せる
②透明テクスチャの On/Off で、特定エリアからはみ出したら透明にする
③のばせるモノを利用して、特定エリアからはみ出さないようにリアルタイムに長さを変える

はみ出し対策
地面→①
標識→② pic.twitter.com/zRzNlZVGfA

— tak.ham (@tak_hama_) March 8, 2022

はみ出し対策
宝箱等→②
壁→③ pic.twitter.com/XZITfq6m99

— tak.ham (@tak_hama_) March 8, 2022

①の方法
シンプルなモノにテクスチャーを連結してアニメーションさせるだけなので、割愛。

②の方法

• 以下のように、画面描画部でモノが自機(青いライン)より手前に来た場合に、モノを透明にすればよい。
  具体的には、Z が 0より小さくなったら、透明テクスチャを On にする。

• ノードンガレージで組むと以下のようになる。

③の方法

• まず、壁の始点となるものを、3.2. 3.3. の方法で計算し移動する。
• 壁の長さは、壁始点の移動に利用した Z および θ から算出することができる。

W1 = Z / cosθ
W2 = Z / sinθ

• これだけだと、Z がマイナスの時にも壁が描画されることになってしまうので、Z >= 0 の出力をかけることで対応する。ノードンガレージで組むと以下のようになる。

3.5. 実装編まとめ

3.1.～3.4. であげた手法を用いて複数のモノを描画することで、画面分割を実装することができる。
さぁみんな、画面分割部へ入部しよう。そして、先のファイナルラップのようなレースゲームの表現方法を考えよう。

※画面分割はゲームを表現するための一手法にすぎず、作成しようとしているゲームの内容そのもののほうが大事であることは言うまでもない。

--
ワークショップ編に続く