Messages

Hi rubenwardy,

This theme looks very sharp. Is this still an active work?

(I read your article comparing the different GUI libraries for SFML -- funny to see the same name here.)

Cheers.

I've only added supports for the widgets I intend to use, and don't plan to add anymore. It's a time consuming process to work out how to style things

You can use this as a base for your theme, I would also appreciate pull requests back if you add support for more widgets

[Use in Continuous Integration]

Use in Continuous Integration

This code will download this tools source code, and build a given theme's source code

Code Select Expand

git clone https://gitlab.com/rubenwardy/tgui-theme-builder
tgui-theme-builder/build_archive.sh nanogui.style
mv build/theme.zip theme.zip

Here's an example .gitlab-ci.yml:

Code Select Expand


image: python:3.7

before_script:
  - apt-get update
  - apt-get install zip

build:
  stage: build
  script:
    - git clone https://gitlab.com/rubenwardy/tgui-theme-builder
    - tgui-theme-builder/build_archive.sh nanogui.style
    - mv build/theme.zip theme.zip
  artifacts:
    paths:
    - theme.zip
  only:
    - master


Use in CMake

Code Select Expand


file(GLOB GUISources ${CMAKE_SOURCE_DIR}/assets/gui/source/*)
add_custom_target(prebuild ALL
COMMAND utils/prebuild.sh
WORKING_DIRECTORY ${CMAKE_SOURCE_DIR}
DEPENDS ${GUISources}
BYPRODUCTS ${CMAKE_SOURCE_DIR}/assets/gui/rvwp.style ${CMAKE_SOURCE_DIR}/assets/gui/rvwp.png)


where `prebuild.sh` may be something similar to:

Code Select Expand


#!/bin/bash

set -e

python3 -mvenv /tmp/rvwpenv
source /tmp/rvwpenv/bin/activate
pip install PyTexturePacker

pack=$PWD/utils/pack.py

pushd assets/gui/source
python $pack rvwp.style
mv build/*.{png,style} ..
rm -r build
popd


This tool supports building GUI sprite sheets from individual source images, and contains syntactic sugar to make 9-slices easier

Required images are defined using the following syntax:

Code Select Expand


Texture = ${imagename};
// Define a 9-slice just by a margin from the edge of the image
TextureHover = ${imagename:7};


The image by that name will be found and added to the sprite sheet. The same image can be referenced multiple times and only appear once. The output of the tool will look like this:

Code Select Expand


Texture = "themename.png" Part(2, 2, 21, 60);
// Define a 9-slice just by a margin from the edge of the image
TextureHover = "themename.png" Part(2, 2, 21, 60) Middle(7, 7, 7, 46);


Full specification

• Texture = ${name}; will find the texture called name.png and then add it to the sprite sheet.
• Texture = ${name:10}; will create a 9-slice with an inner padding of 10.
• Texture = ${panel:10o+10}; will create a 9-slice with an inner padding of 10, but offset by 10 from the top (see the main body of the child window in the second screenshot).
• Texture = ${titlebar:10o-10}; will create a 9-slice with an inner padding of 10, but offset by 10 from the bottom (see the main title of the child window in the second screenshot).
• It allows you to import other theme files using #include "aaa.style".

License: Zlib
Source code: https://gitlab.com/rubenwardy/tgui-theme-builder/

This is a Work In Progress theme based on NanoGUI's default theme

License: BSD 3-clause

Source code: https://gitlab.com/rubenwardy/tgui-nanogui-theme
Downloads: https://gitlab.com/rubenwardy/tgui-nanogui-theme/pipelines

Supported widgets:

• ChildWindow
• Panel
• ListBox
• EditText
• CheckBox
• Button

[Theming Preprocessor / Superset Language]

Theming Preprocessor / Superset Language

https://forum.tgui.eu/themes/(tool)-tgui-theme-preprocessor/

Example Form

This is a program to test themes, from the examples folder of texus/tgui

https://github.com/rubenwardy/tgui-example

This is a Work In Progress theme using Kenney's UI Pack

License: Z-LIB for theme, CC-0 for resources

Source code: https://github.com/rubenwardy/tgui-kenney
Downloads: https://github.com/rubenwardy/tgui-kenney/releases

Supported widgets:

• Panels
• Edit text
• CheckBox
• Button