# Different game speed depending on monitor refresh rate

**URL:** <https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231>\
**Category:** Phaser 3\
**Created:** [August 20, 2020, 8:18am UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231 "2020-08-20T08:18:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BdR](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bdr/32/2621_2.png) [@BdR](https://phaser.discourse.group/u/BdR)\
**Post date:** [August 20, 2020, 8:18am UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231/1 "2020-08-20T08:18:42Z")

</div>

I’m working on a grid based snake game and I’ve put the movement updates in the `update()` event.  
similar to [this game](https://phaser.discourse.group/t/phaser-3-snake-game/1884).

 ![phaser_grid_based_snake](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/e2dce6a90e3b7fcc8800d32691b50081522b2d7d.png)

The gamelogic boils down to something like this (simplified for the example):

```
update () {
	// move down one pixel
	this._player.y++;

	// move left one pixel
	this._fox[0].x--;

	// after each tile move, check eat apple, move fox etc.
	this._tilestep++;
	if (this._tilestep > 32) {
		// check game logic
	}
}

```

This all works fine, except I’ve recently found out that this is can result in different speeds on different devices.

The Phaser `update()` event is aligned with the `requestAnimationFrame`, so it’s synchronized with the frame rate of the monitor. On most computers and tablets it’s 60 FPS, however certain graphics cards run at 120 or 144 FPS and some tablet browers seem to run at 30 FPS. So this will make the snake and enemies move either too fast or too slow.

The player and the enemies have to move at the same speed, so for example one tile per 500 ms, or per 300 ms on a later level to move faster. I was looking at `tween` for each move but that makes it difficult to coordinate. You’d have to use `tween.onComplete` on each individual move, but the game logic only has to be checked after all the moves are completed, not each individual move.

The game doesn’t use physics, and simply updating everything in one function works really well for the rest of the game logic, except for the speed issue.

What would be the best way to do this? Does anyone have some tips?

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [August 20, 2020, 10:37am UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231/2 "2020-08-20T10:37:41Z")

</div>

time = now();  
delta = time - previousTime;  
previousTime = time;  
fps = 1000/delta;

increment = 60/fps;

Now use increment instead of ++, e.g… y += increment.

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [August 20, 2020, 11:16am UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231/3 "2020-08-20T11:16:09Z")

</div>

Hi,  
Can you try this?

```javascript
  this.physics.world.setFPS(60);

```

Seems to force the update loop but doesn’t affect the rendering fps  
[https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.World.html#setFPS\_\_anchor](https://photonstorm.github.io/phaser3-docs/Phaser.Physics.Arcade.World.html#setFPS__anchor)

---

<div class="post-metadata">

**Author:** ![BdR](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/bdr/32/2621_2.png) [@BdR](https://phaser.discourse.group/u/BdR)\
**Post date:** [August 20, 2020, 12:13pm UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231/4 "2020-08-20T12:13:18Z")

</div>

@BlunT76 @Milton thanks for the replies 👍 I’m not using `physics` and enabling it just for this is not very cpu efficient I think. So I was looking into the idea of using delta, and just realised that `scene.update()` comes with two parameters `time, delta` by default, see [docs](https://photonstorm.github.io/phaser3-docs/Phaser.Scene.html#update__anchor).

So I’ve changes my code to something like this:

```
update: function(time, delta) {
	// at 60FPS value of delta will be around 16.666
	console.log("update -- time=" + time + " delta=" + delta);
	
	// pixel steps 0..2..4..6..8../..32 in fixed time of 1/60 sec per step
	var f = (delta / (1000 / 60)); // 1000 ms / 60fps
	this._increment = this._increment + (2 * f); // 2 pixels, adjusted for time delta

	// increment of 32 pixels completed, move snake and fox one tile
	if (this._increment > 32) {
		this._increment = this._increment - 32;
		this.moveSnakeAndFoxes();
	};
	// use `this._increment` to animate sprites positions
	//etc.

```

The game should now run at the same speed regardless of the monitor frames-per-second. So if it runs on for example 144fps then the value of `delta` will become around 6.944 and `f` will become proportionally lower.

My laptop browser always runs at 60FPS, so I will have to test it on different devices, but it seems to work.

---

<div class="post-metadata">

**Author:** ![rudyardcatling](https://avatars.discourse-cdn.com/v4/letter/r/8e7dd6/32.png) [@rudyardcatling](https://phaser.discourse.group/u/rudyardcatling)\
**Post date:** [August 25, 2020, 11:01am UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231/5 "2020-08-25T11:01:47Z")

</div>

hm, i never actually considered, maybe enough reason for a setting in the game config itself (optional ofcourse) … mister Davey ? 😛 or maybe that’s already inthere, the thing has gotten so complex it just keeps popping up new stuff every time i look at it.  
I’m not much of a pro, something like euhm, in most games, AAA and other you get this screen at config where you have to “adjust slider so the middle bit is barely visible” b/c every monitor/card config is somewhat different and they can’t buy it (not even microsoft/obsidian) so maybe something like that can be worked out regarding to “unit motion” or whatever newtonian distance over time sh-tuff (as you can read i am not a pro heh) , maybe one of the elder gods who live on phaser discord could manage that before breakfast, some relative factoring that can be included and put it on the examples list page  
or something … something something ( 😛 thats me \<- chaos)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 18, 2024, 8:41pm UTC](https://phaser.discourse.group/t/different-game-speed-depending-on-monitor-refresh-rate/7231/6 "2024-01-18T20:41:52Z")

</div>

Remember

```
distance = speed * time

```

so

```js
function update (time, deltaTime) {
  // `speed` in px/ms
  sprite.x += speed * deltaTime;
}

```

or

```js
function update (time, deltaTime) {
  // `speed` in px/s
  sprite.x += speed * 0.001 * deltaTime;
}

```

If you were doing, for example,

```javascript
function update () {
  sprite.x += 2;
}

```

assuming the game ran at about 60fps, 2px per update is 120px per second.

```js
function update (time, deltaTime) {
  sprite.x += 120 * 0.001 * deltaTime;
}

```