Problem with scrollable text area using WebGL

[lvskiprof]

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

[Nina]

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:

WebGL Debugging

A WebGL build of your game is a great way to share it with friends and family, however, when an error occurs in your game, it can be very difficult to initially identify the issue. Quite often be presented with a pop-up resembling this; [image] Not only is this not a lot of fun, it can feel incredibly overwhelming. The following steps should help you to rebuild your project and identify the issue, hopefully, you will then be able to resolve the problem yourself, but if not, you will at leas…

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

Good luck

[lvskiprof]

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:

[Nina]

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

[lvskiprof]

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?

[Nina]

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.

[lvskiprof]

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

[lvskiprof]

I have a possible solution using a Scroll View UI element, but still am working out the kinks. Right now I don’t get a scroll bar when the text goes beyond the size of the viewable area.