Difference between revisions of "Skinning How To/Add custom artwork to the viewer"

From Second Life Wiki
Jump to navigation Jump to search
(New page: = Introduction = A simple file replace is not all you can do with skinning. You can also add your own artwork, with your own file names if you wish. These can take the form if icons, butt...)
 
Line 7: Line 7:
The viewer supports files saved in PNG, TGA, or J2C formats. To add your own artwork to the viewer:
The viewer supports files saved in PNG, TGA, or J2C formats. To add your own artwork to the viewer:


# Save your image in one of the following formats above, for example, foo.tga.
# Save your image in one of the formats listed above. For example, foo.tga.
# Move foo.tga to the '''SecondLifeReleaseCandidate\skins\textures''' folder.
# Move foo.tga to the '''SecondLifeReleaseCandidate\skins\[SKIN]\textures''' folder, [SKIN] being the name of the viewer skin you want to add your artwork to.  
# In this folder, find and open the file '''textures.xml''' and add the following line: <code><foo.tga preload="true"/></code> anywhere between <code><textures></code> and <code></textures></code>. (Note that you can also use scale_rect values for your texture. For more information, read [[Skinning_HowTo/Basics#scaling_rectangles_.28scale_rect.29 | scale_rect]]).
# In the textures folder, find and open the file '''textures.xml''' and add the following line: <code><foo.tga preload="true"/></code> anywhere between <code><textures></code> and <code></textures></code>. (Note that you can also use scale_rect values for your texture. For more information, read [[Skinning_HowTo/Basics#scaling_rectangles_.28scale_rect.29 | scale_rect]]).


The setting <code>preload="true"/></code> ensures the texture loads on startup.  
The setting <code>preload="true"/></code> ensures the texture loads on startup.  
Line 19: Line 19:
<pre><icon bottom="0" left="0" scale_image="true" width="100"
<pre><icon bottom="0" left="0" scale_image="true" width="100"
         follows="left|right|top|bottom" height="26" image_name="foo.tga"/></pre>
         follows="left|right|top|bottom" height="26" image_name="foo.tga"/></pre>
or


<pre><button bottom="0" font="SansSerif" height="20" left="0"
<pre><button bottom="0" font="SansSerif" height="20" left="0"
Line 28: Line 30:
      label="foo" name="foo" tool_tip="Show foo" </pre>
      label="foo" name="foo" tool_tip="Show foo" </pre>


Any combination of image_* parameters can be used for buttons, and using your texture as an icon in its own panel (as is done in panel_toolbar.xml loading panel_bg_toolbar.xml) is a way to create your own backgrounds.
Any combination of image_* parameters can be used for buttons, and using your texture as an icon in its own panel (as panel_toolbar.xml does with panel_bg_toolbar.xml) is an easy way to create your own backgrounds for UI elements.


[[Category:Skinning]]
[[Category:Skinning]]

Revision as of 20:19, 10 July 2008

Introduction

A simple file replace is not all you can do with skinning. You can also add your own artwork, with your own file names if you wish. These can take the form if icons, buttons, or backgrounds.

Adding artwork

The viewer supports files saved in PNG, TGA, or J2C formats. To add your own artwork to the viewer:

  1. Save your image in one of the formats listed above. For example, foo.tga.
  2. Move foo.tga to the SecondLifeReleaseCandidate\skins\[SKIN]\textures folder, [SKIN] being the name of the viewer skin you want to add your artwork to.
  3. In the textures folder, find and open the file textures.xml and add the following line: <foo.tga preload="true"/> anywhere between <textures> and </textures>. (Note that you can also use scale_rect values for your texture. For more information, read scale_rect).

The setting preload="true"/> ensures the texture loads on startup.

Using your artwork

To use your artwork, you need to reference it in another xml file. For example:

<icon bottom="0" left="0" scale_image="true" width="100"
         follows="left|right|top|bottom" height="26" image_name="foo.tga"/>

or

<button bottom="0" font="SansSerif" height="20" left="0"
	       image_selected="foo.tga" 
	       image_unselected="foo2tga" 
	       image_disabled="foo3.tga"
	       image_disabled_selected="foo4.tga"
	       image_overlay="icn_foo.tga" 
	       label="foo" name="foo" tool_tip="Show foo" 

Any combination of image_* parameters can be used for buttons, and using your texture as an icon in its own panel (as panel_toolbar.xml does with panel_bg_toolbar.xml) is an easy way to create your own backgrounds for UI elements.