Mod Sapphire – Ui Skin
Framework
Sapphire is a framework that allows complete regeneration of the skin layer user interface of the game by using a
language similar to HTML and CSS.
Create a new skin for Sapphire
Make a new skin for Sapphire is a transition. Below is an overview of the steps necessary to create a skin:
1.2 Navigate to Skins / Emerald folder.
Copy the contents of this folder to the C: mods S.
The mods folder is a different place, depending on your operating system, here’s a list to help:
Windows – C: \ Users \ <USERNAME YOU> \ AppData \ Local \ Colossal self \ Cities_Skylines \ Addons \ mods \
Linux – ~ / .local / share / Colossal Order / Cities_Skylines / Addons / Mods
OSX – / users / Support Library / Application / Colossal Order / Cities_Skylines / Addons / Mods
After stepping through the skin should be shown in the list in-game skin Sapphire.
2. Edit SapphireSkin.cs
Open Source / SapphireSkin.cs and name of your skin and describe where it says YourSkinName and
YourSkinDescription.
3. Edit skin.xml
Notice about comments: You can use XML comments <! – This is a comment -> comment out the parts of your
XML. Cities Skylines Mod
3.0 Open _SapphireSkin / skin.xml and edit the first line with your name and the name skin author <SapphireSkin name = “<YOUR NAME HERE DA>” author = “<YOUR NAME
HERE>”>
3.1 Next define all modules of your skin by using the following syntax. Leather Module is the XML file which
3.2 Next you will determine your skin sprites used. You only need to identify new sprites if you want to replace any of the default of the game. Sprites exist inside the atlas. You can define any number of files that you want to map. Each atlas is 2048×2048 pixels in size, so you will need to create
separate atlas if you have multiple sprites. Note that each UI element can only have an atlas delivered at a time, which means the sprites used for similar components must be in the same atlas.
3.3 Determination of the color of your skin
Sapphire lets you identify colors with the name that you can use from anywhere in your skin. They are defined in skin.xml like this:
<Color>
<Color name = “ExampleHEXColor”> #FFFFFF </ color> <Color name = “ExampleRGBColor”> 81, 97, 149, 255 </ color>
</ Colors>
4. Write a skin module
Note: For more information about skin text module please see references Skin modules.
5. The basic work
At this point you may be familiar with the basics but still wondering how the basic work will look like. Here is a
workflow example that you can use and tweak to your liking:
For each component in the user interface that you want to re-design in several ways:
Activate the “development” of the spaces in the dashboard of Sapphire. This mode will draw the boundaries of all the UI components as well as allowing you to view the properties of a specific component by hovering over it.
6. Publish your skin
