0
\$\begingroup\$

I have a background animation for a menu where I have to make the background larger than the canvas and drag it over it. Even though I am using a panel the same size as the canvas as a mask, this causes the camera to render beyond the canvas. How can I get this same effect while only rendering what's on the canvas?

w/o mask (so you can see how big this background is):

enter image description here

w/ mask:

enter image description here

running in editor (looks good):

enter image description here

running build of the game from executable (camera shows more than it should but nothing was changed):

enter image description here

The camera bounds are fixed to the canvas, as it should be, if I remove the animated background, so that is the major cause.

(BTW, I know the gifs look crappy but the animation is seamless; I just had to crop the gifs to reduce file size.)

Also, you guys might not be able to see, but the tiling pattern has a slight white border where the tiles meet (the sprite it uses is only like 227x227 on "repeat"), does anybody know how to avoid that?

UPDATE @ 1:12am PST: upscaling turd texture to 256x256 eliminates white border, as suggested by trollingchar.

\$\endgroup\$
  • \$\begingroup\$ Why to fix what players don't see? I decompiled some old flash games with moving tiled background and there was the same "problem", so I guess it's okay. About white borders, try to set clamp instead of repeat. Maybe resizing to 256x256 will get rid of them. \$\endgroup\$ – trollingchar Jun 14 '19 at 7:50
  • \$\begingroup\$ I'm playing it and I see it: When I build the game as an executable and run it, the full-screen game draws beyond the canvas. I just tried animating a material on a quad instead, which was a huge pain in the balls and still renders beyond the canvas (but at least the whole frame is filled). I agree that I should try upscaling to a power of 2. Will the texture still repeat as a a sprite if I change it from "Repeat" to "Clamped"? \$\endgroup\$ – hatinacat2000 Jun 14 '19 at 8:00
  • \$\begingroup\$ I can confirm that upscaling to 256x256 removed the white border between the little turd people. \$\endgroup\$ – hatinacat2000 Jun 14 '19 at 8:09
2
\$\begingroup\$

Maybe the resolution of editor screen differs from build screen. try setting Render Mode in Canvas component as Screen Space - Camera and selecting your UI rendering camera as Render Camera.

If still have any issue, Change UI Scale Mode in Canvas Scaler component from Constant Pixel Size to Scale With Screen Size and change Match depending on what you desire.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ YOU DID IT! Thank you! My camera is set to Main Camera because I am just making a mock menu system in its own project, so your first paragraph is already how my project is. However, when I changed the UI Scale Mode to Scale With Screen Size, and matched it to my target resolution, it works beautifully! Thank you again! \$\endgroup\$ – hatinacat2000 Jun 14 '19 at 14:29
  • \$\begingroup\$ @hatinacat2000 You're welcome, my friend. \$\endgroup\$ – Mohammad Zamanian Jun 14 '19 at 14:32
  • \$\begingroup\$ Could I also ask you: Would it be better for me to "subdivide my canvas" into 3 canvases, or would that wreck what I just fixed? \$\endgroup\$ – hatinacat2000 Jun 14 '19 at 14:39
  • 2
    \$\begingroup\$ @hatinacat2000 It's actually a good idea to use multiple canvases. canvas redraws all UI elements if only one is changed, so when you split your canvas into more by the category, you reduce the redraw call for UI elements. you could select one camera for all and the same canvas scaler too. \$\endgroup\$ – Mohammad Zamanian Jun 14 '19 at 15:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.