Playload研究ノート #1 Playloadの画面は「文字のマス」と「動くキャラ」でできている

Last updated at 2026-11-10Posted at 2026-11-02

はじめに

はじめまして、haruka_apps です。Qiita への投稿はこれが初めてです。

kitao さんが作られた、3KB の URL で遊べるゲームエンジン Playload で、10日ほど作品を作りながら、いろいろなことを調べてきました。作っている途中でつまずいたことや、試してわかったことを、これから Playload を触る方の参考になればと思い、シリーズにまとめることにしました。

Playload そのものの紹介は、kitao さんご本人の記事がいちばん詳しいので、まだの方はそちらを先にどうぞ。

この記事の内容は Playload 0.9.5 時点 のものです。今後のバージョンで変わる可能性があります。
調べものや検証は AI と一緒に行いました。記事の内容は、私が確認したうえで書いています。

シリーズ目次

この記事でわかること

Playload の画面がどんな部品でできているか
それぞれの部品の「1フレームに使える量」と、超えたときに起きること
3KB（3,000バイト）の数え方と、音の小さな落とし穴

画面は「文字のマス」と「動くキャラ」でできている

Playload の画面（160×144ドット）は、昔のゲーム機と同じ考え方でできています。

上の画面に、8×8ドットごとの区切り線を重ねると、こうなります。

文字や木（🌲）、お城（🏰）は区切り線にぴったり収まっています。一方で、👾 👻 🛸 は区切り線に関係なく、好きな位置にいます。この2つが、Playload の画面の基本の部品です。

部品	使う命令	できること	1フレームに使える量
文字のマス	`put` / `scr`	20×18＝360マスに、文字を1つずつ置く。マスごとに文字の色と背景の色を選べる	制限なし（毎フレーム全部書き換えてもよい）
動くキャラ（スプライト）	`spr`	1ドット単位の好きな位置に文字を描く。色は1色で、残りは透明	128文字まで
自作文字（PCG）	`pcg[文字].pat` / `.col`	文字の形（8×8）や色を書き換える。書き換えた形は次のフレーム以降も残る	1 フレームに書き換えられるのは 256 バイトまで。形を丸ごと書き換えると 1 文字 8 バイト（32 文字ぶん）ですが、1 行だけなら 1 バイトなので、行単位なら 32 文字より多く書き換えられます。色（col）の書き換えも同じ 256 バイトに入ります。1 回の実行で書き換えられる文字は 256 種類までです。

コードにすると、次のような形です。

let x = 0;
function tick() {
  cls(1);                            // 画面を消す（背景は1番の色）
  put(0, 0, 'SCORE 00120', 7, 0);    // 文字のマス：0列0行目から、白い文字・黒い背景
  spr(x, 100, '👾', 5);              // 動くキャラ：ドット単位の位置に、緑の👾
  x = (x + 1) % 160;
}

上限を超えるとどうなる？

上限を超えても、エラーは出ません。そのかわり、画面にノイズが出ます。

動くキャラを200個描いた場合

128個目までは普通に描かれます。129個目以降は描かれず、その近くに8×8ドットのノイズが出ます。

自作文字を1フレームに40文字書き換えた場合

256バイト目までは書き換わります（形を丸ごと書き換えるなら32文字目まで）。受け付けられなかった1バイトごとに、横1本のノイズ線が出ます。

スプライトの超過と自作文字の超過は、それぞれ1フレームぶん待たされるので、動きも重くなります。両方を同じフレームで超えると、2フレームぶん待たされます。詳しい仕様は、公式リポジトリの資料にまとめられています。

つまずきやすいところ

私が実際につまずいたところを挙げます。

