2024年10月31日

ブロック崩し制作ツール『B2』を使って、Flashのブロック崩しを作ってみました(令和6年)。

↓ゲームページはこちら

2021年のFlash Playerサポート終了により遊べなくなったかに見えましたが、有志が開発しているフラッシュエミュレーター『Ruffle』により再生できるようになっていました! 感謝!!

既存のページで遊ぶだけなら、ブラウザにRuffleのプラグインを入れればOKです。

RuffleのCDNのタグを追加するだけで、とても簡単に設置・再生できました。

これで個人サイト復権の流れが来ても大丈夫……かもしれない。

2025/08/28追記:b2.swfのバージョンを古いバージョン(1.08d)にしたところ音が出ました!
2025/09/23追記:Ruffleで音が出ない原因と、力技で回避してみた方法について追記しました。

既知の問題

音が出ないです……。

Nitro(Flash再生に特化したブラウザ・開発終了)では問題なく音入りで動作しました。検索したら「RuffleでB2を再生できたけどサウンドが鳴らなかった」という旨の掲示板の書き込みがあったので、自分の環境だけではないようです。

特別なブラウザでしか見れない状態より、無音でも安定して再生できる方がいい……のかは分かりませんが、常に最新版になるRuffleのCDNを使っていればそのうち対応するのではという期待があるので、なるべくRuffleを使いたいなと思います。日々着々と更新されているので!

この問題はいくつかの回避方法があり、アイテムラベルを全てショットとボムで埋めるか、古いバージョン(ver.1.08d)を使うことで音が出ることを確認しています。

B2とは?

アイソトニクス様が2002年から配布しているFlashブロック崩し制作ツールです。基本的に画像を2枚用意すればいいだけで、Flashの知識がなくても制作できます。

一部では俗に脱衣ブロック崩しなどと呼ばれて親しまれているようですが、健全なサイトアクセサリーとしても利用されていました。

準備

こちらのありがたい解説ページを見ながら作りました。

拡張エディター『鬼壁』サイトはリンク切れでした。残念……。2025/08追記:有識者の情報を基に、鬼壁掲示板のリンクからダウンロードできることを確認できました! 以下は標準エディタで進めていますが、拡張エディタのほうがおすすめです。

22年前のツールが動くなんてすごい。そもそも配布し続けて下さっていることがありがたいです。

B2フォルダの中身

これで必要なファイルが揃いました。簡単!

RuffleのCDN読み込み

Ruffle本体をサイトに設置するのではなく、CDNを使う方法で進めています。

ゲームページ(この例だとindex.html)の中身をメモ帳などで開き、以下のコードを<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も読み込めているけど設定ファイルが読み込めていないエラー。設定ファイルをルートパスにすれば読み込めるかも。詳しいエラー内容はブラウザのコンソールから確認できます。

また、画像ファイルやテキストファイルはブラウザにキャッシュが残り続けやすいので、設定を変えたりした場合はブラウザのキャッシュを削除してから確認したほうがいいです。ChromやEdgeでは「閲覧履歴データを削除」などの名前で設定(Alt+F)から確認できます。

テストプレイ

とりあえず再生できました。やったー!

しかしキーボード操作が反応しなかったり、玉がすり抜けたりしてしまいました。エディターに戻り、キーボード操作のチェックを外し、パドルを厚くし、速さをそれぞれ100%に変更したらかなり良くなった気がします。概ね問題なく遊べるようになりました。

その後公式サイトを見ながらアイテムをいくつか追加しました。コントロールがすごく強い……気がする……。イラストも差し替え、画面サイズを小さくしました。

セキュリティ?

このブロック崩しが存在しないデータ:config.datやconfig.txtを探そうとするためか、Wordpressのセキュリティプラグインに何度かロックアウトされてしまいました。不本意ながら設定ファイルをconfig.txtに改名し、許可リストのファイルをいくつか追加しました。解決したとは思うのですが、何度も再読み込みすると、数時間くらいこのサイトにアクセスできなくなるかもしれません。陳謝……。

追記:もしかしたらChatGPTの指示でタグを書き換えたせいかも。b2.swfは何も悪くない……と思う……。設定ファイルは最初からconfig.txtと命名したほうがいいかも。

音が出ない原因

(25/09/23追記)b2.swf(ver.1.08e3)の内容を調べたところ、アクションスクリプトを数行削除すれば音が鳴ることが分かりました。Ruffleと相性が悪い箇所を特定できたのかもしれません。b2.swfは許可がない限り改変後の再配布は不可なので、原因箇所の確認に留めています。

