ゲーム制作 PICO-8 再入門

2024年7月7日 16:24

ちょっとワケあって、PICO-8を復習することになりました。キャラクターを効果音付きで上下左右に操作するデモ作りを、サクッと実演できるようになるのが目標です。しかしPICO-8、以前少しだけ使ってたのですが、もうすっかり忘れてしまいました。

PICO-8インストールして使い方思い出すぞ。これはそんな記事。

【注意】
この記事は、多分わりと用語が間違ってます。勘違いも多いと思います。
ごめんよ。

ダウンロード

公式サイトから購入してダウンロードします。

以前買ったけど、ファイルをどこかになくしちゃったよ、という場合は、Humble Bundleにログインすると、購入履歴から再ダウンロードできます。よかった。

インストール

zipを解凍して適当なフォルダに配置します。
<C:\Apps\pico-8>

pico8.exeをダブルクリックすると「ピンピコリーン」と立ち上がります。いきなりフルスクリーンになって戸惑いますが、Alt+Enterを押せばウィンドウモードになります。タスクバーにピン止めしておきましょう。

ユーザーデータは次のフォルダに保存されるようです。
<C:\Users\ユーザ名\AppData\Roaming>

大局的な操作

Alt + Enter: ウィンドウ/フルスクリーン切り替え
ESC: コンソール画面を出す/消す
ウィンドウ端をドラッグ:
　　ウィンドウサイズ変更。
　　できるだけドットバイドットを保つようです
半角/全角:
　　押してはダメです。
　　IMEモードでは文字が打てません。

エディター

●コンソール画面
↑↓　ESCで切り替え
●エディター画面
　画面右上のアイコンクリックで切り替え（※）
　・コードエディター
　・スプライトエディター
　・マップエディター
　・SFXエディター
　・音楽エディター
　※：Alt+←→でも可能

コンソール

エディタによるワークの編集以外のほとんどの操作は、コンソール画面で行います。CUIです。

HELP

HELPコマンド（引数無し）で簡単な操作ガイドと、HELPの使い方が出ます。

HELP 6大トピック
HELPとだけ打つと、この6つのトピックを教えてくれます。

HELP GFX  <- 描画関係のAPI
HELP DATA  <- 生データ操作/文字列/テーブル関係のAPI
HELP AUDIO  <- 音楽と効果音関係のAPI
HELP SYSTEM  <- 実行/保存/アプリへのコールバック/入力取得関係のAPI
HELP MATH  <- Math関係のAPI
HELP LUA  <- LUAの基礎

これらのトピックの中で、さらに詳しく知るための
キーワードか案内されているので、どんどん深堀りしていけます。

HELP
↑↓
HELP 6大トピック
↑↓
HELP 詳細キーワード

HELPを起点に学習できます。

カートリッジ

PICO-8は、カートリッジのエディタであり、プレイヤーです。カートリッジは、ほかのツールでいうところの、プロジェクトやビルドに相当します。
ファイルの拡張子は.p8で、この中にスクリプトも絵も音楽も含まれます。

PICO-8は常にどれか1つのカートリッジを編集している状態です。Pico8はカートリッジエディタなのです。PICO-8を起動した直後は、無名の新規カートリッジを編集中の状態です。カートリッジはLOADコマンドで切り替えます。もちろん、保存はSAVEコマンドです。

ロードしたカートリッジは、RUNコマンドでプレイすることができます。PICO-8はカートリッジプレイヤーでもあるのです。編集と実行がワンセットになってます。

ファイルシステム

コンソール画面では、Wndowsのコマンドプロンプトのように、ファイル一覧を見たり、操作したりします。

LS -- 今見てるフォルダのファイル一覧を表示
MKDIR MY_FOLDER -- フォルダを作成
CD MY_FOLDER -- チェンジディレクトリ（見るフォルダ移動）
CD .. -- 一つ上のフォルダに移動

コンソールからアクセスできるのはこのフォルダ下だけのようです。
<C:\Users\ユーザ名\AppData\Roaming\pico-8\carts>
cartsフォルダがルートフォルダになっています。外に出る手段があるかもしれませんが、基本このcartsの中です。
例えば、"MY_FOLDER"を作ったらこういうフォルダが作成されます。
<C:\Users\ユーザ名\AppData\Roaming\pico-8\carts\my_folder>

デモ

HELP（引数無し）を打つと、主要コマンド一覧の中にINSTALL_DEMOSというコマンドが含まれています。デモは重要ということです。

INSTALL_DEMOSコマンドを打つと、cats/の下にdemosフォルダが作られ、その中にたくさん.p8ファイルが現れます。
<C:\Users\ユーザ名\AppData\Roaming\pico-8\carts\demos>

これを実行するには、一度ロードする必要があります。ロードせずに実行する方法はありそうですが、ひとまず今はロードします。

ロードせずにRUNはできない
RUN /DEMOS/HELLO.P8

ロードしてRUN
LOAD /DEMOS/HELLO.P8
RUN

カートリッジの実行はESCキーで止めます。

参考とするデモ

いろんなデモがありますけど、この中でも、JELPIとWANDERが、おそらく一般的に広く期待されるゲーム像に近いと思います。
さらに、JELPIよりはWANDERのほうが比較的シンプルなゲームなので、WANDERを参考にして学習を進めていきます。

WANDERをLOADします。
LOAD /DEMOS/WANDER
スプライトエディターを開くと、猫ちゃん（わんちゃん？）とウサギさんが描かれています。草地と花、リンゴのチップセットも見えます。

WANDERのスクリプト

