今回の完成コード
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キーを押してプログラムを止めたら、次は、カーソルキーでこのキャラを動かす準備をしましょう。