フラッシュゲームをHTML5に変換する

Sep 12, 2025

操作方法

HTML5とJavaScriptを支持して、Adobeによってゆっくりと放棄されています。当時の公式の終わりは2020年に設定されています。そしてそれはこの記事が便利になるところです。

2018年の2004年のフラッシュウェブサイトを再構築します

以下のヒントは、HTML5ゲーム開発者がフラッシュゲームをJavaScriptに変換するとき、および開発プロセス全体をできるだけスムーズにすることを目的としています。必要なのは、JavaScript、WebGL、およびPhaserフレームワークの基本的な知識です。

SWFからJavaScriptへのゲームデザインを変更すると、より良い ユーザー体験 それは今度はそれをモダンな外観に与えます。しかし、それを行う方法は？この古い技術を取り除くには、専用のJavaScriptゲームコンバーターが必要ですか。まあ、HTML5の変換へのフラッシュはケーキになることができます - これは、経験豊富なJavaScriptゲーム開発者がその問題について言わなければならないものです。

あなたのデザインプロセスを簡単にしておくと思いますか？ A. ウェブサイトビルダー そして右 ウェブホスティング プロバイダはそれをそのように保つことができます。

01. HTML5ゲーム体験を向上させる

ゲームを別のプラットフォームに変換することは、それを改善し、その問題を修正し、視聴者を増やす優れた機会です。以下に簡単に行うことができ、検討する価値があるものはいくつかあります。

モバイル機器をサポートする
FlashからJavaScriptへの変換により、より幅広いオーディエンスに到達することができる - タッチスクリーンコントロールのサポートのユーザーは通常ゲームに実装される必要があります。幸いなことに、AndroidとIOSデバイスの両方がWebGL、SO 30または60 FPSレンダリングをサポートするようになりました。多くの場合、60のFPSは問題を引き起こすことはありません。これは、モバイルデバイスがますます優れたものになるにつれて、時間とともに向上します。
性能を向上させる
ActionScriptとJavaScriptの比較になると、後者は速くなります。それ以外に、ゲームを変換することは、ゲームコードで使用されるアルゴリズムを再生するための良い機会です。 JavaScriptのゲーム開発では、オリジナルの開発者によって残されている未使用のコードを完全に最適化することができます。
バグを修正し、ゲームプレイを改良します
ゲームのソースコードを調べる新しい開発者を持つことは、既知のバグを修正するのに役立ち、または新しく非常にまれなものを発見するのに役立ちます。これにより、プレーヤーを刺激しなくなるゲームをプレイすることができます。それは彼らがあなたのサイトでより多くの時間を過ごし、あなたの他のゲームを試すように彼らに励まします。
Web Analyticsを追加する
トラフィックを追跡することに加えて、Web Analyticsを使用して、プレイヤーがどのようにゲームでどのように振る舞うか、およびゲームプレイの間に彼らが動けなくなる場所についての知識を集めることもできます。
ローカライゼーションを追加する
これは観客を増やすだろうと、あなたのゲームをプレイしている他の国からの子供たちにとって重要です。それともあなたのゲームは英語ではなく、あなたがその言語をサポートしたいですか？

02. 60 fpsを達成します

JavaScriptのゲーム開発に関しては、ゲーム内ボタン、ウィジェット、およびその他のGUI要素のHTMLとCSSを活用することが魅力的かもしれません。私たちのアドバイスはここで注意することです。それは対抗的ですが、実際にはドムの要素を活用して複雑なゲームではパフォーマンスが低く、モバイル上の重要性が高まります。すべてのプラットフォームで一定の60 FPSを達成したい場合は、HTMLから留学し、CSSから辞任できます。

ヘルスバー、AMMOバー、スコアカウンタなどの非対話型GUI要素は、レギュラーイメージ（ 'Phaser.Image'クラス）を使用して、トリミングのための '.crop'プロパティを活用して、フェイザーで簡単に実装できます。単純なテキストラベルのためのテキストのクラス。

ボタンやチェックボックスなどの対話型要素は、組み込みの 'Phaser.Button'クラスを使用して実装できます。その他の複雑な要素は、グループ、画像、ボタン、テキストラベルなど、さまざまな単純型で構成できます。

03.カスタムフォントのロード

カスタムベクトルフォント（TTFまたはOTFなど）でテキストをレンダリングしたい場合は、テキストをレンダリングする前にフォントがブラウザによって既にロードされていることを確認する必要があります。 Phaser V2.6はこの目的の解決策を提供していませんが、別のライブラリを使用することができます - Webフォントローダー。

