訳注：これは https://www.shimmerwitch.space/bitsyTutorial.html の参考訳です。Bitsyのバージョン更新により、UIや説明などが古くなっている箇所があります。訳出に際しては公式に許諾を得ました。Bistyの特徴については下記記事が詳しいのでご参照ください（参考：専門知識不要のゲーム制作ツール「Bitsy」は、ゲームづくりの実験場を生んだ)
(このチュートリアルは現在、Zitao Yeによる中国語訳もあります。こちらをご覧ください)
Bitsyとは？
Bitsy は Adam Le Doux 氏によって作られた itch.io 上のウェブベースのゲーム制作ツールで、https://ledoux.itch.io/bitsy で入手できます。
このツールには活発なコミュニティがあり、短い個人的な物語から複雑なファンタジー世界の探検まで、何百ものゲームが作られています。
このツールは、その制約のために、人々にとても愛されています。限られたカラーパレット、小さなピクセルキャンバス、シンプルなメカニックによって、ゲームの中で非常に集中したアイデアや思考を実現することができます。ピクセル、単語、色の決定一つ一つに重みがあり、他のノイズがない分、多くのことを伝えられます。もっとも8×8ピクセルのグリッド上で配置可能なタイルには、1.8446744×1019もの可能性があります。それは本当に限られたことなのでしょうか？
また、コーディングは一切必要なく、超簡単で満足のいく使い方ができます。表現力が豊かなので、基本的にどのBitsyゲームもデフォルトで完全に魅力的なものに仕上がっています。
Bitsyでどんなものが作れるの？
Bitsyは、短いシナリオのゲーム、かわいらしいゲーム（個人的なものなど）、小さなアドベンチャーゲームの制作にとても適しています。手始めに、あなたの人生で物語を作りたい出来事や場所を思い浮かべてみてください（訳注：アクションゲーム、シューティングゲーム、RPGなどの制作には向いていません……多分）。
もしインスピレーションが必要なら、itch.ioにたくさんの素晴らしいBitsyゲームがあります。Lorenzo Piliaは、定期的に更新されるBitsyゲームの本当に素晴らしいリストを作りました。このチュートリアルの最後に、私自身のお気に入りのリストも載せています。
このチュートリアルを書きながら作ったゲームは下記で、コンピュータを使っている場合は下に埋め込んでありますが、itch.ioにもあります。
訳注：こちらをクリックするとプレイできます。リターンキーを押して始めましょう。上下左右にカーソルキーで移動できます。
前書きはもういい、Bitsyでゲームを作るにはどうしたらいいんだ!
いい質問ですね！ まず、https://ledoux.itch.io/bitsy をクリックしましょう。
はじめに、この画面が表示されます（訳注：クリックした後に「RUN」ボタンを押しましょう）。
いろいろなパネルを見て回り、「about」セクションを展開するのには、少し時間がかかるでしょう。
ページの一番上に、「Write your game’s title here（ここにあなたのゲームのタイトルを書いてください）」というテキストがあります。これはあなたのゲームのオープニングテキストになるので、後でどんなゲームになるか、はっきりしたら変えたくなるかもしれません。今は仮のものに変えてみて、ゲーム中にどう表示されるかを確認してみてください。
この隣に「tool」ボタンがあるので、これをクリックして他のオプションを確認します。
次に、「room」パネルに戻り、「play」ボタンを押して、ゲームの中を歩き回り、Bitsyの基本的なゲームがどのように動くか見てみましょう! すぐに、今入力したタイトルが表示されます。
ゲームの主な要素は以下の通りです。
- アバター：プレイアブルキャラクター。矢印キーで歩き回ったり、他のキャラクターが何を言っているか見ることができます。
- タイル：非インタラクティブな風景で、歩くことのできない壁タイルとして設定できます。
- スプライト：インタラクティブな風景とノンプレイヤーキャラクターで、対話が可能です。
「Stop」ボタンを押してプレイモードを終了し、ゲームの編集を続けてください。
（訳出：この3機能がBitsyのほぼすべてです。裏を返すとBistyでは変数を使ったり、変数の値に応じて条件分岐を作ったり、同じ作業を繰り返したりすることができません。また、2バイトコードの文字をダイアログで表示させることができません→日本語フォントに対応しました）
「tools」ボタン→「settings」ボタン→「language」メニューで「日本語」を選択すると、UIが日本語表示になります。次に「フォント」メニューで「Unicode Asian」を選ぶと（通常は自動的に選択されます）、ダイアログで日本語が表示されるようになります。
ピクセルを描こう
キャラクターを描いてみましょう。「paint」ツールが開いていることを確認してください。もし、見えなければ、「tool」メニューを開いて、それが選択されていることを確認してください。ツールパネルをたくさん開いている場合は、メインスクリーンでドラッグして並べ替えることができます。
ペイントツールの「avator」セクションでは、各四角をクリックしてオン・オフを切り替えることで、デフォルトのキャラクターを編集することができます。私は実物そっくりのリアルな自分をアバターに描くことにしました（訳注：ジョークです）。皆さんも自由に好きなものを描いてください。「room」パネルのアバターが自動的に更新されるのがわかると思います。ピクセルのガイドラインのためにグリッドのオンとオフを切り替えてください。
続いて「animation」をクリックすると、アバターが点滅し始めます。最初の2フレームによるBitsyアニメーションの始まりです。
2番目のフレームをクリックして編集すると、他のフレームが淡くオーバーレイして表示されます。これは、単純なアニメーションで1ピクセルか2ピクセルだけ編集したい場合にとても便利です。8×8グリッドであっても、とてもクールなアバターのデザインができます。最も重要な特徴は何ですか？ キャラクターを定義するものは何でしょうか。適切な文脈であれば、1〜2ピクセルで表現できることは意外と多いんですよ。でも今は、ハイ！と手を振るだけでいいんです。
部屋に追加するため、もう少しタイルを描いてみましょう。
「paint」パネルの「tiles」タブをクリックします。アバターを編集したのと同じようにデフォルトのタイルを編集すると、ルームパネルで自動的に更新されるのがわかると思います。
新しいタイルを作るには、タイル画像の下にある「＋」マークをクリックします。新しいタイルが表示されるので、好きなように編集してください。作ったタイルを切り替えるには、編集エリア上にある左右の矢印をクリックします。ここで虫眼鏡をクリックすると、「図面の検索」パネルが開いて、タイルのグリッド付きリストが表示されます。
部屋のタイルは、タイルのピクセルを編集するのと同じように機能します。タイルをクリックすると削除され、もう一度クリックすると、現在選択しているものが「find drawing」パネルに配置されます。
「paint」ツールでは、タイルの複製や削除、アニメーションの追加も可能です。
いろいろな種類のタイルを作って、お部屋に配置してみましょう (クリック＆ドラッグが便利です）。最後に「walls」ボタンで、タイルを通行不能にすることができます。重要なのは、壁のオン・オフは、「for all rooms」を選ばない限り、1つの部屋にしか適用されないということです（ですから、突然ゲームの中で壁を通り抜けられることに気づいたら、まず最初にそれを確認することです！）。
今すぐゲームをプレイして、歩き回ったときの感触を確かめてみてください。
現在、私のゲームは、私が何もない部屋にいて、猫に話しかけています。このアイデアは嫌いではありませんが（正直、今はとても魅力的に思えます）、私が作りたいゲームのために、少し変更を加えるかもしれないと考えています。
スプライトを編集するには、「paint」パネルの「sprite」タブに移動します。デフォルトの猫を編集するか、それを保存して新しいスプライトを作ると、タイルと同じように「find drawing」パネルに表示されます。新しいスプライトを作成し、表示させたいテキストを追加してください。
表示させたいタイルの部屋をクリックします。注意点としては、1つのグリッドに1つのスプライトしか置けないので、他の場所をクリックすると、前の場所におかれたスプライトが消えて、新しくクリックした場所に表示されます（つまり、同じスプライトを複数のグリッドに置きたい場合は、スプライトを複製して、グリッドごとに別々のスプライトを置かなければならないことも意味します）。
「find drawing」パネルを開いてアバターを選択し、部屋の中の好きな場所をクリックすると、アバターの開始位置が変更されます。新しいスプライトを追加したら、もう一度ゲームをプレイしてみましょう。スプライトのところまで歩いていくと、テキストが表示されますよ。
ヒントです。新しいroomを作って、まっさらな画面に圧倒されたら、本当にシンプルなタイル（1色だけでも）を作って、部屋の大まかなレイアウトをブロックしてみましょう。例えば、プレイヤーが歩く道や重要なオブジェクトや風景の位置などを示してみましょう。そして、少しずつタイルを貼り替えていき、ちょうどいい感じになるまで調整していくといいでしょう（複数のタイルで構成された風景も、この方法で作っています）。
出口（exits）
あなたのroomが私のroomと同じようであれば、どこかにつながっている必要があるようです。しかし、「exits」（roomとroomの移動）はBitsyの核となる要素の1つであり、このツールの中で最も興味深く探求される部分の1つだと私は考えています。
基本的なところから始めるとして、まずはプレイヤーがこのroomの端から新しいroomに入っていけるようにしましょう。
roomの下にある「room tools」タブをみてください。ここにはいくつかの便利なナビゲーションとビューツールがあり、探索する価値があります。「grid」ボタンはタイルグリッドのオンとオフを切り替えます。「walls」ボタンは「wall」としてマークされたすべてのタイルのマスクを表示し、コリジョンゾーンを素早くチェックするのに非常に便利です。新しい部屋を作るには、「+」ボタンを使うか、タイルの配置を保存したい場合はその隣にある「duplicate」ボタンを使ってください。新しい部屋が表示され、左右ボタンでroom間を行き来できるようになりました。
まずはexitを設置して、その動作を確認してみましょう。配置を変更したり、削除したり、後から追加したりすることも可能です。
Bitsyの上部にあるツールメニューで、「exits & endings」が選択されていることを確認します。Room 0に戻り、「exits & endings」パネルで「place new exit」をクリックします。部屋のミニビューが表示され、すべての部屋のドロップダウンリストが表示されます。必要な部屋を選択し、ミニマップのexitをクリックします。
exitは、アバター用のテレポーターと考えるとよいでしょう。exitは、同じ部屋の中であっても、どこにでも行くことができます。また、私の知る限り、exitの数は無制限です。exitを設置したら、ゲームをプレイしてその効果を確かめてください。
exitを編集するには、ルームパネルでそのタイルをクリックして選択すると、ミニマップが再表示されるので、新しい場所をクリックするか、目的のタイルにドラッグして移動します。また、「exits」パネルの下部にある「delete selected exit」ボタンを使って、選択した出口を削除することができます。慣れるまで、いくつかの出口の配置と編集を試してみてください。
exitを配置する際に考慮すべき点は、それがプレイヤーの向きにどう影響するかということです。右側のroomから出たと思ったら、次の画面の一番上に出てきた、なぜ急に進行方向が変わったんだ、と混乱するかもしれません。自分のアバターを探すのも大変です（私のゲームでも、そういうroomがいくつかありました）。でも もしかしたら、これがあなたの望む効果なのかもしれませんね。あなたのゲームは、迷ったり混乱したりすることをテーマにしていますか？ それなら、それを強調するのに最適な方法かもしれません。あるいは、プレイヤーがroomを変えたことにさえ気づかないようにしたいですか？
exitに関するオプションはたくさんあり、それらがどのように使用されているかの素晴らしい例もあります（最後にいくつかのリンクを追加しますね。ここでは、長く話すことができるのです）。
また、ゲームを続けるためにexitを探さなければならないのはフラストレーションがたまるので、出口が実際にどこにあるかがわかるようにしてください（それがゲームの一部である場合を除きます）。
また、一方通行のゲームにしたくない場合は、前の部屋に戻るためのexitを置くことを忘れないでください!
3色しかないの？！
次のroom用にもう少しタイルを作る時期かもしれませんが、まずはカラーパレットについて説明します。どのように機能し、新しい部屋に取り入れることができるかを知っておいてください。
上部のツールから、「colors」が選択されていることを確認してください。編集可能な3色のパレットと、それらがゲーム内で表現するものが表示されます。デフォルトのパレットの編集を開始するか、このパレットを維持したい場合は、下部にある「パレット」セクションを開いて新しいパレットを追加し、代わりに新しいパレットを編集することができます。新しいパレットがゲーム内でどのように見えるかを確認するには、「room」パネルの下部にあるドロップダウンリストから、必要なパレットを選択します。1つの部屋に1つのパレットを設定できるので、3色という制限はそれほど厳密ではありません。色を選ぶときは、シーンの明るさ（暖色系か寒色系か）を考慮しましょう。暖色系か寒色系か、コントラストは強いか？ 背景色を一定にして、タイルの色の明るさを変えると、クールな効果が得られますよ。最後に、色使いの面白い例をいくつかリンクしておきますね。
もし行き詰まったら、http://colorschemedesigner.com/csd-3.5/ のようなウェブサイトで、配色を変えて遊んでみてはいかがでしょうか。また、https://twitter.com/colorschemez で面白い組み合わせを見ることができます。
ほぼ完成
スプライト、タイル、部屋、ダイアログをすべて追加したら、ゲームを終了させる方法が欲しいかもしれません（ただし、これはオプションです）。
「exits & endings」ツールを選んで、エンディングにしたいテキストを入力し、出口と同じように配置します。エンディングはいくつでも作ることができ、ゲーム中の好きな場所に置くことができます。
ゲームを最後までプレイして、自分の作品を鑑賞してください。
ゲームのダウンロードと保存
最後に、まだ説明していないツールがいくつかあります。ひとつは「record gif」パネルで、これはまさにその名の通りです。プレイモードで「start recording」ボタンを押し、録画したいシークエンスまで移動して、「stop recording」ボタンを押してください。動いている間だけ記録されるので、タイミングを気にする必要はありません。あとはgifファイルをダウンロードして、好きなように使ってください。
また、「download」パネルからゲームのhtmlをダウンロードすれば、itch.ioにアップロードできます（毎月のBitsy jamsに応募することもできます！）。
背景色を設定したり、ゲームのエクスポートサイズを設定することができます（ほとんどの場合、512pxでうまくいきます）。
「game data」パネルでは、ゲームのテキストバージョンを見ることができます（私はいつも新しいプロジェクトを始める前に、念のためテキストファイルにコピー＆ペーストしています）。興味があれば、このデータに目を通してみてください。ここで作業したすべての決定項目が見られますよ。
もっとゲームを作りたい!
もしあなたが自分のゲームに満足し、ダウンロードと保存が完了し、次に進む準備ができているなら、「new game」ボタンで新しいゲームを始めましょう! ページを更新したり、ブラウザを閉じたりすると、作業中のBitsyゲームの最新版が開かれます。しかし、一度新しいゲームを始めると、ゲームデータを保存していない限り、ゲームを元に戻すのは簡単なことではありませんので、次の段階に進めるかどうかを確認し、準備ができたら、早速作ってみましょう
チュートリアル用ゲームデータ
このチュートリアルを書いている間に作ったゲームのデータをここに置いておきますので、遊びたい人はどうぞ (ただし、これを行うには大量のスプライトを複製する必要があり、1つの部屋に少なくとも4つの出口があるので、実際にはちょっと大変そうですが、でも、これは可能です) また、同じスプライトが80個ほど並んでいますが、これはカラーパレットの部屋用です）。
さらなるBitsyのヒント!
Bitsyの素晴らしいコミュニティが、Bitsyのファンメイド機能に関するTipsやHacksをWikiにまとめてくれました。
クールなゲームのクールな例
私が過去に特に楽しんだBitsyゲームの例（今日は2017年10月7日ですが、後日このリストに追加するのをどうしても忘れてしまいます……素晴らしい未来のBitsyゲームへの免責事項として）、自分のゲームについて考えるときに特にインスピレーションを受けたものをいくつか挙げたいと思います（訳注：いくつかリンク切れになっているURLもあります）。
面白い物語： https://rhythmlynx.itch.io/wip – 自伝で、私のチュートリアルゲーム https://arcadim.itch.io/local-network のインスピレーションとなったもの。
驚くべき部屋の遷移: https://seansleblanc.itch.io/rain – 遷移は空間だけでなく時間でも可能 https://saranomy.itch.io/ihadb – どのように作られているかを思い出すまでは、とてもシンプルに見えます。
面白いアバター: https://cephalopodunk.itch.io/silence-would-be-better – あなたはラジオです https://seansleblanc.itch.io/i-wonder – 人々の思考を聞く https://acgodliman.itch.io/tomb-raider – 考古学を発見する
視点: https://jctwood.itch.io/thirdcrypt – 一人称視点 https://night-driver.itch.io/day-in-the-life – 横スクロール https://rarelikeaunicorn.itch.io/penroses アイソメトリック
他のゲームジャンルの使用: https://tencow.itch.io/metrodungeon – 面白いバトルメカニズムがある https://joshavanier.itch.io/porte – クールなパズルゲーム！ https://ebeth.itch.io/slow-growing – 農作業シム！
オーディオの使用 https://triage.itch.io/waking-up-while-the-sun-sets – 美しいサウンドトラック https://candle.itch.io/no-destination – アンビエントサウンドエフェクト
美しいアート: https://itch.io/g/samkeeper/moth https://supiket.itch.io/tusanhomichi https://hyperstructure.itch.io/a-secret-bitsy-jam
Bitsyの実験: https://jctwood.itch.io/tunnel – ダブルBitsy!
「ワンルーム」ゲーム： https://seansleblanc.itch.io/running-late https://cephalopodunk.itch.io/zen-garden-portland
そして、もし興味があれば、私のゲームを https://claire1605.itch.io/ で見つけることができます。
また、https://twitter.com/shimmerwitch で私を見つけることができます。
また、この編集を手伝ってくれて、いくつかの素晴らしいアドバイスを加えてくれたMarkに感謝します!
そしてもちろん、Bitsyとそれを取り巻く素晴らしいコミュニティ全体を作ったAdamに感謝します!