タイル

初代『スーパーマリオブラザーズ』のディレクター宮本茂と、同作でステージ設計を手掛けた手塚卓志は、方眼紙に手書きでステージをレイアウトし、それをプログラマーチームに渡して、ゲーム内のすべてのスプライトの座標を手打ち入力してもらっていたそうです。途方もない苦労をしていたんですね！

幸いなことに、 p5play では Tiles のコンストラクタによって、文字列中のタイル文字の位置に応じて、スプライトを生成することができます！

第 1 引数は、改行のある文字列、または文字列の配列です。文字の改行、または配列の各要素によって、タイルの行を表現します。

第 2 、第 3 引数は、左上（ 1 枚目）のタイルの x, y 座標の指定です。第 4 、第 5 引数は、各タイル間の横方向とと縦方向の間隔の指定です。

このコンストラクタが返すのは、生成したすべてのスプライトを含む Group です。ステージのリセットや、次のステージをロードする前に、いちどスプライトをすべて破棄するには、 group.removeAll() を使います。

やってみよう！

"P5" ブロックのレイアウトを編集してみてください。

スペース " " またはピリオド "." は、タイルグリッド上の対応する位置にはスプライトを作成しないことに注意してください。このコードサンプルでは、 "=" 文字は bricks に使用されます。

タイル座標

sprite.tileSize または group.tileSize を設定すると、座標の数値が表すピクセル値を、デフォルトの 1 から変更することができます。

たとえば、タイルのサイズが 8 の場合、 x や y の値が 1 なら 8 ピクセルとして、 2 なら 16 ピクセルとして、 3 なら 24 ピクセルとして……という具合に、「 1 タイル 」という論理座標系が、「 8 ピクセル」という実座標系に自動的に変換されるのです。アニメーションの読み込みがさらに簡単になりますね！

このコードサンプルでは、スプライトを論理座標である「 1 タイル」動かすと、実座標における 32 ピクセルぶん移動します（「タイル」のサイズが見てわかりやすいように、罫線を引いています）。

たった 2 つのコリジョンルールで、プレイヤーはブロックを押して動かすことができ、ブロックも互いに押し合うことができていますね。ただしこの例は、プレイヤーが 1 タイルぶんの距離の移動を完了するまでは次の移動を行わないよう、移動中のキー入力のバッファリング（一時的に防ぐ処理）を追加すると、もっと良くなるでしょう。