If you’ve used the CREY editor for a while, you may have noticed that placing and aligning text and image props can be a bit of a pain. Believe us, we know your pain.
That’s why we’ve introduced a small, but very useful, update to the Image Prop, Text Displayer, and Click Sensor props.
You can now position the elements relative to the edges of the screen using the new Position grid option.
This opens up a world of possibilities for positioning text, making clickable hotspots, and even making your own UI.
What does this mean?
Because the elements can now be positioned relative to the screen, this means two amazing things:
- It’s much easier to align elements with each other.
- They will scale properly regardless of screen size.
That second part is really a game changer. Previously, elements could only be placed relative to the top-left corner, which meant that any padding you put in the X and Y positions would be fixed. This meant that, for instance, if you wanted a bit of text aligned to the centre of the screen, it may look fine on your screen, but other people playing in bigger or smaller screen resolutions would see that text offset.
No longer will you toil under the brutal oppression of fixed coordinates! If you want to align text to the centre of the screen, you just click the centre button in the Position grid, and WHAM. Your text is in the centre, regardless of whether you’re playing on a mondo widescreen monster or a tiny little potato laptop.
Positioning things just right
Depending on where you’re aligning an element, you’ll see this little white dot change places:
This white dot indicates from where the element will move if you adjust the X and Y positions.
If you align to the centre, then the element moves from the centre. If you align it to the bottom middle, then the element moves from the bottom middle.
Keep this in mind if you realign your element and it suddenly disappears off the screen. When you realign, the centre of the element changes — so keep an eye on your X and Y coordinates. If you set them to 0, then the element will always align to the far edges of the screen or the dead centre.
(Oh, and if you’re using the Text Display prop, make sure it’s set to 2D mode — otherwise the positioning doesn’t do squat.)
Can I see this in action?
Yes! Have a look at our game Space Frighter. See the little mini-map in the top right corner? That’s all made with Image Props and Text Displays!
We hope this makes your building easier. Go make some cool UIs and let us know how you’re getting on! We’re always excited to see what you guys build, so drop by our Discord and share what you’re working on in the #your-creations channel.