Change of the OTC login window

[Wilku93]

Hi!

I have a question. I am creating a custom client. I've already done a few things, but I'm wondering how to change the graphics of the login panel.

I already have graphics that I would like to replace, but I don't quite know how to implement them. I looked through the modules but I couldn't find the paths to the graphics that I could change/set later.

I have OTCv8

 

[Dakos]

modules\client_entergame\entergame.otui

widgets have their own "images" set as default, this window its builded based by images from here

data\images\ui

for example this control called "Button"

  Button
    !text: tr('PLAY')
    anchors.horizontalCenter: parent.horizontalCenter
    font: lithos-pro-26px
    text-align: center
    text-offset: 0 10
    color: #6b2e33
    anchors.top: prev.bottom
    height: 36
    margin-top: 10
    margin-left: 50
    margin-right: 50
    @onClick: EnterGame.doLogin()

    $pressed:
      image-clip: 0 208 350 104
      text-offset: 1 11

uses as default image path

data\images\ui\button.png

as i remember (the name its really doesnt matter, just locate it, replace with your graphics, or you can modify just selected control without modify all of them for example from code above

  Button
    image-source: /path/to/custom/button/image/
    !text: tr('PLAY')
    anchors.horizontalCenter: parent.horizontalCenter
    font: lithos-pro-26px
    text-align: center
    text-offset: 0 10
    color: #6b2e33
    anchors.top: prev.bottom
    height: 36
    margin-top: 10
    margin-left: 50
    margin-right: 50
    @onClick: EnterGame.doLogin()

    $pressed:
      image-clip: 0 208 350 104
      text-offset: 1 11

and entire for my example "button" as widget struct its here

\data\styles\10-buttons.otui

here u can set default image for this button, heigh, width, and other things that offers this pseudo css


ps. if you are using other layout than default, make sure you are editing files that affects new layout.

 

[Wilku93]

modules\client_entergame\entergame.otui

widgets have their own "images" set as default, this window its builded based by images from here

data\images\ui

for example this control called "Button"

  Button
    !text: tr('PLAY')
    anchors.horizontalCenter: parent.horizontalCenter
    font: lithos-pro-26px
    text-align: center
    text-offset: 0 10
    color: #6b2e33
    anchors.top: prev.bottom
    height: 36
    margin-top: 10
    margin-left: 50
    margin-right: 50
    @onClick: EnterGame.doLogin()

    $pressed:
      image-clip: 0 208 350 104
      text-offset: 1 11

uses as default image path

data\images\ui\button.png

as i remember (the name its really doesnt matter, just locate it, replace with your graphics, or you can modify just selected control without modify all of them for example from code above

  Button
    image-source: /path/to/custom/button/image/
    !text: tr('PLAY')
    anchors.horizontalCenter: parent.horizontalCenter
    font: lithos-pro-26px
    text-align: center
    text-offset: 0 10
    color: #6b2e33
    anchors.top: prev.bottom
    height: 36
    margin-top: 10
    margin-left: 50
    margin-right: 50
    @onClick: EnterGame.doLogin()

    $pressed:
      image-clip: 0 208 350 104
      text-offset: 1 11

and entire for my example "button" as widget struct its here

\data\styles\10-buttons.otui

here u can set default image for this button, heigh, width, and other things that offers this pseudo css


ps. if you are using other layout than default, make sure you are editing files that affects new layout.

I did some digging and found that, for example, the background of my "Enter Game" window is located in
"\layouts\retro\styles\10-windows"

and is responsible for him:

Window < UIWindow
  font: verdana-11px-antialised
  size: 236 207
  opacity: 1
  color: #e3cdbb
  image-source: /images/ui/textures/mainwindow_background
  image-border: 1
  image-border-top: 37
  text-offset: 25 18
  text-align: topleft
  anchors.centerIn: parent
  padding-top: 45
  padding-left: 21
  padding-right: 26
  padding-bottom: 16
  WindowBorders
  $disabled:
   color: #dfdfdf

(in the photo an example after removing the path)

Following this path, I wanted to put an additional texture on it and then just set it, but when I enter the script below, it does not appear when I launch the client. Should I use it somewhere else? (the path is good)

  UIWidget
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.left
    image-source: /images/ui/panels/window_top_de
    margin-top: -63
    margin-left: -28
    margin-right: -28
    image-auto-resize: true

I have set different dimensions but it does not appear whether it is + or -