16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vim 2Advent Calendar 2020

Day 21

Vimで、Luaで、PICO-8で、ゲームを作る。

Last updated at Posted at 2020-12-21

バクダンくんだよ。
この記事はVim 2 Advent Calendar 2020の21日目の記事ですよ。

PICO-8とは

唐突ですが、アナタはPICO-8というものを聞いたことがあるでしょうか。

PICO-8とは、128x128pxの固定16色ディスプレイ、上下左右○×の6ボタンコントローラー、ソフトウェアのソースコードは32KBまで……といった制約の下で動く、レトロ感あふれる空想上のゲーム機です。お値段はほぼ15ドル。

公式サイトのGIF↓
公式サイトのデモ
ゲーム機とは言っても、実際にはWindows/Mac/Linux/Raspberry PiといったPC上で動くソフトウェアなので、ゲームエンジンと言って良いでしょう。
PCの上で仮想的なゲーム機を立ち上げ、そのゲーム機の中でプログラミング・お絵描き・マップ作成・作曲ができ、作ったゲームをそのまま遊べちゃう、それがPICO-8です。作ったゲームはスタンドアローン版に固めて売ることだってできちゃいます。

解像度やリソース容量などなかなか厳しい制約があるので、ゲームの本質的な面白さを考えることに集中でき、プロトタイピングなんかにもおすすめです。激ムズ2Dプラットフォーマーとして有名なあのCelesteも、初めはPICO-8のソフトとして作られていたんだとか。1

PICO-8版Celeste↓
PICO-8版Celeste
あ、自分で作らなくても、PICO-8のBBSで大勢の人がゲームを公開しているので、web上で遊んだり、PICO-8内蔵のブラウザでソフトをダウンロードして遊んだり、ソースコードを覗き見たりもできますよ。

ちなみに、PICO-8に影響されて作られたゲームエンジンもいくつかあり、Pythonがお好きな方にはPyxelというものがあります。Pythonの力で自由度を増したPICO-8といった感じで、開発者が日本人の方なので日本語で質問することもできます。

VimでPICO-8

さて、上で書いた通り、PICO-8のソフトはPICO-8上でプログラミングするのですが、いかんせん128x128pxのコンソールなので見える範囲が狭く、ちょっとプログラムが大きくなってくるとやっぱり無理が出てきます。

というわけでみんなだいすきVimの時間。

PICO-8はLua(独自拡張あり)でプログラミングでき、サウンドやグラフィックなどのデータと共に単一のテキストファイルにまとめられて「カートリッジ」と呼ばれるものになります。
PICO-8内でfolderコマンドを実行するとカートリッジが保存されているフォルダをOSのファイラで開くことができます。拡張子は.p8
これらのファイルをpico8ファイルタイプとして認識し、便利な機能を提供するVimプラグインを作りたくなります。ますね。ました。

PICO-8.vim

https://github.com/Bakudankun/PICO-8.vim
PICO-8.vim
(カラースキームはmarkbahnman/vim-pico8-colorです)

以下、このプラグインを入れると何がうれしいのか紹介していきます。
もちろん各機能はオプションでそれぞれ切ることもできるのでご安心を。

シンタックスハイライト

さっきのとおり、PICO-8のカートリッジには独自拡張されたLuaのプログラムに加え、グラフィックデータなどが一つのファイルにまとめられています。このプラグインはLuaのシンタックスを拡張することでこれらによる問題が出ないようにしています。ついでにfold-syntaxにも対応しているので、'foldmethod'syntaxにしておけばいい感じに折り畳まれてくれます。

PICO-8風コード表示

PICO-8と同じようにTab幅を1にしたり、32文字幅の目安として境界線(colorcolumn)を設定するおせっかい機能があります。
これでPICO-8上で表示しても見やすいソースコードを心がけることができます。

グラフィックデータの色付け

なんとグラフィックデータが色付けされちゃいます。つまり気合があればVimでお絵描きすることもできちゃう。
グラフィックデータが0~fの単純な羅列だったのでできた芸当ですが、結構重くなるので切ったほうがいいかも。
色付けの様子

絵文字入力keymap

PICO-8上では大文字を入力することができません。その代わり、ユニークで便利な絵文字が入力されます。
そして、(このプラグインを作り始めるまで知らなかったのですが)Vimにはkeymapという、端的に言えばインサートモードのマッピングをまとめて切り替える機能があります。
これを利用して、大文字をタイプするとPICO-8と同じように絵文字が入力されるkeymapをつけてみました。PICO-8では⬆️⬇️⬅️➡️などが各ボタンを表す定数として定義されているようなので便利かも?

開いているファイルを実行する:Pico8Runコマンド

もちろんあります。今開いている.p8ファイルをPICO-8で起動するコマンドを用意しました。printh()で出力したログもしっかり見ることができます。
なお、これを使うには変数g:pico8_config.pico8_pathにpico8実行ファイルへのパスを設定する必要があります。

TODO

  • 本当はPICO-8のリファレンスを簡単に参照できるようにしたいけど面倒そうで放置中

ファイルタイプの追加などについてもう少し掘り下げて色々解説しようかとも思ったのですが、わりと誰得な感じになりそうだったので端折ります。気になったらリポジトリを覗いてみてください。

  1. PICO-8のフォーラムにて、web上で遊べるやつが公開されています。

16
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?