はじプロ画面分割部のすすめ② 実装編
の続き
※この記事において [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 を入力することで計算できる
Δ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 で、特定エリアからはみ出したら透明にする
③のばせるモノを利用して、特定エリアからはみ出さないようにリアルタイムに長さを変える
はみ出し対策
— tak.ham (@tak_hama_) March 8, 2022
地面→①
標識→② pic.twitter.com/zRzNlZVGfA
はみ出し対策
— tak.ham (@tak_hama_) March 8, 2022
宝箱等→②
壁→③ pic.twitter.com/XZITfq6m99
①の方法
シンプルなモノにテクスチャーを連結してアニメーションさせるだけなので、割愛。
②の方法
- 以下のように、画面描画部でモノが自機(青いライン)より手前に来た場合に、モノを透明にすればよい。
具体的には、Z が 0より小さくなったら、透明テクスチャを On にする。
- ノードンガレージで組むと以下のようになる。
③の方法
- まず、壁の始点となるものを、3.2. 3.3. の方法で計算し移動する。
- 壁の長さは、壁始点の移動に利用した Z および θ から算出することができる。
W1 = Z / cosθ
W2 = Z / sinθ
- これだけだと、Z がマイナスの時にも壁が描画されることになってしまうので、Z >= 0 の出力をかけることで対応する。ノードンガレージで組むと以下のようになる。
3.5. 実装編まとめ
3.1.~3.4. であげた手法を用いて複数のモノを描画することで、画面分割を実装することができる。
さぁみんな、画面分割部へ入部しよう。そして、先のファイナルラップのようなレースゲームの表現方法を考えよう。
※画面分割はゲームを表現するための一手法にすぎず、作成しようとしているゲームの内容そのもののほうが大事であることは言うまでもない。
--
ワークショップ編に続く
Author And Source
この問題について(はじプロ画面分割部のすすめ② 実装編), 我々は、より多くの情報をここで見つけました https://qiita.com/tak_ham/items/c2948db67d7d5db0e5df著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .