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

1. キャラを表示する

一番はじめに、自分が描いたキャラクターを画面に出してみよう。

今回の完成コード

function _draw()
	cls()
	spr(1,60,60,1,1,false,false)
end

とりあえず目指すは基本のキ、画面上でキャラクターを動かすところです。
それにはまず、自分の描いた絵を画面に表示させるところから始めます。

スプライトを描く

PICO-8では、基本的に動かすキャラクターは「スプライト」として扱います。
最初はなにもスプライトの絵がありません。まずは自分で簡単な絵を描いてみることから始めます。
PICO-8を立ち上げます。

PICO-8を立ち上げたら、ESCキーを押して編集画面に入り、右上のアイコン左から2つ目のスプライトツールに切り替えます。

使えるのはパレットにある16色です。左上の黒色は、透明色(背景が透ける)なので、それ以外の15色で絵を描きます。
色には、パレットの左上から右に向かって順に、0〜15の番号が振られています。
黒は0番、白は7番、黄色は10番、といった具合です。

ツールの下の黒い帯の部分は、スプライトの一覧です。□一つが8px × 8pxです。
順番に番号が振られており、最初の「×」の部分が0番、そこから右に、1、2、3…と続きます。
0番はそのままにして、隣の1番をクリックして、そこにキャラクターを描いてみます。

青い丸顔です。口は、透過色の黒にしました。それでは、コイツを画面に出してみましょう。
右上のツール一覧から「()」マークのコードエディターに切り替えます。

PICO-8のコードを入力するときには、CAPSロックを解除して、小文字の状態で入力します!

ここにコードを書いていきましょう。
スプライトを表示する関数(命令)は、spr()です。

spr( スプライト番号, 表示するX座標, Y座標, スプライトの幅, スプライトの高さ, 横に反転するか否か, 縦に反転するか否か )
スプライト番号スプライトエディターで作ったスプライトの番号
表示するX,Y座標スプライトを置きたい表示画面上のX,Y座標
スプライトの幅、高さ表示したいスプライトのセルの大きさ(1セルは8px四方)
8px×8pxなら幅1、高さ1、8px×16pxであれば、幅1、高さ2
反転するか否かtrueを指定すると、縦または横方向に反転して表示される
右向き、左向きを別に作らなくてもそれらしく見せられる
省略、またはfalseを指定すると、反転しない

今回の表示設定は次の通り。

  • スプライト番号が1
  • 表示場所は横60px、縦60px
  • 幅高さスプライト1個分(8px × 8px)
  • 反転なし

これをsprに設定すると、このようになります。

spr(1,60,60,1,1,false,false)

スプライトの座標より後ろは省略できるので、

spr(1,60,60)

だけでも動作します。
省略した場合、スプライトの幅と高さは1(8px)、反転はfalse(反転しない)が設定されます。

これをコードエディターに入力して、「ctrl+r(Macはcommand+r)」で実行すると…。

真ん中にでました!
PICO-8の画面は、縦横128px(0〜127)です。
スプライトの座標は、そのスプライトの左上を指しているので、縦横8pxのスプライトを60pxの位置に表示すると、ちょうど真ん中に表示されます。
(128/2 – 8/2 = 60)

でも、最初に出ていたテキストが表示されたままになっています。
そこで、ESCキーを押してコードエディターに戻り、最初に一行加えて、次のコードを入力してまた実行してみます。

cls()
spr(1,60,60,1,1,false,false)

今度は、文字も消えてスプライトが表示されました。
cls()は、画面を一旦消去する関数です。cls(色番号)とすると、その色で画面を塗りつぶします。
例えば、cls(7)とすると、画面を白で塗り潰して消去します。

cls(7)
spr(1,60,60,1,1,false,false)

白くなりました。
スプライトの口のところが黒(透過色)だったので、背景が透けて、口の中も白くなっています。

プログラムを実行し続ける

このコードだと、表示はされたものの、プログラムはそれだけで停止してしまっています。
その証拠に、画面の上に「>」というコマンドラインの入力待ちが出ています。
キー入力すると、>の後ろに文字が表示されます。

このままだとゲームのキー入力ができないので、少しだけ改造して、ずっとプログラムの動作が続いている状態にします。
コードの最初と最後に1行追加して、次のように変更します。

function _draw()
	cls(7)
	spr(1,60,60,1,1,false,false)
end

function _draw()は、PICO-8に画面を描き換え続けさせる命令です。
function _draw()からendまでの間の命令を、通常1秒間に30回順に処理して、ずっと画面を書き換え続けます。
この場合、画面を白で塗り潰した後にスプライトを一つ表示する、というのを1秒間に30回繰り返します。
実行してみましょう。

コマンド入力が消えました。
描画内容が同じなためぱっと見わかりませんが、ESCキーを押すまで、PICO-8はこのプログラムを実行し続けています。
プログラムが動き続けているので、この状態でキー入力をすると、プログラムは、それを受け取っていろいろすることができます。

ESCキーを押してプログラムを止めたら、次は、カーソルキーでこのキャラを動かす準備をしましょう。