ブロック崩し制作ツール『B2』を使って、Flashのブロック崩しを作ってみました（令和6年）。
↓ゲームページはこちら
2021年のFlash Playerサポート終了により遊べなくなったかに見えましたが、有志が開発しているフラッシュエミュレーター『Ruffle』により再生できるようになっていました！ 感謝！！
遊ぶだけなら、ブラウザにRuffleのプラグインを入れればOKです。（たまに設定ファイルが読み込めず遊べないことがあるようですが。記事執筆時点では、既存のページならNitroが一番再現性が高そうです。）
RuffleのCDNのタグを追加するだけで、とても簡単でした。
これで個人サイト復権の流れが来ても大丈夫……かもしれない。
既知の問題
音が出ないです……。
Nitro（Flash再生に特化したブラウザ・開発終了）では問題なく音入りで動作しました。検索したら「RuffleでB2を再生できたけどサウンドが鳴らなかった」という旨の掲示板の書き込みがあったので、自分の環境だけではないようです。
特別なブラウザでしか見れない状態より、無音でも安定して再生できる方がいい……のかは分かりませんが、常に最新版になるRuffleのCDNを使っていればそのうち対応するのではという期待があるので、なるべくRuffleを使いたいなと思います。日々着々と更新されているので！
別の原因があるのかもしれませんが、これ以上は未確認です。
2025/08/28追記：B2.swfのバージョンを古いバージョン(1.08d)にしたところ音が出ました！ 1.08d→1.08eのアップデートで音源の再生方法が変わり、それがRuffleでは未実装の項目だったという感じでしょうか。一旦解決です。古いバージョンでは設定ファイルの一部の記述方法が異なるため、変更が必要になりそうです。一部では改造版？もあるようですが未確認です。とりあえずこのサイトでは音が出ない最新版swf(1.08e3)で公開しています。1.08dに差し替えて遊べるようにしました。以前のバージョンも残してあります。2025/8/30：ver.1.08dでアイテムを出す設定ファイル記述について記事の下部に追記しました。
B2とは？
アイソトニクス様が2002年から配布しているFlashブロック崩し制作ツールです。基本的に画像を2枚用意すればいいだけで、Flashの知識がなくても制作できます。
準備
こちらのありがたい解説ページを見ながら作りました。
拡張エディター『鬼壁』サイトはリンク切れでした。残念……。2025/08追記：有識者の情報を基に、鬼壁掲示板のリンクからダウンロードできることを確認できました！ 以下は標準エディタで進めています。
22年前のツールが動くなんてすごい。そもそも配布し続けて下さっていることがありがたいです。
これで必要なファイルが揃いました。簡単！
RuffleのCDN読み込み
ゲームページ（この例だとindex.html）の中身をメモ帳などで開き、以下のコードを<head>と</head>の中に記載します。（ゲームを読み込む前なら大体どこに記載しても良さそうです。）
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>これで保存して完了です。B2フォルダを自分のサイトにアップロードし、再生できるか確認します。
記載例はこちらのサイトを参考にしました。感謝感謝。
ここでは解説しませんが、CDN読み込みではなく、Ruffle本体をサイトに直接設置する方法もあります。
補足
WordPressで再生するには、ルートパスだけでなくゲーム部分の書き換えが必要でした。
そもそもOBJECTタグよりJavaScriptを使ったほうが安定性が高いそうなので、可能なら書き換えたほうが良さそうです。上記htmlの書き換えでも使えました。
Ruffle公式もJavaScript推奨らしいです。こちらのほうが読み込みも動作も軽い感じがしました。でも正しいのかは分かりません。
<div id="flashContent"></div> <!-- divのIDを指定 -->
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script> <!-- Ruffleを読み込み -->
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("flashContent");
container.appendChild(player);
player.style.width = "500px"; // 横サイズ
player.style.height = "797px"; // 高さサイズ
// SWFファイルと設定ファイルのパスを指定
player.load("/flash/B2/b2.swf?cnf=/flash/B2/1.txt");
});
</script>でもこの方法だと背景色の指定方法が分からなかったんですよね……。ChatGPTの指示で色々やってみたのですが……。この記事のほとんどの技術的情報はChatGPTの受け売りです……。
レンタルサーバーなどの環境によっては再生できないかもしれません。その場合、GitHub Pagesを使う方法があるようです。自分のサイトがなくても安心……？
まあRuffleが普及していけば、有識者がちゃんと検証して初心者向けの記事を書いてくれることでしょう。よろしくお願いします。
読み込みエラー
Ruffleもswfも読み込めているけど設定ファイルが読み込めていないエラー。設定ファイルをルートパスにするか、OBJECTタグをJavaScriptに書き換えれば読み込めるかも。（詳しいエラーはブラウザのコンソールから確認できます。）
テストプレイ
とりあえず再生できました。やったー！
しかしキーボード操作が反応しなかったり、玉がすり抜けたりしてしまいました。エディターに戻り、キーボード操作のチェックを外し、パドルを厚くし、速さをそれぞれ100％に変更したらかなり良くなった気がします。概ね問題なく遊べるようになりました。
その後公式サイトを見ながらアイテムをいくつか追加しました。コントロールがすごく強い……気がする……。イラストも差し替え、画面サイズを小さくしました。
セキュリティ？
このブロック崩しが存在しないデータ：config.datやconfig.txtを探そうとするためか、Wordpressのセキュリティプラグインに何度かロックアウトされてしまいました。不本意ながら設定ファイルをconfig.txtに改名し、許可リストのファイルをいくつか追加しました。解決したとは思うのですが、何度も再読み込みすると、数時間くらいこのサイトにアクセスできなくなるかもしれません。陳謝……。
追記：もしかしたらChatGPTの指示でタグを書き換えたせいかも。b2.swfは何も悪くない……と思う……。
バージョン1.08dのアイテム記述（追記分）
暫定的な処置として、b2.swfを最新バージョンではなく古いバージョン(1.08d)に変更することで効果音が鳴るようになりました。確認時点でRuffle未対応の項目が更新版にあるっぽいものの詳細は未確認です。
設定ファイルのフォーマットが若干異なり、アイテムが出なくなってしまったので少し書き換えました。過去のB2.swf(1.08d)に対応した今作の設定ファイル（config.txt）です。
version=B2&graphicWidth=420&graphicHeight=638&graphic1=/game/B2/1.jpg&graphic2=/game/B2/2.jpg&soundMode=true&soundBgmVol=30&minRadian=2&maxRadian=8&ballSize=15&baseSpeed=16&ballColor=white&xSpeed=10&barWidth=120&barHeight=20&criticalWidth=15&edgeWidth=25&blockWidth=25&blockHeight=25&barSpace=0&blockMask=2&life=5&barRapid=true&clearBlocks=p93&clearJump=clear&scoreBlock1=10&scoreBlock2=20&scoreBlock3=30&scoreBlock4=0&scoreBlock5=10&scoreBlock6=10&scoreBlock7=0&scoreSmash=100&scoreTime0=5000&scoreTime1=10&scoreLife=300&scoreCombo=20&scoreCombonum=5&ballSpeedRate=1&barSpeedRate=1&keyboardMode=false&blockMode=false&effectMode=true&liteMode=true&edgeBack=true&itemfromBlock=true&itemPercent=10&itemCtrl=1&itemWide=1&itemShort=1&itemRapid=0&itemGrav=0&itemPanic=0&weaponGaugeMaxBoost=600&weaponGaugeMaxCtrl=100&weaponGaugeMaxWide=300&weaponGaugeMaxShort=300&weaponGaugeMaxRapid=20&weaponGaugeMaxGrav=400&weaponGaugeMaxPanic=300&weaponValueBoost=3&weaponValueCtrl=3&weaponValueWide=1.5&weaponValueShort=0.6&weaponValueRapid=2&weaponValueGrav=15&timerVisible=false&rankingEnable=false&rankingTxt=hiscore.txt&defaultName=B2&block=0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,2,2,2,2,1,1,1,1,0,0,1,1,1,1,1,1,1,2,2,2,2,2,1,1,1,0,0,1,1,1,1,1,1,1,2,2,2,2,2,1,1,0,0,0,1,1,1,1,1,1,1,2,2,1,1,1,1,1,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,&command=&bgcolorGame=0c0c0c&bgcolorHtml=0&title=title&config=config.txt&quality=medium&commentTable=none&
すべての項目の検証はしておらず、とりあえず動いたのをそのまま貼っています。
この記述だとブロックから10%の確率で、コントロール・ワイド・ショートが1:1:1の割合で出るようになっています。多分……。weaponGaugeは何も書かなければデフォルトが適用されると思います。
以前のバージョンも配布し続けてくださっていて助かりました。その後の更新はアイテム追加と挙動の修正なので、PanicやShotなどの一部のアイテムを使わなければ問題なさそうです。PanicとGravはその後のバージョンで修正が入っているようなので注意です。
古いバージョンの設定ファイルの記述方法について、資料がなく難航しました。これが無理そうなら本体改造に乗り出すところでした（規約では改造はOK、再配布は許可制とのこと）。執念の勝利。紆余曲折部分の日記は別の記事に書きました。
おわりに
この記事をほとんど書き終わってからB2ブロック崩しとRuffleについて調べたところ、2023年の3月にRuffleのアップデートにより再生が可能になったとのこと。サウンド関係の解決もそう遠くないのでは。
世の中にはまだRuffleの存在を知らず、「Flashは終わった」と思っている人が多いと思います。Flash終わってなかった！の驚きを共有したいものです。
前回のRuffleを使ってみた記事はこちら
