GUI on Mobile Devices

Questions
1

I wrote a 2D BJS GUI app that works great on PC, but when I run on mobile the rendering is totally hosed. It seems that none of the objects get drawn to the proper scale (e.g., even simple rectangles that are specifically set to small pixel sizes are getting stretched to full screen, height/width are out of proportion, and input textboxes don’t respond to input.) Perhaps there are some configuration issues that I’m unaware of, but I can’t find much on this in the documentation.

Does anyone have any insight on this?

2

Are you setting the AdvancedDynamicTexture’s idealWidth and/or idealHeight differently for different device sizes? Or there’s some other size/scaling properties that you’re setting?

It will be better thou if you can make a small playground to show us the problem and what settings you’re using. :slight_smile:

3

Are you setting the AdvancedDynamicTexture’s idealWidth and/or idealHeight differently for different device sizes?
No. Should I be?

Or there’s some other size/scaling properties that you’re setting?
No. Should there be?

I appreciate your response! A playground example wouldn’t be my first choice on how to resolve this, as the project is relatively large and I’d have to devote quite some time figuring out how to reduce it, and even then perhaps it wouldn’t be representative. I posted here to see what input I could get up front - perhaps there is something obvious that I just am not aware of. (Lowest hanging fruit first!)

Have you done much in the way of BJS on mobile? I’ve quite a bit of experience with game programming, but very little with mobile devices. An Achille’s heel!

4

Not saying you should just wondering if you are since otherwise it should work I think. For example does this basic playground from the GUI doc work on the mobile devices that you’re testing on? It sets the control’s width and height in pixels and has no other size or scaling configuration and it isn’t hosed on my iPhone for example. So I wonder what you’re doing differently if that one works for you.

Well I’ve gotten a few working about how I wanted but am by no means an expert on BJS GUI’s for mobile. Maybe others will be able to help more but I imagine will be difficult without a small reproduction. If it happens with a simple rectangle set in pixels like you said then it seems that could be reproduced in a small playground? :slight_smile:

5

CC @DarraghBurke for help :slight_smile:

6

Are you listening for “resize” events and calling engine.resize()? The playground has the following code:

window.addEventListener("resize", () => {
            if (!this._engine) {
                return;
            }

            this._engine.resize();
        });

You may need something similar.

1 Like
7

Update: I resolved this. The problem came down to a canvas adjustment I had made to resolve some rendering/anti-aliasing issues awhile ago, and somehow overlooked when analyzing this issue. Disabling that change fixed this problem (and I found a better solution to the original problem).

In the end, there doesn’t appear to be a problem at BJS as described above. (It may be best to remove this post, as it doesn’t really provide much insight to real issues - unless it may perhaps be useful to someone who somehow manages to encounter these issues for similar reasons! But my vote is no - this thread should go! LOL)

Thanks guys for your help nonetheless :slight_smile:

3 Likes