Skip to content

UI Drawing Overview

alexguirre edited this page Aug 8, 2020 · 1 revision

RAGENativeUI introduces ResRectangle, ResText and Sprite classes. Using these the UI always looks good on any resolution.

Coordinate System

RAGENativeUI uses 1080 pixels as a base height, and then calculates the width based on the user's current aspect ratio (Screen width/Screen height). This way the aspect ratio of your menus is always mantained.

ResText

ResText expands on Text by adding a TextAlignment property and WordWrap property. Using the TextAlignment you can align your text to the left, center or right. WordWrap property will wrap your text after X pixels.

Sprite

Using the Sprite object is very easy. To create a gradient background, you can do this:

var background = new Sprite("commonmenu", "bgd_gradient", new Point(100, 20), new Size(200, 500)); You can then alter it's Heading, Color, Size, Position, TextureDict and TextureName.

Custom Textures

The Sprite class has a static method that allows you to draw custom textures, DrawTexture(Texture texture, Point position, Size size, Graphics graphics). Since it requires a Graphics instance it can only be called on a frame render event.