はじプロ画面分割部のすすめ③ ワークショップ編


の続き

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

4. ワークショップ

1Pキャラと 2Pキャラだけを上下画面で表示する、画面分割のベースとなる部分を実装編で学んだ流れで作成していく。
ワークショップの完成物は以下でダウンロードできる。

4.1. 操作部

ここがゲームのコアとなる部分なので、本来ならしっかり作りこむこと。今回は、それぞれのキャラクターが動くだけのゲームとしている。

  • [UFO] のふるまいの見えるを Off、移動基準を "ワールド" に変更する
  • 1P側[UFO] を左スティック、2P側[UFO] を左スティックで操作できるようにする
  • 1P側[UFO] に [けだまる] を、2P側[UFO] に [エイリアン] を、連結面 "中央→中央" で連結する
  • それぞれに [位置センサー]、[角度センサー] を連結する

4.2. カメラと床配置

オフセット前仮配置

[カメラ位置]、[カメラ注視点]、[カメラ画角]、床となる[直方体]x2 を配置する。
仮配置と書いたが、上画面の床以外は、ここで決めたもので確定となる。
座標は一例として挙げているが、ここの調整は好みに合わせて細かく行う。

  • [カメラ位置] の位置を (0.0, 2.8. 0.0) にする
  • [カメラ画角] を 25 にする
  • [カメラ注視点] の位置を (0.0 2.1 19.2) にする
  • [直方体] をそれぞれ以下のようにする

そうすると以下のような表示部になる。

オフセット計算

※記号は 3.1. に対応する
①まず以下を求める

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

計算してもいいが、ここははじプロの機能を使って数字を求める。

  • [位置センサー]を二つ用意し、ひとつは [カメラ位置] と同じ位置に配置、もうひとつは下の床の [直方体] に連結面 "中央→Z-" で連結する。
  • それぞれのセンサーから出力を以下のようにつなぎ、値を求める。
  • 上から ΔY, ΔZ, r, θ となっている。

②次に以下を求める。

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

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

これもはじプロ内で計算する。

  • [位置センサー]を追加し、上の床の [直方体] に連結面 "中央→Z-" で連結する。
  • 以下のようにつなぎ、値を求める。
  • 上から d, λ となっている。

③ ②で求めたオフセット値は、床手前の値のため、[直方体] の中心の位置を求める。

  • 中心の位置は、手前の位置から、cosλ, sinλ に床の長さの半分をかけた値分ずれた位置である。
  • 以下のようにつなぎ、値を求める。
  • 上から Y座標, Z座標 となっている。

オフセット反映

③で求めた座標および ②で求めた λ を上床となる直方体に反映させると以下のように上下の見た目がそろう。

このあと、d と λ の値を使用することがあるためメモしておき、計算に利用したノードンたちは削除してよい。

4.3. 自機と始点配置

自機の [けだまる], [エイリアン] を以下のように設定する。

  • ふるまいの動くを Off にする。
  • 上画面の自機は床同様にオフセットを与える。
  • Y軸回転は 180° にする。

始点の [球] 2つを以下のように設定する。

  • ふるまいの動くを Off にする。
  • ふるまいの見えるを Off にする。
  • 上画面の自機は床同様にオフセットを与える。
  • Y軸回転は 0° にする。

表示部は以下のようになる。

4.4. モノ配置

今回の場合、モノ=敵キャラ となる。

ここは、3.2. 3.3. に貼ったガレージをそのまま組めば OK。

  • 下画面は エイリアン-けだまる をし、下画面の [球] を連結始点とする。
  • 上画面は けだまる-エイリアン をし、上画面の [球] を連結始点とする。

今回のものに組むと以下のようになる。

モノが複数あるときも、複数のモノを連結するだけでやることは同じ。
ただし、連結グループは上限 32個なので、モノが 8個以上になる場合は連結始点の [球] を増やす必要がある。

4.5. 完成

ここまでで、画面分割ゲームのベースとなる部分の完成となる。
左スティック、右スティックで各キャラクターを操作して、画面がどう動くか確認してみよう。

4.6. デバッグモード

以下のように、ボタンを押したときに [カメラ位置] の Z位置が変わるようにすると、操作部を見られるようになる。
操作部の動きが画面部にちゃんと反映されているか確認するのに役立つ。

4.7. カスタマイズ

ここまでで習得した技術を駆使して自分だけのゲームを作ろう。
基本的には。4.1. と 4.4. を繰り返していくことになる。

5. 作例

最後に画面分割を用いて私が作成したゲームを載せて締めとする。