Skip to content

Custom UI's

Jump to bottom
timofey edited this page Jan 16, 2023 · 9 revisions

UI's

RWE+ by default have 3 different UI(classic, official and classic_noicons)

All ui's are stored in files/ui folder

Changing existing UI

To change current ui, you need to open files/graphics.json file and replace the uifile property

image

Once, you've changed it, you can save file(ctrl + s) and relaunch RWE+

If you do this right, then ui will be changed

official ui

Making new UI

To make a new ui, you need to start with template, copy any of UI and change it's name

Change current ui to your new ui as I showed before

then you can open it in text editor(I'm using sublime text)

Global

Global is json section with all major ui settings(such as font, button roundness, window size and others)

info about params:

  • color - Primary editor color, by default is #828282
  • color2 Secondary editor color, by default is #606060
  • width - Window width, by default is 1280
  • height - Window height, by default is 720
  • fullscreen - Fullscreen, by default is false
  • fontsize - Default font size, by default is 30
  • colormul - Button fade decrement, decrease color of hovered button, by default is 10

Example: button with color = [240, 240, 240] and colormul = 10 on hover will be [240 - 10, 240 - 10, 240 - 10] = [230, 230, 230]

color can't be negative

  • size - Default cell size, by default is 30
  • font - Default font, by default is defaultfont.ttf
  • titlefont - Default title font, works for lables, which text is "RWE+", by default is Rodondo.otf
  • roundbuttons - Roundness of button edges, by default is 10
  • doublerect - Second rectangle(shadow) button, stays behind buttons, by default is true
  • doublerectoffsetx Second rectangle x offset from button, by default is 4
  • doublerectoffsety Second rectangle y offset from button, by default is 4
  • primarylayeralpha - Geometry editor main layer alpha, by default is 255
  • secondarylayeralpha - Geometry editor non main layer alpha, by default is 50

Colors

RWE+ global section have list of colors, which is RGB value

list of colors:

  • cursor - Cursor color: [255, 0, 0],

  • cursor2 - Mirror cursor + grid custom color: [50, 0, 255],

  • mirror - Mirror color: [100, 0, 0],

  • bftiles - Buffer tiles zone color: [255, 255, 255],

  • border - Border color: [0, 0, 0],

  • canplace - Can place tile color: [0, 255, 0],

  • cannotplace - cannot place tile color: [255, 0, 0],

  • select - Select cursor color: [255, 0, 0],

  • layer1 - Tile first layer color: [255, 0, 0],

  • layer2 - Tile second layer color: [0, 0, 255],

  • mixcol_empty - Effect empty color: [119, 7, 171, 200],

  • mixcol_fill - Effect filled color: [22, 166, 0, 200],

  • camera_border - Camera border color: [50, 50, 50],

  • camera_held - Held camera color: [255, 10, 5],

  • camera_notheld - Non-held camera color: [50, 250, 40],

  • slidebar - Rlidebar color: [150, 0, 0],

  • rope - Rope segment color: [255, 0, 0],

  • grid - Grid color: [160, 0, 0]

UI parts

Every ui has it's own buttons, labels or even slidebars!

here's how edit it

Button

All buttons are written in buttons section in every editor

Button have 6-7 parameters each

image

  1. Button title
  2. Button position and size in %: [x, y, w, h]
  3. RGB button color
  4. On press function(or "non")
  5. On release function(or "non")
  6. Tooltip
  7. (not necessary) icon: [filename, [imagex, imagey]]

Button renders itself on specific position(2) in %

For example: button with [2, 3, 5, 5] position will be in % position of screen

x, y = 2, 3
w, h = 5, 5

xpos - button on screen x
ypos - button on screen y
rw - width of button on screen
rw - height of button on screen

dw - window width and by default is 1280
dh - window height and by default is 720

xpos = x / 100 * dw
ypos = y / 100 * dh
rw = w / 100 * dw
rh = h / 100 * dh

xpos = 2 / 100 * 1280 = 25.6 pixels out of window left
ypos = 3 / 100 * 720 =  pixels out of window top
rw = 5 / 100 * 1280 = 64 pixels width
rh = 5 / 100 * 720 = 36 pixels height

[xpos, ypos, rw, rh] - positon of button on screen

Icon(7) is png image, what draws on button

Icon resolution written in graphics.json and by default is [30, 30]

Icon's imagex and imagey is position of icon on image: [3, 3] = [30 * 3, 30 * 3] = [90, 90] - position of icon on image

Label

All labels are written in labels section in every editor

Label have 3-4 parameters each

image

  1. Label title
  2. Label position in %(as I showed in button)
  3. Label color in RGB
  4. (not necessary) fontsize, 15 if not specified

silidebars

Slidebars are available only in LP editor only

image

Every slidebar have only 5 parameters:

  1. Title
  2. Slidebar position
  3. Slidebar width in %
  4. Slidebar values: [min, max, step]
  5. data value: [category, value]

Data value is position of value itself, so ["EX2", "tileSeed"] will replace EX2/tileSeed parameter in saved level data to it's value

that's all for now) wait for updates

Clone this wiki locally