3. 背景をつくる

これは「2. キャラを動かす」の続きです。
今回は、キャラクターの後ろに背景を表示させてみます。
余談ですが、私はまず最初にここでつまづきました。後述の「map()」という命令の動作を勘違いしていたためです。普通に考えたら別段難しいものではないので、順に見ていきましょう。

function _init()
  x=60
  y=60
end
function _update()
  if btn(0) then x-=1 end
  if btn(1) then x+=1 end
  if btn(2) then y-=1 end
  if btn(3) then y+=1 end
end
function _draw()
  cls(0)
  map(0,0,32,32,8,8)
  spr(1,x,y,1,1,false,false)
end

いったん、データをセーブ。

ここらで、いったん作ったデータをセーブしておきましょう。
ESCキーを押して、プログラムを止め、コマンドライン画面に戻ります。

絵が残ったままなので、「cls」と小文字で入力し、ENTERキーを押します。
画面が消去されてみやすくなりました。
セーブコマンドを入力します。

save ファイル名

拡張子は省略できます。拡張子なしの場合は.p8が自動で付与されます。

ファイル名をつけて、save。
一度保存したら、以降は、ctrl+s（Macはcommand+s）でいつでも保存ができます。マメに保存しましょう。
保存したら、ESCキーを押して、スプライトエディターを開きます。

背景パターンを描く

最初に描いたキャラクターの横に、背景に使うブロックの絵を２つ描きました。この例の場合、グレーのブロックが2番、黄色いブロックが3番にあります。
次に、これらを背景として使えるように「マップ」に配置していきます。

マップにブロックを配置する

ツールアイコンの真ん中にあるマップエディターを選択します。

マップは、横128枚、縦64枚のスプライト（8×8px）を並べることができます。
ここに、スプライトエディターで描いたパーツをおいて、背景として使用します。
スペースキーを押すと、ドラッグしてスクロールができ、同時にグリッドラインが表示されます。マウスホイールを動かすと、拡大と縮小が可能です。

PICO-8の画面は128×128pxなので、一度に表示できるマップのタイルは、16×16枚。
ですが、最初なので、小さめに8×8枚でマップを作ってみます。

2種類のパーツを使って、迷路みたいなものを作りました。
ここに顔のスプライトを置くこともできますが、マップに配置した絵はあくまでもマップなので、スプライトのように自由には動かせません。
自由に動かしたいものは、基本的には、マップではなく、spr()でスプライトとして表示させます。

次に、このマップを、ゲーム画面に表示させてみたいと思います。

ゲーム画面にマップを呼び出す

マップを表示させるには、map()を使います。
map()は、マップエディターで作ったマップ画面を、ゲーム画面にコピーして表示する関数（命令）です。

map( マップセルX, マップセルY, 表示画面X, 表示画面Y, セルの横の幅, セルの縦の数, レイヤー )

ちょっとややこしい…。今回の場合、

• 表示したいマップは、マップエディターの左上（X:0セル, Y:0セル）から横に8セル、縦に8セル
• 表示したいゲーム画面上の位置は、真ん中

コードに直してみます。

map(0,0,32,32,8,8)

ゲーム画面上の位置は、1セル8px、画面幅が128px、マップが8セル×8px=64なので、
128 – 64 = 64px、真ん中に置きたいので、2で割って32px、という計算です。

これを、今までのコードに組み込みます。
マップの表示は描画なので、function _draw()の中に入れます。
背景が白のままではみづらいので、cls()の色番号を0に変えて、黒で塗りつぶします。

function _init()
  x=60
  y=60
end

function _update()
  if btn(0) then x-=1 end
  if btn(1) then x+=1 end
  if btn(2) then y-=1 end
  if btn(3) then y+=1 end
end

function _draw()
  cls(0)
  map(0,0,32,32,8,8)
  spr(1,x,y,1,1,false,false)
end

マップが表示されました！
今は、マップはただの絵なので、スプライトは通り抜けてしまいます。

function _draw()は、中にある命令を上から順番に処理していくので、上の例だと、
1.マップを描く
2.スプライトを置く
という順番に描かれるため、マップの上にスプライトが表示されます。
マップとスプライトの行を入れ替えて実行してみると、スプライトがマップの裏に隠れるようになります。

マップのセルの座標や表示するセルの数、ゲーム画面の表示座標を変えることで、スクロールしているように見せたり、map()を何回か実行して、絵を重ねて多重スクロールを作ることができます。

次は、壁に当たったら通り抜けないようにしてみたいと思います。
ここから、話がややこしくなってきますが、できあがりのコード自体はとても短いので、コピペして改造するだけでも、そこそこ楽しいはず！