【PICO-8入門(4)】キャラクタを表示して操作してみよう

この記事はPICO-8を使ってゲームを作りに挑戦する初心者向けの記事です。連載になっているので初回から見たい方はこちらからどうぞ。

▷ レトロ風ゲームエンジンPICO-8でゲーム作ってみよう

 

今回はキャラクターの画像を作ってそれを動かして遊んでみましょう。

画像の作成は付属の画像編集ツールで行います。

スプライトを作ってみよう

ESCキーを押してエディタ画面にして右上にあるアイコンの中から左から2番目を選んでください。

するとスプライト編集画面になります。

スプライトエディター

操作を簡単に説明すると下にある「画像エリア」の絵を描きたい場所を選んで、選んだ場所が「画像編集エリア」に表示されるのでそこでお絵かきします。編集している画像の番号が「画像番号」に表示されます。この番号をプログラムで使います。

右上にあるカラフルなのがパレットです。使える色はそれですべてです。それ以外の色は使えません。

それからPICO-8のお絵かきする絵の大きさの単位は8の倍数で固定されています。最小が8×8です。とりあえずこの最小の8×8でキャラクターを作りましょう。アニメーションもさせたいので4つほど横一列に作ってください。

あと画像エリアの左上端(0番)は空けておいてください。

アニメーションさせよう

適当に画像を描いたら次は表示してみましょう。

表示は簡単で「spr(画像番号, x, y,)」です。

で、これの画像番号を切り替えてアニメーションしているようにしてみましょう。

function _init()
  x = 60
  y = 60
  num = 1
  fcount = 0
end
function _update()
  fcount += 1
  if fcount > 32767 then 
    fcount = 0 
  end
  if fcount % 5 == 0 then 
    num += 1 
    if num > 4 then 
      num = 1 
    end
  end
end
function _draw()
  cls()
  spr(num, x, y)
end

そうすると↓のようにアニメーションします。

アニメーション

プログラムをさっくり説明すると、numという変数に画像番号が入っていてその数字を入れ替えることで画像が変わってアニメーションしているように見せています。

ただ、このnum変数の値が毎フレーム(update処理のタイミングね)数字を入れ替えているとアニメーションが速すぎるので(1秒間に30回変わるので)、fcountという変数を作ってフレームを数えさせて5回に一回だけにしています。

で、if文で「fcount > 32767」という条件がありますが、これはPICO-8での数値の最大値が32767.99だからです(それを超えるとマイナスの値になります)。なのでこの条件式がついています。(ただ、32767を超えたら0にするのは良くないね。0に戻るときに%5で0になるタイミングがずれるね。もうちょっと切りのいい数字でやるべき。記事読み返してて気づいた(^^;))

あと、「fcount % 5 == 0」という式は「fcountを5で割った余り == 0」という意味で「%」は「数字を割ったときの余りの値」を出します。今回の式では余りが0になるのは5の倍数の時だけなので5回に1回ということになるわけです。

あと、今回は使いませんがspr()関数はあと2つ引数を追加できるようになっていて、spr(番号, x, y, 幅, 高さ)という感じで幅・高さを追加できます。この幅高さは8×8の画像が何枚分かという意味です。16×16で作った画像の場合はspr(番号, x, y, 2, 2)となります。

キャラクターを操作しよう

では次にキャラクターを操作できるようにしましょう。

PICO-8は入力できるものが限定されている分非常に簡単に入力を扱うことができます。

ではさっそく作ってみましょう。

function _init()
  x = 60
  y = 60
  num = 1
  fcount = 0
end
function _update()
  fcount += 1
  if fcount > 32767 then 
    fcount = 0 
  end
  if fcount % 5 == 0 then 
    num += 1 
    if num > 4 then 
      num = 1 
    end
  end
  if btn(0) then
    x -= 0.3
  end
  if btn(1) then 
    x += 0.3
  end
  if btn(4) then 
    y -= 0.3
  end
  if btn(5) then 
    y += 0.3
  end
end
function _draw()
  cls()
  spr(num, x, y)
end

上のプログラムを入力して実行するとこんな感じになります。

操作

PICO-8での入力判定はbtn()関数で簡単に行うことができます。

入力には0~5の番号が割り当てられて

[0: 左][1: 右][2: 上][3: 下][4: z][5: x]

という風に各ボタンが割り当てられています。そしてbtn()関数の引数にこの数字を渡すと押されているときは「true」、押されていないときは「false」が返ってきます。これは真偽値と呼ばれるもので数字とは違う特殊な値です。

実はif文に使われている式(num > 4みたいなやつ)なんかもこの真偽値を返しています。で、それがtrueの時にif文は条件を満たしているとしてその中の処理を行うようになっています。なのでif(btn(0))はtrueかfalseが返ってくるので「== true」のような式が無くても条件判定がされるわけです。

色々変更して遊んでね

今回はここまで。

大雑把な説明だったけどまた自分で適当にいじくって遊んで覚えてください。

ボタン変更したり、画像増やしてみたり、大きい画像にしたりいろいろ試してみてね。

ではまた次回(‘ω’)ノ

次回 ▷ クラスを作って障害物をいっぱい作る

 

BOOTHでサンプルプログラム無料ダウンロードできます

BOOTHでこのPICO-8入門講座で紹介したサンプルプログラムをダウンロードできます。

今回の記事の最後のプログラムが「sample4.p8」という名前で入っています。

同カテゴリー記事

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

最近作ったゲーム