2016年3月15日火曜日

HTML5で60fpsで動くSTGが作れる限界を探る

HTML5（JavaScript）で60fpsのSTGが作れる限界点を探ろうという趣旨の記事です。
以下のデモを随時更新していきます。（更新状況はコメントに記載）

（備考）
・PCブラウザ専用（Chrome推奨）
・カーソルキーで8方向に移動
・[Z] キーでショット発射
・[SHIFT] キーで低速移動

（PCブラウザ別の動作状況）
・Chrome: ◯ 正常に動作します
・Safari: △ 音が鳴りません（何らかのプラグインが必要？）
・IE: △ 音が鳴りません（何らかのプラグインが必要？）
・Edge: × 動きません（ロード途中で止まります）
・スマホ全般: × 動きません（ロード途中で止まります）

（ホスティング）
上記のデモははGitHubを使ってホスティングしています。
最初は suzukiplan.com でホスティングしていましたが、HTML5（静的ページ）ならGitHub Pagesでホスティングできてしまいますね。（しかも、修正をgh-pagesブランチへcommit後は git push だけでデプロイまで出来てしまうという手軽さ）
https://github.com/suzukiplan/html5-60fps-stg-demo
時刻:

8 件のコメント:

  1. SUZUKI PLAN2016年3月15日 9:03

    現時点では
    ・自機の移動
    ・ショット発射
    ・敵の登場＋移動（まだ当たり判定なし）
    という状態。
    これぐらいなら60fps余裕ですね。

    返信削除
  2. SUZUKI PLAN2016年3月15日 23:19

    自機のショットと敵機の当たり判定を追加。
    enchant.jsとWebAudioの両方とも、オーディオ周りの実装がかなり微妙な気がする。
    同じオーディオリソースに対してplayをした時、直前の再生を止めてから鳴らすのが期待する動作だが、再生を無視するというクソ仕様（これはchromeのWebAudioの仕様）。
    だから、再生する直前にstopをする必要があるが、一度もplayしていない状態だとenchant.jsがエラーになるため、無駄に実装の手数が増えてしまう。
    実質、WebAudioが使えるのはchromeだけなので、この辺りはenchant.jsでよしなに実装していれば良さそうな気がするのですが。

    返信削除
    返信
    1. SUZUKI PLAN2016年3月15日 23:34

      まぁ、enchant.jsの方はMITで組み込んで使っているので、自分で直せば良いだけか。恐らく最新版へ追従していくより、無駄な機能を削ったり必要な機能を追加していった方が限界点が遠くなるのではないかと思い始める。

      削除
  3. SUZUKI PLAN2016年3月17日 1:30

    ホストティング先を suzukiplan.com から GitHub pages に変更しました。
    これでゲームの更新が大幅に楽に成った（gitコマンドだけでできる）

    返信削除
  4. SUZUKI PLAN2016年3月17日 1:50

    しかし、状況報告にコメント欄を使っているけど、コメント数が伸びてきたらどうなるのかは未知数。私の記事に限らず、Bloggerで沢山コメントが付いている記事って見たことがないので。
    ・件数の上限とかあるのか
    ・最新から順に表示されるのだろうか
    あたりが謎。

    返信削除
  5. SUZUKI PLAN2016年3月19日 22:24

    先日書いた同じオーディオリソースに対してplayをした時の動作が期待通りの結果になるようにenchant.jsを修正。まぁ、この調子でenchant.jsの都合の悪い実装部分は、コチラの都合の良い形にガシガシ修正していく方向で。
    https://github.com/suzukiplan/html5-60fps-stg-demo/commit/0ead9d683b7eee090e2ab214372eb8245132dc73

    本家のエンハンスやバグフィックスがあった時に取り込むのが面倒になりますが、まぁ良いでしょう。

    返信削除
  6. SUZUKI PLAN2016年3月19日 23:24

    敵の爆破処理を実装。
    う〜ん...もうちょっと気持ちよくしたい。
    私がSTGで一番凝らせたいのは、弾幕ではなく敵の爆破演出です。
    ズッカン、ズッカン気持ち良く壊していける破壊の気持ち良さが必要なので、もうちょっと（というよりかなり）エフェクトは無駄に凝らせたい。単純に派手にすれば良いというものではないから難しい。

    返信削除
  7. SUZUKI PLAN2016年3月19日 23:27

    しかし、ブラウザでこのゲームを2インスタンス同時に起動してみたら、私のPC（MacBook Pro retinaの割と新しいヤツ）で、早くもフレーム落ちが散見されるなw（1インスタンスなら余裕だけど、2インスタンスだとハッキリわかる）

    返信削除

注: コメントを投稿できるのは、このブログのメンバーだけです。

登録: コメントの投稿 (Atom)

合理的ではないものを作りたい

ここ最近、実機版の東方VGSの開発が忙しくて、東方VGSの曲追加が滞っています。 東方VGS(実機版)のデザインを作りながら検討中。基本レトロUIベースですがシークバーはモダンに倣おうかな…とか pic.twitter.com/YOYprlDsYD — SUZUKI PLAN (...

  • 覇邪の封印（MSX版）の攻略手順
    MSX版「覇邪の封印」の攻略情報を書きます。 MSX版には、パッケージに布製の地図とフィギュアが同梱されていますが、これらは単なるオマケではなく、ゲームをプレイするために必要なツールでして、説明書でもフィギュアの左足部分を現在位置に置いてプレイする旨が指示されています。実際に地図...
  • EnjoyableでMacでWindows用のゲームパッドを使う
    家電量販店のPCゲームパッドコーナーに行くと、軒並みWindows用のゲームパッドしか売っていません。稀に「Mac OS X対応」を謳っているゲームパッドも置いてありますが、実際に動かしてみると妙に誤動作をして更にガッカリしたりとか（経験済み）。 色々と試してみたのですが、最...
  • MSXを技術的に振り返る
    MSX開発の関係者を匂わせるタイトルかもしれませんが、私は全然関係ない（外野）です。 私はマイコン世代（死語）の人間ですが、実はリアルタイムでMSXは触ったことすら無いです。私が最初に触ったパソコンはPC-9801（16bit機）で、8bit機のMSXは触る機会すらありませんでし...