Styling your components is an important aspect of using the Table Realms IDE, and it also helps your game stand out from the crowd.
Stylesheets will vary between component types, as will the elements of each stylesheet. If there is an aspect of the stylesheet that does not apply to the component you wish to style, simply leave it blank.
If there are any specific fonts, textures, images, or sounds that you wish to use when styling your components, you can import them by doing the following:
Please Note: There may be some custom styling that you would like to change during runtime. To do so, you would need to create a new script within the IDE, and do the styling programmatically. This is done in a similar manner to creating a custom component.
When creating a thumbstick (not a Drawn Thumbstick), you will need to use textures. Simply import the images that you wish to use for the thumbstick and thumbstick background, and set them as “Image Base” and “Image Other” respectively on the style sheet. The thumbstick style is now ready to be applied to your component!
If you would rather have the thumbstick element populate with different visuals according to varying in-game situations, you would need to set that up programmatically.
An example of a new script to enable different coloured thumbsticks according to the assigned controller colour is as follows:
thumbMove={}
thumbMove.Red={texture="Thumb_Red_Move.png"}
thumbMove.Green={texture="Thumb_Green_Move.png"}
thumbMove.Blue={texture="Thumb_Blue_Move.png"}
thumbMove.Yellow={texture="Thumb_Yellow_Move.png"}
function ChangeControllerColor()
styles.ThumbStickMove.imageNormal=thumbMove[gameData.currentColor].texture
RePaint();
end
function CheckColorChanged()
if gameData.currentColor ~= model.color then
gameData.currentColor = model.color
ChangeControllerColor()
end
end
AddTickHook(CheckColorChanged)
There are two primary methods of creating buttons, involving using either colour swatches or textures.
Styling a button using colour swatches is simpler than using textures, as occasionally the image fill mode for predetermined textures may need to be adjusted to produce the most accurate representation of the desired style.
If you are using any text on the button, be sure to set the following:
To use a colour swatch, simply create a coloured square for the “unpressed” and “pressed” button modes respectively in your preferred image editing programme, and import those files to the IDE as PNGs.
The next step is to set the button’s “unpressed” state as the image for “image base” in the stylesheet, and the “pressed” state as the image for “image other”.
The image fill mode can be left as “Stretch” for both button modes, as there will be no noticeable image distortion when using colour swatches.
Once you’ve done that, apply the stylesheet to the button, and check that it functions correctly using the IDE’s preview functionality.
If you feel that you’d like your buttons to be a bit more visually appealing, then using textures would be the way to go.
As with the colour swatches, create a texture for the button’s “unpressed” and “pressed” states respectively, import the files to the IDE, and set the images for “image base” and “image other”.
The difference sets in when you’re changing the image fill mode, as this affects the way the image appears within the container. The different fill modes are:
Bear in mind that when using the different image fill modes, you may need to alter the values for the following fields on both “image base” and “image other”:
Once you’ve done that, apply the stylesheet to the button, and check that it functions correctly using the IDE’s preview functionality.
Creating a stylesheet for a toggle button is very similar to creating a stylesheet for a normal button.
“Image base” is used to populate the toggle button’s inactive state, and “image other” is used for it’s active state.
When making a label stylesheet, the choice whether or not to include an image as the background for the label is purely up to you as a developer. The primary attributes of a label that need to be addressed when creating the stylesheet are:
Once those have been set and the stylesheet has been applied to the label(s), you will be able to see the text you entered.