スクリプトエディタでスクリプトを編集できます。WANDERのそれは57行しかない小さなスクリプトです。これだけならなんとかなりそうですね。
pico8のスクリプトはlua（のサブセット）だそうです。luaはよくわかりませんが、頑張って読み解いていきます。

スクリプトの3つの要素
・グローバル変数 X, Y, DX, DY, F, D
・_DRAW()関数
・_UPDATE()関数

_DRAW()関数

_DRAW()関数はPico8から描画のたびに呼ばれるコールバック関数です。

function _draw()
	cls(1)
	
	-- move camera to current room
	room_x = flr(x/16)
	room_y = flr(y/16)
	camera(room_x*128,room_y*128)
	
	-- draw the whole map (128⁙32)
	map()
	
	-- draw the player
	spr(1+f,      -- frame index
	 x*8-4,y*8-4, -- x,y (pixels)
	 1,1,d==-1    -- w,h, flip
	)
end

Pico8 Demo WANDER ZEP著

最初にCLS()関数で画面をクリア（"CL"ear "S"creen）して、SPR()関数でスプライトを配置します。これだけなら、ゲーム作ってる人は、すぐピンとくると思います。
このゲームの使っているPico8的な機能として、背景がMAP()関数を使って描かれています。MAP()関数を呼ぶと、マップエディタで定義したマップが描かれるようです。このとき描かれる範囲は、事前に呼び出しているCAMERA()関数で指定しているようです。

_UPDATE()関数

_UPDATE()関数はPico8から1/30秒に1回呼ばれる関数です。

function _update()
	
	ac=0.1 -- acceleration
	
	if (btn(⬅️)) dx-= ac d=-1
	if (btn(➡️)) dx+= ac d= 1
	if (btn(⬆️)) dy-= ac
	if (btn(⬇️)) dy+= ac
	
	-- move (add velocity)
	x+=dx y+=dy
	
	-- friction (lower for more)
	dx *=.7
	dy *=.7
	
	-- advance animation according
	-- to speed (or reset when
	-- standing almost still)
	spd=sqrt(dx*dx+dy*dy)
	f= (f+spd*2) % 4 -- 4 frames
	if (spd < 0.05) f=0
	
	-- collect apple
	if (mget(x,y)==10) then
		mset(x,y,14)
		sfx(0)
	end
	
end

Pico8 Demo WANDER ZEP著

特に特別なことはやってないように思います。BTN()関数で入力をとって、プレイヤーキャラの座標を動かすだけです。ちなみに、ボタンを絵文字（⬅️とか）で記述するようですが、これはShift+U/D/L/Rで入力できるようです。）

このゲームの使っているPico8的な機能として、マップデータを使って、リンゴの取得判定をしています。HELP MGET/HELP MSETによると、これらの関数は、マップタイルの値をget/setできるようです。

また、SFX()関数で、リンゴ取得時の効果音を鳴らしています。

WANDERのスプライト

スプライトエディターで、WANDERのスプライトをのぞいてみます。

4ページあるうちの1ページ目だけが使われているようです。猫ちゃん（ワンちゃん？）とウサギさんのアニメパターン、草地と花とリンゴのマップパーツが描かれています。

猫ちゃんのタイルがインデックス1～4に相当するようです。SPR()関数で指定されていた数字と一致します。
ウサギさんの絵はゲーム中に出てきませんが、これはおそらく、スクリプトを改造して出現させてみてね、という意図で用意されているのだと思います。

WANDERのスプライト

マップエディターで、WANDERのマップをのぞいてみます。

マウスホイールでズームアウトして、手のひらマークのツールを使って表示領域をいい感じに移動させます。ゲーム中に出てくる2画面分の草地が現れます。

ためしに、鉛筆マークのツールを使って、追加のリンゴを配置してみます。RUNしてゲームを始めると、追加した分のリンゴが取れるようになっています。

WANDERのSFX

SFXエディターでWANDERのSFXを見て（聴いて？）みます。

画面左上の数字がインデックスのようです。インデックス0から2まで使ってありますが、ゲーム中では0の効果音しか使われていません。スペースキーで再生できます。効果音然として0と2に対して、1はジングル的に聞こえます。

画面左上のアイコンをクリックすると、SFXの表示形式を変えることができます。PCM的な波形表現のものと、コード（？）の羅列で表現するものがあります。後者はより音楽的な使い方なのだと思います。

WANDERの音楽

音楽エディターを開いてみます。

縦に4つ並んでいるのがトラック的なものだと思います。一番左のトラックに、SFXのインデックス1が割り当たっているようです。
ここら辺はよくわかりません。

WANDERの改造

WANDERを改造して、他の人が遊べるカートリッジとして出力しようと思います。

改造

・プレイヤーキャラを猫ちゃんからウサギさんにします。
・リンゴを取ったときの効果音を、未使用だった2番の音にします。
・マップにリンゴを増やします。

save usagi
run

改造したとおりに動いています。これでよし。

出力

プレイ中にF7キーを押して、スクリーンショットを取ります。（これ多分RAM上にあります。Pico8終了すると消えます。）これがカートリッジの見た目になります。

スクリプトの最初の2行、コメントアウトされた文字を書き換えます。これがゲームのタイトルになります。

-- usagi demo
-- by ppg

.PNGを付けて保存すれば、製品としての出力、いわばビルドが出来上がります。
SAVE USAGI.P8.PNG

やった！

このpngファイルは、先ほど撮ったスクリーンショットが乗っかっています。これ、ただの画像データではなく、透かしデータ（？）的なつくりになってて、ピクセルに乗ってるノイズのようなものにカートリッジの内容が埋め込まれています。すごーい。

なんか思い出してきました・・・！

以上です～～

この記事が気に入ったらサポートをしてみませんか？