はじプロ画面分割部のすすめ① 概要編

0. これはなに？

ナビつき！つくってわかる はじめてゲームプログラミング(以下、はじプロ) で、私が確立した(?)画面分割という技術を解説する記事である。

1. はじめに

本章は、はじプロの概要を書いているので、はじプロ有識者は飛ばして問題ない。

1.1. はじプロとは？

Nintendo Switch で発売されている、ゲームを作るゲーム。
超ざっくりいうと、ノードンと呼ばれる命令ブロックをつなげることでモノを制御し、ゲームを作ることができる。

どのようなノードンがあるのかは、公式リファレンス を参照されたし。

1.2. はじプロにおけるゲーム画面

画面分割の話の前に、はじプロにおけるゲーム画面を簡単に説明する。

はじプロには、大きく二つのモードがある。

1. ノードンガレージ
   モノノードンを座標に配置したり、命令のためのノードンを配置したり、ゲーム作成をするモード。エディター。
2. ゲーム画面
   ノードンガレージに配置したノードンに従って、実際にゲームを行うモード。ノードンガレージに配置されたモノノードンを 3Dオブジェクト として描画している。

ここで大事になってくるのが、ゲーム画面はノードンガレージの特定の座標エリアを描画しているということである。

また、どこの座標エリアを描画するのか、というのは、以下いずれかのノードンで制御する。

1. ゲーム画面ノードン
   ガレージの特定矩形を指定し描画する。
2. カメラノードン
   カメラに映るモノを描画する。カメラは移動できるモノに連結することでカメラも移動させることができる。
   例) クルマに連結して、レースゲームを作る。

上記の 2種類のノードンなのだが、1ゲームに 1つしか用意することができない (ゲーム画面x1 or カメラ x1)。
このことは、下のゲーム画面(FC版ファイナルラップ)のような「プレイヤー1用、プレイヤー2用を分けた画面」、を用意することができないということと同意である。

そのため、そのようなゲームを作るには、様々な工夫を用いて疑似的にプレイヤー1用、プレイヤー2用の画面に分割する必要がある。

2. 画面分割方式

2.1. 概要

画面分割について超ざっくりと書くと、ゲーム画面の真ん中に柱を置き、

半分にプレイヤー1 から見える視界、もう半分にプレイヤー2 から見える視界を疑似的に描画する手法である。

(視点をずらすとこんな感じ)

それぞれの視界と書いているが、先に書いた通りゲーム画面に映せる視界は一つだけである。そのため、

• 実操作部分と画面描画部分を分離し
• 様々なモノの位置関係を計算し
• 画面描画部のモノをリアルタイムに動かす

必要がある。

2.2. 画面の分け方

上下に分ける方法と左右にわかる方法が考えられるが、私は上下に分ける方法を取っている。ただ、ここは作成するゲームによっても変わるとは思う。

• 上下に分ける方法の特徴
  • はみ出し対策(後述)が左右に比べて楽
  • 高さが半分になっても奥行きはそれなりに表現できる
  • オフセット対応(後述)がX軸及びZスライドが必要だが、上画面だけに行えばよい

• 左右に分ける方法の特徴
  • 高さ半分に比べ、幅が半分だと左右の圧迫感が出る
  • オフセット対応がY軸ヒンジだけで楽だが、左右両方に行う必要がある

2.3. 分離方式

実操作部分と画面描画部分を分離し

分離方式について大きく二つがある。概要と特徴は以下のとおり。

1. 完全分離方式

   • 操作部分、下画面、上画面の 3部分に分離する方式
   • 1つのモノを表示するために利用するモノノードン数が多くなる
     • 最低でも 9ノードン必要 (操作部1 + 下画面4 + 上画面4)
     • モノノードンが多くなると、はじプロの仕様上負荷がかかりモノが消滅することがある
   • 座標計算が簡単
   • 画面、描画部の自機が動かない
     • いろいろなモノを連結してもモノが揺れたりしない
   • 操作部が独立しているので、描画部を気にせずゲーム性を組み込むことができる

   完全分離方式 pic.twitter.com/scwAc5zUqc

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

2. 操作部下画面共有方式

   • 操作部分を下画面として利用し、上画面だけを計算し描画する方式
   • 1つのモノを表示するために利用するモノノードン数が完全分離方式に比べて少ない
     • 同条件で 5ノードン必要 (操作部1 + 上画面4)
   • 上画面の座標計算が複雑になる
     • 空間における円の方程式を使う必要がある
   • 画面、描画部の自機がが動く
     • 上記の座標計算にもつながるが、とにかくめんどい

   操作部下画面共有方式 pic.twitter.com/bJYyZ49euZ

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

同一ゲームを両方式で作成してみたが、完全分離方式で作成するほうがゲーム性に優れるため、モノ消滅が発生しないor許容できる範囲であれば、こちらのほうが良いと思う。

2.4. はみ出し対策方式

左右画面(上下画面)は、間に柱がおいてあるだけで、実際は一続きの平面であり、モノの位置が動くと相手の画面に干渉(はみ出し)してしまう。
そのため、はみ出し対策をする必要がある。

方式としては、以下のようなものが考えられる。

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

どれを選択するかは、モノやシチュエーション次第となる。

--
実装編に続く