📲┃ui-ux

[hushed mortar]

The image i was using wasnt set as a 2d and sprite so i couldnt put it into the source image which resulted in it becomign oblong

[mortal robin]

Surprised it let you do it at all... 🤔

[hushed mortar]

Yeah same lol

[remote sentinel]

The lighting effect appears on the sceneview but not gameview, why? (Textmeshprougui)

[glacial fossil]

Use world space for canvas

[primal ermine]

what's the best way to make a Vertical Layout Group also take into account the size of child objects? (the component is on the 'Tab' game object)

[mortal robin]

Use LayoutElement on the children

[supple basalt]

Alternatively, if the children have variably-sized children of their own, attach another layout group

[winter jetty]

Yo, I have a texture with digits 0-9 that I'd like to turn into a font to use as a score. Is there any way to do this?

[winter jetty]

More specifically, I'd like to turn this texture into a font asset that I can use with TMP

[mortal robin]

There's no easy way to turn it into a font asset, no

You can use the sprite rich text tags to embed sprites into text, but it won't be a real font

[elder raptor]

Has anyone ever had any luck creating a game's GUI entirely through SpriteRenderers, without using UGUI or UI Toolkit? Right now I use UGUI, and most of my UI is constantly being animated with tweens which significantly impacts performance even when the UI uses multiple canvases. I am just about ready to abandon UGUI fully and try my hand at converting my game to utilize a SpriteRenderer-based interface system, but I am having a hard time finding anyone online who has already done this sort of thing. Its not that I want to find some existing solution where all of the work is done for me, but rather I am hoping for some sort of indicator that implementing a SpriteRenderer UI system is not a fools errand, and that it is a possibility that such a system would yield better performance than UGUI.

[mortal robin]

my understanding has been that e.g. DOTWeen is significantly more performant than animators for UGUI, is that not true?

[elder raptor]

That is my understanding as well, which is why I do not use Unity's animator component; I use a custom tweening system that is similar to DOTween to animate my UI.

[mortal robin]

Have you tried DOTween itself to see if their performance is better?

[elder raptor]

According to the profiler, the UGUI canvas update call is the primary source of performance drain while the UI is being animated, not the tweens themselves.

[mortal robin]

yes but the way you tween may affect the UGUI canvas update

[proud sandal]

Also consider that the final form of a sprite renderer based UI is UGUI. Bad performance usually comes from deep/complex nesting and layout groups. If you animate color, rotation and scale and keep positions that invoke layout groups mostly unchanged you may get better performance.

[strong notch]

how do I edit the gradient? whenever I click on the bar it just moves the node around

[proud sandal]

when you click on it (the gradient box) you get the usual panel for editing it

[frail spire]

Why is the text overlapping like this?
It's a TextMeshPro UI with a ContentSizeFitter where the Vertical Fit is set to Preferred Size.
The example text I used is "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nunc ligula, tincidunt vitae sem at, venenatis iaculis elit. Nam eget diam vitae enim lobortis ornare sed sed massa. Nam in.".

[low pike]

is the text set at run time (dynamic)? or is it like this at edit time too

[frail spire]

