Bitsy入門：小さな物語ゲームを作るツール

Bitsyでできることとできないこと

Bitsyの画面は大きく3つに分かれています。左に現在の部屋の編集エリア、中央にプレビュー、右にグラフィックエディタです。すべてがブラウザ上で完結しており、インストールは不要です。

できること：

• タイルを並べて部屋を作る（16×16ピクセルのチップを組み合わせる）
• スプライト（NPCや主人公）を配置し、触れたときのダイアログを設定する
• アイテムを置いて拾えるようにする
• 複数の部屋を出口でつないでマップを広げる
• 背景色と前景色を部屋ごとに変える
• HTMLとして書き出してブラウザで配布する

できないこと：

• 数値的なステータス、HP、経験値の管理
• 横スクロール・ジャンプなどのアクション操作
• 音声・BGMの組み込み（標準機能では非対応）
• 解像度の変更（標準は128×128ピクセル固定）
• 条件分岐の複雑なフラグ管理（基本機能では変数がほぼ使えない）

この「できないこと」の多さに驚く方もいるかもしれません。しかしBitsyで作られた作品のほとんどは、この制約の中で詩的な世界観や個人的な記憶を語る短編として完成しています。itch.ioにはBitsy製の作品が数千本以上公開されており、「短い散歩のような体験」を作るジャンルとして定着しています。

エディタの基本操作：最初の30分でやること

Bitsyのエディタはブラウザで「Bitsy」と検索するか、制作者Adam LeDoux氏の公式ページから開けます。初めて開いたときにはサンプルプロジェクトが読み込まれているので、まずそれを動かして感触をつかむとよいです。

グラフィックの描き方

タイル・スプライト・アイテムはすべて同じ8×8ピクセルのドット絵エディタで描きます。1マスをクリックすると塗られ、もう一度クリックすると消えます。色は「背景色」と「前景色」の2色だけです。細かく描き込もうとせず、シルエットで何を表しているかわかる程度を目標にするのがBitsyらしい作り方です。

アニメーションは2フレームまで設定できます。タイルエディタ上でフレームを切り替えながら描くと、ゆらゆらと揺れる水面や点滅するランプが作れます。

部屋の構成

タイルを選んで部屋をクリックすると配置できます。壁として使いたいタイルは「壁」属性をオンにしておくと、プレイヤーがそこを通れなくなります。部屋の端に出口を設定すると、別の部屋への移動が生まれます。

NPCの配置はスプライトタブから行います。配置後にダイアログ欄にテキストを入力するだけで、プレイヤーが近づいて話しかけたときのセリフが完成します。改行は自動的に折り返されます。

書き出しと確認

右上メニューの「download game」を選ぶとHTMLファイルが書き出されます。ブラウザで開けばすぐにプレイできます。このHTMLは単体で動くので、ファイルを共有したりプラットフォームに投稿したりするのに適しています。

物語を作るための設計の考え方

Bitsyで詰まりやすいのは、操作を覚えた後の「何を作るか」という段階です。機能が少ない分、作る前に物語の輪郭を決めておくと進めやすくなります。

部屋数と文字数を先に決める

Bitsyの作品は部屋数が3〜8程度の短編が多いです。「5部屋、各部屋にNPCかアイテムを1つ、最後の部屋に結末のテキスト」というシンプルな骨格を最初に決めると、全体量が見えてスコープが膨らみません。

歩くルートに意味を持たせる

Bitsyの体験はほぼ「歩いて読む」行為です。左から右へ移動するだけで時間の経過を表したり、行き止まりに重要なセリフを置いたり、広い空間に一人だけNPCを配置して孤独感を出したりと、空間の配置そのものが演出になります。

ダイアログで語りすぎない

1つのNPCやアイテムに長い文章を入れると、ゲームの流れが止まります。1〜3文で場面や感情の断片を置き、残りをプレイヤーの想像に委ねる書き方がBitsyの作品によく合います。

ハックと拡張：標準機能を超えたいときの選択肢

Bitsyの機能に物足りなさを感じたら、「Bitsy hacks」と呼ばれる有志製のJavaScriptスニペットが広く使われています。書き出したHTMLに数行を追加するだけで、BGMの再生、変数によるフラグ管理、ダイアログ中の条件分岐などが実装できます。

また「Borksy」はBitsyハックをGUIで管理できるツールで、コードを直接編集しなくても機能を追加しやすくなっています。これらのツールはitch.ioやGitHubで公開されているので、必要に応じて探してみてください。

ただし拡張を入れるほど動作確認とデバッグの手間は増えます。最初の1〜2作は標準機能だけで完成させ、「これは標準ではどうしても無理」という具体的な問題が出てから拡張を検討する順序がおすすめです。

完成したゲームを届けるまで

書き出したHTMLは単体で動くブラウザゲームです。HTMLファイルをZIPにまとめてアソバースに投稿すると、ブラウザ上でそのままプレイできる形で公開できます。ゲームのテーマや雰囲気がわかるタイトル画面を最初の部屋に作っておくと、プレイ前に作品の空気感が伝わりやすくなります。

公開前に別の端末・別のブラウザで動作確認をしておくことも重要です。Bitsyは基本的にモバイルのタッチ操作にも対応していますが、部屋の出口やNPCの配置によっては操作しにくい場面が生じることがあります。

次の行動

まずBitsyのエディタをブラウザで開き、サンプルプロジェクトを3分歩いてみてください。次に「3部屋・NPC2体・アイテム1個」だけで作る最初の短編を1日で完成させることを目標にすると、道具の感触をつかむのに最も近道です。完成したHTMLはアソバースに投稿して、実際にブラウザで動く状態を確認してみてください。

参考資料

• Bitsy公式エディタおよびドキュメント（Adam LeDoux）
• Borksy（Bitsy hacks管理ツール、itch.io公開）
• Bitsy hacks リポジトリ（GitHub、Sean S. LeBlanc）