Editing Modding Code Examples (section)

==How to add sprites to a window==
[[File:CustomSprites.png|thumb]]


To attach custom sprites to a window, we can do so by using the following helper method :

<syntaxhighlight lang="csharp" line="1">
void addSprite(string SpritePath, Vector3 position) {
     var gameObject = new GameObject ();
     var rectTransform = gameObject.AddComponent<RectTransform>();
     gameObject.AddComponent<CanvasRenderer>();            // requirement for Image
     var imageRenderer = gameObject.AddComponent<Image>();
     var sprite = Resources.Load<Sprite> (SpritePath);     // load the sprite
     imageRenderer.sprite = sprite;
     gameObject.transform.SetParent (transformContent);    // attach to content window
     gameObject.transform.localScale = Vector3.one;        // scale of the image reset to 1
     rectTransform.anchoredPosition3D = position;          // pos based on content window
     rectTransform.sizeDelta = new Vector2(20, 20);        // size of the image
}
</syntaxhighlight>

And then you can add the 4 sprites from the example image like so :

<syntaxhighlight lang="csharp" line="1">
addSprite("ui/Icons/iconDwarf",  new Vector3(  0,  -20, 0));
addSprite("ui/Icons/iconHumans", new Vector3( 80,  -20, 0));
addSprite("ui/Icons/iconOrcs",   new Vector3(-80,  -20, 0));
addSprite("ui/Icons/iconElves",  new Vector3(  0, -200, 0));
</syntaxhighlight>

The positions in this case are based on the top/middle position ( pivot point is <code>0.5, 0</code> ). So <code>0,0</code> is basically right above the dwarf, just below the Favorites title. In the case of the orc, we want him in the far left corner - that's <code>-80</code> on the x axis. The Human in the far right corner is <code>80</code> on the x axis. 
And finally to have the elf in the bottom area, we position him at <code>-200</code> on the y axis. 

You could also play around by changing the pivot points of the container to e.g. <code>0,0</code>, and then all items would be added from the top left corner.