Custom UI's - timofey260/RWE-Plus GitHub Wiki

UI's(outdated)

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
  • snap_error - Camera snap error(how much pixels required until snapping), 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]

  • tooltip - Button tooltip text color: [255, 255, 255]

  • buttontext - Dark button text color(Text on bright buttons): [0, 0, 0]

  • buttontextlight - Light button text color(Text on dark buttons): [255, 255, 255]

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 = 21.6 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

D1 - display

D1 are available in any editor with field

D1 have 3 parameters:

  • rect - rect in %(as I showed before with button)
  • color - main color
  • border - border color

Specal parameters

Special parameters are different for each editor

Any special parameter, what is not mentioned here, usless or cannot be changed

Tile Editor(TE)

  • LEtiles - shows official LE tiles, if false, shows 1.6 tiles
  • catpos - position and size of category button
  • itempos - position and size of item button. buttons will be added on bottom of this button

Light Editor(LE)

  • images - list of all light images

Level Sizing(LS)

  • tm1 - Cut method name

  • tt2 - Cut method tooltip

  • tm2 - Stretch method name

  • tm2 - Stretch method tooltip

Effect Editor(FE)

  • catpos - position and size of category button
  • itempos - position and size of item button. buttons will be added on bottom of this button
  • itempos2 - position and size of effect buttons. buttons will be added on bottom of this button
  • currentparamindex - index of button, what is gonna be renamed after changing current effect parameter
  • paramspos - position of parameter buttons. buttons will be added on right of this button
  • seedchange_size - size of seedchange button
  • additionspace - parameter button indent from text

Camera Editor(CE)

  • addspeed - speed of adding width to camera quad
  • rotatespeed - speed of rotating camera quad

Level Properties(LP)

  • nmd0 - Border passable name

  • nmd1 - Border solid name

  • nml0 - Sunlight off name

  • nml1 - Sunlight on name

Prop Editor(PE)

  • catpos - position and size of category button

  • itempos - position and size of item button. buttons will be added on bottom of this button

  • settingspos - position and size of prop settings buttons. buttons will be added on bottom of this button

  • elements_as_tiles_count - tiles as prop categories max length

  • elements_as_tiles_color - tiles as prop categories color

  • rotate_speed - speed of rotating prop

  • rotate_speedup - speed of rotating prop while speedup button pressed

  • stretch_speed - speed of stretching prop