問題になっていたと思しき箇所はこちら。太字が削除した箇所です。(アイテム音をdefaultから変更した場合、下のelse~も書き換えあるいは削除が必要なのでは。)

 while(i <= maxItemNo)
{
   _root.attachMovie("sound","itemSE" + i,i);
   _root["itemSE" + i].sound = new Sound();
   if(itemSE[i] == "default")
   {
      if(itemLabel[i] == "shot")
      {
         _root["itemSE" + i].sound.attachSound("shot");
         _root["itemSE" + i].sound.setVolume(40);
      }
      else if(itemLabel[i] == "bomb")
      {
         _root["itemSE" + i].sound.attachSound("bomb");
         _root["itemSE" + i].sound.setVolume(100);
      }
      else
      {
         _root["itemSE" + i].sound.loadSound(itemSE[i],false);
         _root["itemSE" + i].sound.setVolume(itemSEVol[i] * 1);
      }
   }
   else
   {
      _root["itemSE" + i].sound.loadSound(itemSE[i],false);
      _root["itemSE" + i].sound.setVolume(itemSEVol[i] * 1);
   }
   i++;
}

アイテム音を定義しているスクリプトの一部です。loadSoundがRuffle上でエラーになり、スクリプト全体が停止してしまっている可能性があります。ショットとボム以外のアイテム音はそもそも鳴らない仕様だと思いますが、その処理がここでエラーになった感じでしょうか。

AIによる分析では、汎用音は MovieClip に紐付けて生成されるため安全。アイテム音は空の Sound オブジェクトなので不安定、とのこと。スクリプト内でmaxItemNo = 10;と定義されているので、config.txtでアイテムを出さない設定にしてもループ実行されます。現時点での根本的な解決には、b2.swfかRuffleの改造が必要になりそうです。

本当のところはよく分かりませんがとりあえず納得です。AIの進歩は凄まじいので、もうしばらくすれば完璧な解決策を出してくれるのでは。新規でブロック崩しを作ったほうが早いとは思いますが。

音が出ないエラー回避策(アイテムラベルを埋める)

上記の問題部分を回避するべく、config.txtのアイテムラベル11個をすべてショットとボムで埋めたところ、音が出ることを確認しました。ショットとボムしかアイテムを出せなくなりますが……。具体的にはアイテムの記述をこんな感じでコピペしました。(#3以降は出現率0です。)

&item=#1,shot,0.5,10,100,default,100,15,#2,bomb,1,1,50,default,100,100,100,200,#3,bomb,0,1,50,default,100,100,100,200,#4,bomb,0,1,50,default,100,100,100,200,#5,bomb,0,1,50,default,100,100,100,200,#6,bomb,0,1,50,default,100,100,100,200,#7,bomb,0,1,50,default,100,100,100,200,#8,bomb,0,1,50,default,100,100,100,200,#9,bomb,0,1,50,default,100,100,100,200,#10,bomb,0,1,50,default,100,100,100,200,#11,bomb,0,1,50,default,100,100,100,200,

改造は不要でconfig.txtの書き換えだけで済むので、アイテムにこだわらなければこれで十分かもしれません。Ruffleが対応したらアイテムを追加してもいいですし。こういう方法もあったということで……。

音が出ないエラー回避策(古いバージョンver.1.08dを使う)

(2025/08/25追記)暫定的な処置として、b2.swf最新バージョンではなく古いバージョン(1.08d)に変更することで効果音が鳴るようになりました。

設定ファイルのフォーマットが若干異なり、アイテムが出なくなってしまったので少し書き換えました。過去の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などは何も書かなければデフォルトが適用されると思います。

以前のバージョンも配布し続けてくださっていて助かりました。その後の更新はアイテム追加と挙動の修正なので、あまり問題はなさそうです。

紆余曲折の日記は別の記事に書きました。

それにしてもこんなに検証を重ねることになるとは思いませんでした(ほぼAIに丸投げした結果ですが)。まあそのうちRuffleが対応することでしょう。全幅の信頼。

おわりに

この記事をほとんど書き終わってからB2ブロック崩しとRuffleについて調べたところ、2023年の3月にRuffleのアップデートにより再生が可能になったとのこと。サウンド関係の解決もそう遠くないのでは。

世の中にはまだRuffleの存在を知らず、「Flashは終わった」と思っている人が多いと思います。Flash終わってなかった!の驚きを共有したいものです。

前回のRuffleを使ってみた記事はこちら↓

Categories:

About

趣味のゲーム作りの日記帳

このサイトについて

Hagi42

ゲーム制作初級者
Unity Visual Scriptingの民

Pick Up
適当ポエムというフォント配布
フリーフォント『適当ポエム』配布
2024年Google検索ランキング入りを果たしてしまった共同制作作品『滋賀県輪投げ』
朝のニュース番組で実況プレイされるに至った英語リスニング的なあほげー参加作
GamingDesk
1000作品以上のフリーゲームプレイ記録