Animation looks shaky on Android (SOLVED)

Questions
#1

I use animation group in atlas and load to texture of a GUI node. On Windows, it’s ok but when viewing on Android app it looks shaky. What could cause this issue?

I see that not only this animation, some of images are also distorted on Android, for example:

Screenshot_20240229_003231_Gallery
Screenshot_20240229_003231_Gallery1043×708 144 KB

#2

Is that a shader effect on the logo? My guess would then be that you are seeing a precision issue. There is no guarantee that lowp or mediump has the same precision on Windows and Android for instance.

5 Likes
#3

It’s not shader effect, just a sequence of images I used Photoshop timeline to export to.

Screenshot 2024-02-29 090722
Screenshot 2024-02-29 0907221920×1009 330 KB

Btw, is there any shader code or masking technique to archive the same effect?

#4

On Windows, it looks good

I think that it would be an issue of how Defold handle images on each platform.

#5

It may be that you are generating an atlas with size of ( 8192 x 4096 ). Android is most likely stuggling to display that large of a texture. I would try to limit the atlas max 4096x4096px and check results. Most pc GPU’s can handle very large textures and thats why its displaying fine on PC build.

1 Like
#6

How could I make the animation with that limit atlas size? I guess spliting it into 2 files won’t work :neutral_face:

#7

One thing I would try is to remove every other frame reducing the texture size in half. The results may surprise be very similar to the current look without loosing much in animation.

#8

I will try to see. If that’s true then I just wonder why the texture loaded but not displayed correctly in position or dimension. Any way to fix by Defold for that issue (just in case)

#9

It’s still… you can see it’s less shaky due to a half lower of images and fps

#10

It is still possible that this is precision issue but with uv

2 Likes
#11

Can you please also make sure that the game object and sprite isn’t placed on a half pixel. Are you applying any scale?

#12

I’m not using game object or sprite, just a GUI box node with the texture and it’s not scaled

Screenshot 2024-02-29 140649
Screenshot 2024-02-29 1406491920×1009 296 KB

Can it be related to camera? I’m using defold-orthographic lib

#13

custom_gui_material.zip (1.3 KB)
Please, try this GUI material for your GUI component.
The only change I made is mediump → highp for UV coods

2 Likes
#14

wow, it works! though I don’t know how it works :grinning_face_with_smiling_eyes:
thanks!

2 Likes
#15

Björn explained it here:

3 Likes
#16

Thanks! material stuff are still kind of mystery to me…

Is using highp cost more resources?
For me accuration is more important, so I will choose it.
Btw, is there a way to use the custom material as the default for all GUI component?

#17

Here is instruction about how to change the precision of shaders from mediump to highp for GUI elements in Defold, you’ll need to follow a series of steps:

  1. Copy the Built-in GUI Material:

    • Navigate to the builtins/materials/ directory in your Defold project.
    • Find the gui.material file. This is the default material file used by GUI components.
    • Copy this file and paste it into your project directory, preferably in a folder named materials or something similar.

  2. Create Custom Shader Programs:

    • Along with the gui.material file, you will also need the vertex and fragment shader programs. These are typically named gui.vp (vertex program) and gui.fp (fragment program).
    • Copy these shader files from the builtins/materials/ directory into your project directory, preferably into a materials/shaders folder.
    • Rename them to avoid confusion with the built-in shaders, e.g., custom_gui.vp and custom_gui.fp.

  3. Modify Shader Precision:

    • Open both the custom_gui.vp and custom_gui.fp files in a text editor.
    • In each shader file, locate the lines that define precision for texcoord related variables at the top of the file. It will look something like this: attribute mediump vec2 texcoord0;, varying mediump vec2 var_texcoord0; etc
    • Change mediump to highp for higher precision. For example, change to attribute highp vec2 texcoord0;, varying highp vec2 var_texcoord0; etc
    • Save your changes.

  4. Update the Custom GUI Material:

    • Open your copied gui.material file.
    • Update the paths to the vertex and fragment programs to point to your custom shader files (custom_gui.vp and custom_gui.fp).
    • Save the gui.material file.

  5. Apply the Custom GUI Material to GUI Components:

    • Open the GUI scene file where you want to use the high precision shaders.
    • In the Outline panel, select the root node of your GUI.
    • In the Properties panel, find the Material field. It will be set to the default gui.material.
    • Click the folder icon next to the Material field and select your custom gui.material file.

  6. Test Your Changes:

    • Run your game to see the changes in effect.

By default, Defold opts for lower precision (mediump) in shaders due to a balanced trade-off between performance and visual fidelity. Lower precision shaders are typically faster and more power-efficient, making them well-suited for mobile devices where resources are more limited. Higher precision (highp) shaders, while offering improved visual quality for certain graphical effects, can significantly impact performance and battery life on these devices. Therefore, it’s crucial to carefully consider the use of high precision shaders and conduct thorough testing across all intended platforms to ensure an optimal balance between performance and visual quality.

In your case, when working with large 8K texture atlases, the use of higher precision (highp) shaders becomes particularly important. For such textures, mediump precision might not suffice to accurately address and render the textures, leading to visual artifacts or imprecision in graphical representation.

4 Likes
#18

Thanks! just like you predicted what I was going to ask :grinning_face_with_smiling_eyes:

2 Likes