同じ形を書き直しても数えられる
形が変わっていなくても、書き込めば1回と数えられます。毎フレーム全部の自作文字を書き直すのではなく、形が変わった文字だけ 書き換えます。
色の書き換えも同じ枠を使う
pcg[文字].col の書き換えも、形と同じ256バイトの枠から使われます。
起動時の書き換えも、最初のフレームの枠を使う
tick() の外（起動時に1回だけ動く部分）で書き換えた分も、最初のフレームの256バイトに含まれます。起動時にたくさんの文字を作りたいときは、数フレームに分けて作ります。
1回の実行で書き換えられる文字は256種類まで
1フレームの量とは別の上限です。毎回ちがう文字を使い捨てていると、途中から書き換えられなくなります。使う文字を決めて、使い回します。
読むだけなら数えない
pcg[文字].pat を読むだけなら枠を使いません。内蔵の文字の形を読み出して利用することができます。
動くキャラは描いた順に数える
先に描いたものから128個が残ります。自機や敵の弾など、消えると困るものから先に描きます。文字列で spr すると、1文字ずつ数えられます。

3KB（3,000バイト）の数え方

Playload のコードは、ブラウザが圧縮したあとの大きさ で3,000バイトまでです。エディタには「Payload 2.95 KB / 3 KB」のように、今の大きさが表示されます。

ここで気をつけたいのは、同じコードでも、ブラウザによって圧縮後の大きさが変わる ことです。圧縮はブラウザ自身が行うためです。

下は、私が作った「3D REVERSI」の同じコードを、Chrome と Safari のエディタで開いたときの表示です。

↑ Chrome：3.04 KB。「Code exceeds 3 KB compressed.」と表示されます。

↑ Safari：2.98 KB。収まっています。

3,000 バイトを超えると、このエラーが出て、共有用の URL が作られません。Safari だけで確認していると、Chrome で開いた人には「超えている」扱いになってしまいます。

違いはたまたまではありません。Chrome の圧縮は 3 バイトだけの繰り返しを見つけにくいため、同じコードでも Chrome の方が大きくなることがあります（差は作品によって 0〜数十バイト）。だから、Chrome と Safari の両方で確認し、大きい方で 3,000 バイト以内に収めるのが安心です。

なお、エンジンのソースを見ると、以前は 3,072 バイトまで許されていた名残で、そこまでの大きさの URL は今も読み込めるようになっています。ただし、これは昔のリンクのための猶予です。新しく作るものは、Chrome と Safari の両方で 3,000 バイト以内 に収めておくのが安心です。

音の小さな落とし穴

音は play(チャネル, '楽譜の文字列') で鳴らします。書き方は kitao さんの記事にある通り、ZX Spectrum 128 の PLAY 命令がもとになっています。ここでは、私がつまずいた点だけを挙げます。

テンポ（T）は、チャネル0に書いたものだけが効きます
テンポは全チャネル共通です。チャネル1や2に T を書いても変わりません。
ミキサー（M）は全チャネル共通です
M は「どのチャネルで音（トーン）とノイズを鳴らすか」の設定です。最後に送った値で、全チャネルが切り替わります。たとえば効果音に M を書くと、BGM のドラム（ノイズ）が消えることがあります。効果音にも BGM と同じ M の値を書くと安全です。値は、チャネル0・1・2のトーンがそれぞれ 1・2・4、ノイズがそれぞれ 8・16・32 で、使うものを足し合わせます（はじめは7＝トーンだけ）。
play は、そのチャネルの音を置き換えます
同じチャネルで効果音を鳴らすと、BGM が止まってしまいます。BGM と効果音は、チャネルを分けて使います。
ノイズとエンベロープは、3チャネルで1つを共有しています
どこかのチャネルで設定を変えると、ほかのチャネルにも影響します。

おわりに

Playload の画面は、

毎フレーム自由に書き換えられる 文字のマス
1フレーム128文字まで描ける 動くキャラ
1フレーム256バイトまで書き換えられる 自作文字

の組み合わせでできています。この上限の中で工夫するのが、Playload の楽しいところだと思います。

次回は、自作文字をほとんど使わずに細かい絵を描く方法と、自作文字を上手に使うコツを紹介します。

Playload で作られた作品は、こちらのアーケードで遊べます。私の作品も載せていただいています。

最後まで読んでいただき、ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up