Problem with scrollable text area using WebGL

At the end of section 3 of the 2D course they have you publish your game using WebGL. I had the need to create a scrollable Text field for my game, since the text might exceed the size of the area, so I found a way to do that here: https://www.youtube.com/watch?v=5XJBBWI2F0I

This worked fine when running the game directly in Unity.

However, when I changed over to WebGL I see that what looks like my masking image is exceeding the size of the area for the Text field. If I run it locally, using the Windows Microsoft Edge browser (does not work using Firefox, possibly a security restriction) it only looks correct if I have it run in full screen mode.

On the website though (https://sharemygame.com/@lvskiprof/warlock) it doesn’t look right running it in full screen mode (using Firefox or Microsoft Edge).

Any idea why this happens?

Does the masking image somehow need to be made resizable, since the webpage can be resized?

Not a show stopper at this point, but would like to know why it is misbehaving. I have the game in GitHub, in case someone wants to look at it.

Mike

Hi Mike,

Thank you for your message.

With 250,000+ students to support I’m afraid we can’t help out with issues that are outside the scope of the course.

Maybe this thread helps:

Also please feel free to ask for advice from our helpful community of students over on our Discord chat server.

Good luck :slight_smile:

Nina,

the info you provided is great, but I am not getting an actual error, just bad behavior. I think a couple of pictures will show you what I mean.

Here is what it should look like. If I use the local copy on my system with Explorer in full screen mode it looks fine:

However, if I use any browser (Chrome, Explorer, or Firefox) to view it on the website URL (or not full screen with Explorer viewed locally on my system) it looks like this:

I believe the grey box you see extending above and below the upper text area is the graphic I am using as a mask for the scrollable text area there. Not sure why full screen mode doesn’t work when using the URL the way it does when I do it locally.

BTW - Neither Firefox nor Chrome display it correctly locally. Firefox gets an error and Chrome you have an almost blank display.

Here is the console output on Chrome, if you want to take a look at it:

The console looks normal. What did you use for the boxes and how are they arranged in the editor?

Maybe there is an issue with the anchors. See here:
https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html

Nina,

Based on that page I changed the anchors for the parent control to match to text area. That is what is listed as ScrollTextControl in my hierarchy. Under it is Scroll Background, which is just the green background panel for the test, and the Story Text, which is simply a Text UI object. Separately under it are the Scrollbar, which has Sliding Area and Handle objects under it.

I have selected ScrollTextControl so you can see the anchor points here.

Is there someway to make it scalable?

I’m afraid you’ll have to toy around with the values until you get the desired result. I usually don’t work with scrollable text, and since this is not part of our course, I cannot do any research for you.

Please feel free to ask our helpful community of students for advice in our official Discord chat.

I appreciate that Nina. I will check around and once I have a solution I will post it here.