Stepped animation of gui node scaling on iOS

Bugs
#1

I use gui node scaling and position animation to create character breathing effects. The face and head elements are separate nodes.

On macOS everything looks smooth as expected, but on the iOS device, the animation looks staggered. The first video is macOS, the second is iOS.


Gui node used as the template:

Screenshot 2022-01-09 at 14.36.31
Screenshot 2022-01-09 at 14.36.311270×794 96.3 KB

The code of breathing:

function RespectView:animate_breathing(direction)
  ...

  gui.cancel_animation(self.emotion_node, 'scale.y')
  gui.animate(self.emotion_node, 'scale.y', scale_y, go.EASING_INOUTSINE, duration, delay)

  gui.cancel_animation(self.face_node, 'position.y')
  gui.animate(self.face_node, 'position.y', position_y, go.EASING_INOUTSINE, duration, delay)

  gui.animate(self.face_node, 'scale.x', scale_x, go.EASING_INOUTSINE, duration, delay, function()
    RespectView.animate_breathing(self, not direction)
  end)
end

Any ideas to solve it?

#2

What exactly iPhone do you use, and what is your game.project->Display settings?

#3

iPhone X + iPhone 13 mini.
Display settings:

[display]
width = 320
height = 568
high_dpi = 1

It’s like there’s a reason, but at the same time on macOS, when I stretch the game window to 5K, everything still animates smoothly.

#4

Could you please provide an isolated repo case project, I would like to play with that a bit?

UPD: It is possible that bug appears because of using large coordinates and shader precision isn’t enough.
Here is example with a similar issue for labels.

@astrochili Just try to copy/paste the gui material into your project from builtins (with shaders) and change precision of position in vertex shader from mediump to highp

5 Likes
#5

Your solution with highp really solves the problem. Thank you!

5 Likes