Both:(

[low pike]

record a video, encapsulating the entire editor - and show your setup.. select the TMP game obejct and its parents, one at a time, leaving it selected for a couple seconds so we can see the inspector (scroll down if required)

[frail spire]

Got it, I'm on it

[low pike]

Thank you

Two things to try

• simply toggle the object off/ on
• change 'overflow' to 'wrapped' .. IIRC that's an option there?

[frail spire]

Turning it off and on didn't work,
and it looks like there’s no "Wrapped" option in Overflow. 😦

[mortal robin]

text wrapping mode

[frail spire]

Ooh ok

This one?

None of them seem to work.

[low pike]

leave that at normal.. I was getting the two fields mixed up

I wonder if the text has some invisible thingies in it - cut the lorem ipsom -> paste in notepad -> select all -> copy and paste back in Unity

[frail spire]

Done, but without effect.
I thought it could be the character "\r", but the FixText script that's attached removes it in the update, just to test, but even with that, it still looks the same. 😔

[low pike]

what's \r suppose to be doing?

[frail spire]

It is called the "Carriage Return Character."
It is a control character that moves the cursor to the beginning of a line.

[low pike]

you want \n

[frail spire]

Not really, I would like the line breaks to be done automatically 😦

Ok, I just discovered what it is, the font.
I changed it to another one and now it looks good.

That's weird, I won't use Baloo again.
Thanks, @low pike !

[low pike]

Wonder what was wrong with the font!

possibly an "issue" with the font asset creator settings when you made the sdf?

[frail spire]

Hmm, could be haha.
For now, I’ll use another font that works.

If I discover something, I'll share it here. 🫡

[warm moat]

does anybody know why i dont have that bell curve in my unity version (iam using the newest version ) and is there a way for me to get that bell curve iam also missing the reverse one

[supple basalt]

You can save custom presets -- check that little cog icon

[warm moat]

ok thanks i dont rly know how to get the exact funktion i thought the bell curve was somehow built in i just want to use it for bullit curve animation but maybe its not neccessary to have the exact one

[timid mural]

is there a way to use an images alpha as a mask?

i haven't really used masks much. im trying to make some text fade out along with an image that fades out using this shader.
the shader is just some noise that fades to either black or white depending on the fill float

currently it looks like this.

[low pike]

I'm pretty sure there isn't an in-built way to do it.. but I think this would https://assetstore.unity.com/packages/tools/gui/ams-ui-soft-mask-282501

[timid mural]

yeah that seems perfect. cant afford it right now though

its a pretty minimal thing anyway. maybe i'll add it later when i can afford the asset

[supple basalt]

I use https://github.com/mob-sakai/SoftMaskForUGUI

[timid mural]

took a little set-up but that worked perfectly, thanks

[timid mural]

just noticed an issue. changing the fill on the material no longer updates it. unless i reimport the material or enter playmode

[supple basalt]

You may need to edit a copy of the material created by the soft mask system

See if the materialForRendering property of your Graphic works

that's where Unity puts the copy it makes when doing its built-in masking

[sullen eagle]

Hi, I have a UI canvas which I scripted to disappear when the scene loads and it works fine, but when I load the scene from another by using LoadScene it doesn't disappear anymore, any ideas why?

[low pike]

With the information provided? Nope, not a clue.. my magic ball is on the fritz

!ask

[onyx flower]

:thinking: Asking Questions

:mag: Search the internet for your question!
:book: Use the API Scripting Reference and User Manual and this troubleshooting site for commonly posted issues.
:wrench: Attempt to debug your issue.
:thought_balloon: Find an appropriate channel by reading the name and description in #🔎┃find-a-channel
:grey_question: And don't ask to ask, ask a full question illustrating with screenshots if needed.
-# For more posting guidelines, go to #854851968446365696

[sullen eagle]

what other information could I possibly provide

there are no scripts attached to the canvas either

[low pike]

Screenshots of the setup.
The code of how the canvas is disabled? destroyed?
A screencapture of the issue.

What you've provided is basically the same as me saying, I've got this piece of paper, what colour is it?

[sullen eagle]

I posted in code beginner but they didn't know

first I get the canvas in awake and assign it to a variable, then in start I disable it

this is all of the code associated with the canvas disappearing on scene load

these two videos show what should happen & what is actually happening

[low pike]

This is also useless.. how do you expect me to see what the code path is doing with two tiny lines cut out like this

!code

[onyx flower]

Posting code

📃 Large Code Blocks

Use links to services like:
https://paste.mod.gg/, https://hastebin.skyra.pw/, https://paste.ofcode.org/, https://paste.myst.rs/, https://scriptbin.xyz/

📃 Inline Code

Surround code with three backquotes. Not quotation marks.
To format as C#, add cs to the first line:
```cs
// Your code here
```
Add a comment with a line number if there is an error message.

[low pike]

It isn't though, is it

[sullen eagle]

there is no other line of code associated with it that's the thing

[low pike]

What method is UI.enabled = false; in?
How is that method called?
Where is the UI.enabled = true;?

[sullen eagle]

UI.enabled = true is irrelevant for this

as I said in the comment UI.enabled is in start method and I find it in awake

[low pike]

how is the enabled true not relevant?

The black alphad image popping up is the issue, yes?

[sullen eagle]

the issue is that when I load the scene in from another scene (using LoadScene) the UI shows up, when usually it's supposed to be hidden when the scene starts

the black alphad image is me pressing the menu button which should also show the menu when it's up, and hide the menu when it's down (which it doesn't)

[low pike]

Gotcha

Double check the canvas is still asigned

and you shouldn't be using GameObject.Find(string)
It's slow, and prone to errors that are easily missed - the IDE won't know about them

[sullen eagle]

it's being assigned correctly, I also tried using the Canvas object instead of the actual canvas but the results are the same

[sullen eagle]

should I just assign it in inspector then?

[low pike]

Yes

unless you need the canvas for other reasons, you'd also probably be better off just toggling the gameobject of the Canvas instead of the canvas component

[sullen eagle]

dragging it over in inspector (both object and canvas component) don't seem to change anything

[low pike]

is this persisting between scenes? because awake/start only run once

from the vid it doesn't look like it is

[sullen eagle]

it happens whenever I load the scene through LoadScene (but not when I load the scene by itself in the editor), awake/start only runs when the object is instantiated right?

[low pike]

no, when the gameobject is first active

[sullen eagle]

so then it should only run when the scene is loaded since I don't have it anywhere else and it's not DontDestroyOnLoad

[low pike]

yep - when you assigned it in the inspector, did you remove / comment out, the Find code?

[sullen eagle]

not at first, I tried it now but it just gives me exceptions

[low pike]

explain further

I'm going in 5/10mins.. 'tis bed time

[sullen eagle]

nvm I was being dumb

I forgot I had to reassign it in inspector after commenting it out

it works now, so I guess it was an issue with the GameObject.Find instead of any UI shenanigans, thanks

[low pike]

just FYI - if you assign something in the inspector, and keep code doing a search.. whatever the code finds (or doesn't) will overwrite the inspector, so could end up null

[timid mural]

huh, didn't know that existed but that fixed it, thanks for the help

[wicked umbra]

@here hey i have this main menu and i was trying to get the light to be part of the screen but since i used quad its doesnt seem to be part of the screen can anyone help me with that ?

[worn wagon]

Hi im struggling to set the button ui bitbox to the same size on the image anyhelp

[mortal robin]

It needs to be in view of the camera if you want it visible.

But why not use UI elements?

[wicked umbra]

i have no idea what it is

[mortal robin]

https://learn.unity.com/tutorial/ui-components

[wicked umbra]

ty so much

😘

i was about to ask where i can learn ui

[north grail]

is there anyway to make transitions between canvases? i hate the sudden cuts that it as and i want to make a transitions

[rapid ferry]

DOTWeen is a useful tool for interpolations

[north grail]

never tried before will look into it

tyty

[livid ore]

Quad is rendered in 3d and out of screen space so its obviously not gonna be part of screen.

Since you are using green screen image and have setted up a mask shader for quad instead you can create a canvas shader and use the same logic and then add that material into your ui element.

Here is a short tutorial https://youtu.be/iCrCNnYkwCA?si=fwfsOeVll8G8hPsu

[knotty tide]

Hey all! Having some scroller issues with some content that I think my setup should scroll with though not having any joy - hoping it's something obvious I've missed!

[waxen mirage]

In unity 6, 2D, I have a 4 cameras pointing at different scenes. They render to 4 textures in a box, and a final camera is rotating to look at the render textures of the box. It renders to a final texture in the UI. This generally works well, but occasionally it feels like the render textures are not redrawn each frame so you get one frame of an old scene. Does that make sense and how can I force them to render each frame in the correct order?

[craggy nova]

hey I'm new to unity still learning how this all works but I am confused as why when i scroll it goes back to the top even though there is more content below? I have attached an example and my Hierarchy

Canvas_Player has the Scroll Rect with the content set to BottomHalf_TopHalf

[low pike]

this happens when you don't resize the 'content' game object to fit the children within the rect transform. Put a content size fitter on the 'content' game object and set it to resize

[minor juniper]

Im trying to follow Code Monkeys tutorial videos for creating a some dialogue. I have this little tutorial guy and my goal is to press E multiple times for him to say a few sentences within a dynamic chat bubble and for the letters to appear one at a time. I've spent a few hours trying to get this to work so bear with me trying to communicate everything properly.

Since I don't need every function he created for this purpose, I did skip a few things in the videos but I don't believe that should be causing the issues Im having.

Basically, in one video he creates a TextWriter class that does the showing one letter at a time via controlling the alpha property of UI Text. But in another video, he calls that same class while using TMPro, and I think this is the issue Im running into. If I follow the code like this I get error "cannot convert from TMPro.TMP_Text to UnityEngine.UI.Text on the line where I am calling the TextWriter class from another script. If I go into the TypeWriter script and try to change each instance of the variable "Text" to "TMP_Text", then this line does not working correctly and results in the video above: text += "<color = #00000000>" + textToWrite.Substring(characterIndex) + "</color>";

Im at a loss, sorry for the long wall...

[ionic beacon]

You can't have spaces on either side of the = in rich text tags

[minor juniper]

I spent so many hours on this and this was the problem lmao... thank you OML

[solemn belfry]

@sharp oracle yeah but it looks good when i run it insite the editor

why does it get messed up after the build?

[sharp oracle]

Different screen sizes probably

[solemn belfry]

its set to scale

[sharp oracle]

It is this many pixels from the center. If your screen is a different size, that's going to be a different position

[solemn belfry]

that still doesnt explain it hmmm

cos my screen has higher res

so if anything it would be closer to center rather than cut outside?

how do i make the UI independent from the screen size? (fit any aspect ratio on a pc)

[sharp oracle]

Depends on your scaling mode and aspect ratios

[sharp oracle]

Design it with sensible anchors and avoid using hard-coded size values as much as possible

[solemn belfry]

sorry im brand new, i looked at anchors in the documentation but what is a sensible anchor?

and how do I not hard code that pixel value?

[solemn belfry]

if i try zero displacement with top left anchor it would not be right

[low pike]

Anchor it to the corner, not the center.
Change the pivot point of it to the top left of the rect.
Make sure the Game tab isn't set to "Free Aspect"

[solemn belfry]

how do i not hard code the displacement?

[sharp oracle]

I mean, that's centered on the corner all right. Change the pivot to the side you want to base the position off of

[solemn belfry]

what if i actually wanted to have something that does not have a 0 displacement?

how do i prevent it getting messed up?

[low pike]

by doing the things you've been told

[low pike]

☝️

[swift basin]

I... have sorta of an issue with the sorting of sprite layers. My guys toggle a sprite on top of them when they die to indicate that they are dead. That works fine, but since they are sorted on a layer on top of the sprite of the character icons is meant to be in, they get on top of ANY other character that passes over (image 3) I don't want that to happen, I would want death character to have the lowest priority to show over all other characters. I could do that by code with a messy way of placing ALL the sprites lower in the sorting layer while they are dead and back up again when they are not, but... I was wondering if can do some other simpler trick to solve that

[low pike]

You anchor things to the correct position.
You set the pivot correctly for that anchor.
You make use of things like layout groups where applicable.
You test on different aspect ratios.

[solemn belfry]

ok cool thanks

[low pike]

Sprite? This is a UI channel.. do you actually mean SpriteRenderers? Or Image components?

[swift basin]

I do consider sorting layers part of ui???? Sorta??

[low pike]

No

This channel is for the UI system, UGUI, and how to use it. SpriteRenderers don't come under that

You should delete from here and post in #🖼️┃2d-tools (check this is suitable first.. ) or #💻┃unity-talk

[swift basin]

Well, sure, but they pretty much work the same on that 🤷

[low pike]

alrighty - you are wrong, that does not come under here.

[fossil shore]

I'm trying to make a video render behind some objects in my projects, it's in the UI and I'm wondering how can I change the order at which it renders so that it appears behind, basically it's for the background

if someone is willing to help me ping me

please
:3

[mortal robin]

make a Screen Space - Camera Canvas and set its Plane Distance to something large like 1000

put the video player on there

[fossil shore]

how do you make a screen space

[mortal robin]

It's the Render Mode/ Render Type setting in the inspector

[fossil shore]

do you want to join vc so you could explain it to me so we can see together

[mortal robin]

no]

[fossil shore]

ok

[mortal robin]

It's just a single setting in the inspector

[low pike]

On the canvas component

[fossil shore]

oh ok

I was looking in the camera inspector thing

ok I found it

thanks guys

@low pike @mortal robin
ok it works now

thanks

[marsh drift]

Hi, guys, trying to set a scale for ui for different resolutions. I use canvas scale with mode Match scree size. It works, but in 1910x1080 it looks too small. If I adjust it, it looks very big in 4k. How can scale it properly? What value should I set as reference resolution in canvas scaled component? Looks like I need some nonlinear adjustment

[proud sandal]

You’ve answered your own question. The assumption the scale mode makes is that resolution changes but not apparent size of the screen

[marsh drift]

yes, should i make a custom canvas scaler?

[proud sandal]

Depends on your project. It’s not something that’s commonly done.

It also makes your UI design and maintenance more complicated

consider that people do not sit closer to a screen because they have more resolution, they sit closer because of screen size.

[marsh drift]

i have 42` tv and yes, the ui apperas to be big, but, in other games, it looks better

so what can i do?

on my asus rog with small screen it looks ok, but on tv ui is very small

[proud sandal]

the theory says you make a UI for the typical apparent screen size (not resolution), i.e. ratio of view-distance and screen-diagonal. And use the said scaler to make it appear the same indenpendent of resolution.

you would potentially make a platform switch, i.e. TV vs PC monitor

for that you could simply swap the scaler settings once (i.e. tv mode, pc mode, not continuously).

while you are at it, you could consider making another switch for widescreen monitors. but that often requires a different layout too (since you could theoretically show more columns/panels).

[marsh drift]

so do you mean i make ui, changing for the screen size and make additional scaler that player can adjust?

and i cant make presets as i cant know the screen size.

[proud sandal]

i would do this: make a standard 1920x1080 ui that works and looks good, allow the player to scale it down to half size, make all your UI layouts compatible with that scaling. To do that, you don't need a custom scaler component.

[marsh drift]

" allow the player to scale it down to half size", you mean in the settings

[proud sandal]

yes

and you can obviously initialize that value based on platform (TV vs PC)

your goal should be to not add extra work to your UI design/maintenance workflow, its a time-sink as it is.

[marsh drift]

yeah, i think not many people a sitting in front of 42`, so maybe my case is special and ui is scaled well already..

thank you

[alpine glade]

all images are 100x100

[low pike]

Untick Child Force Expand I believe.. then go and resize the rect transforms back to the correct width

[dreamy marten]

Anyone know why whenever i add UI to my game it just doesn't let me move

or well in more broader terms

It just completely freezes the game once i load in for example, no background music nothing is moving

things like that

[alpine glade]

ok, 1sec

[dreamy marten]

so can anyone help

[alpine glade]

works, thanks 🙂

[alpine glade]

wdym not let you move?

show screenshot

[low pike]

show a video

[dreamy marten]

ok ill try make one i havent really done much with vids but ill give it a go

[low pike]

its not hard to do a screen recording

[alpine glade]

winkey + shift + r

[low pike]

I use shareX for quick things like this, but there are other ways ☝️

the game bar needs to be enabled for that one tho

[dreamy marten]

i cant press start game when usin windows shift r

oh i can do ctrl p

gimme a se

stupid file limit

[low pike]

http://handbrake.fr

[dreamy marten]

I'll just explain it:
So when I have the canvas turned off of on the heirachy i can move around smoothly and efficiently, but when i have it turned on, its like my game never started even though i pressed start

[low pike]

a canvas has no affect on movement

you're doing something with it to stop input or something else

[dreamy marten]

I know that. but it just wouldnt let me move or do anything to interact along with the moving objects just frozen in time

[low pike]

so figure out what is on the canvas that stops it

disable all the child gameobjects of the canvas, if you still have the issue.. its something you have on the parent object.
If the issue doesnt happen, its on a child, enable them one by one until you get the issue

[dreamy marten]

I'm making a health bar btw

Ok so i figured out whats happening kinda

so how big of a file

can i make a video for

like 10 seconds?

[low pike]

discord free allows 50mb upload?

it tells you when you try to upload something too big..

[dreamy marten]

i got it

did it load?

[low pike]

18 seconds of waiting for you to press play and load 🤦‍♂️

[dreamy marten]

no but

u see how when i turn the health bar thing on

the game just paused

and just stopped loading

[low pike]

yes, you must have something in your health component that does causes an error.. and you have pause on error enabled

or maybe VS is connected and debugging with a stop thingy

[low pike]

my point was, don't press record and then press play.. you waste so much time (mine and yours) as well as file size, just waiting for the editor to enter play mode - over half the video was just this.

[dreamy marten]

my bad sorry

yeah cuz im following a tutorial for it and from what im aware ive done everything the exact same ill go over it again and ill go from their

[dreamy marten]

This is the last time im asking about the ui i think i just need help pairing together some sliders

more specifically
the value slider from the value component to a script

this is all I think is left till I can do well

[radiant gulch]

Say on god

[errant saddle]

I have a font here where the letters ö ä ü don't appear in unity, however in a font viewer, these letters do exist. Any way i can fix this?
(yes the font is applied to the TMP Component)

[proud sandal]

are they part of the font asset?

[errant saddle]

How do i check that?

[ruby plank]

How do you use TMP Text with SCroll rect. I made TMP Text display all text at once using content size fitter. then put it into the content gO of the scroll rect. Apply the content size fitter on the content gO as well but it collapse to 0 size.

[proud sandal]

click on the UpdateAtlasTexture or scroll down to the glyphs list

[errant saddle]

I changed Character set from ASCII to Extended ASCII, Regenerated the Atlas and saved, and the Characters now work properly. Thank you very much :D

[drifting moat]

What’s a good way to get an icon for an item and an outline?

Like I’ve got some weapon models and I want some icons of them to put in the game.

But taking a screenshot and tracing it in Paint or something sounds inefficient. There’s gotta be some website I can just upload it too right?

I imagine that’s something someone do in Photoshop but I don’t have that nor do I know how to use it.

[mortal robin]

For in-game icons I often have something like a "photobooth" scene I set up, where I just feed a list of prefabs into a script, it spawns each one, takes a screenshot of it, saves it as a png.

As for an outline you can use an outline shader.

[drifting moat]

Thanks for pointing me in the right direction.

[drifting moat]

Thanks for pointing me in the right direction.

[proud sandal]

there is also this (and the general principle of it), you can use it together with a "photobooth" scene: https://openupm.com/packages/com.yasirkula.runtimepreviewgenerator/

[austere ibex]

can i change the image of a button or run some code when i hover over it?

[mortal robin]

Yep

[austere ibex]

how?
https://docs.unity3d.com/530/Documentation/ScriptReference/UI.Selectable.OnSelect.html
i tried this but it did not work

[low pike]

OnSelect isn’t the hover state.

[mortal robin]

that's for when the button is selected

1. for the image switch just switch the button's transition to Sprite Swap mode and set the hover button

2. for running code in general when mousing over either put a script with IPointerEnterHandler or attach an EventTrigger component to it

[tidal wigeon]

How do i fix overlapping

[supple basalt]

is this actually a canvas?

graphics on a canvas get rendered in hierarchy order

[tight valley]

Why do I see the difference in clarity in my UI between the one designed in Figma and unity
Ik figma works with vectors and unity works with raster graphics
is there a way i get the smooth and crisp UI as seen in Figma into Unity?

Also.. I need to give outlines to some text in unity. Ik 2 ways
one is using the traditional text and then use outline component to it
other is using tmpro and create font assets with the changes in outlines or any other
Whenever I use TMPro(coz its handy and easy), I have the below problems
I'm unable to give outline outside the text, it always goes inside
there is a patch that's being applied to the text
any idea on how I can get my required result?

[low pike]

Make sure the SDF has enough padding when you create the font asset.
Make sure the font size is > 1.
Make sure the rect transform scale is 1,1,1.

[hot jolt]

I have a menu that has Play, settings and exit buttons. However, I want to add a fade screen so for that I added a black image. I put it on top inside my hierarchy so it would block everything. But It does not block the visibility of my buttons. What is happening?

It looks like this even though my black image is on top of the buttons

[low pike]

Show the setup

[hot jolt]

Menu is an asset. What part do you want to see? It has post processing and such.

[low pike]

the setup of the canvas(es), and hierarchy of it all

[low pike]

menu is an asset

Asset can mean a lot of different things,

so..
Main has - play/settings/ etc?
FadeScreen is above

Do either of these have a canvas component?

[hot jolt]

Only the Canvases have the component.

I mean Canvas_Main and Canv_Options

Like this if this is the correct way to search for components

[low pike]

yeah, that's the correct way

what components does MAIN have on it ?

[hot jolt]

Only an animator

Ah you may mean this

[low pike]

nah, I did mean this - I intentionally used the same name / style that is in your hierarchy

Just as a test, to rule it out.. disable the Animator component. I've never used these with UI, there's a possibility it is doing something that messes with the draw order

[hot jolt]

I did now. Buttons are still visible

[low pike]

what's on VerticalLayout and the buttons ?

[hot jolt]

This is vertical layout

And this is the play button specifically

[low pike]

it's world space canvas too... what Z pos is the FadeScreen at?

[hot jolt]

-260.0235

on the Z

[low pike]

and everything else is at 0

[hot jolt]

I made it so It blocks my backround which it does

[low pike]

I'd put the fade screen on its own screenspace canvas tbh

[hot jolt]

Let me try it

[low pike]

-260 is behind 0, MAIN is at 0

which for world space, looks like it matters

[hot jolt]

When I put it to 1 it is still the same

I should make a seperate canvas for that then?

[low pike]

It makes sense to do so, it's a fade to hide the entire screen - doesn't make sense to have it on a worldspace canvas

[hot jolt]

Should I shove my canvas into the Canv_main?

[low pike]

up to you

[hot jolt]

I made it like this but the background completely disappeared now

[low pike]

well, actually .. no you can't. it'll be a child of a world space canvas then

[hot jolt]

Yeah I did not make a child

[low pike]

right.. now fix the image ..

[hot jolt]

When I stretch it to the whole screen it does not affect anything. I tried to position it in front of the buttons. I can still not see it

Made it white so I could see it

[low pike]

your values are entire wrong.. have you not worked with UI before ?

set the scale to 1,1,1

set the stretch values to 0,0,0,0

and rotation back to 0,0,0

[hot jolt]

No sorry it is relatively my first time

[low pike]

it's np

[hot jolt]

All right its visible now!

And it blocks the buttons

[low pike]

Screen space canvas (overlay) renders to the screen space.. so if you look at it in the scene it's fucking huge. You do not position it in front of the camera, if you do this it isn't seen (it's off the camera)

[hot jolt]

Ahh so it was so tiny?

[low pike]

not on the canvas rect - so out of view

and tiny for a screenspace canvas

[hot jolt]

Ah okay. Thanks a lot for your time and patience!

[low pike]

should press T too, to work with the UI tools

[hot jolt]

Ah yeah I know that already. I just did not know what to expect here.

🫡

[low pike]

👍

For Screenspace UI, keep the scale of everything at 1,1,1.
For worlspace UI, the only scale that you should change below 1,1,1 is the canvas - scale it to the right size for where it's going, all other elements should be at 1,1,1.

Always use the width/ height fields to change the size of things.

You can end up with weird and unpredicitable changes in scale, rotations, if you mess with the scale and don't keep it uniformed.

(It's ok to change the scale if doing animations, eg: 0 -> 1 for a pop in or something)

[hot jolt]

All right got it! A simple question while I'm at it. Do I have to do anything to make my fade screen block Interaction with my buttons while its active?

So I dont press my buttons while fade screen is still fading?

I ticked the raycast target.

[low pike]

You need to make sure 'raycast target' is ticked on the image (like you've done)
And make sure the canvas has these componets on, if you removed the graphics raycaster, this canvas wouldn't receive the raycasts and your buttons would be clickable behind.

[hot jolt]

All right. Thanks a lot again!

[marsh fractal]

Hi, I don't want the background elements to be affected when I click or interact with my UI elements. How can I do that?
When I click on the UI to open the inventory, my character starts walking because it's clicking on the collider.

[mortal robin]

Use the event system for all of your mouse interactions and you will get this behavior for free

[rich crescent]

I have these Toggle elements in a ToggleGroup. Each of the ToggleButtons are deciding which object to place (which i defined as prefabs before). Problem im having is i have to click between ui buttons to decide which prefab to place. This works with keyboard+mouse but i want it to work without clicks for gamepad so i could just use DPAD to switch. I can navigate between buttons with dpad but dont know how to enable/click instantly when i switch between them

I'm making selectedcolor to different one so you can understand better:

[marsh fractal]

Yes, it seems to work with mouse clicks. But how can it be done for touch input?

[mortal robin]

nothing would be different about touch input

[mortal robin]

use OnSelected to activate the object to place logic

[rich crescent]

How do i seperate gamepad from my mouse and keyboard setting? I can swap between input types mid-game, if i do as you say I'll be also changing the logic on mouse right?

[mortal robin]

Why would you need to separate them?

[rich crescent]

I dont exactly have to seperate them but hovering over which button to chose as building would feel weird

I'm moving cursor with a virtual cursor on my analog and swapping the object to build from dpad. That'll feel right is what i assume

[mortal robin]

I didn't say anything about hovering

Selection doesn't happen on hovering

only when you click

[rich crescent]

Makes sense then. mb

[drowsy pulsar]

hello
I tried to set the buttons to scroll down, but for a reason the scroll is kinda locked and doesn't go dow. any ideea on how to fix it?

[mortal robin]

what happens if you make the Content rect taller?

[drowsy pulsar]

it looks like increasing the size of the scrollable space but it affects the position as well

and I can't set the content size to fit all by default

[mortal robin]

generally I think Content needs a ContentSizeFitter

to resize it to the size of its content

[drowsy pulsar]

umm why this

it moved in the top for a reason

[mortal robin]

looks like you changed the anchor preset

[drowsy pulsar]

where do i find that

[mortal robin]

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html#anchors
https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html#anchor-presets

[drowsy pulsar]

thanks

[drowsy pulsar]

now it is all working, do you think I could make the scroll be linked to other things, like when scrollin, the background image to also move, or a logo move left right

[mortal robin]

anything is possible

[urban crescent]

Could anyone explain in more detail regarding this warning on Canvas? Should I pretty much always enable it?
If it displays a warning when not enabled, why is this not enabled by default?

[tidal wigeon]

yes

[tall folio]

Hey there, does anyone know how to debug where there seems that the font has weird padding issues, and choosing Top/Middle/Bottom settings for alignment doesn't do anything positive? As you can see in the screenshot, the highlighted bits are extra spacing.

This is currently set to Top alignment - it does not budge if I specify Top/Middle/Bottom, but if I select Midline/Baseline/Capline it will do weird stuff like pop out of the yellow boundries. This issue has been plaguing me for some time and honestly is triggering some of my OCD (yeah... lol...). I am using TextMeshPro but I don't know if this behaviour is due to settings in the Atlas asset data that I need to recook or something else. Help would be greatly appreciated because it seems to affect any TMPro font I pick.

Here's a short video to explain it better in case you prefer problems explained visually (which is completely fine )

[minor juniper]

what is the parent of the text and its transform properties? what are the transform properties of the text at the top?

[tall folio]

Um... "parent of the text" ?

Oh the parent gameobject holding that?

[minor juniper]

is the text attached to anything inside the hierarchy?

[tall folio]

Sure, I can get you it

Yeah

It's inside a panel

gimme a moment

It was somethig similar to this, the original is now history because i tried a different way

Another contact said that the font wasn't centered in the actual TTF file so it contributed to the weirdness

[tall folio]

@minor juniper did that help explain anyhting?

[wild juniper]

I have a basic horiznotal layout, and I want to make it look like this:

so that the image has a set size and text takes the rest of the space

how can I do this?

[spare anchor]

this will help you understand properly how to achieve what you need https://www.youtube.com/watch?v=ouXCjFcfNfA

[minor juniper]

Sorry I passed out. Im not exactly sure which transform property you showed since you said it was something similar to your screenshot, anyway most of the time you're going to want your actual text to have position 0 while a parent object is just using the position inside the canvas. This is usually the problem with misalignment. Here Im showing an example of how I got my text aligned within a button within the canvas. If it a cause of the text font itself, try using another text pro font in Unity and see if it results in the same problem

[low pike]

It looks like because you’re using the wrong tools, and you’re moving the yellow rect to set the size etc.

Press T to use the UI tools. Don’t move the yellow square, this is the padding on the TMP component (hidden under etra(?) settings) go set them back to 0

[tall folio]

ah ok, i'll keep that in mind, thanks

[drowsy pulsar]

how do I sync a scroll in unity with a background to move or zoom in and out or some item to change it's alpha?

[mortal robin]

subscribe to the event https://docs.unity3d.com/Packages/com.unity.ugui@3.0/api/UnityEngine.UI.ScrollRect.html#UnityEngine_UI_ScrollRect_onValueChanged and do what you need in your event listener

[drowsy pulsar]

noted but before that I have another problem T_T

how do I change this

on the right

the shader

I can't modify anything from the color and other things

neither the shader itself

[mortal robin]

if you want to modify that material - make a copy of it

[drowsy pulsar]

so the material preset?

or?

[drowsy pulsar]

someone?

[drowsy pulsar]

I didn't manage to find anything on the web

[jaunty cedar]

Guys, I have a project with several UIs that are normally made by the scene.

I'm thinking about redoing them using UI Builder. Do you think it brings significant benefits to justify rework?

[mortal robin]

If they're working fine as is no it's not worth it just to do it

[marsh fractal]

Hi friends,

I am working on creating a 2D click-point game using Rive (for mobile and tablet). Since Rive works within a canvas, I want to create all my elements under the canvas and build the game this way. Is this possible?

If it is possible, which canvas render mode should I use? The positions of objects in the environment should not remain when switching the background image.

[low pike]

What's Rive? Probably best to ask the developers of that

Perhaps not, looks like an art package

UI generally isn't good to be used for gameplay, it has performance issues the more of it you have and the more you move it around.

https://www.youtube.com/watch?v=_wxitgdx-UI

[marsh fractal]

I am experiencing issues with touch functions. Although there is a UI in the foreground, the collider in the background is being triggered.

[low pike]

UI doesn't use raycasts, it uses graphics casting.

[low pike]

Never used Rive, and you're unlikely to find anyone in here who has. You're best off seeking support with them.

However, the first thing for you to do is expand the 'Rive Interactable' component and look at that

[marsh fractal]

How to build a game like this, with UI, clickable and lootable items, and a character that can walk wherever you want, like Monkey Island 3?

Maybe you'd like to take a look.

https://rive.app/docs/game-runtimes/unity/unity

[low pike]

nope

[tidal wigeon]

can someone fix this

[tight gazelle]

Hello everyone. I need some help. Everything looks fine until I open the settings panel on my phone. The panel is positioned correctly, but elements like the "X" button and text are either invisible or misaligned.

[mortal robin]

This just comes down to properly anchoring your UI elements

[tight gazelle]

I am beginner, I do it 4fun. Thank you in advance for your help; p

[mortal robin]

Start by reading this: https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIBasicLayout.html

it will go over the basics of how to set up anchors etc

[mortal robin]

Is this in a vertical layout group btw?

it will also be affected by the settings of the layout group if so

[tight gazelle]

Bro, today I downloaded Unity. To be honest, I know what I'm doing 😂 I am from Poland, so "English" limits me a bit

[mortal robin]

Probably best to find a Polish language tutorial on Youtube for UI basics then

I don't speak Polish so I don't know of a good one

[jaunty cedar]

But are there no benefits gained with UI Builder?

[mortal robin]

Isn't the UI already built?

[jaunty cedar]

Yes, but i would love to improve feeling and visuals.

Is that the benefit of ui build, right?

[tidal wigeon]

how do i fix the bg image overlapping

[mortal robin]

That depends what components are being used to render these things

[jaunty cedar]

Anyone?

[tidal wigeon]

What do you mean

[mortal robin]

What are we looking at?

UI Images?

SpriteRenderers?

[tidal wigeon]

UI images

[mortal robin]

What's the hierarchy setup? How is everything arranged?

UI image sorting is based on hierarchy order

things lower in the hierarchy are drawn later and therefore on top

[tidal wigeon]

ohh

thanks dude

[spare oak]

Hi, anyone have an idea why my UI elements are moving when I click the dropdown? I thought it could be due to my Canvas Grid Layout padding but I couldn't understand why it'd move like that?

[supple basalt]

is the Grid Layout Group attached to the "Lobby Screen" object?

I noticed that a new object called "Blocker" appeared in the second screenshot

if it doesn't have a Layout Element that excludes it from automatic layout, it'll be controlled by the grid layout group

[spare oak]

Oh yeah, thanks for pointing that out! When I add a Layout Element during run-time it fixes itself but do you know how I can make it appear with the Layout Element?

[supple basalt]

oh, is that getting created by the dropdown?

ah, it appears directly on the Canvas

https://discussions.unity.com/t/solved-dropdowns-and-blockers/604550/2

I usually don't have layout groups on the same object as the Canvas, so I've never noticed that

[spare oak]

I see, it seems to be standard practice not to have the layout group on the canvas? I was just following a tutorial 😅 Thanks for the info. I'm not really sure why that fixes the issue but I'll give it a go!

It's fixed 🥳

[errant saddle]

I have a button which is supposed to scale with the content (TMP text object), but the button is at a fixed width, unless the text get's larger then that with. But the width doesn't go smaller then the width shown, even if the text is smaller then this.
How do i fix this?

Also, the raycast mesh scales when i enable/disable the image... what is going on here?

[dense hornet]

What's the best tool to use for my project— UI Toolkit or Unity UI?
The "main" scene of my project will look a lot like these D&D character sheets— the project is a character sheet manager. Unlike all other character sheet programs that exist, I want this program to instead build a dynamic character sheet with a gizmo/widget system (if you ever used widgets to customize the lock screen of your phone, that is what I'm trying to do. Attached below are some examples of some pre-made character sheets for different classes, wherein each "block" in this sheet would be a widget— they're not widgets as these are plain PDFs designed on illustrator, this is just a proof of concept. My program would essentially generate sheets like these dynamically based on a player's needs for their build. Players would be free to drag and drop and reorganize widgets as they see fit. Notice how for each sheet, the available widgets are customized to fit the character's build.
I've heard great things about UI toolkit, but it's also very very complicated as someone with no knowledge of web development and UI/UX. Unity UI seems very flexible, but also very finnicky and tricky. Which one do you think is a best fit for what I'm attempting to achieve?

[supple basalt]

The grid layout was trying to position the "Blocker" object

So it screwed up your layout

it's as if you added one more dropdown (or anything else, really)

[spare oak]

Hi, how do I get my images to be sprites compatible with dropdowns? I made the images Sprite 2D & UI textures but it won't let me drag them over and they don't appear as options when opening the select sprite menu by clicking on that dot where I want to drag them

[low pike]

click on one and let's see the inspector for it

Also what is the component you're tyring to drag it into?

[spare oak]

I'm trying to make the images go into the None (Sprite) boxes so they appear next to each dropdown option

[low pike]

set sprite model to single

[spare oak]

Thanks! That was a strange issue, lol

[frosty venture]

Hi, I want to render some icons above players in a third person game, that always render on top of the game world, but are also sorted correctly based on the distance of the player/icon from the camera. I tried using Screen Space-Overlay, and converting the world space points to UI space, which works fine, but there is no sorting order for that canvas type - unless I need to manually sort? Not sure if this is the correct solution? I want them rendering as if they are 2D UI elements (pixel perfect, always facing camera etc.). Thanks!

[low pike]

If you use multiple canvases, there is a sort order on the canvas component.

The draw order for UI components is hierarchy order, from top (first) to bottom (last). So if you have just 1 canvas, you'll need to re-order the gameobjects

[frosty venture]

Okay. I'd rather not have multiple canvas' for this, so I guess I'll need to sort then. Overlay is still the best option for this right?

[low pike]

It's a good solution, and one that is fine to use.
I won't say best because I don't know all the various options or what would fit best for your game.

[low pike]

Depending on how much UI you're going to have on screen, you could run into performance issues because of it. This video is well worth a watch for things to look out for / solutions

[frosty venture]

Okay. There should only be a few icons on this particular canvas at any given time (just markers etc. for the other human players in game). So should be fine with the sorting and performance. Thanks for the replies.

[low pike]

np

[lime edge]

Guys, how do I implement a cmd-style dialogue text effect similar to Radiant Silvergun's boss intro cards (particularly on about the first 20 seconds)?
https://www.youtube.com/watch?v=mfa8tFrjimA

I'm intrigued to recreate a boss intro like this

[honest saffron]

textmeshpro and coroutine

[proud sandal]

With TMP, you can increment this property to achieve this effect: https://docs.unity3d.com/Packages/com.unity.textmeshpro@4.0/api/TMPro.TMP_Text.html#TMPro_TMP_Text_m_maxVisibleCharacters

[violet sandal]

What do you think about the UI? Would like to have some feedback
It is shown right after the loading screen of a level to show the player what comes up next, he can also choose a character to support him.

[lime edge]

I was actually wondering how I can specifically add a blinking square after the last letter like how you type in command prompt

[proud sandal]

you can query the exact position of each glyph quad and put a box drawer (an image for example) right behind that

alternatively (less efficient) you can add a block glyph to the end of the text, or potentially just remap the current last character to that block cursor.

[mighty ridge]

#💻┃code-beginner message @compact bough maybe a shader

[low pike]

No need for a shader for that.
Just create it in photoshop / art package.
Or get an asset off the store which lets you create procedural UI shapes. I like this one https://assetstore.unity.com/packages/tools/gui/procedural-ui-193375 ... but there's also this one for free https://assetstore.unity.com/packages/tools/sprite-management/shapes2d-procedural-sprites-and-ui-62586

OOOOooorrr... use the button sprite that comes with Unity and use it as a mask, hiding the sprite

[meager shore]

Hello! Does anyone know how to get UI splines to work in world space canvas?

[eager dove]

I can't figure this out — I have an empty GameObject with a Grid Layout Group as a child of it...how can I force the initial GameObject to expand and match the height of its child? I've been messing with Layout Groups and Layout Elements, but they never seem to work correctly.

[low pike]

grid layout cells don't auto resize, you're best off never using them.

Use nested vert/ horizontal layout groups

to auto resize they need non-empty children, and the option to expand with children (however it's worded) ticked

[proud sandal]

sidnenote. i've found their constaint can offer some great guidance for simplifying layout design ideas and overall making a ui much less glitchy, but you have to commit to the rigidity it affords.

[grizzled inlet]

Hey all

Why is it not displayed clearly in Game?

[proud sandal]

its exactly the same, just smaller

[proud sandal]

and as has been pointed out to you repeatedly, your scaling is way off

[grizzled inlet]

Is that what you mean?

[low pike]

why are you using a world space canvas?

[grizzled inlet]

if I bet 1 1 1 1

[grizzled inlet]

and how do I make a screen by the monitor?

[low pike]

... what

[grizzled inlet]

I did a similar thing.

how else can I do that UI to the monitor?

[low pike]

right, so the scale of your Canvas and canvas object only needs to be correct.
The scale of all children needs to be 1,1,1

[grizzled inlet]

all child objects 1.1.1

[low pike]

your game view is probably just not displaying at x1 and it's zoomed a bit to fit

[grizzled inlet]

what are you saying I don't understand?

[low pike]

send a screenshot, showing the issue, in play mode .. and include the editor, do not crop anything out

[grizzled inlet]

I put in 1.1.1 and now it takes up the whole screen.

[grizzled inlet]

how do I do something like this?

[low pike]

so put it back to what it was.........

This is why it doesn't look right, when you compare to the scene view. because the game camera has been scaled to fit in the game tab area. There is no issue here.

[grizzled inlet]

How about a mesh?

[low pike]

No idea what you're asking. What about a mesh?

[grizzled inlet]

yes

[low pike]

rofl - that is not a yes or no question. Anyway, you can stop pinging me now.

[lusty oyster]

Hey, so i'm confused what's going on here:

I'm currently trying to work on my game's UI but as you can see the actual canvas/screen is different from the viewpoint, meaning if I were to adjust it to fit properly on the canvas it wouldn't appear in the game view as it is all the way in the top left for example

[sturdy pewter]

Looks like it's just the game view zoom actually

[lusty oyster]

wdym

[mortal robin]

Are those UI images or SpriteRenderers?

Make sure they're UI Images

[lusty oyster]

they're UI images

[mortal robin]

Also what kind of canvas is this

But yeah the game view has scrollbars

[lusty oyster]

I have it set to Screen Space Camera

[mortal robin]

Which means you're not seeing the whole game window

You just need to zoom out or set it to a lower resolution so you can see the whole thing

(check that scale slider on top of game view)

[lusty oyster]

ah I see, that makes sense - But just in case as an alternative how do I set it to a lower resolution?

[sturdy pewter]

First one is the displayed resolution. Normally you want to set the as in the resolution reference in the canvas scaler component

This way you can see the "base canvas"

In your case I would just change the zoom

[lusty oyster]

got it, ty

[mortal robin]

You can set the drop-down to a specific aspect ratio

Without a fixed resolution

Or just scale yeah

[strong notch]

Im trying to figure out the best approach to add a billboard sprite to an object during runtime to be contextxt propt ([E] pickup 'weapon') . Would that be via a canvas with a sprite? Ive read that sprites don't work well with the canvas but it seems plain images can be applied in the inspector.

[mortal robin]

Could be a world space canvas, or a SpriteRenderer, or just a quad mesh

[mortal robin]

your base color for these images is a very dark semitransparent black

All of the colors listed in the Button component are tints. They get multiplied by the main sprite color

Black * green for example is still going to be black

To fix this change the Color on the Image component to full white with full alpha

Then change the colors on the Button to be the colors you want in the various states

[median flame]

haha such a simple fix

they still dont work but at least they highlight so at last i can move on

[mortal robin]

If the hihghlighting and selecting works, the clicking will too

so if it's not working now it'll just be an issue with your code

[median flame]

so the issues somewhere else. thank you!

[rapid ferry]

How do I pixelate UI?

Like everything thats in canvas

[proud sandal]

use pixelated sprites and bitmap fonts

you can add a post processing pixelation effect on top of a camera-canvas, but you probably don't want that cause it would very likely look very bad and be cumbersome to work with

[rapid ferry]

I tried to do that actually

But it didnt work

[proud sandal]

well, the proper way is to use pixel sprites

[crude venture]

Hi guys! Having some issues with a screenspace - camera UI.

Everything works fine at 1080p, but when I change the resolution, the cursor seems to drift off target. I've fiddled about a lot with screen scalers etc, and just wondered if anyone else has come across this and has a solution.

I think the issue is to do with a screen/worldpoint discrepancy, but not sure why resolution change would exacerbate that.

Worst case scenario is I do a bunch of manual translations of screen/worldpoint conversions and simulate the mouse for all these UI elements, but my preferred solution would be to ensure the scaling that happens at 1080p also happens at other resolutions. Any advice would be welcome!

Here's a video showing how the cursor drifts. The marked X is the ScreenToWorldPoint of the cursor, with the z axis set to the nearclippane of the camera.

The drift gets worse as it gets further from (0,0), and while the worldpoint seems to be accurate on the x axis, the y is still off.

[tight valley]

I tried doing this
no matter how much padding i give the result is the same
yes.. font size is > 1
yes.. the rect transform scale is 1,1,1.

[mortal robin]

You'd have to show the code and the inspectors for the buttons

And the camera and canvas

[rich crescent]

I'm not exactly sure how your code works but since you're using a custom cursor and i assume you are using a youtube tutorial one common issue they might have is anchor points

Check the tutorial if it's also anchored to some position, if not I'll need your code to see what's wrong

you might have to scale that with canvas too.

RectTransform yourCanvas

Update()
{
transform.localScale = Vector3.one * (1f / yourCanvas.localScale.x);
transform.SetAsLastSibling()
}

this'll scale your virtual cursor based on your canvas

[crude venture]

@mortal robin
@rich crescent
Thanks guys!

No custom cursor, no code either really. The crosshair was just to demonstrate the x value the canvas seems to think the cursor is at.

I'm not using a tutorial - fully into edge case territory here.

The process is:

A screenspace - camera canvas on which the interactable UI sits (all TMPro buttons).

A camera which outputs this canvas to a render texture.

A screenspace - overlay canvas which displays that render texture, full-screen.

The reason for doing it this way is to be able to apply a shader material to the entire canvas. I could use a fullscreen shader for this, but I also have screens that are embedded in 3d world space which need the same shader, and I don't think I can apply a fullscreen shader for those, so I think I'm stuck using this convoluted camera --> render texture method.

The mouse drift on resolution change (from 1080p) seems like a side effect of bringing the interactable canvas into camera - screenspace.

Here is the original (interactable) canvas:

Here is the camera it is being sent to:

Here is the canvas being used to show the final render texture:

This is the underlying UI working perfectly when in screen space - overlay mode. No camera, no render texture. Works fine at any resolution.

I mentioned above, I think it's a screenspace/worldspace issue. The buttons (centered in the screen) seem to always trigger when the cursor's world position is at 0 on the x axis, as shown by the crosshair above. It's just that the scale between screenspace/worldspace seems to differ when I change the resolution.

[plucky salmon]

does unity support SVG images on the UI? i tried adding a SVG but i cant get it to work

more importantly if it supports as an app icon,i really dont want to turn my icon into a .ico or a plain image,SVG looks way better

i see in the asset store that there is an SVG toolkit so im gona guess it does support so how do i add it?

[heavy sentinel]

There is some Unity package for this, but it seems to be neglected (still in the preview phase, after 7 years):
https://docs.unity3d.com/Packages/com.unity.vectorgraphics@2.0/manual/index.html
I haven't used it though, so I don't know if it's good enough.

[plucky salmon]

damn atp ill just use images,hopefuly they dont look extra pixellated

[dusky harness]

pls someone send me a coin texture (cube type of texture is preferred) for school project

[crude venture]

Fixed my issue! I had to change the render mode to world space and do some fiddling about!

[dusky harness]

how can I make left and right not resize? I want right to resize

[dusky harness]

same thing

how can I get a specific texture and delete the pack?

[mortal robin]

Change your pivot

[mortal robin]

Cut it out in an image editor

[dusky harness]

to what?

[mortal robin]

Valid pivots are between 0 and 1. But you're better off just looking at the anchor presets to start

The x pivot should be 0 if you want it to expand left

Sorry not pivot

Anchors

Look at the anchor presets

[dusky harness]

min max

[mortal robin]

Start with anchor presets my friend

Pick one that anchors it to the left

[dusky harness]

well I do that

[mortal robin]

You need to also set the text alignment to the left

[dusky harness]

I set anchors and pivot back to 0.5 still doesn't work

[spare hollow]

what is causing that glass pipe on the bottom to get a kind of reddish tint at runtime?

theres just a black background behind it (as seen on the right gap also)

thats curious... removed "alpha is transparency" and its visible there

[dusky harness]

the reason it wasn't working was this and text style being title. I wonder if I can get it to work with text style title tho

[heavy sentinel]

You can remove the style from it.

[dusky harness]

that's removing text style title

[copper vine]

Can someone explain why text/ui in general looks so much worse in game view than in scene view

[low pike]

Usually because the game view scale is set to a value that's not x1

[copper vine]

i have already changed my render settings to be scale to 2x and messed with anti aliasing but nothing gets it even remotly close to what i see in scene view

[low pike]

nothing to do with your render settings

[copper vine]

event zooming out to the same scale (i cant go bellow 1.3) its noticeably way worse

[low pike]

screenshot your game view, do not cut off anything.

[low pike]

You need to click the resolution selector, and untick low resolution aspect ratio - though I do not know how to ungrey it

[copper vine]

that let me go to 1, but didnt change the text quality

[low pike]

That looks like only the text is transparent a bit now?

[copper vine]

yeah i was just about to say its not crisp, its doing some blending

[low pike]

Is it TMP? Is it UI or Mesh TMP?

[copper vine]

its a TMP button. ill send a screenshot of its settings if that hles

[low pike]

also show the recttransform for it

[copper vine]

there ya go

that should be default to the parent object (the bottom) that TMP makes when you select button (tmp)

There is parent if it matters

[low pike]

That all looks fine

if you maximise the game view, does it make a difference?

[copper vine]

its better, but its still doing that blending along hte edges that makes it look bad

[low pike]

Try resetting these back to default?

[copper vine]

the changed settings full screen:

default:

i cant really tell a difference

[low pike]

that looks correct now?

[copper vine]

more readable full screen but still kinda fuzzy

maybe im just too hopeful for small text

that might jsut be a me thing

[low pike]

worth doing a build and seeing what it looks like

[copper vine]

aight will do. I think it might just be im too picky for the editor Thanks for the input

[low pike]

as long as the editor looks like those last two screenshots, I think its fine

[copper vine]

cool. I was going to change it to icons later anyways. This is just getting POC done and i noticed the text looked terrible

if you noticed im using just an image of an FTL ship as a placeholder lol

[frigid mica]

Is someone able to help me with a world space canvas masking issue I have? Basically, I had it all working fine but then I need to control some elements sorting order so to do that I added a canvas to the child objects which allows me to manage the sorting order correctly but this makes the RectMask2D stop working - I have done extensive googling and apparently this is just a known issue. I either need a way of controlling the sorting order without adding a canvas to the child objects or I need to be able to make child canvas abide by the RectMask2D on the parent. Any ideas would be really appreciated as I have wasted a lot of time on this.

[low pike]

UI is drawn in hierarchy order. From top (first) to bottom (last). Just reorder the children as needed

[frigid mica]

Thanks but I am using layout groups which order items based on their hierarchy so I can't reorder the items.

[low pike]

You can, I've done it before.. a long time ago though

and exactly what you want isn't clear to be able to suggest a way.

[frigid mica]

Hopefully the attached is clear - I just need a robust system where I can force the cards to be on top of all other UI while still being masked by the Rect2DMask on the world space canvas as this is supposed to be a screen and the cards are UI elements (even though they don't look like that at the moment!). If you can offer any help it would be really appreciated. Where I have given the index for each vertical layout group that is within the horizontal layout group that contains those 3 vertical layout groups...hopefully that is clear.

[low pike]

So the cards can be clicked on, to be dragged around (only visible within the screen), and then when you let go of the drag, the card will sit back with the other cards.. in a new order depending on where you let go of it?

If that's correct, while the card is being dragged around you'd set it to the last child of the canvas .. and then when you let go, you'd need to work out at what child# it will be to set it back as that in the correct layout group.

[frigid mica]

That is so obvious now you've said it! Thank you, really appreciate your help - sometimes you bash your head against something and then someones just like, err why don't you just do this and it sorts it all out!

[deft idol]

Hello, currently working on the main menu ui of my game.

Can you guys give me any ideas/suggestions? Specially regarding the main menu buttons (on the left)

[lyric rose]

How to disable Text Mesh Pro gizmos?

https://cdn.discordapp.com/attachments/892762498464374796/1351806868447563898/image.png?ex=67dbb7c0&is=67da6640&hm=9dcf271da85be1b73f2ac987e4f544fb05e4ae455f14343cfef9ab2d90709811&

Text Mesh Pro gizmos are disabled

Yet they're still visible

Also when I turn all gizmos off, they do get disabled

I disabled every checkbox separately and they didn't disappear

[lyric rose]

Need to press on the T icon instead of the checkbox

[lunar abyss]

Trying to make a main menu for my college project, was wondering if it was possible to make the text look glitchy like this, and how I would do so

Srry its the wrong way around

[low pike]

of course it's possible 😄

The quickest way to do it is to just have 3 lots of TMP's, slightly offset and different colours

[lunar abyss]

Omg, I never thought of that, thank you

[lunar abyss]

What's the other way, if you don't mind me asking?

[low pike]

there'll be loads of different ways

another way would be the use of a shader

[lunar abyss]

Pretty nee to ui stuff (and unity in general tbh), how does a shader work, or where can I learn bout it?

[low pike]

google -> unity shaders

[lunar abyss]

Thnx, appreciate the help :)

[low pike]

or if you want to get serious -> https://jettelly.com/store/the-unity-shaders-bible

[lyric rose]

How to crop a sprite and show only a part of it?

I have a healthbar as a sprite and I'd like to show only a part of it depending on health

[lyric rose]

Filled image does it

Strangely, I couldn't google it. It would only give results for sprite slicing and simple monotone sprites or UI health bars with effects.

[low pike]

probably didn't get any results if you searched using 'sprite' because with UI you're manipulating the recttransform or the image component, the sprite is just the file you assign to the 'sprite' field of the image component

whereas slicing is manipulating the info of a sprite (the file) before you assign it to anything

[tepid raven]

How can i solve this problem where the chat prefab is overlapping the other when it has several lines of text? The prefabs are on a grid layout

[low pike]

Don't use a gridlayout, the cells do not resize with the content of the children.

Create a replacement gridlayout using nested vertical and horizontal layouts

[tepid raven]

so verticalLayout should be on the prefab?

[low pike]

I can't say for sure.. it depends

[tepid raven]

On? Because its making it worse.

[low pike]

It's "worse" because you've not set it up correctly.

I do not know what the "on?" at the start of that message is supposed to be.

I have no idea why you're using a gridlayout in the first palce, what you have shown does not require a grid.. all that would be needed for what's shown is a vertical layout group on the parent. Each chat thing would then be a child and expand/ move as required

[tepid raven]

I'm using gridLayout so it puts the chat prefabs in a nice column and to spawn them downward. I've messed around with what you told me, but it still overlaps. The verticalLayout is on the parent.

[low pike]

grid layout is only needed if you want a grid... but it's shit because the cells do not resize, so is never needed. Completely get rid of it

Vertical layout is the only thing needed when you want objects in a column

You'll need to tick the...er.. expand with child size? (I think it is) for height.
You'll possibly need a content size fitter on the children.

You're also going to run into issues because you've change the scale. UI scale should remain at 1,1,1 - use the width/ height fields to change the size.

(height can't be changed here because you have other things controlling it automagically)

[tepid raven]

my message does have a content filter for adjusting image scale with text. Ill play around with it more and see how it goes.

[low pike]

again, the scale needs to be kept at 1,1,1 - ALL UI elements should be (only the canvas can be different, but that does it itself)

[fringe ibex]

Hello, would anyone happen to know how I can render a UI rectangle between these two sliders so it looks like they are connected?

I have a feeling it has something to do with masking but I'm not sure how to research it

[heavy sentinel]

By default, the first object in the hierarchy is rendered first (behind further objects), so if you put dots lower in the hierarchy, dots will be on top of it. You can dynamically change .anchoredPosition and .deltaSize to match the gap between dots. The position would be an average position of dots, .deltaSize.x would be the delta between these dot's positions. Optionally, for higher quality, you can also consider adding sliced texture to the UI Rectangle:
https://docs.unity3d.com/Manual/sprite/9-slice/9-slicing.html

[lyric rose]

https://youtu.be/JDpG71sXmCs

Unity tutorials in rick voice

[dusky harness]

how can I make the panel scale and scale properly?

[heavy sentinel]

To anchor it, click on the anchoring preview in the top left corner of the RectTransform component, then select the template you want to use. Alternatively, you can write down anchor min/max values by hand.

[lyric rose]

https://youtu.be/QnT-2KxVvyk

You also probably want to scale the UI to different monitor resolutions.
Let's say someone plays it on a 15" 640x480 monitor. The button will be big.
Then someone else plays the game on a 3840x2160 27" monitor, the button will be extremely small.

But with a Canvas Scaler on the canvas object, you can scale it to the height of the display.

[silent harness]

i Need help, i don't understand why my image and text look bad(Like Pixelate) The image are 1024 × 1792 pixel. I don't understand how it's possible that if I shrink the images they become grainy, it also happens with textProMesh. It's a 3D MobileCore project. The cards are prefab (gameobject with the model.fbx inside and a canvas that contains all the images and all the texts). How i can fix this?

[mortal robin]

You're not supposed to scale them

Resize them using the RectTransform

Your scale is tiny

Which will mess with everything

[silent harness]

you are talking about the canvas?

@mortal robin

[low pike]

It's a world space canvas, you need to lower the scale to a tiny value.

There is (probably) no issue with what you've done, just the simulator is scaled down to 31% of it's full size to fit in the area provided. Drag this to 100 and you'll see it's all fine

[simple oracle]

hey so i have a third person shooter game with a crosshair that spreads based on the gun shooting. The problem is that when i have the game window minimized, the crosshair spread is different than when i switch to maximized game window. You can see in the video that when it is minimized, the crosshair on the M4 has perfect accuracy but when i switch to maximized, it has spread on the crosshair by default. How can i fix this?

[mortal robin]

You'd have to show the code

[simple oracle]

i basically move the crosshair lines by their transform based on the spread of the guns

[mortal robin]

You're moving the same number of pixels

Which will obviously look different at different resolutions

You'll need to either change that according to the canvas scaler scale or use RectTransform's anchoredPosition

In any case Transform.Translate is highly unusual for UI elements

[simple oracle]

i tried the anchored position and it didnt quite work, because i need it to move by local position and not global, but how do i change the canvas scaler scale or whatever so it works?

[simple oracle]

so what should i use?

[mortal robin]

anchored position is local

or rather it's in relation to its parent, and based on where the anchor is

[mortal robin]

I didn't say to change the canvas scaler scale

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/api/UnityEngine.UI.CanvasScaler.html#UnityEngine_UI_CanvasScaler_scaleFactor

I'm saying to use that to scale how much you translate by, if you insist on using Translate

[simple oracle]

well i did it like this and it didnt work, the whole crosshair moved on the x axis

[simple oracle]

so with this approach i should scale the position by the scalefactor?

[low pike]

Surely that is because you're moving them all on the +x axis

you'll want +x, -x, +y and -y

[simple oracle]

yes and thats what i want to do but i want to move them on the local x axis which is different for every of the lines because they are rotated

[simple oracle]

yeah this would also work but its more complicated and i would have to keep track on which of the crosshair lines is which

[low pike]

you already know that because you assigned them in the list

[simple oracle]

Yes but i also have to know which of them i have to mive to the x -x y -y axis. It would be much easier to just locally mive the position which i cant get to work with the anchored position on rect transform.

[simple oracle]

okay, so the anchored position is local, but its not including orientation, just like in Translate(Space.Self) which does

[timid forge]

Anyone online rn?
Is there a way to develop an ui in js/html and integrate it into unity?

Im sick on unitys gameobject ui system and the ui toolkit is not really production ready yet. So i hoped that theres a way to develop a ui with stuff like reactjs or vue or even svelte, overlay it in unity and make it communicate with each other.
I found vuplex 3D webview, anyone having experience if that works for it?

Or any other "hacks"?

I also found this one:
https://github.com/gree/unity-webview

But thats poorly documented and not sure if it really "supports" the idea of UI. Looks more like a well... webview

[jagged monolith]

It's possible. We use vuplex WebView to run our web based UI and it has improved our workflow a lot, though it needs some scaffolding depending on your use case https://assetstore.unity.com/packages/tools/gui/3d-webview-for-windows-and-macos-web-browser-154144

Our designer wrote a blog post about this with some brief text, with a video https://www.fyndreality.com/blog/our-xr-design-journey-challenges-and-discoveries

[timid forge]

Thanks! Do you use the 3D webview? Is it also possible to display 2D webui with it? 🙂 Like an Ui that just sticks to the screen
And e.g. when the Ui is layed over unity, can we still make transparent areas where we can raycast through the ui to interact with unity? Like a healthbar at the bottom that does not block the whole screen from interactions.

[jagged monolith]

We use it both for a full screen overlay, for docked menus that only take up a portion of the screen, and also for our VR UI on a tablet

So all of this is web UI but you still interact with the 3D as per usual

[timid forge]

That sounds great! Finally some good news xD
I assume that you have e.g. a local frontend project/build and that package will load and display those files? 🙂 Or does it work different? If its fully web, a router might also work for screen navigations?

[timid forge]

Looks damn sexy! The world and the ui :))

[jagged monolith]

It's a static webpage that we build, and just toss the whole thing into StreamingAssets and load it from there

[timid forge]

Thanks a lot! 🙂 Its getting better and better, so even routers should work for basic screen switching e.g.

[jagged monolith]

I'm the dev here with the least know-how about the web parts so I might be able to give the best answers 😅 But vuplex has worked super nice for us and the docs and support have been great

[proud sandal]

Look here https://coherent-labs.com/products/coherent-gameface/

[swift basin]

Hey, how can I do a dropdown but like... not the dropdown menu of picking a choice but like this where you click on the arrow and it expands the whole text?

[mortal robin]

Put all of it in a vertical layout group and have the button enable and disable that panel

[swift basin]

What if I later want to polish it where it doesn't show all at once but with a transition? Would that setup still work?

[timid forge]

But i assume they will not hand me this? This looks like software that is only distrubuted to like triple AAA studios? 😄

[mortal robin]

Yes, later you'd just animate the size of it or something along those lines

[proud sandal]

the idea of using web tech in gamedev is, in any case, a business 'need' that a hobby developer could easily stay away from. The promises of webdev don't really work out often enough unless you specifically have the exact problem that the web-framework solves. And i'd venture to say that adding JS/HTML/CSS to a game project has potential to create many more problems, resulting in a net-negative return. UGUI is certainly not perfect but its also much leaner and independent of custom/separate tooling.

[mortal robin]

That's what Cities Skylines does for their UI btw^ but they have the resources to do it properly

[south wind]

Hey everyone. Please explain to me what's App UI and what's the difference between that and UI Toolkit? And which should I use?

[proud sandal]

its an opinionated way to build UI on top of UI toolkit, similar to how other "mobile first" and low-/no-code ui builders work... would ignore for the time being because

App UI is considered as an experimental product. It is provided "as is" without warranty of any kind, express or implied.

[south wind]

Hm... Strangely, they made such neat documentation for something they didn't intend to be public.

[chrome parrot]

I'm new to game dev and I was wondering, for smaller speech bubbles in games that I want positioned near an NPC, it seems like that's not a Canvas child. My first instinct is to create a child 2D Sprite game object off the NPC and toggle it's SetActive() via script. How is this generally achieved in Unity 2D development?

[heavy sentinel]

a) Conversion from the character's world position to the screen position, then moving the bubble on canvas accordingly by some offset
b) Creating a world space canvas that can be placed anywhere in the world and set it up accordingly
c) Creating speech bubbles from non-GUI objects, making them fully 3D (which has pros and cons of 3D objects)

[chrome parrot]

Great! Another question, the UI sliders I've made so far have a 9 sliced fill. What if I want to update a segmented health bar. Like one of these sliders https://bdragon1727.itch.io/basic-pixel-health-bar-and-scroll-bar. I was thinking instead of a slider, just make some UI sprite images and toggle which health bar image to render via script. How do fixed movement sliders like these work in Unity?

[heavy sentinel]

Simple patterns are done with image filling (as in the screenshot) - you set the fill amount from the script, and it automatically cuts the part of the image. More elaborate transitions are made with shaders. Here is a video that briefly describes the logic of such shaders:
https://www.youtube.com/watch?v=LnAoD7hgDxw
It allows you to create a transition using 1 extra texture.

[chrome parrot]

AWESOME! Thank you!

[fluid vale]

hey all, ive got a diamond outline with 4 panels inside to hold character portraits. when i increase the width or height of the outline, i want the portraits to fully fill the space instead of leaving a gap like in the second image. how would i do this? i assume its something to do with anchor points?

[heavy sentinel]

Anchor points define the stretchiness of the elements. If you set min to 0 and max to 1, then it will be fully stretched with parent's size. If you set it to something smaller, then the stretch will also be smaller. For example, min 0.25f and max 0.75f will make the object centered and only as half as big as the parent.

[sinful palm]

I also have an anchor point problem. Specifically, the position and scale of the UI elements are changing when I build, but none of my anchor points are stretch

but as soon as I build it becomes really tiny and centered

[heavy sentinel]

Perhaps one of its parents isn't stretched. Before building, I would suggest testing it out on different resolution previews. For better reliability, restart the play mode during each test (in some edge-cases, properties can vary depending on what resolution was used when the object was created).

[haughty drift]

Hi im having a issue on this hover state it works really well on the sqaure buttons but stretches on the long buttons. Am i cutting it correctly? if i just cut on the blue edges then the whole thing joins up and has no transparency between them

[heavy sentinel]

Does the long button (or any of its parents) have a stretched scale? The size of GUIs is meant to be modified with width and height. Stretching the scale might make some features not work as intended.

[haughty drift]

no the long button is 1,1,1 scales

        
        if (highlightedButton != null && highlightedButton.GetComponent<Button>() != null)
        {
            RectTransform target = highlightedButton.GetComponent<RectTransform>();

            if (selectionFrame != null)
            {
                selectionFrame.gameObject.SetActive(true);
                selectionFrame.position = target.position;
                selectionFrame.sizeDelta = target.sizeDelta + new Vector2(20, 20);

                // Just make sure Animator is enabled (optional, since always animating now)
                if (!selectionFrame.GetComponent<Animator>().enabled)
                    selectionFrame.GetComponent<Animator>().enabled = true;
            }
        }``` i am chanign the sizedata but that doesnt seem to make adifference if i remove it

[lucid lotus]

Hey, small question to people more experienced in making good looking UI. If you were to make this kind of animated sequence:
(the Victory text showing up with glows and electricity behind it)
https://youtu.be/Ag6mDKrBu6I?si=csBWdjyASXECrrA9&t=681

What would be your approach?

-# Assume you are talking to a person that's well versed in tweeting and can make basic UIs. But never did something that animated and "organic". As that's the level I am at :v

The approach I can imagine using for that is rendering the effect into a video file using something line Adobe After Effects and rendering it either directly or behind some text in the UI

But I'm curious if there are better ways for such complex animation

[heavy sentinel]

Videos take up a lot of space. It's not a big problem for PC games, but it might be problematic on platforms with more limited resources.

[heavy sentinel]

The default tool for complex animations is Timeline. It lets you choose how stuff changes over time similar way it lets you do it in video editors.

[timid rock]

ive attempted to make videos show on canvases twice its a pain

[heavy sentinel]

Electricity is most likely done by switching the sprites in each frame, or procedurally generated with a shader based on some kind of noise. Since it takes only 10-20% of the screen, having it as a set of sprites would take much less space than video.

[lucid lotus]

But wouldn't a video taking 10-20% of the screen be more memory efficient than sprites? Due to better compression algorithms

Tho, I guess combining it with tweeting to handle the circles and possibly a shader for the glow could be a good way to make it lighter on the memory

[timid rock]

so glad unity doesn't pull this BS on me like Hammer++ did 🙏

[heavy sentinel]

I haven't taken into consideration making a video taking only a small portion of space. 🤔 But it would mean you would still have to animate the rest of the effects. You can also apply compression to sprites. I'm not sure which option would take less space in such a case, I think it's something you can test out.

[lucid lotus]

It would probably depend on the coding Unity uses, and the content of the video. Because in theory i-frames would compress stuff a lot

[lucid lotus]

What was the source of the pain?
From a brief research it seemed fine
Video Player -> Render Texture -> Raw Image

[timid rock]

Confusing and it just not playing at all no matter what I did

[pure moss]

Hi friends, i have use textmesh Input-fields in my unity android project and i have input field keyboard open issue when tap on another input keybord not open properly like showing in video.

[mortal robin]

It's being unfocused

[pure moss]

I have tried on default textmesh inputfield on seperate project same problem

[gleaming rapids]

Does anyone know how to make the inner part of my UI repeat instead of getting stretched? The outer part(border) works perfectly fine.

[mortal robin]

make it two separate images. Slice the border as you did here and use an Image in Sliced mode for the border.
For the inside part use an Image component in Tiled mode

[gleaming rapids]

Got it, thank you

[timid forge]

Sooo i purchased 3D webview and im now trying to Code the ui of my Project using js, CSS and HTML (Svelte). Im actually pretty excited how it Turns out. Tho having one big question. How do i make a web ui Look Like an Game ui? Web uis Always Look so Clean and smooth 🤔 any ideas?

[fluid vale]

sorry to get back to you so late but this worked perfectly, ty ❤️

[glossy fiber]

Hi! I'm trying to set-up for my dialogue choice buttons to adapt in height when the choice is multi-line. So basically having buttons "collision mask" expand dynamically depending on how much text there is. I have my button prefab and the buttons appear inside a scrollview. All three objects (DialogueContent (inside of Scrollview), the dialogueChoicePrefab (button) and the TextMeshPro object (child of button prefab) have Content Size Fitter attached with Vertical Size Fit to Preferred and Horizontal Unconstrained. Still the buttons don't resize dynamically, which causes the choices text to overlap and clip. Anyone know how to acheive this? Thanks in advance ❤️ 🥲 (Also please refer me to the right channel if I'm in the wrong one, sry I'm supernew to this)

For reference:

[heavy sentinel]

Make sure that each your ContentSizeFitter is configured (by default, the fit is set to Unconstraint). If you're changing values via code, make sure to rebuild your layout groups, starting recursively with the children, and ending with the outermost parent.

In the past, I've noticed that layout groups made fewer issues when I used different kinds of layout groups (e.g., horizontal ones inside of vertical ones), but I haven't investigated this issue further.

[glossy fiber]

Thanks! Yes I double-checked the Content Size Fitters, and set up the code recursively but the issue still remains unfortunately :/ But thank you for helping out!

[heavy sentinel]

Does your layout update properly if you disable its root and enable it? If yes, then the problem likely lies in its rebuilding. If not, then likely something isn't configured properly.

[glossy fiber]

Omg I just had to literally resize the button, that was it haha. Because apparently it couldn't be "bigger" than the height I had gave it, but it can be smaller. 🥲

Such an easy fix 🤦‍♂️

Tysm for your input and help, otherwise I wouldn't have figured out it had to do with the configuration

[low pike]

where is this screenshot from?

[honest saffron]

make your image the same size as it appears on the screen

[honest saffron]

his game i'm guessing

[low pike]

Well, duh..

Editor (game view/ simulator?) or build?

[fleet urchin]

I changed screen size and now my game broke. My UI images are now not showing properly, namely the instantiated gameObjects that I have in a scroll rect. They show up just fine in the scene view, but no longer appear in the game view.
I don't know what I broke but does anyone know how to fix it?

[low pike]

When working with UI, make sure the game view is never in 'free aspect'

Other than that, you need to make sure you anchor things correctly, don't leave everything anchored to the center, as they won't move when the screen size changes.

Also, press T to work with the correct UI gizmo

[fleet urchin]

In the game view, the aspect is 1280x720 and the anchors are already set on the prefab, as they are in a scroll rect with a grid layout group. Also I don't get why it's only showing in the scene view and not the game view

[low pike]

show a screenshot with the prefab selected - make sure you include the inspector for it

I didn't see the 'angry' text in your scene view as it's obscured by the T gizmo

[fleet urchin]

Nevermind, the Z value was messed up. Funnily enough, it was the exact same Z value prior to changing the size and it worked just fine

[hollow sleet]

why?

[low pike]

Free aspect is some random resolution. It won’t be a useable aspect ratio. So when you create your UI it won’t scale or layout correctly on an actual screen

[hollow sleet]

Shouldn't UI be ideally setup to accomodate random resolutions?

[low pike]

For games? No?

But if you do it properly, using an actual resolution as the base.. then it’s more likely to be ok

Using some random resolution as the base will fuck everything else up and make your life harder

[hollow sleet]

Why would it fuck everything up?

[low pike]

Because it won’t resize/ move/ layout correctly.

[hollow sleet]

If your UI stuff is anchored correctly it should adapt?

I thought that was like, kinda the point

[low pike]

Yes. So you use an actual resolution to get it setup correctly, so that if a tiny % of your players for some reason go windowed and change the size to a random one… it works.

You do not use some random resolution to set it up in the first place.

[hazy gazelle]

not sure if this is the right channel for this but in my npcs dialog boxes, the text looks all squished compared to the normal text up top (The Day and Time). The settings are the same, so why is that?

[low pike]

You may think everything is the same. But it’s not, otherwise there wouldn’t be a problem

First thought is the scale isn’t 1,1,1 somewhere in the hierarchy tree

[swift basin]

When doing like tabs like these, what would be the better layout, to have an image that is the square shape + the tab it self and place it as a background image of a bigger panel, or have a smaller one and then add just the tab image as bg for the button and make them the same color so they seem joined?

Did I explain that well or too confusing? XD

[mortal robin]

Something primal in my brain likes the idea of the whole thing being one image and rearranging them in the hierarchy to bring one to the front, but in terms of actual workflow etc having the tab part be a separate image and just changing the color and text on the top rectangle is probably more practical.

[swift basin]

So I should have the top part separated from the actuals tabs then, right?

[stuck pawn]

For some reason, the areas I click dont correspond to the position of the buttons

The buttons are in a grid layout group and instantiated at runtime

I was wondering if there was any way to debug this, like gizmos for showing the clickable regions on the screen

[mortal robin]

open scene view with the Rect Tool and select one of the buttons

Check what the rect looks like

[stuck pawn]

The issue has been fixed 😃 there was an empty textmeshpro in the child of the button

[dusky harness]

I wanted to quickly finish my school project, but I encounter this problem. I aim and click on the button but it doesn't change color am I dumb? I'm following some youtube tutorial, I think everything is correct, idk what I did wrong.
I follow this tutorial - https://www.youtube.com/watch?v=pKFtyaAPzYo the part starts at 4:04

[mortal robin]

All of your colors here are practically the same.

Set the one circled in read to full white (255, 255, 255, 255)
Set the green one to full green
Set the blue one to full blue.

^ Just for testing purposes

After you verify it's working just modify the Target, Normal, Highlighted, Pressed, and Selected colors.
Leave the color on the Image component itself as full white at all times.

[floral hill]

Hello, im new to unity and i have to make flappy bird for a school assignment. Im following a youtube video which is helping me but Im struggeling with the UI. My whole scene is on x=0 and y=0 but my text is on like -400 on both sides. Also when I put my text in the scene I dont see it when Im testing it. Can anyone help me?

[mortal robin]

Double click on the Canvas object in the hierarchy

And turn gizmos on

and you will see the full extents of the canvas

[dusky harness]

it doesn't work. I'll record a video rn

[mortal robin]

The canvas represents the screen. Do not try to align anything with the game world

If you put a text object in the middle of the canvas, it will appear in the middle of the screen

open game view side by side with scene view to see how it appears on screen as you place it.
(note this is all assuming you are using a screen space canvas)

[mortal robin]

show your event system inspector

[floral hill]

it is in within the canvas but it still doesnt show up

[mortal robin]

show

[mortal robin]

event systtem question was not for you

[dusky harness]

this?

[mortal robin]

no

the Event System object

Also the Canvas object

[dusky harness]

oh

[mortal robin]

show both of those inspectors

[mortal robin]

your event system is missing the input module

press that "Add Default Input Modules" button

or delete the event system

and recreate it

[dusky harness]

oh thanks it was the problem now it's fixed

[floral hill]

praetor it still doesnt work, could you help me?

[mortal robin]

I asked you to provide more information

[mortal robin]

I asked you to show me what you did

[floral hill]

oh im sorry

i dont really know how to explain

i follow a tutorial and i should have worked but i didnt

the only difference with my and the tutorial was that i had tmp and he had normal text

[mortal robin]

weirdly none of what you wrote here is you providing screenshots that I asked for

[floral hill]

what do you want to see?

[mortal robin]

I want to see what you mean by this

you said "it is within the canvas". Show me

Show me your canvas

and show me the text object inside it

[mortal robin]

Again you're not looking at this correctly. You need to do what I said here: #📲┃ui-ux message

Your text object is not positioned correctly

you have it all the way in the bottom left corner of the canvas

and very tiny

[floral hill]

oh, how can i change this?

[mortal robin]

Please read what I write

I don't feel like repeating myself three times

[floral hill]

I fixed it, I changed the canvas render mode to world space and adjusted it to length 24 and height 12 and it worked now

thanks for your time

[mortal robin]

that's... not really the right solution here

you never actually looked at your canvas properly in scene view

all you needed to do was look at the full canvas and properly position and size your text.

[empty sigil]

Can anyone point me in the direction of an asset or tutorial that would be best to create responsive UI like this seen in Metal Gear Solid: Ground Zeroes?
https://www.youtube.com/watch?v=uqI18_MBgdg&t=11s

[mild dome]

anyone know how i can make the parent "Template" of this text, scale with the text?
the text already has a content size fitter on it

[mortal robin]

you probably need this: https://stackoverflow.com/a/79280999

[inner dagger]

I'm getting a pretty annoying issue in Unity 6 where I have to re-generate all my TMP fontasset atlases every time I open Unity, like the settings are not being saved at all. Every time I open the Unity project, the atlas is reset to a 1x1 pixel image, and the glyph data is reset to I assume the default settings. Has anyone else encountered this? Couldn't find any open issues about it on the issuetracker.

Having Unity regenerate the Library from scratch didnt change the behaviour either. Even happens in a totally blank, fresh project with only a single imported font file.

[inner dagger]

Ah, in case anyone has this issue: For some reason, and this was not the case previously, the newly created font assets are defaulting to "Dynamic" Atlas Population Mode. This is causing all the atlas settings to be reset every time the editor is opened. Switching this setting to "Static" and then regenerating the atlas will correct this issue.

I am not sure why this is happening now all of a sudden, I never had this issue before just a few hours ago, and I did not change any settings within the editor. Quite strange, but I am glad I can finally resolve it. If TMP's assets are hosted on Unity servers, it is possible they have changed that setting to now be the default. That is quite frustrating.

[elfin night]

someone can help me? Im trying to make this scroll rect work, it was suposed to be elastic, but it never gets back to the place

[minor ocean]

When you say "get back to the place," do you mean you want it to always return to the starting point? The elastic setting is just for bouncing off of the bounds of the content size. When you hit the end of the content it will bounce back a little, not all the way to the center.

[elfin night]

like, i lose it when it comes of the screen

i tested with other objects and they bounce a little back do the place, in this case it doesn't, if is off the screen i lose control

[minor ocean]

I can't tell from your video, but it's probably your viewport and content sizes. Make the viewport as large as the screen and the content as big as the content. If it's already that way, I'm not sure without being able to see the actual components and rects.

[mild dome]

how can i make the "Template" object scale height wise with its children?

so its always at the lowest and highest point of the lowest and highest object

[mild dome]

u see how when i move the ui elements around

i need the template height to scale to the lowest ui element

and to the highest one

automatically

[elfin night]

thank you, i will try it

[livid ore]

https://youtu.be/sY-c_uCJjSQ?si=N7BFeIodE27Ke2zr

May you can play around to get a result

[plucky gulch]

im trying to understand how UI (more precisely canvas) works with nesting

for example i got a "main menu" prefab, that has a canvas and a panel (the background)

i have a "button" prefab, that contains a canvas at the root, as well as other stuff like a TMP button

when i add the button prefab to the main menu prefab (as a child of the canvas), the button isnt showing

[jagged monolith]

You do not want to have a new canvas on every button. Multiple nested canvases is something you should only do if you have specific reasons. Just make a prefab with a RectTransform as root, and drag that into your canvas

[plucky gulch]

the issue with that is that i cant preview the button in its prefab

[jagged monolith]

You can, if you have a prefab with a RectTransform root Unity will display it with a dummy canvas

[plucky gulch]

i dont have this behavior, even after removing the canvas

im using unity 2022

[jagged monolith]

What's the root there?

[plucky gulch]

empty GO with just a transform

[jagged monolith]

Like I say the root needs to be a RectTransform

[plucky gulch]

oh sorry

mh, still nothing

[jagged monolith]

Sure it's not just out of view?

[plucky gulch]

this is my button's components

[plucky gulch]

nope

[jagged monolith]

Try a fresh prefab by making a button on a canvas in a scene, then drag the button into the project window and make a prefab out of it

[plucky gulch]

idk which solved the issue but i opened my other main prefab and removing the instance of the button and after opening the button prefab it was working

thanks for the help, i was very surprised that i couldnt preview without a canvas

i just wished the canvas isnt locked to the screen size

for example, i dont want my modular button to take the whole phone resolution, it should take the same size as the button

[jagged monolith]

That's how it displays for me, in the scale I've set up the RectTransform

[plucky gulch]

i cant hardcode dimensions because the content is dynmic

[jagged monolith]

Then how could the canvas know what size it should be in the first place?

BTW this is how we set up most of our UI prefabs, and to make them stretch and fill areas we do that with layout groups in the hierarchy, not necessarily on the component itself

If it's easier for you, you can work with the button directly in the canvas instead and just apply the overrides to the prefab

[plucky gulch]

it takes the size of the child

like the button does for the text

[wide night]

anyone knows a good way to make icons for an inventory system?

[plucky gulch]

yeah im trying to do this rn, i have a horizontal layout, i want to have 3 button inside, i want them to act like the wrap css attribute

each of the 3 childs grows the same on the horizontal et vertical

on top what i want, at the bottom the default behavior

[plucky gulch]

i think i found how to do this, but not entirely because in some scenarios i cannot replicate that behavior

[cloud lintel]

When in linear mode, are the UI colors supposed to be different from gamma mode?

[cloud lintel]

I'm confused, is there no way to render screen space UI in gamma mode when project is set to linear mode?

[low pike]

Don't think so (confirm with a google). Even though it's "screen space" UI, it's still in the scene

[haughty drift]

Hi im building a map of how to use the controller, do they seem to big. if i make them smaller the buttons seem hard to read. Just looking for opinion please.

[mild dome]

i need to scale the "template" according to its children

automatically

so it will get scaled to the furthest child each side

the "content" object already has a content size fitter and a vertical layout group to make the templates be sorted in order

[mild dome]

and i still need to be able to move the children ui elements freely

and automatically update the parent "template" size

so if i moved the "Time Text" object to the left, the "template" would strech to the left with it

pretty much a content size fitter on top of a content size fitter

[tepid raven]

How can play a gif on a Canvas?

[stuck pawn]

get all the frames from the gif and write your own animator to change texture every frame

or convert it to a video and use video player

[tepid raven]

Tysm

[fossil sparrow]

i think it looks perfectly readable!

[static monolith]

Hello, for some reason this prints the viewport size of around 25x25, when GameScreen (a RectTransform) definitely doesn't even cover the entire screen :/
Any ideas?

[mortal robin]

What mode is your canvas in

[static monolith]

oh yeah sorry I fixed by using a different method

[rich crescent]

I'm working on a card inventory system where players can:

Add/remove cards dynamically.
Rearrange cards by dragging and swapping their positions.

To manage the layout, I initially made all card objects children of a GridLayoutGroup inside a VerticalLayoutGroup. However, I'm running into issues because having multiple layout groups conflicts with the drag-and-drop behavior.

What I’ve Tried:
-Disabling GridLayoutGroup on drag so cards can move freely.
-Re-enabling GridLayoutGroup on drop, but this resets card positions unexpectedly.
-Manually setting SetSiblingIndex() to swap card positions, but sometimes it doesn't update properly or indexes just don't update.

The Core of the Problem:
The layout system repositions cards automatically, which interferes with manual movement.
When I drag a card, the parent container resizes or shifts unexpectedly.
Nested layout groups seem to cause unintended UI behavior when enabling/disabling them.

Is there a better approach to managing the such inventory? Should I avoid GridLayoutGroup entirely and manually position cards or how would you implement such system. You don't have to worry about data's etc for cards i do have a backend

What im trying to achieve is that kind of movement for my cards inside inventory

my end product would be similar to this but i'll be using this as a inventory instead of collection etc. Only logic I'll have is drag/drop and click for each card

[urban crescent]

How can I make a grid layout that expands up to a max height (e.g., 500), and once it reaches that, any additional content stays within the 500 height and has scrollbar to see the remaining content? In web dev, I think this would be like max-height: 500px; overflow: auto;

[proud sandal]

UGUI layout components will not help you in making a fun UX like in Balatro. You have to custom-code all of that. UGUI layout only works for static views with a little punch scaling and color fading.