ブロック崩し制作ツール『B2』を使って、Flashのブロック崩しを作ってみました（令和6年）。
↓ゲームページはこちら
2021年のFlash Playerサポート終了により遊べなくなったかに見えましたが、有志が開発しているフラッシュエミュレーター『Ruffle』により再生できるようになっていました！ 感謝！！
RuffleのCDNのタグを追加するだけで、とても簡単でした。
これで個人サイト復権の流れが来ても大丈夫……かもしれない。
既知の問題
音が出ないです……。
Nitro（Flash再生に特化したブラウザ・開発終了）では問題なく音入りで動作しました。検索したら「RuffleでB2を再生できたけどサウンドが鳴らなかった」という旨の掲示板の書き込みがあったので、自分の環境だけではないようです。
特別なブラウザでしか見れない状態より、無音でも安定して再生できる方がいい……のかは分かりませんが、常に最新版になるRuffleのCDNを使っていればそのうち対応するのではという期待があるので、なるべくRuffleを使いたいなと思います。日々着々と更新されているので！
別の原因があるのかもしれませんが、これ以上は未確認です。
B2とは？
アイソトニクス様が2002年から配布しているFlashブロック崩し制作ツールです。基本的に画像を2枚用意すればいいだけで、Flashの知識がなくても制作できます。
準備
こちらのありがたい解説ページを見ながら作りました。
拡張エディター『鬼壁』サイトはリンク切れでした。残念……。
22年前のツールが動くなんてすごい。そもそも配布し続けて下さっていることがありがたいです。
これで必要なファイルが揃いました。簡単！
RuffleのCDN読み込み
ゲームページの中身をメモ帳などで開き、以下のコードを<head>と</head>の中に記載します。
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>記載する場所は、ゲームを読み込む前なら大体どこでも良さそうです。
これで保存して完了です。B2フォルダを自分のサイトにアップロードし、再生できるか確認します。
記載例はこちらのサイトを参考にしました。感謝感謝。
補足
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は何も悪くない……と思う……。
おわりに
この記事をほとんど書き終わってからB2ブロック崩しとRuffleについて調べたところ、2023年の3月にRuffleのアップデートにより再生が可能になったとのこと。サウンド関係の解決もそう遠くないのでは。
世の中にはまだRuffleの存在を知らず、「Flashは終わった」と思っている人が多いと思います。Flash終わってなかった！の驚きを共有したいものです。
