Difference between revisions of "Using images"

Latest revision as of 15:10, 29 April 2017

If you've got images in your project that you'd like to display on your UI (which covers all the different formats from GIFs or PNG's to SVG) then they must be inside any folder called Resources. You can make as many of these folders as you want. That's so PowerUI can access them with a textual URL.

Path Examples

• Resources/Hello.png

<!-- The default document.location is "resources://", so this is simply: -->
<img src='Hello.png'>

<!-- If you want to be explicit then you can do this too: -->
<img src='resources://Hello.png'>

• Resources/MyFolder/Hello.jpg

<!-- The default document.location is "resources://", so this is simply: -->
<img src='MyFolder/Hello.jpg'>

<!-- If you want to be explicit then you can do this too: -->
<img src='resources://MyFolder/Hello.jpg'>

Note that if you use the Url field then they will be relative to that instead. See more about the resources:// protocol.

Unrecognised File types and GIF

Unity will recognise a GIF file and render it to a static image, which is probably not what you wanted. So, you'll need to add '.bytes' to the end of the file so PowerUI can access it and render it properly. Note that you don't add .bytes to your src though:

• Resources/Items/Spanner.gif.bytes

<!-- The default document.location is "resources://", so this is simply: -->
<img src='Items/Spanner.gif'>

<!-- If you want to be explicit then you can do this too: -->
<img src='resources://Items/Spanner.gif'>

Similarly, with experimental SVG, Unity doesn't recognise e.g. 'svg' as a file type so you'd need to use .svg.bytes instead if you want to use SVG in the future.

Image Settings

Note: Unity 5.6 onwards defaults to these settings. Images also need to be readable by PowerUI - This can be done simply by right clicking on it, or on a whole folder:

PowerUI > Auto Image Settings

Using textures

If you've got a texture object that you'd like to put on your UI, use the image property:

// Set the given texture as the elements background-image:
myElement.image = myTexture;