タイトル、ボーナス、背景、ブロック各画像のサイズのおすすめは 480×560 ピクセルです。 それ以外のサイズも基本的に自由に指定できます。ゲーム画面は画像サイズに合わせて自動的に伸縮します。
ゲームのメイン画像です。背景の上にブロック画像が重ね合わせて表示されます。 ブロック画像にボールを当てると、当たった部分が壊れて透明になっていき、背景が徐々に見えるようになります。
例えば脱衣系のブロック崩しゲームを作成する場合は、背景にJPEG形式でキャラクターのベース絵を指定し、 ブロック画像にGIFまたはPNG形式で、透明部分を含む服の差分絵を指定します。フルカラーPNGも使用可能です。 画像サイズを変更する場合は以下の点にご注意ください。
ブロック画像はゲーム起動時に自動的に、画像を 16×16 ピクセルの格子状に分割してブロック化されます。 その際にブロックの有無の情報を収めた、ブロックマップというデータが生成されます。
ブロックマップの生成は自動的に行われるので、通常は意識する必要はありません。 但しローカル環境では、HTML5のセキュリティ制限でブロックマップを自動生成できず、ゲームが起動しない場合があります。
ブロックマップは同梱の生成ツールを使って、手動であらかじめ生成して用意しておくこともできます。 あらかじめ生成しておくと、セキュリティ制限の影響を受けずにゲームをプレイできます。 また、ゲーム起動時の負荷を下げることができるメリットもあります。 特にダウンロードコンテンツ等で、ローカル環境でのプレイを前提としている場合は、生成ツールの使用をおすすめします。 生成ツールの使い方については、ブロックマップ生成ツールについてをご覧ください。
テンプレートファイル (index.html) を、メモ帳などのテキストエディタで編集して設定を行います。 編集は好みに合わせて自由に行ってください。 動作設定は JavaScript で記述されているため、文字や記号の書き方を間違えるとエラーが発生して動作しなくなる場合がありますのでご注意ください。
全ステージの共通設定です。
ブロック画像下部の余白をピクセル単位で指定します。０以上の整数を指定してください。 デフォルトで 80 が設定されています。変更する場合は以下の点にご注意ください。
ステージごとの設定を行います。ステージの設定は少なくとも１つは必要です。設定例は次のようになります。
stage.push({ // --- ステージ X ---
fuku: "fuku.png" // ブロック画像
,bg: "base.jpg" // 背景画像(複数指定可)
,pdl: "pdl.png" // パドル画像
,kantuu: 2 // 貫通弾の発動判定幅 (0:貫通弾OFF)
,speed: 3 // ボールスピード(大きいほど速い)
,ok: 0.10 // クリア達成の残ブロック数または割合
});
以上が１つ分のステージ設定となります。２つ以上のステージを設定する場合は、 これをコピー／貼り付けしてステージ設定を増やしてください。無制限に複数個設定することができます。設定項目の詳細は以下の通りです。
背景画像のURLを指定します。画像形式は自由です。背景画像は ; (セミコロン) で区切って複数指定することが可能です。指定できる画像の数は無制限です。指定例は以下の通りです。
"base.jpg; kao.gif; fuku2.png"
この例では base.jpg の上に kao.gif、次に fuku2.png が重ね合わせて表示されます。さらにブロック画像が一番上に重ね合わせて表示されます。 背景画像ではこのように、顔の表情を差分画像で表現したり、次ステージの服などを着せ替えゲームのように重ねて表示することが可能です。
ボールのスピードを指定します。 0.1 以上の数を指定してください。小数値での指定も可能です。 数が大きいほどスピードが速くなります。ブラウザに大きな負荷が掛かりますので、 数を大きくしすぎないようにご注意ください。スピードの目安は以下の式の通りです。
１秒間に進むピクセル数 ＝ speed × 60
ゲームクリア判定において、許容する残りブロック数または割合を指定します。 この指定を行うと、いくつかのブロックが残っていてもゲームクリアすることができます。 以下の A〜C いずれかのタイプで指定してください。
| A. １以上の整数 | 許容する残りブロックの数 （1個〜） |
|---|---|
| B. 0.01〜0.99 の小数 | 許容する残りブロックの割合 （1〜99％） |
| C. 0 | 許容なし(完全破壊が必要) |
ブロックマップ生成ツールを使って生成されたデータはこの箇所に貼り付けます。 詳しくはブロックマップ生成ツールについてをご覧ください。
必要に応じて、戻り先のリンクを指定します。