Jump to content

Move image


RR_Tappi

Recommended Posts

Move small image further to the right but how?

      "Anchor Min": "0.5 0",
      "Anchor Max": "0.5 0",
      "Offset Min": "190 30",
      "Offset Max": "250 60"

 

I don't understand this? What do I have to change to move the image further to the right??

It should stay at the same height, just a little further to the right. Which value do I need to change?

 

Ok got it done

      "Anchor Min": "0.55 0",
      "Anchor Max": "0.55 0",

Edited by RR_Tappi
Link to comment
Share on other sites

Hey! I see you solved this, but I'd like to explain for anyone checking this!

Anchors and offsets are essential for positioning UI elements on a player’s screen. Let’s break down the difference between them:
Anchors: Represent a percentage of the player’s screen, determining the relative position of the UI element.
Offsets: Represent a fixed number of pixels, determining the size and final adjustment of the UI element.

Two Approaches to Positioning UI Elements

1. Using Only Anchors
When you use only anchors, the UI element scales based on the player’s screen size. Here’s the format:
  - Min: "xMin yMin"
  - Max: "xMax yMax"

Example:
  - Anchor Min: "0.9 0"
  - Anchor Max: "1 0.1"

This will create a UI box in the bottom right corner that takes up 10% of the screen's width and height.

2. Using Both Anchors and Offsets
When combining anchors and offsets, you can precisely control the element's size in pixels. In this case, the anchors are used to fix the UI element at a specific point, and the offsets define its dimensions.

Format:
  - Anchor Min: "xMin yMin"
  - Anchor Max: "xMax yMax"
  - Offset Min: "xOffsetMin yOffsetMin"
  - Offset Max: "xOffsetMax yOffsetMax"

Example:
  - Anchor Min: "1 0"
  - Anchor Max: "1 0"
  - Offset Min: "-100 0"
  - Offset Max: "0 100"

Explanation:
The anchor is fixed at the bottom-right corner of the screen (point "1 0").
Offsets adjust the size: 100 pixels to the left for width and 100 pixels up for height.

Note: You always want the "min" value to be smaller than its "max" counterpart.
I attached a photo showing some specific anchor points and the signs that you'd need to use for offsets.

AnchorsOffsets.png

  • Love 2
Link to comment
Share on other sites

16 hours ago, RR_Tappi said:

Wow that is very well explained 🙂

Thank you

 

I second this, well done

 

and will add to help others

Rust CUI Editor Link <- I used this site when configure GUIs for my server.

It can be tedious to change a few values, then reload whatever plugin I am using just to see the changes and if I like them only to then have to go back and change values again to make adjustments (and in many of my cases, change them too much)

The CUI site allows users (who don't want the technical side of things) to input a box and use any anchors/offset values already determined by a plugin if there are any and in real time make changes before transferring the values to the config files. This just allowed me specifically to fine tune exactly where I want certain aspect of a GUI to be, as I have OCD when it comes to those things (1 pixel off and I'll lose it lol)

Using that CUI Editor is how I took WelcomePanel by David from its most basic template form, to what it is today on my server - *Rust CUI Editor helped a bunch with the rocket ship*

2_preview_vp.jpg.01beb13d127a6e7051ec1840e729401b.jpg

Screenshot2024-09-27134200.png.d863b4748d0838724d0eec53a311ad36.png

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
1.4m

Downloads

Total number of downloads.

6.7k

Customers

Total customers served.

99.2k

Files Sold

Total number of files sold.

2m

Payments Processed

Total payments processed.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.