- Home /
Creating scalable UI elements/images?
Hi!
I want to create certain UI elements, such as crosshairs, markers, etc, that can be flexible in terms of size, rotation etc.
For example, a hexagonal marker with a border of 1 pixel. One way to create this would be to use a sprite component. However, the problem with this is if you increase the size of the image (e.g. when the object gets closer), the thickness of the marker will increase. It's also not possible to use the border feature as the hexagon is not rectangular.
Another method could be to use 6 separate line renderers, but this is annoyingly complicated and also would start adding overhead when there are multiple markers being updated on screen.
I would like to know if there is a way in Unity to create images through script (e.g. for a hexagon I could write a script that draws the correct lines), or if there is some other way to achieve this effect? I remember reading somewhere about being able to write renderers, but I can't remember where.
Have a separate camera* to just render UI elements, or Use UI Canvas. For hexagonal cross hair create asset by yourself and import it to game. For thickness you can use two overlapping hexagon, where middle hexagon scales down to increase thickness. *edit
Increasing thickness is precisely what I don't want to do. For example, say I have a triangle reticle surrounding a target. When the target gets closer to the camera, it gets bigger, and so the triangle should get bigger as well. However, if I use an image/sprite, the scaling causes the border thickness to increase when I increase the size, and get smaller when I decrease the size. I want the thickness to stay the same throughout.
Why not tile the sprite ins$$anonymous$$d of scaling it?
I'm not sure how tiling would help, since it would just repeat the image over and over? Do you mean slicing it? Slicing wouldn't work in this case since the borders can only be defined for rectangular images (e.g. square reticles), whereas here I want to have something like a triangle or a circle or a hexagon. Perhaps I should post a picture?
Your answer
Follow this Question
Related Questions
Detect 2d items only on areas where the sprite covers, and not the whole box! 0 Answers
Angled UI image creates pixels ladder 1 Answer
Order Issues - How to order UI correctly - Canvas, Sprite, Panel with Background (Image) 0 Answers
How do I size a UI Image to fit the sprite exactly? 2 Answers
Pixels Per Unit good practice query 0 Answers