フォントファイルがあると仮定すると、ページにWebフォントローダーが含まれていると仮定すると、フォントのロード方法の簡単な例です。 Webフォントローダーによってロードされる単純なCSSファイルを作成します（HTMLに含める必要はありません）。

 @フォント面{
  //この名前はJS.で使用します
  フォントファミリー： 'Gunplay';
  // FontファイルへのURLは、相対的または絶対的なものにすることができます
  SRC：URL（ '../ fonts / gunplay.ttf'）フォーマット（ 'trueType'）;
  フォント重量：400;

WebFontConfigという名前のグローバル変数を定義します。これが通常十分であろうものと同じくらい簡単なもの：

 var webfontconfig = {
  'クラス'：false、
  'タイムアウト'：0、
  'active'：function（）{
  //フォントは正常にロードされました...
  }、
  'custom'：{
  「家族」：['gunplay']、
  //前述のCSSへのURL
  'URL'：['styles / fonts.css']
  }

コードを上記の「アクティブ」コールバックに入力することを忘れないでください。以上です！

04.ゲームを保存します

今、私たちはJavaScriptの変換から私たちのフラッシュの中点にあります - シェーダの世話をする時が来ました。 ActionScriptにローカルデータを永続的に保存するには、 'SharedObject'クラスを使用します。 JavaScriptでは、単純な交換がです LocalStorage API これにより、後で検索するための文字列を保存することができ、ページリロードを生き残ってください。

データを保存することは非常に単純です。

 var進行= 15;
LocalStorage.SetItem（ 'mygame.progress'、進捗状況）;

上記の例では、 'Progress'変数が数値であることに注意してください。これは文字列に変換されます。

ロードも簡単ですが、取得した値が存在しない場合はNULLになります。

 var progress = parseint（localstorage.getItem（ 'mygame.progress'））|| 0;

ここで戻り値が数値であることを確認しています。存在しない場合は、0の「進行」変数に0が割り当てられます。

また、より複雑な構造物、たとえば、JSONを保存および検索することもできます。

 var stats = {'goals'：13、 'wins'：7、 '損失'：3、 'draws'：1
;;
localStorage.setItem（ 'mygame.stats'、json.stringify（stats））;
...
var stats = json.parse（localStorage.getItem（ 'mygame.stats'））|| {};

'localStorage'オブジェクトが利用できない場合があります。たとえば、ファイル：//プロトコルを使用する場合、またはプライベートウィンドウにページがロードされたとき。以下の例に示すように、コードが機能し、デフォルト値を使用し続けることを確認するために、 'try and catch'ステートメントを使用できます。

 {
    var progress = localStorage.getItem（ 'mygame.progress'）;
キャッチ（例外）{
  // localStorageが利用できない、デフォルト値を使用します

覚えておくべきもう1つのことは、保存されたデータがURLごとにではなくドメインごとに保存されることです。したがって、多くのゲームが単一のドメインでホストされている危険がある場合は、保存時にプレフィックス（ネームスペース）を使用するのが良いです。上の例では、 'mygame。'プレフィックスです、そして、あなたは通常それをゲームの名前と置き換えたいです。

あなたのゲームがiFrameに埋め込まれている場合、LocalStorageはiOSに保持されません。この場合、代わりに親IFrameにデータを保存する必要があります。

05.デフォルトのフラグメントシェーダ

Convert Flash games to HTML5: Custom default shader — カスタムデフォルトシェーダは、PhaserとPixijsの着色方法を置き換えるために使用できます。ヒットするとタンクが白を点滅します

PhaserとPixijsがスプライトをレンダリングすると、それらは単純な内部フラグメントシェーダを使用します。それは速度のために調整されているので多くの機能を持っていません。ただし、目的のためにそのシェーダを置き換えることができます。たとえば、レンダリングのためのより多くの機能を超えて、より多くの機能を超える機能を検査するために、それを活用することができます。以下は、Phaser V2に独自のデフォルトのフラグメントシェーダを供給する方法の例です。

関数preload（）{
  this.load.shader（ 'filename.frag'、 'shaders / filename.frag'）;
}
関数create（）{
  var renderer = this.Renderer;
  var batch = renderer.spriteBatch;
  batch.defaultShader =
  新しいPIXI.ABSTRACTFILTER（this.Cache.getShader（ 'filename.frag'））。
  Batch.SetContext（renderer.gl）;

06.着色方法を変更する

カスタムデフォルトシェーダを使用して、PhaserとPixijsのデフォルトの着色方法を置き換えることができます。 PhaserとPixijsの色合いは、テクスチャピクセルに所定の色で乗算することによって機能します。乗算は常に色を暗くします。これは明らかに問題ではありません。それは単にフラッシュ色合いとは異なります。私たちのゲームの1つについては、フラッシュと似ている色合いを実装する必要があり、カスタムデフォルトシェーダを使用できると決めました。以下はそのようなフラグメントシェーダの例です。

//追加するフラッシュ色合いと同様に、特定のTINTバリアント
//色に乗算しません。色の否定的
//このシェーダが正しく機能するように指定されている、すなわち設定する必要があります
// Sprite.tint.tint sprite全体を白に変える。
精密LOWPフロート。
VEC2 VTextureCORDを変える。
VEC4 VCOLORを変える。
ユニフォームSampler2D USAMPLER。
ボイドメイン（VOID）{
  VEC4 F = Texture2D（USAMPLER、VTEXTURECOORD）;
  float a = clamp（vcolor.a、0.00001,1.0）;
  gl_fragcolor.rgb = f.rgb * vcolor.a +クランプ（1.0  -  vcolor.rgb / a、0.0,1.0）* vcolor.a * f.a;
  GL_FRAGCOLOR.A = F.A * VCOLOR.A。

このシェーダは、色合いをタントに基本色を追加してピクセルを照らします。これが機能するために、必要な色のネガティブを供給する必要があります。したがって、白くなるために設定する必要があります。

 Sprite.tint = 0x000000; //この色は白いへのスプライト
sprite.tint = 0x00FFFF。 //これは赤

を与える

07.オーバードローを検査します

Convert Flash games to HTML5: Overdraw shader — 左側の写真は、プレイヤーがゲームを見る方法を示していますが、右側の1つは同じシーンにオーバードローシェーダを適用する効果を示しています

デフォルトのシェーダを置き換えることも、デバッグを手助けするために活用できます。以下に、このようなシェーダでオーバードローを検出できる方法について説明しました。

オーバードレインは、画面上の多数またはすべてのピクセルが複数回レンダリングされたときに発生します。たとえば、多くのオブジェクトが同じ場所を取り、別のオブジェクトを取り除き、もう一方にレンダリングされています。 GPUが毎秒レンダリングできるピクセル数を塗りつぶしレートとして説明します。現代のデスクトップGPUは通常の2D目的で過度の塗りつぶし率を持っていますが、モバイルのものはたくさん遅いです。

この1つのPIXIJSおよびPhaserでは、画面上の各ピクセルが書き込まれた回数を見つける簡単な方法があります。

ボイドメイン（VOID）{
  GL_FRAGCOLOR.RGB + = 1.0 / 7.0;

このシェーダは、処理中のピクセルを明るくします。番号7.0は、ピクセルを白くするために必要な書き込みの数を示します。あなたはあなたの好みにこの数を調整することができます。言い換えれば、画面上のより軽いピクセルが数回書き込まれ、白いピクセルは少なくとも7回書き込まれました。

このシェーダはまた、何らかの理由で依然としてレンダリングされている「見えない」オブジェクトの両方を見つけるのに役立ち、それがストリップされる必要がある過度の透明な領域を持つスプライト（GPUはそれでもテクスチャに透明なピクセルを処理する必要があります）。

08.なぜ物理学のエンジンがあなたの友達である理由

Convert Flash games to HTML5: Phaser physics debug — 画像の左側部分はゲームからのシーンですが、右側にはPhaser Physicsデバッグオーバーレイが上に表示されているのと同じシーンが表示されます。

物理エンジンは、物理体の模擬（通常は堅いボディダイナミクス）とそれらの衝突を担う責任があるミドルウェアです。物理学エンジンは2Dまたは3Dスペースをシミュレートしますが、両方ではありません。典型的な物理学エンジンが提供されます。

速度、加速度、関節、およびモーターを設定することによる物体移動。
さまざまな形状タイプ間の衝突を検出する。
衝突応答の計算、すなわち衝突時に2つのオブジェクトがどのように反応するかを計算します。

この目的のためにうまく機能するフェイザープラグインがあります。 BOX2Dは、Unity Game EngineとGameMaker Studio 2でも使用されています。

物理エンジンがあなたの開発をスピードアップしますが、あなたが支払う必要がある価格があります：ランタイムパフォーマンスの低下。衝突の検出と応答の計算は、CPU集約型のタスクです。携帯電話のシーンまたは顔の劣化性能、および60 FPSより深いフレームレートの減少を縮小しているだけでなく、いくつかのDynamicオブジェクトに制限されることがあります。

09.輸出音声

Flashゲームのサウンドエフェクトが.flaファイルの内部にエクスプレス効果がある場合は、この目的にサービスを提供するメニューオプションが不足しているため、それらをGUIからエクスポートできません（少なくともAdobe Animate CC 2017ではなくて）。しかし、それだけの解決策 - それだけの解決策があります。

関数NormalizeFileName（名前）{
  // CAMELCASE名をSNAKE_CASE NAMEに変換します
  戻り値.replace（/（[a-z]]）/ g、 '_ $ 1'）。（/ ^ _ /、 ''）.tolowercase（）を置き換えます。
}
関数表示パス（パス）{
  //ファイルパスを読みやすくします
  Unescape（Path）.replace（ 'file：///'、 ''）.replace（ '|'、 '：'）;
}
fl.outputpanel.clear（）;
if（fl.getDocumentdom（）。Library.getSelectedItems（）。長さ＆gt; 0）
  //選択したアイテムのみを取得します
  VARライブラリ= fl.getDocumentDOM（）。Library.GetSelectedItems（）;
そうしないと
  //すべてのアイテムを入手してください
  var library = fl.getDocumentdom（）。Library.Items;
//エクスポート先ディレクトリをユーザーに尋ねます
var root = fl.browseForFolderUrl（ 'フォルダを選択します。'）;
var errors = 0;
（Var i = 0; Library.Length; I ++）の場合
  varite =ライブラリ[i];
  if（item.ItemType！== 'sound'）
  継続する;
  var path = root + '/';
  if（item.originalCompressionType === 'Raw'）
  path + = normalizefilename（item.name.split（ '。'））+ '.wav';
  そうしないと
  path + = normalizefilename（item.name）;
  var success = item.exporttofile（パス）;
  あれば（成功）
  エラー+ = 1。
  Fl.Trace（Pathap（path）+ '：' +（成功？ 'OK'： 'エラー'））;
}
Fl.Trace（エラー+ 'エラー' '）;

スクリプトを使用してサウンドファイルをエクスポートする方法：

上記のコードを.jsflファイルとしてコンピュータに保存します。
Adobe Animateで.flaファイルを開きます。
コマンド＆gtを選択します。トップメニューからコマンドを実行し、開くダイアログのスクリプトを選択します。
これで、エクスポート先ディレクトリを選択するために別のダイアログファイルがポップアップされます。

終わった！指定されたディレクトリにWAVファイルがあるはずです。何が起こっているのは、MP3、OGG、またはAACなどに変換します。（あなたが安全に保つためにゲームファイルがある場合は、まともにアップグレードする クラウドストレージ 。）

10. MP3の使い方

いくつかの特許が期限切れになったため、古き良きMP3形式が戻ってきており、すべてのブラウザがMP3を復号化して再生できるようになりました。これにより、開発は少し簡単になります。ついに2つの別々のオーディオフォーマットを準備する必要はありません。たとえば、OGGファイルとAACファイルは以前に必要とされていましたが、今はMP3で十分です。

それにもかかわらず、MP3について覚える必要がある2つの重要なことがあります：

特にモバイルデバイスでは、ロード後にデコードする必要があります。すべての資産がロードされた後に一時停止が見られる場合は、PLP3が復号化されていることを意味します。
ループされたMP3は、ループされたMP3が少し問題になることです。解決策はMp3Loopを使用することです。この記事でもっと読む Compuフェーズによって投稿されました。

この記事はもともとCreative Web Design Magazine Web Designerの第277号に発行されました。 ここに問題277を購入してください または ここでWeb Designerを購読してください 。

関連記事：

デザイナーのための5つのカジュアルなゲーム
あなた自身のWebGL Physicsゲームを構築します
Unity Assetインポートパイプラインを理解してください

フラッシュゲームをHTML5に変換する

01. HTML5ゲーム体験を向上させる

02. 60 fpsを達成します

03.カスタムフォントのロード

04.ゲームを保存します

05.デフォルトのフラグメントシェーダ

06.着色方法を変更する

07.オーバードローを検査します

08.なぜ物理学のエンジンがあなたの友達である理由

09.輸出音声

10. MP3の使い方

操作方法 - 最も人気のある記事

脳を使用してニューラルネットワークを構築する

ブルマを使い始める

デジタルプレンエアー絵画の作成方法

あなたの絵画のスケールを達成する方法

PIXIJSでリップル効果を作成する

伝統的なイギリスの村のシーンを描く方法

神話の生き物を開発する方法

Reactで簡単な音楽プレーヤーを構築する

カテゴリ