BB2021EditorはBB2021ブロック崩しを作成するためのエディタです。OSはWindowsのみ対応しています。
本稿ではBB2021Editorを使用してBB2021ブロック崩しを作成するための手順を説明します。
一部説明を省略している箇所があることをご了承ください。
BB2021Editor.exeを実行してください。
他のファイルはBB2021Editor.exeの実行に必要なファイルです。むやみに変更・削除をしないでください。
「⓪リソース登録」タブ内のプラスマークのボタンを押すことで、画像ファイルもしくは音声ファイルを登録することができます。
登録できるファイルは2種類あり、それぞれローカルファイル、外部ファイルと呼称します。
ローカルファイルを登録した場合、最終的に出力されるファイル中に画像のデータが埋め込まれます。このリソース登録が済めば画像ファイルに関するそのほかの操作は一切必要ありません。
外部ファイルを登録する場合、あらかじめ画像ファイルをHPなどにアップロードし、公開しておく必要があります。画像のURLをEditorのURL欄に打ち込み、「外部ファイル」ボタンを押すと画像が登録されます。
外部ファイルの登録処理では主に①外部ファイルURLの記録②URLからの画像のダウンロードを行っています。
①により、最終的に出力されるファイルにも外部ファイルのURLが記載されるようになり、ブロック崩しのゲーム起動時にURLから画像がダウンロードされます。
②により、Editor上で画像を観察できるようになります。
外部ファイルを使用することで、Editorから出力されるファイルは軽量化されます。ただし、ブロック崩しの起動時に画像ファイルをダウンロードするため、URLが無効になっていると起動できなくなります。ご注意ください。
！注意！ Editor上でURLが有効になっていても、いざブロック崩しにしてみるとURLが無効化されて画像のダウンロードがうまくいかない場合があります。このケースの場合、CORSというセキュリティ上の項目が関連している場合があります。サーバーの設定をご確認ください。
「①ゲーム編集」タブ内の「新しくステージを追加」ボタンを押すことで、新規にステージを作成することができます。
必要な数のステージを作成し、以下の手順で各ステージの難易度などのパラメータを調整してください。
画面中央下側のフォルダマークのボタンを押すことで、ゲームの前景用画像（ブロックと一緒に崩れるイラスト）と背景用画像（前景用画像が崩れることでだんだん見えてくるイラスト）を登録することができます。
！注意！ 下記ブロックの設定を済ませるまで前景用画像は画面上で見えません。画像が見えていなくてもゴミ箱ボタンが押せるようになっているならば正常に画像を登録できています。
画面右側のスライダーを動かすことで、ゲームエリアの縦横比、そしてゲームエリア内のブロックの個数を調整することができます。
！注意！ 必ず、次項のブロックの設定を行う前にこれらのパラメータを決定してください。これらのパラメータを変更すると編集したブロックの設定が破壊される場合があります。
！注意！ ゲームエリアの寸法は1:0.2から1:2.5範囲で変更することができます。ただし、ブロックの個数やボールのサイズによっては編集できる範囲が狭まります。
画面中央にグリッド上に配置されたブロックを選択し、画面右側の「選択中のブロックのタイプを変更（決定）」ボタンを押すことで、選択されたブロックのタイプを変更することができます。
ブロックを自動選択ボタンを押すことで、前景画像と背景画像の差分から自動で推定されたブロックが選択されます。この機能は登録されている前景画像と背景画像の画素数が一致する場合のみ使用可能です。
画面右側の各パラメータを変更することで、ゲームの難易度や配色デザインなどを変更することができます。
ゲーム起動時にパスワード入力を求めるための機能です。文字列を入力した場合、ゲームプレイ時に同じ文字列を入力しないとゲームを開始できなくなります。
この機能が必要ない場合は入力欄を空白のままにしてください。
！注意！ゲームデータを暗号化する機能ではありません。また、JavaScriptの知識を持つ方ならば容易にこの機能を突破してゲームをプレイすることができる点に注意してください。
ゲームクリア後に移動する先のページのURLを入力してください。
各ステージで共通の、背景画像よりさらに後ろに設定される画像を設定することができます。
ゲーム開始時のブロックの表示状態を指定することができます。ただし、これらのパラメータはゲームのプレイ中にも変更することができます。あくまで"ゲーム開始時の"表示状態を指定する機能であることに注意してください。
「②アイテム」タブ内の各種パラメータを調整してください。
「③イベント」タブ内で必要に応じてイベントを追加してください。イベントに関しての詳細はイベントマニュアルをご参照ください。
「④サウンド」タブから各種SEやゲームのBGMを変更可能です。これらはステージによって変わりません。
「⑤最終ファイル出力」タブからBB2021ブロック崩しのHTMLファイルを出力します。
はじめに「出力フォルダ参照」ボタンからファイルを出力するフォルダを指定してください。
次に「ファイル出力」ボタンを押すと指定したフォルダにファイルが出力されます。出力されるファイルは以下の通りです。
BB2021ブロック崩しのゲームを描写するためのHTMLファイルです。
ゲームの挙動を変更したい場合以外は編集しないでください。
BB2021ブロック崩しを動かすためのJavaScriptファイルです。
ゲームの挙動を変更したい場合以外は編集しないでください。
BB2021ブロック崩しを動かすためのJavaScriptファイルです。
下記オプションを指定した場合のみ出力されます。
ゲームの挙動を変更したい場合以外は編集しないでください。
ゲームのプレイ画面の"枠"となるHTMLファイルです。このファイルは必要に応じて編集してください。
オプションによって出力を抑制することができます。
BB2021Editorで編集した内容が記されたファイルです。詳細は一時保存機能の説明として後述します。
作成したBB2021ブロック崩しを公開する場合、このファイルは公開する必要がありません。また、ファイル中にEditorを使ったPCのフォルダ構成の情報が一部含まれる場合があるので取り扱いに注意してください。（サウンドのファイル名としてフルパスが含まれています。（2024/08/11時点））
オプションを指定することでJavaScriptファイルを分割することができます。この場合、bb2021main.jsファイルに加えてbb2021sub☆.jsファイルが出力されます。（☆の中には数値が入ります。）
サーバーによってはファイル容量が制限されている場合があります。bb2021main.jsの容量が制限にあたる場合にこのオプションを指定することで回避することができます。
前景画像登録ボタンの近くにある透視スライダーを操作することで、前景画像を透かして表示することができます。
適切な透過度に設定することで、前景画像と背景画像を同時に確認しながらブロックの打ち込みを行うことができます。
この透視機能で設定した透過度の値はあくまでEditor上での表示状態を変更するのみで、出力されるファイルには影響を与えませんのでご注意ください。
編集中のデータをファイルとして保存する機能です。保存したファイルを読み込むことで編集を途中から再開することができます。
「ex一時保存」タブから「一時保存」ボタンを押すと現在の編集内容を保存することができます。最終ファイル出力時に作成されるsavefile.jsonも同様の現在の編集内容が記載されたファイルです。
「ファイル読み込み」ボタンを押すと保存した編集内容を呼出し、編集を再開することができます。
各ステージのパラメータやイベントをコピペすることができます。
ステージ間でパラメータを統一するだけでなく、他のゲームデータからパラメータを持ってくることもできます。
さらに、コピーした内容（テキスト）を友人に共有することで、友人もBB2021Editor上で同じパラメータを使用することができます。この機能は作りこんだイベントを公開する際に有用です。
！注意！ ペースト内容が既に設定されている値と矛盾する場合にエラーが発生してBB2021Editorが強制終了する可能性があります。ペーストする前に一時保存を行うことを強く推奨します。
出力されたindex.htmlをブラウザで開くとBB2021ブロック崩しをプレイすることができます。ただし、bb2021inline.html、およびbb2021main.js（およびbb2021sub.js）が同じフォルダに配置されている必要があります。
これらのファイルをまとめて友人等に共有することで、友人等のPCでもBB2021ブロック崩しをプレイすることができます。
お持ちのWEBサイト上で上記のindex.html、bb2021inline.html、bb2021main.js（およびbb2021sub.js）を公開することで、WEBサイトを訪問した方がBB2021ブロック崩しをプレイすることができます。
この場合上記の3ファイルは同じディレクトリに配置されている必要があります。
作成したBB2021ブロック崩しを公開する場合、必ずBB2021Editor同梱のLicense.txtを事前にお読みください。