Text sizing issues when using small scale text mesh in Unity UI - unity3d

When using textmesh to add a label to my prefab gameObject in Unity, the text appears really squashed and not filling the space properly and I can't seem to figure out how to make it appear normal. I had the same issue using plain text.
Even if i make the canvas way bigger than I want it just to test, the text is all squashed and distorted
I am using a canvas and my scaling is quite small

Update:
Try to add a CanvasScaler component to your container Canvas gameObject (add it only if it is not there yet).
https://docs.unity3d.com/Manual/script-CanvasScaler.html
It has some properties but the most important is the Reference Pixels Per Unit set it to a higher, or a much higher number.
If your container Canvas has its Render Mode in Screen Space - Overlay, then your text will look little "stretched" - as your picture shows it. If you modify the scale mode to anything else, then this will be alright.

Related

2D sprite problem when setting up an instant messaging UI

I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.

Text becomes invisible behind background canvas Unity

I just added 3D Text on my scene and it is invisible on the background of Canvas, that is "Render Mode: Screen Space - Camera". How i can make it visible on background of my canvas?
There are 2 ways to fix this:
Change the Sorting Layer of the obstructing object to be one behind that of the text, or change the Order in layer of the obstructing object to be lower than that of the canvas.
OR
Create a new canvas with a higher Sorting Layer (you may need to create a new one) or Order in Canvas and place the text in the new canvas.
As an example, here I have my normal text in a lower canvas, but I created an overlay canvas for text that absolutely must go above everything else.
I find that the second solution is a better general solution for the issue, as in the first solution you have to change the layers for every object in the scene that might obstruct your text.

Why there is a difference in the text size when show it in one Text ui and another Text ui with the same settings?

The post is a bit long but I tried to explain everything that is connected to the issue.
This screenshot is of the parent ui texts canvas.
This is a screenshot of the description ui text the text in the game looks very big the fonts are very big and stretched.
This is a screenshot of the scene text Image settings :
And the scene ui text settings :
This is a screenshot of the scene ui text when running the game from the exe build file :
And last the description ui text in game when running the build exe file :
How can I make some ui text that will be display the text the same in all the cases something that will be readable nice not too small and not too big ?
In the scene text the text is smaller because I wanted the text to be a bit under the player mouth. In the description text is a bit bigger but then everything get messed.
I think I want the text to be shown like in the scene ui text in all the places. I think the size is fine. but not sure how to do it.
There's a couple of things here that should get your text working nicely across the board.
Firstly, at your root Canvas object, you'll usually have a Canvas Scaler there. The default of "Constant Pixel Size" is often exactly what you don't want. I normally have it set to "Scale With Screen Size", and then set the resolution to 1920x1080. I do that because 1920x1080 (16:9) is the standard Full HD screen size, so you can bet that most of your screen layout is going to look the same across most displays.
The second suggestion would be to use TextMeshPro. If you haven't already got it installed through your Package Manager, then you can find it there. Here's the docs for that. It's FAR superior to the standard Text element and you'll notice less issues trying to get your text looking correct. It's usually just a matter of adding the TMPro_Text UI component to the same object your Text component was originally on (removing the original Text component of course).
I would also leave all scaling for all of your UI items set to (1, 1, 1) where you can and let and scaling be done by the Canvas Scaler. The text elements can certainly be left at (1, 1, 1) and just change the font size.
Once you get these three things sorted, your text should be the same across all of your pages, and devices.
This due to Scaling Rect Transform Component
to solve this don't scale up or scale down UI Elements {Image ,Text, ... just keep Scale 1,1,1 }
First I recommend You to see This to understand this Component
https://www.youtube.com/watch?v=FeheZqu85WI&t=6s
Now to Solve your problem
Set Scale of Description Image (1,1,1)
Set Scale of Description Text (1,1,1)
Do 1,2 with Scene Image, Scene Text
Change Width , Height of{Description Text, Scene Text} with small values 900*400

While adding a canvas and then text into a gameobject, Canvas and text size problem

I am working on a 2d project with unity engine. (I am a newbie)
As you can see in image I already have a canvas for UI elements but also I have gameobjects under player element. I want to add text inside "govde" element. but when I add it;
at left bottom you can see my game. but canvas and text size is HUGE.
I dont know what is wrong with my game or canvas but I could not solve this.
By the way my gun works well so there are no errors in game. here is a photo of game scene;
Thank you for any kind of help. Have a nice day:)
EDIT : I Wanted to show the text box I wanted; please consider the numbers are so small. What I am asking is when width:2 and height:1 ok my textbox fits inside that car but since it is so small, i cannot show even 1 characters inside text box even if I make font size : 1. My english is not perfect sorry if I make any mistake. Here is picture;
and IF I Make bigger to everything, They don't fit to my game screen. I tried to move camera to far away but that did not changed to my Game Screen.
LASTLY: When I add my a text inside my UI CANVAS, it perfectly fits. But when I add same textbox to game object called Player as I needed, it is TOO BIG
SOLUTION : For anybody who deals with same problem try to create a text object inside a UI CANVAS, after that create another canvas inside game object. And lastly, drag textbox into second canvas . That solved all my problems. My second canvas is still huge and when I make it smaller my textbox gets smaller and smaller so I cannot use it again but I let canvas to be huge, no problem for me at all. Thanks for helps.
The text you created is the tiny black ‘New Text’ above the word basla. The canvas isn't actually viewable, you can add a ‘Panel’ underneath to confirm its size.
edit set font size and change width and height of text
keep scale at 1,1,1, track all the parent scale of each parent object, they do multiply in scale as you go down, so if one parent has scale 2,2,2 and its parent has scale 3,3,3 by the time you get to the text at 1,1,1 its scaled to 6,6,6 so keep this in mind and reorganize you hierarchy as needed

Resolution issue when building the game

I am using the ViewportHandler script for Unity(https://github.com/dfsp-spirit/way2close/blob/master/Way2Close/Assets/Scripts/ViewportHandler.cs), to allow for my UI to appear the same in different resolutions. I am pretty sure that it was looking just fine and pretty much the same in all resolutions(with different quality graphics due to stretching, but that is fine).
I have opened up my project after a while and I am now noticing that while the game scene looks fine inside the editor, the UI elements change position for all resolutions when building the game.
I am attaching two screenshots to show the difference. The Editor one is the proper one where elements are aligned properly. The other one is when I am building the game and running it full screen.
The weird thing is that when building the game, every resolution displays the wrong way (as in picture 1). So the elements are actually resizing properly, but they are just in the wrong place for some reason and I really can't see why. Any ideas ?
(My Canvas is Screen Space - Overlay, Scale with Screen Size, Ref resolution is 2560/1440, Match width and height and ref pixels 100).
You don't need 3rd party scripts to achieve a constant size on different resolutions. Use the Canvas Scaler component on your canvas and set it to 'Constant Physical Size'. Unity should handle all the rest.
If images/sprites change position, try to change the anchor point to fit your needs.