カテゴリー
やってみようPICO-8

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つ描きました。この例の場合、グレーのブロックが2番、黄色いブロックが3番にあります。
次に、これらを背景として使えるように「マップ」に配置していきます。

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

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

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

マップ画面
スペースキーを押すとグリッド

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

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

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

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

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

map( マップセルX, マップセルY, 表示画面X, 表示画面Y, セルの横の幅, セルの縦の数, レイヤー )
マップセルX,Yマップエディター上のセルのX,Y座標
ここを表示するマップの起点(左上)にする
表示画面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()を何回か実行して、絵を重ねて多重スクロールを作ることができます。

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