
Introduction
Name spaces for the new UI controls
1 2 3 |
1 using UnityEngine.UI; 2 using UnityEngine.EventSystems; 3 using UnityEngine.Events; |
MonoBehaviour implementation
We will have a game object added in to our scene and add a script to the object. From this script we will create UI controls.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
1 public class UICreator : MonoBehaviour { 2 3 // Layer 5 is used for UI 4 private const int LayerUI = 5; 5 6 void Start () { 7 CreateUI(); 8 } 9 10 void Update () { 11 } 12 13 private void CreateUI() { 14 // we will have the code to create UI here 15 } 16 } 17 |
Canvas Object
Actual Canvas UI class and other required component will be added to this GameObject.
1 2 3 |
1 GameObject canvasObject = new GameObject("Canvas"); 2 canvasObject.layer = LayerUI; 3 canvasObject.transform.SetParent(parent); |
Now we will add components RectTransform, Canvas, CanvasScaler and GraphicRaycaster.
1 2 3 4 5 6 7 8 9 10 11 12 |
1 RectTransform canvasTrans = canvasObject.AddComponent<RectTransform>(); 2 3 Canvas canvas = canvasObject.AddComponent<Canvas>(); 4 canvas.renderMode = RenderMode.ScreenSpaceOverlay; 5 canvas.pixelPerfect = true; 6 7 CanvasScaler canvasScal = canvasObject.AddComponent<CanvasScaler>(); 8 canvasScal.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize; 9 canvasScal.referenceResolution = new Vector2(800, 600); 10 11 canvasObject.AddComponent<GraphicRaycaster>(); 12 |
Creating event system
Next we will create EventSystem so that our controls will responds to events.
1 2 3 |
1 2 GameObject esObject = new GameObject("EventSystem"); 3 esObject.transform.SetParent(canvasObject.transform); |
Just like the Canvas creation we will now add components to the event system GameObject
1 2 3 4 5 6 7 8 9 |
1 EventSystem esClass = esObject.AddComponent<EventSystem>(); 2 esClass.sendNavigationEvents = true; 3 esClass.pixelDragThreshold = 5; 4 5 StandaloneInputModule stdInput = esObject.AddComponent<StandaloneInputModule>(); 6 stdInput.horizontalAxis = "Horizontal"; 7 stdInput.verticalAxis = "Vertical"; 8 9 esObject.AddComponent<TouchInputModule>(); |
Panel to hold UI controls
We will use a Panel to hold our UI controls, so lets create the Panel now.
1 2 3 |
1 GameObject panelObject = new GameObject("Panel"); 2 panelObject.transform.SetParent(canvasObject.transform); 3 panelObject.layer = LayerUI; |
Now lets add the RectTransform component, RectTransform will be stretched which takes 80% of the Canvas size.
1 2 3 4 5 6 7 8 9 10 11 12 |
1 RectTransform trans = panelObject.AddComponent<RectTransform>(); 2 trans.anchorMin = new Vector2(0, 0); 3 trans.anchorMax = new Vector2(1, 1); 4 trans.anchoredPosition3D = new Vector3(0, 0, 0); 5 trans.anchoredPosition = new Vector2(0, 0); 6 trans.offsetMin = new Vector2(0, 0); 7 trans.offsetMax = new Vector2(0, 0); 8 trans.localPosition = new Vector3(0, 0, 0); 9 trans.sizeDelta = new Vector2(0, 0); 10 trans.localScale = new Vector3(0.8f, 0.8f, 1.0f); 11 12 panelObject.AddComponent<CanvasRenderer>(); |
Now we will add a background image to the panel. We will use a simple png file as the background. png file should be present at Assets\Resources.
1 2 3 |
1 Image image = panelObject.AddComponent<Image>(); 2 Texture2D tex = Resources.Load<Texture2D>("panel_bkg"); 3 image.sprite = Sprite.Create(tex, new Rect(0, 0, tex.width, tex.height), new Vector2(0.5f, 0.5f)); |
Creating Text UI control
Now lets go and create Text control.
1 2 3 |
1 GameObject textObject = new GameObject("Text"); 2 textObject.transform.SetParent(panelObject.transform); 3 textObject.layer = LayerUI; |
Now we will add RectTransform which sets the size and position, CanvasRenderer and the actual Text component. Text will be positioned at (x, y)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
1 RectTransform trans = textObject.AddComponent<RectTransform>(); 2 trans.sizeDelta.Set(w, h); 3 trans.anchoredPosition3D = new Vector3(0, 0, 0); 4 trans.anchoredPosition = new Vector2(x, y); 5 trans.localScale = new Vector3(1.0f, 1.0f, 1.0f); 6 trans.localPosition.Set(0, 0, 0); 7 8 textObject.AddComponent<CanvasRenderer>(); 9 10 Text text = textObject.AddComponent<Text>(); 11 text.supportRichText = true; 12 text.text = message; 13 text.fontSize = fontSize; 14 text.font = Resources.GetBuiltinResource(typeof(Font), "Arial.ttf") as Font; 15 text.alignment = TextAnchor.MiddleCenter; 16 text.horizontalOverflow = HorizontalWrapMode.Overflow; 17 text.color = new Color(0, 0, 1); |
Creating buttons
Creating button has two part, first creation of the button itself and the second part is creating a text object for displaying the text.
1 2 3 |
1 GameObject buttonObject = new GameObject("Button"); 2 buttonObject.transform.SetParent(panelObject.transform); 3 buttonObject.layer = LayerUI; |
Now lets create the RectTransform and position our button accordingly.
1 2 3 4 5 6 7 8 |
1 RectTransform trans = buttonObject.AddComponent<RectTransform>(); 2 SetSize(trans, new Vector2(w, h)); 3 trans.anchoredPosition3D = new Vector3(0, 0, 0); 4 trans.anchoredPosition = new Vector2(x, y); 5 trans.localScale = new Vector3(1.0f, 1.0f, 1.0f); 6 trans.localPosition.Set(0, 0, 0); 7 8 buttonObject.AddComponent<CanvasRenderer>(); |
Setting background image for button will be similar to that of panel’s. The png file button_bkg.png should be at Assets\Resources as before.
1 2 3 |
1 Image image = buttonObject.AddComponent<Image>(); 2 Texture2D tex = Resources.Load<Texture2D>("button_bkg"); 3 image.sprite = Sprite.Create(tex, new Rect(0, 0, tex.width, tex.height), new Vector2(0.5f, 0.5f)); |
Creating the actual button, eventListner is of type UnityAction.
1 2 3 |
1 Button button = buttonObject.AddComponent<Button>(); 2 button.interactable = true; 3 button.onClick.AddListener(eventListner); |
Next we will have to create a text object with the message and add it to the buttonObject. We can use the same code which creates the text object for this. So I am not a showing that here.
Ok now we have created NEW UI using just scripts.
Complete source code is pasted below. Please note that the code is no where near release quality.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
using UnityEngine; using System.Collections; using System.IO; using UnityEngine.UI; using UnityEngine.EventSystems; using UnityEngine.Events; public class UICreator : MonoBehaviour { private const int LayerUI = 5; void Start () { CreateUI(); } void Update () { } private void CreateUI() { GameObject canvas = CreateCanvas(this.transform); CreateEventSystem(canvas.transform); GameObject panel = CreatePanel(canvas.transform); CreateText(panel.transform, 0, 100, 160, 50, "Message", 32); CreateText(panel.transform, 0, 0, 160, 50, "Are you sure, you want to exit?", 24); CreateButton(panel.transform, -100, -100, 160, 50, "Yes", delegate {OnExit();}); CreateButton(panel.transform, 100, -100, 160, 50, "No", delegate {OnCancel();}); } private GameObject CreateCanvas(Transform parent) { // create the canvas GameObject canvasObject = new GameObject("Canvas"); canvasObject.layer = LayerUI; RectTransform canvasTrans = canvasObject.AddComponent<RectTransform>(); Canvas canvas = canvasObject.AddComponent<Canvas>(); canvas.renderMode = RenderMode.ScreenSpaceOverlay; canvas.pixelPerfect = true; CanvasScaler canvasScal = canvasObject.AddComponent<CanvasScaler>(); canvasScal.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize; canvasScal.referenceResolution = new Vector2(800, 600); GraphicRaycaster canvasRayc = canvasObject.AddComponent<GraphicRaycaster>(); canvasObject.transform.SetParent(parent); return canvasObject; } private GameObject CreateEventSystem(Transform parent) { GameObject esObject = new GameObject("EventSystem"); EventSystem esClass = esObject.AddComponent<EventSystem>(); esClass.sendNavigationEvents = true; esClass.pixelDragThreshold = 5; StandaloneInputModule stdInput = esObject.AddComponent<StandaloneInputModule>(); stdInput.horizontalAxis = "Horizontal"; stdInput.verticalAxis = "Vertical"; TouchInputModule touchInput = esObject.AddComponent<TouchInputModule>(); esObject.transform.SetParent(parent); return esObject; } private GameObject CreatePanel(Transform parent) { GameObject panelObject = new GameObject("Panel"); panelObject.transform.SetParent(parent); panelObject.layer = LayerUI; RectTransform trans = panelObject.AddComponent<RectTransform>(); trans.anchorMin = new Vector2(0, 0); trans.anchorMax = new Vector2(1, 1); trans.anchoredPosition3D = new Vector3(0, 0, 0); trans.anchoredPosition = new Vector2(0, 0); trans.offsetMin = new Vector2(0, 0); trans.offsetMax = new Vector2(0, 0); trans.localPosition = new Vector3(0, 0, 0); trans.sizeDelta = new Vector2(0, 0); trans.localScale = new Vector3(0.8f, 0.8f, 1.0f); CanvasRenderer renderer = panelObject.AddComponent<CanvasRenderer>(); Image image = panelObject.AddComponent<Image>(); Texture2D tex = Resources.Load<Texture2D>("panel_bkg"); image.sprite = Sprite.Create(tex, new Rect(0, 0, tex.width, tex.height), new Vector2(0.5f, 0.5f)); return panelObject; } private GameObject CreateText(Transform parent, float x, float y, float w, float h, string message, int fontSize) { GameObject textObject = new GameObject("Text"); textObject.transform.SetParent(parent); textObject.layer = LayerUI; RectTransform trans = textObject.AddComponent<RectTransform>(); trans.sizeDelta.Set(w, h); trans.anchoredPosition3D = new Vector3(0, 0, 0); trans.anchoredPosition = new Vector2(x, y); trans.localScale = new Vector3(1.0f, 1.0f, 1.0f); trans.localPosition.Set(0, 0, 0); CanvasRenderer renderer = textObject.AddComponent<CanvasRenderer>(); Text text = textObject.AddComponent<Text>(); text.supportRichText = true; text.text = message; text.fontSize = fontSize; text.font = Resources.GetBuiltinResource(typeof(Font), "Arial.ttf") as Font; text.alignment = TextAnchor.MiddleCenter; text.horizontalOverflow = HorizontalWrapMode.Overflow; text.color = new Color(0, 0, 1); return textObject; } private GameObject CreateButton(Transform parent, float x, float y, float w, float h, string message, UnityAction eventListner) { GameObject buttonObject = new GameObject("Button"); buttonObject.transform.SetParent(parent); buttonObject.layer = LayerUI; RectTransform trans = buttonObject.AddComponent<RectTransform>(); SetSize(trans, new Vector2(w, h)); trans.anchoredPosition3D = new Vector3(0, 0, 0); trans.anchoredPosition = new Vector2(x, y); trans.localScale = new Vector3(1.0f, 1.0f, 1.0f); trans.localPosition.Set(0, 0, 0); CanvasRenderer renderer = buttonObject.AddComponent<CanvasRenderer>(); Image image = buttonObject.AddComponent<Image>(); Texture2D tex = Resources.Load<Texture2D>("button_bkg"); image.sprite = Sprite.Create(tex, new Rect(0, 0, tex.width, tex.height), new Vector2(0.5f, 0.5f)); Button button = buttonObject.AddComponent<Button>(); button.interactable = true; button.onClick.AddListener(eventListner); GameObject textObject = CreateText(buttonObject.transform, 0, 0, 0, 0, message, 24); return buttonObject; } private static void SetSize(RectTransform trans, Vector2 size) { Vector2 currSize = trans.rect.size; Vector2 sizeDiff = size - currSize; trans.offsetMin = trans.offsetMin - new Vector2(sizeDiff.x * trans.pivot.x, sizeDiff.y * trans.pivot.y); trans.offsetMax = trans.offsetMax + new Vector2(sizeDiff.x * (1.0f - trans.pivot.x), sizeDiff.y * (1.0f - trans.pivot.y)); } private void OnExit() { Application.Quit(); } private void OnCancel() { GameObject.Destroy(this); } } |
UI Using prefab
Another, may be better, option is to use prefab. Create the UI using the unity editor and create prefab.
1 2 3 4 5 6 7 8 |
1 GameObject termsAndConditionCanvas = (GameObject)Instantiate(Resources.Load("DialogCanvas")); 2 termsAndConditionCanvas.transform.SetParent(this.transform); 3 GameObject decline = (GameObject)GameObject.Find("Yes"); 4 Button declineButton = decline.GetComponent<Button>(); 5 declineButton.onClick.AddListener(delegate{OnYesClicked();}); 6 GameObject accept = (GameObject)GameObject.Find("No"); 7 Button acceptButton = (Button)accept.GetComponent<Button>(); 8 acceptButton.onClick.AddListener(delegate{OnNoClicked();}); |
1 |
1 2 3 4 |
1 void OnYesClicked() 2 {} 3 void OnNoClicked() 4 {} |
Источник: http://chikkooos.blogspot.com/