1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

pixi.jsでtickerのFPSが端末の状態に依存しないように見せる

Posted at

スマホの低電力モードだとpixi.jsのFPSが半分になる問題を無理やり解決する
この記事の続き

頂いたコメントによると、FPSが単純に半分になったりとかだけではないらしい。
FPSが中途半端な数字(単純な60の倍数以外)でもなんとか上手く動いているように見せたい。

script.js
let app = new PIXI.Application();

/*この辺をどうにかしたらしっかり解決しそうなんだけどなあ
app.ticker.speed = 1;
app.ticker.maxFPS = 30;
app.ticker.minFPS = 30;
*/

document.getElementById("game").appendChild(app.renderer.view);//domに貼り付け

app.ticker.add(loop);//ループ処理追加

let time = 0;
let txt = new PIXI.Text(time, {fill:0xFFFFFF});//経過時間(1/60s)を表示するテキスト
app.stage.addChild(fps);

function loop(delta){
    time += 1*delta;//FPSが端末に依らないように「見せる」処理
    txt.text = time;
}

deltaはtickerの中で使える変数で、前のフレームからの経過時間(1/60s)が実数で代入されている。
例えばスクリプト中のように、timeは本来ならフレームごとに1増えて然るべきだが、1*deltaを増やすことで60FPSを達成しているように見せかけることができる。
ただしあくまでも「見せかけ」なので、実際に1秒間に60回計算が行われるとは限らない。

どんな環境でも一律でFPSを30にしたりする方法があればいいんだけどなあ。
ticker.speed, ticker.maxFPS, ticker.minFPSあたりを上手いことやればいい感じになりそうな気がしているが、このやり方だとどうしても環境によって差異が生じる。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?