PICO-8でゲーム制作を学ぶ(1)

PICO-8

[話者] ゲーム制作を学びたいんだって？

[合いの手] ゲームを作りたいんだよね。 プログラミングもしたいし、絵も音も自分で作りたい。

でも入門者だから、手軽に取り組みたいんだ。どういうツール使えばいい？

[話者] 有名なのはUnityとかUnreal Engineだけど‥‥。

[合いの手] 企業が使う大作ならともかく、個人で短時間で気軽に作るには、それらは大げさな感じがあるんだよね。開発環境インストールだけでも容量使うし。

個人向けのラクラク環境はないかなぁ。

[話者] PICO-8ピコ・エイトはどうだい？ PICO-8 ゲーム開発のススメ を読んでみると、これは学ぶのに最適だぞ。

図: PICO-8 ゲーム開発のススメ

[合いの手] レトロなドット絵ゲームを作る環境なんだね。どこらへんが学ぶのに最適なの？

[話者] 他人の作ったゲームを中身をまるごと、たくさん見れるんだ。 公式掲示板にたくさんゲームが投稿されていて、その中身を全部見れるから、参考になるぞ。

[合いの手] へぇ。でも有料じゃないか。

[話者] 2000円くらいだから、そう高くはないけどね。
でも、購入しなくても、

PICO-8 Education Edition for Web

で無料で使える。

[合いの手] 無料で使えるのか。どう使うの？

[話者] まずは、この入門記事を読み進めてみよう。

ブックマークレット

[合いの手] 開発入門(1)は単なる紹介だね。開発入門(2)は‥‥あれ、リンクを押しても飛ばない。

[話者] このページ、リンクや画像先のURLがまちがってて、うまく動作しないことがあるんだよね。

開発入門(2)へのリンク先URLは http://jp.automaton.am/devlog/technical/pico-8-for-beginners-vol2/ だけど、この
http://jp.automaton.am/ ã‚’
https://automaton-media.com に
書き換えすると、正しく動作するようになる。

[合いの手] え゛っ？　どうやって書き換えるの？

[話者] ブックマークレットというのを使えばラクだよ。といっても準備は面倒だが、

  1. 「︙＞ブックマークとリスト＞ブックマーク バーを表示」する
  2. ブックマークバーで右クリックして、「ページを追加」する
  3. 「そのブックマークで右クリック＞編集＞URL」に以下の1行をコピペする 
    javascript:(()=>{f=(s)=>s.split('http://jp.automaton.am/').join('https://automaton-media.com/');c=document.evaluate('.//img[@src]',document,null,6,null);for(i=0;i<c.snapshotLength;i++){c.snapshotItem(i).src=f(c.snapshotItem(i).src)}c=document.evaluate('.//a[@href]',document,null,6,null);for(i=0;i<c.snapshotLength;i++){c.snapshotItem(i).href=f(c.snapshotItem(i).href)}})();
  4. 開発入門(1)、開発入門(2)、... とページを開くたびに、そのブックマークをクリックする

これで書き換えることができるぞ。

図: ブックマークを編集

[合いの手] ほんとだ。リンク先に行けた。

開発入門(2)

[話者] このページでも、さっきのブックマークレットを1度クリックしよう。そうしないと表示されない画像があるから。

[合いの手] まちがえて2回押したら、何か問題ある？

[話者] 問題なし。何回押してもいいよ。

[合いの手] ふ～ん。

さて、PICO-8の無料版を使うぞ。

PICO-8 Education Edition

を開くと、PICO-8 の起動画面になってるね。

‥‥なるほど、
HELP
を表示して、
INSTALL_DEMOS
を実行して、
CD DEMOS
で場所を移動して、
LOAD JELPI
でゲームを読み込んで、
RUN
でゲームを開始。
カーソルキーと[z][x]で操作する。
[ESC]キーでゲーム中止、
さらに[ESC]キーでEditorModeになる。

図: ゲームを開始

[合いの手] SPLORE はスプローアという読み方でいいのかな？　そういう英単語があって、意味は「浮かれ騒ぎ」らしい。

[話者] この SPLORE という機能は、無料版では使えないから注意な。
SPLOREの読み方は‥‥PICO-8公式ページに

Explore the Cartverse （カートリッジ宇宙を探検エクスプローアしよう）
PICO-8 comes with a built-in cartridge browser called SPLORE,　（PICO-8は内蔵のSPLOREと呼ばれるカートリッジブラウザがあり、）

と書いてあるから、もしかしてエスプローアと読むのかも。

図: PICO-8公式ページより

[合いの手] あとはLuaルア言語の説明か。

PSET() で点を打ち、
LINE()で線を引き、
CIRCFILL()で円を、
RECTFILL()で四角を描く。
CLS()で全部消す。

なるほどね。

図: ESC押してEditorModeにしてソースコードを入力

図: ESC押してCommandModeにしてRUNで実行

[合いの手] この入力したソースコードを保存するには、どうやるの？

[話者] https://www.lexaloffle.com/bbs/?tid=47278 に説明があるが、

SAVE 20240325-1.P8.PNG
のように入力すれば、PNG画像ファイルがダウンロードされるぞ。

図: PNG画像ファイルをSAVE

図: 20240325-1.p8.png

この PNG画像ファイルは、ソースコードも含まれている。PICO-8で読み込めばソースコードも復活する。

（※）ただし、はてなブログに貼った画像は、ソースコードが読めなくなるようだ。

PICO-8で読み込むには
LOAD
と入力すれば、読み込むファイル選択ダイアログが出てくる。

図: 読み込む