| レポート 【B2 -ブロック崩し-】の作り方(初級編) |
 |
○0：前準備○ ○1：材料（JPG画像）を作る○ ○2：ツールをダウンロードする○ ○3：エディタ起動○ ○4：設定ファイルの保存・HTMLの出力○ ○5：サイト公開○ ○6：補足○ |
| ブロック崩し。このゲーム自体は本当に昔っからあり、ファミコン初〜中期に発売されたTAITOの「アルカノイド」なんかが有名なところですね。（もっとコアな方は、ファミコンよりも前に発売された、オレンジの機体が眩しい
任天堂のブロック崩しｗ；） ボールを落とさないように自機を動かし、ボールを跳ね返してブロックを消していくという、いたってシンプルなゲームのためか、人気はあったもののテトリスやぷよぷよのようにあまり続編リニューアルされることなく、現在にいたっています。（一番新しいのは、おそらくTAITOの「プチカラット」。さらにコアな方は「北斗でBON」ｗ<ﾓｳｴｴｯﾃ!!） ところが、ここ最近（といっても2〜3年以上は経ってるけど…；） そのブロック崩しにとんでもない要素をつけて 瞬く間に再加熱をさせてしまったものがあります。 そのとんでもない要素とは… 【脱衣】!! そう、当時は麻雀や花札・はてはクイックスまでもが存在していたけど、ブロック崩しで脱衣・しかもブロックを服にしてリアルタイムに脱衣させていくというのは（当時としては）今までにありそうでなかったものです。さらに、ネット上で、しかもゲーム素材が初公開のためか、男性向けのサイトでよくよく見かけるようになりましたね。さらにそのためか、もはやネットでブロック崩しというとイコール脱衣となってしまったほどに…（＾＾； 前置きがちょっと長いですが、もう少しお付き合いを…（￣ω￣； さて、その脱衣ブロック崩しですが、ほとんどの方はJAVA版の【爆裂ブロック崩し】を使用していますね。まぁ、これが脱衣ブロック崩しが広まった大本のソフトですし、作り方もブロック部分（服）を透過GIFを使用しているため、画像を用意するだけで簡単に大部分は作れてしまうというお手軽さもあるからですね。 しかし、（背景はJPGが使えるけど）服部分が透過GIFしか使えないため、256色に限定され、やはりJAVAを利用しているためか、少し不安定で動きがあまり滑らかでないという欠点があります。その欠点を補った、【爆裂ブロック崩し】の進化版が右脳遊戯様のアプリ版【激烈ブロック崩し】というものもあります。HTMLに貼り付けることはできませんが、ソフトであるため 綺麗な画像を使うことができますし、自機やボールの動きも滑らかです。 ただ、技術欲を持っている方は「服の一部分を硬くしたいぞ!!」「ただ崩していくだけでは物足りない。アイテムを入れたいぞ!!」「目パチなどのちょっとしたアニメーションを入れたいぞ!!」なんて野望を抱いてしまうことでしょうｗ 「でも、プログラム知識がない自分が一から作ることなんてまず不可能だし、そんなことができてしまうツールなんて、そんな都合よく…」なんて思ったあなた!! なんと そんな都合のいいソフトが実在します!! それが、自分も使用しているアイソトニクス様のFlash版ブロック崩し【B2】です。 このソフトのすごいところは、背景もブロック部分もJPGを使用可能のため、綺麗な画像を使用することができますし、壊したブロックを波状形にしたりヒットエフェクトが出るなどの演出があることですね。さらにレベルが上がれば、アイテムを出現させることもできますし、（多少のプログラム知識が必要ですけど）イベントツールを使えば目パチなどのアニメーションや特定の部分にあたると貫通弾、さらに制限時間を設けることができるなど、とにかく幅広く作成ができ、独自性の高いゲームを作ることができます。 ただ、少し作り方が複雑のためか、まだまだ普及はしていないようです。しかし、B2の説明書でも書いてあるとおり、慣れてしまえばJAVA版レベルのものでしたら5分で作ることができます。 そこで、このB2をもっと広めさせようと、B2説明書の補足…というより、自分はこうやって作りましたよという作成過程を記していこうと思います。 ふぅ… やっと前置き終わりっと… (-ω-； さて、ここでは初級編ということで、とりあえず最低限遊べるB2ブロック崩しの作り方を記していきます。（初級編と言ってますが、中級上級編をやるかどうかは限りなく未定です…；） 初めて作る方も、とりあえず遊べるものを作ってみましょう。「アイテムを入れたいぞ!!」「アニメーションを作りたいぞ!!」という気持ちはわかりますが、いきなりそれを作ろうとすると、高確率で挫折をしてしまいます。まずは下手でもいいから遊べるものを作り、それが完成したら公開するもよし、それにさらに手を加えていくもよし。とにかくいえるのは、（これはB2に限らず）一発で理想を100%現実にすることはまず不可能ということです。大切なのは、100%ではないけど作品を学びながら完成させ、これはできないけどあれなら可能かな？ こうしたら代用ができるかな？などを見つけ、それを次回作に持っていくという潔さと向上心です。 ここから自機のことをB2の説明書に習って、「パドル」と表現していきます。 |
| ○0：前準備○ |
| まずはwindous上に作業用のフォルダを作りましょう。好きな名前を付けてもらってかまいませんが、ここでは「sample」とつけて作業を進めていきます。 そして、これはB2に限ったことではありませんが、ゲームを作る際にwindowsの設定として、ファイルの種類をわかりやすくするよう拡張子を表示させましょう。（ファイル名の後の【．○○○】のことです） OSをデフォルトで入れた場合、初心者に拡張子をいじくられないよう、たいていは非表示となっています。ではどのようにして表示させるかといいますと、どのフォルダのウィンドウでもいいので、メニューバーにある「ツール↓フォルダオプション」を選んで、表示タグの「登録されているファイルの拡張子は表示しない」のチェックをはずすと拡張子が表示されます。 ▲TOPへ▲ |
| ○１：材料（JPG画像）を作る○ |
  （左）図1：前景（脱衣前）画像[mae.jpg] （右）図2：背景（脱衣後）画像[usiro.jpg] |
| まず当たり前の話、いくらツールが使えるからといっても、これがないと何にもできません。「どうやったら差分を作ることができるの？」なんて言われても、すみませんが
正直そこまで面倒を見切れないです…（＿ ＿； ここで材料を作る上で、気をつけることを数点上げます。 ・ブロックの配置(消す部分)を下にしすぎないこと これは他のブロック崩しでもよく見かけることですが、ブロックを下の方に置くというのはあまり良くありません。とたんに難易度が高くなってしまいます。（ひどいのになるとパドルのすぐ上がブロックというものも…； しかもよく見かける…；） とりあえず、パドルからある程度余裕をもたせるよう、絵の大きさを変えるか、B2の設定でパドル領域を大きくしましょう。 ・前景、背景の画像サイズを同じにする 大きさがあってなくてもできそうですが…、とにかくややこしくなるのでサイズをあわせましょう。 ・画像をあまり大きくしないこと 特に高さは、高くしすぎるとブラウザからはみ出してしまい、画面に収まらなくなってしまう恐れがあります。ここで気をつけてほしいのはブラウザサイズを1024×768より上で作業を行っている方。自分のところではちゃんと納まっていても、他人のPCでははみ出してしまうということがあるからです。一般には1024×768の設定を行っている方が多いですので、画像とパドル領域を合わせて700pix以上にならないようにしましょう。 上記を踏まえて、JPG画像を出力するわけですが、ここでも注意が必要です。出力するJPG画像にはプログレッシブや最適化・ICCプロファイル・JPG2000などの特殊な圧縮形式で保存しないようにしましょう。（自分がまず最初につまづいてしまったところです…；） B2にはそれらの圧縮がかかったJPG画像はサポートされていないため、エディタに読み込むことができないからです。（画質はどのようにしてもOK） 具体的には(Photoshopの場合)下図のとおりにして、「sample」フォルダ内に保存しましょう。 |
  （左）図3：web用に保存の場合 （右）図4：別名で保存の場合 |
| ▲TOPへ▲ |
| ○2：ツールをダウンロードする○ |
| 次に、B2の大本となるプログラムと作成ツール（エディタ）を、アイソトニクス様のHPからダウンロードしましょう。ちょっとわかりにくい所にありますし、どれをダウンロードすればいいか少し迷ってしまいますが、とりあえず今の段階で必要なのは、「Flash→B2」内にあるダウンロード項の【B2 ver1.08e3 swfファイル】と【B2editor ver1.1f exeファイル】です。前者はB2のプログラム本体で、後者はそれを作成するためのエディタです。真ん中にある【B2
ver1.08c swfファイル＋hiscore.cgi】は、CGIを使用してランキングを行うためのツール同梱版ですが、ここではとりあえずランキングは入れないという方針で（＾＾； また、「ADOLT→Game」内にある【b2edit110e3.lzh】もダウンロードしましょう。この中に説明書が入っていますので、そちらの方も（というか、そちらの方を）参考にしてください。なお、この中にもｓｗｆファイルやエディタが入っていますが、こちらは旧バージョンですのでご注意ください。あと、ランキング用のツールやB2内でテキストを表示するのに必要なファイルもありますが、これも使用しない方針で行きます。（＾＾； そして、「ADOLT→Game」の下のほうにある【5分で作れるブロック崩し】も参考にいたしましょう。（といいますか、これを読めば この講座はほとんど必要ないような気もしますが…；） 【B2 ver1.08e3 swfファイル】と【B2editor ver1.1f exeファイル】をダウンロードしましたら、解凍しまして中身を「sample」フォルダに入れましょう。なお、後者の【b2edit.exe】は、作りやすいようにここに入れているだけですので、公開するときはこれを取り除くのをお忘れなく（＾＾； |
 図5：現段階でのフォルダ内の様子 |
| ○3：エディタ起動○ |
 図6：B2エディタ |
| さて、画像とツールが用意できましたら、次はいよいよ設定です。【b2edit.exe】を起動すると、上図のような画面が出てきます。起動時はビューウィンドウが真っ黒のままですので、プロパティウィンドウの最上部にある「前景ファイル」「背景ファイル」の記入欄の横にあるフォルダアイコンをクリックし、前景に「mae.jpg」、背景に「usiro.jpg」を読み込みましょう。なお、「再描写」を押すとビューウィンドウにその押した方の画像が映し出されます。 ブロックを配置する前に、まずプロパティウィンドウでゲーム全体の設定を行いましょう。各部分の説明は、ここでツラツラ同じ事を書くのもあれですので、B2エディタ説明書の方を参考にしてください（＾＾； （説明書は旧バージョンのエディタを説明していますが、多少位置関係が変わっただけですので、安心してご使用いただけます） まぁ、最初見ただけでは度合いが分からないと思いますので、設定が分かるもの以外はとりあえずデフォルトで作っていったん動かし、後から設定しなおすというのが一番ですね。 プロパティウィンドウでまず設定するのはブロックサイズ。ブロック設定の横にある「新規作成」をクリックし、1ブロックの縦幅×横幅を設定しましょう。どのぐらいの大きさになるかはビューを見ていただくと分かります。ここで注意していただくのは、あまりブロックを細かくしすぎると、クリアが面倒になるばかりかCPUに負担がかかってしまうということです。 次に、「パドル領域高」は、その名のとおりパドル領域の高さを調整するところです。「○１：材料を作る○」の所でも話しましたが、できるだけ画像領域とパドル領域をあわせた高さが700pixより上にならないようにしましょう。なお、現段階ではパドル領域の色が黒ですが、ここのカラーは後の方で設定しますのでご安心を。 そして、ブロック設定でもう一つある項目「ブロックマスク」は何かといいますと、破壊したブロックの形状をどのようにするかという設定です。「１」にすると■のまま、「２」にすると波状の形になります。下図を見てもらうと分かりやすいとおもいますが、ものすごく漢を感じさせる機能ですね。（＾＾； |
  （左）図7：ブロックマスク「1」 （右）図8：ブロックマスク「2」 |
| ん〜、あとは補足の必要ない…かな？ プロパティウィンドウで設定し終わったら、次にブロックを配置していきましょう。 |
  （左）図9：ブロック配置 （右）図10：配置ツール |
| まず、メニューの「ツール↓配置ツール」を選択すると、図10のようなツールが出てきて、そこからブロックの種類を選択します。ブロック種の左半分は説明の必要はないと思われますが、右半分は…実は私もよく分かりません…；（教えてくださ〜い、にー様〜；） ブロック種を選択しましたらビューの方に行き、クリック・ドラッグして配置していきましょう。（もう一度クリックするとブロック解除） 前景で残したい表示を選択（ブロック化）して、あとは背景を表示するという感覚ですね。コツとしては、1ブロックの中に消したい部分がすこしでもかすっていた場合、ブロックを配置していくことですね。 さて、これでブロック崩しの大まかな設定は終わりです。あとは保存していくのみです。 ▲TOPへ▲ |
| ○4：設定ファイル保存・HTML出力○ |
| 設定も終わり、あとは設定ファイルを保存するのみです。（というよりも、最初に保存した方がいいのですがね…（＾＾；
） メニューの「ファイル↓名前を付けて保存」を選択し、「sample」フォルダ内に設定ファイルを保存しましょう。ただし、ここでも注意。保存するときファイル名に拡張子【.txt】を付けましょう。別につけなかったり（たぶん）別の拡張子にしても大丈夫ですが、（また別の機会で話しますが）B2設定ファイルの中身を多少いじくることもありますので、拡張子がないといちいち開くアプリを選択しないといけません。ですので、最低でも[メモ帳]で開けることができる汎用性の高いテキスト形式で保存しましょう。 具体的には、【○○○.txt】（○は好きな半角英文字）というふうに保存します。ここでは「sample.txt」で保存します。 すると、「sample」フォルダ内に新しくテキストファイル（sample.txt）が作成されましたね。これでいったんB2エディタを閉じても、このファイルを読み込めば作業を再開することができます。 さて、あとはHTMLにこれを貼り付ければゲームを行うことができます〜〜〜〜…って、どうやってHTMLに貼り付けるの？という質問が来ますね。（＾＾； B2エディタで、作成したB2を貼り付けたHTMLを出力することができます。 |
 図11：HTMLファイル出力 |
| メニューの「ファイル↓ｈｔｍｌの書き出し」を選択すると、上図のような画面が出てきます。[タイトル]にはタスクやタイトルバーに表示する文字をいれます。おそらく未記入でも可。[設定ファイル指定]には、先ほど作った設定ファイル名をいれます。もちろん、拡張子も忘れずに。[ゲーム領域背景色]はパドル領域の色、[ページ背景色]はページの背景の色です。[quality]はパドルやエフェクトなどの綺麗さで、highだと綺麗だけどCPUに負担がかかるし、逆にlowだと汚いけど負担が軽減されます。 [注釈部]は、ゲームを説明する領域を作るかどうかです。 これで「書き出し」を押してもらうと、あとはｈｔｍｌの名前を付けて保存してもらうのみです。ここでは拡張子をつける必要はありません。ここでは「sample.html」で保存します。 さぁ、これでいよいよゲームをプレイすることができます。先ほど出来上がった「sample.html」を開きましょうｗ |
 図12：完成〜（ わ〜い（＾▽＾） ） ●実際の完成品はこちら（約213KB）● ※注：個人的な観覧・参考以外の使用を禁止します |
| あ、もちろん出力したｈｔｍｌファイルは別の作成ソフトで開いてページを加工することもできますよ。ただ
最低限のマナーとして、B2開発者様（アイソトニクス様）へのリンクは残しておきましょう。 あとは実際プレイして、設定や難易度の調整を行ってください。（再びhtmlを出力する必要はありません） 実は、こだわったものを作ると ひょっとしたらこの難易度調整が一番時間がかかる作業かもしれません…；。簡単すぎるとブロック崩しにする必要性がなくなってしまいますし、かといって難しすぎるとプレイヤーが途中で投げ出してしまいますし… まぁ、まず言えることは、「自分でもクリアできないようなものを他人にクリアさせようとするな」ですね。（＾＾； 難易度調整はだいたい、自分がちょうどいいなと思うなら、そのレベルより1・2ほど低くした難易度がちょうどいいかもしれませんね。調整を行っていたら、イヤでもブロック崩しの腕が上がりますから…（￣▽￣； ▲TOPへ▲ |
| ○5：サイト公開○ |
| あとはB2を貼り付けたｈｔｍｌにリンクを貼り、フォルダごとサイトにアップロードするのみです。アップロードするフォルダ内は下図のようになります。 |
 図13：アップロード用のフォルダ内の様子 |
| これを見てまず気付くことは、【b2edit.exe】がないことですね。公開用ではこのファイルはもう必要ないですので、容量を食うだけだから除きましょう。 そしてもう一つ、【index.html】が入っていますね。これは何かといいますとズル(覗き)防止のためにこのｈｔｍｌファイルを入れています。（ちなみに中身は何にも書く必要はありません） なぜこれがズル防止になるかといいますと…、これを説明するということは、ズルのやり方を説明するのと同じになってしまいますので、この対策をとっていない（あるいは知らない）サイト様に迷惑がかかってしまいますので、ここではあえて言いません（＾＾； 「覗く人って、本当にいるの？」といわれると、「ウチではNo.3を公開してから一週間で50人ぐらいズルが発覚しました」と言い返します。 ▲TOPへ▲ |
| ○６：補足○ |
・一定のブロック数を消すと次の面というようにするには？ まず、次の面にあたる設定ファイルを作っていただき、その後 前面の設定ファイルを開いてプロパティウィンドウにあるクリア条件をクリックします。その中にある「次の面へ進む」という項目にチェックを入れ、記入欄に次の面の設定ファイル名を入れましょう。（拡張子を忘れずに） そして、その横にある「この面の背景が前面になる」ですが、これをはずしたままだと、前の面の結果を反映させないまま新規に設定ファイルを読み込みます。つまり、前の面でいくら残機が減ろうが、次の面ではその面で設定した機数でゲームが開催されます。また、クリア条件を満たすと画面が一度暗くなり、ロードが終わってから次の面が開始されます。 逆にチェックを入れると、残機やタイムを引き継いだまま、次の面へと行きます。またロード画面中に前面で背景だったものが映し出されるため、黒のロード画面がなくなるというわけです。 ・クリアしたら、オマケページに飛ばしたい これも上記と一緒で、クリア条件内の「以下のURLにジャンプする」にチェックしてURLを入れればOKです。ただし、このオマケページのファイル名ですが、他人が容易に予想できてしまう・B2が複数ある場合は前のクリアページのURLを知っていれば連想できてしまうようなファイル名にするのは控えた方がいいです。（たとえば、一作品目を「block01end.html」としたら、2作品目は「block02end.html」にするとか…；） ・画質を損なうことなく画像容量を減らす方法はありますか？ 効果的なものが一つあります。前景で背景がまったく同じ部分、つまり前景画像のブロック以外の部分を何色でもいいので一色で塗りつぶせば容量を抑えることができます。（基本的に画像の圧縮は、同色面積が広ければ広いほど圧縮率が高いです） ただし塗りつぶす際は、ブロック部分より充分な余裕を持たせて塗りつぶしましょう。 |
 図14：容量節約のため塗りつぶした例 |
| ▲TOPへ▲ 以上でJAVA版レベルのB2の作り方を終わらせようと思います。もう少しハイレベルな講座を作るかどうかは管理人の気分と時間と反響次第〜（−ワ− と、ここで「アニメを入れるにはどうしたらいいのですか？」や「No.03の仕組みを教えてください」など、すぐに答えを求めるような質問・要望は受け付けないことにいたします。理由を聞くよりも考えてみてください。自分は公開している情報のみで何時間もかけ苦労して苦労して仕組みを理解し作品を完成させたということを。 あ、感想や「ここ、こうした方がええぞ」などの意見、「そこ ちゃうやろ!!」などのツッコミ、「○○の作り方を知りたいなぁ…」などの催促は大歓迎です。（＾＾ |