1 Image Size and Type Restrictions
For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:
Images should be as close as possible to the nearest highest power of 2 in width and height. The reason for this is Kodi uses swizzled textures which are quicker to render and quicker to load once they're compressed into the Textures.xbt file. Note that the image does not need to be square, and will not be scaled into a power of 2 size. Rather, any pixels outside of a power of two size will simply be dead space (wasted memory). If you cannot manage this, then TexturePacker will opt for a linear (non-swizzled) texture format which must be aligned to 64 pixels in the horizontal, but has no restrictions in the vertical direction. These are slightly slower to load and render, but for the most part there's not a lot of difference. The TexturePacker program that does the image injection into Textures.xbt will tell you what format it's using, and how much pixel wastage (memory waste) is contained in each image.
If you wish to use full 8 bit transparency, then use PNG. If you only need a single transparent colour, then you can specify this in the <colorkey> tag, so any image will be fine. It is suggested that you use PNG and JPG as much as possible. Note that once the images are injected into Textures.xbt, they are not stored as JPG or PNG – rather they are stored in a format for faster loading. The size of the images (in kb) is therefore not as important as the size of the images in pixels – so feel free to store them in a lossless (eg PNG) manner if you wish.
The only exception to this is if you require an animated texture. In this case, we only support animated GIF. There are also SOME animated gifs that may not work. Use ImageReady CS and make sure you set the gif-anim to “restore to background” and they should work fine.
For TexturePacker to works correctly, make sure your images:
- are at least 4px x 4px in size
- use a RGB colorspace (do not use grayscale or indexed colors)
- use 8-bit integer bit depth
The following attributes can be used to alter how a texture is rendered. These apply to all texture tags (for example <texturefocus> and so on). Note that they're all lower-case, as XML is case-sensitive.
|border||Used to specify a region of the texture to be considered a border that should not be scaled when the texture is scaled to fit a control's dimensions. The portion in the border region will remain unscaled. Particularly useful to achieve rounded corners that do not change size when a control is resized. Note that zoom animations and GUI rescaling will still affect the border region - it is just the scaling of the texture to the control size which is unaffected. Using border="5" will give a 5 pixel border all around the texture. You can specify each of the border amounts on each edge individually using border="left,top,right,bottom".|
|flipx||Specifies that the texture should be flipped in the horizontal direction. Useful for reflections.|
|flipy||Specifies that the texture should be flipped in the vertical direction. Useful for reflections.|
|background||Used on the <imagepath> tag. When set to "true", this forces the image to be loaded via the large texture manager (except for textures located in Textures.xbt). See here for more information|
|diffuse||Specifies a diffuse texture which is "modulated" or multiplied with the texture in order to give specific effects, such as making the image gain transparency, or tint it in various ways. As it's applied per-pixel, many effects are possible, the most popular being by a transparent reflection which slowly gets more and more opaque. This is achieved using a WHITE image where the transparency increases as you move down the texture.|
|colordiffuse|| This specifies the color to be used for the texture basis. It's in hex AARRGGBB format. If you define |
3 See also