How to set SpinePlayer to 30fps? I want to reduce the number of refreshes and optimize performance.
How to set SpinePlayer to 30fps?
To set the SpinePlayer to 30fps, you can control the update rate by adjusting the delta time passed to the AnimationState
update method. Here is an example of how you can achieve this:
<script>
new spine.SpinePlayer("player-container", {
...
onBeforeUpdate: function(player, delta) {
const fps = 30;
const frameTime = 1 / fps;
player.accumulate = (player.accumulate || 0) + delta;
if (player.accumulate >= frameTime) {
const step = player.accumulate - (player.accumulate % frameTime);
player.accumulate -= step;
player.state.update(step);
player.state.apply(player.skeleton);
}
}
});
</script>
In this script, onBeforeUpdate
is used to control the update rate. The accumulate
variable stores the accumulated time, and the update is only applied when the accumulated time reaches the frame time for 30fps.
While this will reduce the number of frames calculated on the Spine side, it will still be running at the screen refresh rate. This is due to SpinePlayer using requestAnimationFrame()
. I'm afraid that doesn't have a way to go lower than the screen refresh rate.