福野泰介の一日一創 - create every day

映画の10倍、普通の4倍、秒間240回描画! 革新的ディスプレイに備える軽量ゲームフレームワーク sq-game.js

2018/10/13
#js #game 

4Kや8K、映像の進化は画面解像度だけでなく、時間解像度も進化してました。
通常、秒間60回、60Hzで更新される画面、なんと4倍の240Hzにも達しています。(実験では480Hzも!)

レースゲームなど、動きが激しいアクションゲームでのフレームレートはとても大事。
処理が重たいゲームで30fps(frame per second、秒間更新回数)なものは、操作の遅れが最大33ミリ秒(1秒/30)発生し、見た目にもカクカクぎこちなく見えて幻滅です。

初代ファミコンも60fps(正確には59.97fps?)のなめらかなでクイックな反応が楽しい。ゲームによっては敵が多く出すぎて「処理落ち」と呼ばれるフレームレートの低下も当時でも、よく知られた現象でした。

そんな重要な要素、フレームレートが4倍にもなった世界、ゲームに限らず未来を感じます。ブラウザ上でも手軽に実験できそうなので、JS用かんたんゲームフレーム「sg-game.js」を作って、その実現の時を待つことにしました。

サンプルアプリ「FPSChecker」は、その環境でのリフレッシュレートを表示しながら、ぐるぐる色を自身の角度を色相としながら回る円、タップまたはクリックするほどに回転周波数が変わります。 10Hzにしたときに残像で見える円の数、通常の環境では6ですが、12コ、14コ、24コと増えるはず。(480Hz環境なら48コ!)


FPSChecker」(スクリーンショットは60fps環境を模したもの)

IO-DATA製24.5インチ240Hz対応モニター「KH2500V-ZX2」を買って試してみます!
(「EX-LDGC251UTB」と同じ仕様のパッケージ違い)

今回、新設した正方形ゲーム用シンプルフレームワーク「sg-game.js」、ゲームづくりに、JavaScript言語によるプログラミング学習に、活用ください。


こちら、最小サンプル「min.html」をコピペし、min.htmlとして保存、ブラウザで開けば動きます!
PC、iPhone、iPad、Android、いずれもOK!

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>min</title> <script src="http://taisukef.github.io/sq-game/sq-game-r1.js"></script> <script>"use strict"; var gamemain = function(game) { game.loop = function(g, ts, dt, vw) { g.setColor(255, 0, 0); g.fillCircle(500, 500, ts % 1000); }; }; </script> </head></html>

正方形ゲーム専用フレームワーク sq-game.js の使い方
- gamemain メソッドをつくる
- 受け取った、game オブジェクトに 描画用ループ loop メソッドを設定する
- g は canvas、ts は時間、dt は時間差分、vw はバーチャル幅と高さ1000
- 必要なら、タップされた時の操作用に tap メソッドを設定する

こちらが、sg-game.js を使った、上記、FPSCheckerのプログラム!

<!DOCTYPE html><html><head><meta charset='utf-8'/> <title>FPSChecker</title> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta property="og:image" content="ss.png"/> <link rel="apple-touch-icon" href="icon.png"/> <script src="sq-game-r1.js"></script> <script>'use strict'; var gamemain = function(game) { game.tap = function() { if (hz == 10) hz = 0.1; else if (hz < 0.95) hz += 0.1; else hz++; }; var hz = 1; var th = 0; game.loop = function(g, ts, dt, vw) { g.setColor(0, 0, 0); var fh = 60; g.setFontSize(fh); var s = "" + fixfloat(hz + 0.05, 1) + "Hz"; g.fillText(s, 10, 10 + fh); var s = "FPS: " + Math.floor(1000 / dt) + " / " + fixfloat(dt, 2) + "ms"; g.fillText(s, vw - g.measureText(s).width - 20, 10 + fh); th += dt / 1000 * Math.PI * 2 * hz; var r = vw / 4; var x = vw / 2 + Math.cos(th) * r; var y = vw / 2 + Math.sin(th) * r; var cr = 90; var rgb = hsv2rgb(th / (Math.PI * 2) * 360 + 90, 0.8, 0.8); g.setColor(rgb[0], rgb[1], rgb[2]); g.fillCircle(x, y, cr); g.setColor(255, 255, 255); var fh = 80; g.setFontSize(fh); var s = "" + fixfloat(hz, 1); g.fillText(s, x - g.measureText(s).width / 2, y + fh / 4); }; }; </script> <style> a { color: gray !important; } </style> </head> <body> <div id="src"> FPSChecker<br> APP: CC BY <a href=http://fukuno.jig.jp/1686 target=_blank>fukuno.jig.jp</a><br> LIB: CC BY <a href=sq-game-r1.js target=_blank>sq-game.js</a><br> </div> </body> </html>

ちなみに、映画のフレームレートは秒間24コマ、CGはきれいになってもなかなか変わりませんね。
8Kで秒間240コマの映画とか、未知の体験も楽しみです。

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / アイコン画像 / プロフィール画像