tag:blogger.com,1999:blog-55379381106191029642024-03-21T12:38:48.282-07:00Unity 3dAnonymoushttp://www.blogger.com/profile/10909327194442151645noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-5537938110619102964.post-29404143363453632722013-03-23T06:04:00.000-07:002014-07-27T21:19:26.560-07:00Unity 3d: User Interface Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<br />
<h2>
</h2>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3>
<span style="font-family: Arial,Helvetica,sans-serif;"><b>Summary </b></span></h3>
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">In this tutorial we will create simple UI for user login and registration. From this tutorial you will learn how to:</span><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">create Unity project;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">import assets from asset store into project;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">create UI using model-view-controller (MVC) approach with javascript;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">interact with http server. </span></li>
</ul>
</div>
<div style="text-align: left;">
</div>
<h3 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; text-align: justify;">Try demo for this tutorial here </span><a href="http://unity-test-server.appspot.com/demo" style="color: yellow; font-family: Arial, Helvetica, sans-serif; font-size: medium; font-weight: normal; text-align: justify;" target="_blank">http://unity-test-server.appspot.com/demo</a><span style="font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; text-align: justify;">.</span></h3>
<div>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; text-align: justify;">Download source code here </span><a href="https://docs.google.com/file/d/0B0HipNssJJD-bEh0Wi1XeV9PSlE/edit" style="color: yellow; font-family: Arial, Helvetica, sans-serif; text-align: justify;" target="_blank">https://docs.google.com/file/d/0B0HipNssJJD-bEh0Wi1XeV9PSlE/edit</a>.</div>
<div>
</div>
<h3 style="text-align: left;">
<br/>
<a href="http://www.000webhost.com/" onClick="this.href='http://www.000webhost.com/800428.html'" target="_blank"><img src="http://www.000webhost.com/images/banners/468x60/banner6.gif" alt="Web hosting" width="468" height="60" border="0" /></a>
<br/>
<b><span style="font-family: Arial,Helvetica,sans-serif;">Creating of project</span></b></h3>
<span style="font-family: Arial,Helvetica,sans-serif;"></span>
<br />
<div style="text-align: justify;">
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Start unity and create an empty project: File menu -> New project. In dialog (fig. 1) enter location where you want save this project and press Create button. Left import checkboxes unselected. </span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpcK8I6vq0JbalCB96ioses6P9oJcv2Dgh98GppTqG2i3TqlH98HPvFrbkso4qBTXFkwVDX__Qk-NRpFqAbcDUyM435vV1P1-y5PYoPAuC6ULDcxCgIKn0yD-AyjjiyHWiEYay9aHdJuu/s1600/fig1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpcK8I6vq0JbalCB96ioses6P9oJcv2Dgh98GppTqG2i3TqlH98HPvFrbkso4qBTXFkwVDX__Qk-NRpFqAbcDUyM435vV1P1-y5PYoPAuC6ULDcxCgIKn0yD-AyjjiyHWiEYay9aHdJuu/s1600/fig1.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 1. Dialog of new project creation</i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Unity will restart. In File menu select Save Scene and save it as StartMenu scene (fig. 2).</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxxvdbfD-Ss_JjPWaZUdfC5LuBA9imB31Eh_HUjNF-GeXiGdtwyXzla-F2uRwbpIupCqidq5nPfPUJP0nO9_n4T_UTaultX6SUpP2wGzFGKuAtSVTZrTjhZQgTfshc-XJKqL3VgrS4eLv/s1600/fig2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxxvdbfD-Ss_JjPWaZUdfC5LuBA9imB31Eh_HUjNF-GeXiGdtwyXzla-F2uRwbpIupCqidq5nPfPUJP0nO9_n4T_UTaultX6SUpP2wGzFGKuAtSVTZrTjhZQgTfshc-XJKqL3VgrS4eLv/s1600/fig2.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 2. Saving scene</i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<h3 style="text-align: justify;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Adding some dynamic: selecting of skybox material and camera rotation</span></b></h3>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"></span>
<span style="font-family: Arial,Helvetica,sans-serif;"> </span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Now lets see what we got. Press Play button on top middle of Unity (rounded with red ellipse on fig. 3). You will see a blue empty screen. </span></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhb_F_nYG3Lq0PxdAJdqO5V73mdRzYIK1YokAVveUpS7DpqFK_aNw9zPTBciaazCYjW1GArKTNFMdnATKVqxnM5MYKrbuPxOJ9pwouzOd8tSDbKQWBbG-PNJuEjEFfo7l1GCnMFG-vUzdO/s1600/fig3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhb_F_nYG3Lq0PxdAJdqO5V73mdRzYIK1YokAVveUpS7DpqFK_aNw9zPTBciaazCYjW1GArKTNFMdnATKVqxnM5MYKrbuPxOJ9pwouzOd8tSDbKQWBbG-PNJuEjEFfo7l1GCnMFG-vUzdO/s400/fig3.PNG" height="119" width="400" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i> Fig. 3. Play button</i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Just to add some dynamic lets add skybox material and camera rotation effect. This will show that something is happening on our scene.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">For this example I use free Skybox Volume 2 material you can download in Unity asset store <a href="https://www.assetstore.unity3d.com/" target="_blank">https://www.assetstore.unity3d.com</a> (fig. 4).</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARGkXEXiyGMlGqU2fPPu2f3rtRz8j59JGuGI7teG6hA-jHuUFsRKwVTDMgh7dKGOWIIPpRw0MtQ-fjw1Lnvgq56kihcozlqJhwSdwxMC-EpziRf3qZgggLBn8EZITqBhf0GhOn2u8SopE/s1600/fig4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiARGkXEXiyGMlGqU2fPPu2f3rtRz8j59JGuGI7teG6hA-jHuUFsRKwVTDMgh7dKGOWIIPpRw0MtQ-fjw1Lnvgq56kihcozlqJhwSdwxMC-EpziRf3qZgggLBn8EZITqBhf0GhOn2u8SopE/s400/fig4.PNG" height="308" width="400" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 4. Skybox Volume 2</i></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">To import this texture in Unity press Open in Unity button. New window will be opened in Unity with almost same context you see on web page of asset store. Press download and import button. After download will be completed select all checkboxes in import dialog (fig. 5) and press Import button.</span></div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9n1jnOR_AcPP7WUnLVlBujJIYmZXkCzFu5sI4KRPL8LrTVMrVhIv6ED1imkj-U5S15SnqaQKEsJuRK4pwSAcq_bvaOJp8a04OuEUzwOFh5fJM1ncNiH-FJgAv40ZuaMxTpn8uZPXT9ccp/s1600/fig5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9n1jnOR_AcPP7WUnLVlBujJIYmZXkCzFu5sI4KRPL8LrTVMrVhIv6ED1imkj-U5S15SnqaQKEsJuRK4pwSAcq_bvaOJp8a04OuEUzwOFh5fJM1ncNiH-FJgAv40ZuaMxTpn8uZPXT9ccp/s1600/fig5.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i> Fig. 5. Skybox import from Unity asset store</i></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">To add skybox texture to scene in Edit menu select Render Settings. In Inspector (right side) you will see setting for rendering (fig. 6).</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLZRidit4yI8YuQsVjLjXz3e6_YOYtAAUvEBVqzvLIsI4MxUACV9Fa7jR1cIFjB5nkKclJJZGCBW0Ct-veWGu-aAEBwb0QY7SCmEYztewAUYl_h3F01xHCR7FFo-yl8xzpigLviz7pHsS/s1600/fig6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLZRidit4yI8YuQsVjLjXz3e6_YOYtAAUvEBVqzvLIsI4MxUACV9Fa7jR1cIFjB5nkKclJJZGCBW0Ct-veWGu-aAEBwb0QY7SCmEYztewAUYl_h3F01xHCR7FFo-yl8xzpigLviz7pHsS/s1600/fig6.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 6. Render Settings</i></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Press small circle for Skybox Material and select skybox you like. Now press Play button and enjoy beautiful sci-fi style skybox.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Now it is time to add some dynamic: camera rotation effect. From now we will add several javascript files and we will need some folders structure. Right click on Assets in Project tab (left bottom) and select in context menu Create -> Folder. Name this folder Scripts. Select this folder and create three sub folders (fig. 7):</span><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Effects</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">MVC</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">StartMenu</span></li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2Q1dgEzjzhZKJ_kqgVqPl38k8boEfpFXm4lnjCt5VKHXFANx2us2Ag3Di8WyyG2e1YId6XqZIgdZecGMrR1chNZgyHXhlvUliAqBVroO9dwyvfLzDwkktJJq3g9VCgujpQarrIzku70W/s1600/fig7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2Q1dgEzjzhZKJ_kqgVqPl38k8boEfpFXm4lnjCt5VKHXFANx2us2Ag3Di8WyyG2e1YId6XqZIgdZecGMrR1chNZgyHXhlvUliAqBVroO9dwyvfLzDwkktJJq3g9VCgujpQarrIzku70W/s1600/fig7.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 7. Scripts folders structure </i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Right click on Effects folder and in context menu select Create -> Javascript. Change name of the script to CameraRotationEffect. Double click this file will open Assembly-UnityScript program that allow you to edit script content. Enter listing 1 content and press save icon on tool bar of the script editing program.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">public var</span> time: <span style="color: blue;">Time</span>;<br /><span style="color: blue;">public var</span> mainCamera : <span style="color: blue;">GameObject</span>;</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// This function will be called when scene loaded</span><br /><span style="color: blue;">function</span> Start () {</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Fixed update will be performed 20 time per second:</span><br /> time.fixedDeltaTime = <span style="color: #741b47;">0.05f</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Getting MainCamera gameobject:</span><br /> mainCamera = <span style="color: blue;">GameObject</span>.Find(<span style="color: purple;">"Main Camera"</span>);<br />}</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /></span></span>
<span style="color: #38761d;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">// This function will be called every </span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">time.fixedDeltaTime</span></span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">// </span></span>seconds:</span><br /><span style="color: blue;">function</span> FixedUpdate () {</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Camera rotation with step </span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">2 * time.deltaTime</span></span>:</span><br /> mainCamera.transform.Rotate(<span style="color: purple;">0</span>, <span style="color: purple;">2</span> * time.deltaTime, <span style="color: purple;">0</span>);<br />}</span></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>List. 1. Camera rotation effect script</i></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
</div>
<span style="font-family: Arial,Helvetica,sans-serif;">We need attach this script to MainCamera. To do it switch to Unity and select MainCamera in Hierarchy (left side). In bottom of Inspector you will see Add Component button. Press it and select Scripts -> </span><span style="font-family: Arial,Helvetica,sans-serif;">Camera Rotation Effect. Press Play button and you will see how it works.</span><br />
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
</div>
<h3 style="text-align: justify;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Creating menu UI components </span></b></h3>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">First of all to create a UI components we need create empty GameObject. In menu GameObject select Create Empty. In Hierarchy new GameObject appears. Right click on it and rename to StartMenu. Create javascript file StartMenuController in folder StartMenu, replace it contents with listing 2 and attach this javascript to StartMenu GameObject.<span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"> </span></span></span><br />
<br />
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><span style="color: #38761d;">// </span></span></span></span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><span style="color: #38761d;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">This function called when scene loaded</span></span></span>: </span></span></span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">function</span> Start () {</span></span> </span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"> // We will put here all initialisation code</span><br />}</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /></span></span>
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// This function will draw UI components</span><br /><span style="color: blue;">function</span> OnGUI () {</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Rendering code</span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br />}</span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>List. 2. StartMenuController</i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">This script currently contains two functions:</span><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;"> </span><span style="font-family: Arial,Helvetica,sans-serif;">Start - called once on scene load</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;"> </span><span style="font-family: Arial,Helvetica,sans-serif;">OnGUI - called every time when UI redraw happends</span></li>
</ul>
</div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">We can put all rendering stuff in OnGUI function, but we will do in other way. For every screen rendering code will be in separate view class. This makes our code clean. We need an interface all views will implements. To create this interface create new javascript file ViewInterface in MVC folder and put in this file code from listing 3.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Common view interface:</span><br /><span style="color: blue;">interface</span> View {<br /><br /> <span style="color: #38761d;">// Rendering UI function:</span><br /> <span style="color: blue;">function</span> render();<br /> </span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Enable/disable UI components:</span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">function </span>setBlockUI(blockUI);</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br />}</span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 3. View interface</i></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Also we need class that will store login data. Create new javascript file LoginData in folder StartMenu and add listing 4 content to it.</span><br />
<br />
<br />
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class</span> LoginData {<br /><br /> <span style="color: blue;">public var</span> login : <span style="color: blue;">String</span> = <span style="color: purple;">""</span>;<br /> <span style="color: blue;">public var</span> password : <span style="color: blue;">String</span> = <span style="color: purple;">""</span>;<br /> <br /> <span style="color: blue;">public function</span> clear() {<br /> login = <span style="color: purple;">""</span>;<br /> password = <span style="color: purple;">""</span>;<br /> }<br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"> <i>Listing 4. LoginData class</i></span></div>
</div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Now we can add login view that will render GUI components. Create new javascript file in folder StartMenu with name LoginView and replace it's content with code from listing 5.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class</span> LoginView <span style="color: blue;">implements</span> View {<br /><br /> <span style="color: blue;">public final static var</span> NAME : <span style="color: blue;">String </span>= <span style="color: purple;">"Login"</span>;<br /><br /> <span style="color: blue;">public var</span> guiSkin : <span style="color: blue;">GUISkin</span>;<br /> <br /> <span style="color: blue;">public var</span> header1Style : <span style="color: blue;">GUIStyle</span>;<br /> public var header2Style : <span style="color: blue;">GUIStyle</span>;<br /> public var header2ErrorStyle : <span style="color: blue;">GUIStyle</span>;<br /> public var formFieldStyle : <span style="color: blue;">GUIStyle</span>;<br /> <br /> <span style="color: blue;">public var</span> data : LoginData = <span style="color: blue;">new</span> LoginData();<br /> <br /> <span style="color: blue;">public var</span> error = <span style="color: blue;">false</span>;<br /> <span style="color: blue;">public var</span> errorMessage : <span style="color: blue;">String</span> = <span style="color: purple;">""</span>;<br /> <br /> <span style="color: blue;">public var</span> enterGameHandler;<br /> <span style="color: blue;">public var</span> openRegistrationHandler;</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: blue;">private var</span> blockUI = <span style="color: blue;">false</span>;</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: blue;">function </span>render() {<br /><br /> <span style="color: blue;">var </span>screenWidth = <span style="color: blue;">Screen</span>.width;<br /> <span style="color: blue;">var </span>screenHeight = <span style="color: blue;">Screen</span>.height;<br /> <br /> <span style="color: blue;">var</span> xShift = (screenWidth - <span style="color: purple;">260</span>)/<span style="color: purple;">2</span>;<br /> <span style="color: blue;">var</span> yShift = (screenHeight - <span style="color: purple;">260</span>)/<span style="color: purple;">2</span>;<br /> <br /> <span style="color: blue;">GUI</span>.skin = guiSkin;<br /> </span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Disabling UI if blockUI is true:</span> </span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">GUI</span>.enabled = !blockUI;</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: #38761d;">// Main label:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(<span style="color: purple;">0</span>, yShift, screenWidth, <span style="color: purple;">30</span>), <span style="color: purple;">"Welcome to the Game"</span>, header1Style);<br /> <br /> <span style="color: #38761d;">// Message label:</span><br /> <span style="color: blue;">if</span>(error) {<br /> GUI.Label(<span style="color: blue;">Rect</span>(<span style="color: purple;">0</span>, yShift + <span style="color: purple;">70</span>, screenWidth, <span style="color: purple;">30</span>), errorMessage, header2ErrorStyle);<br /> } else {<br /> GUI.Label(<span style="color: blue;">Rect</span>(<span style="color: purple;">0</span>, yShift + <span style="color: purple;">70</span>, screenWidth, <span style="color: purple;">30</span>), <span style="color: purple;">"Enter your Login and Password"</span>, header2Style);<br /> }<br /> <br /> <span style="color: #38761d;">// Login label and login text field:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(xShift, yShift + <span style="color: purple;">120</span>, <span style="color: purple;">100</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Login:"</span>, formFieldStyle);<br /> data.login = <span style="color: blue;">GUI</span>.TextField(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">110</span>, yShift + <span style="color: purple;">120</span>, <span style="color: purple;">150</span>, <span style="color: purple;">30</span>), data.login, <span style="color: purple;">16</span>);<br /> <br /> <span style="color: #38761d;">// Password label and password text field:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(xShift, yShift + <span style="color: purple;">170</span>, <span style="color: purple;">100</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Password:"</span>, formFieldStyle);<br /> data.password = <span style="color: blue;">GUI</span>.PasswordField(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">110</span>, yShift + <span style="color: purple;">170</span>, <span style="color: purple;">150</span>, <span style="color: purple;">30</span>), data.password, <span style="color: purple;">"*"</span>[<span style="color: purple;">0</span>], <span style="color: purple;">16</span>);<br /> <br /> <span style="color: #38761d;">// Login button:</span><br /> <span style="color: blue;">if</span>(<span style="color: blue;">GUI</span>.Button(Rect(xShift, yShift + 220, 120, 30), <span style="color: purple;">"Enter Game"</span>)) {<br /> enterGameHandler();<br /> }<br /> <br /> <span style="color: #38761d;">// Switch to registration view button:</span><br /> <span style="color: blue;">if</span>(<span style="color: blue;">GUI</span>.Button(Rect(xShift + 140, yShift + 220, 120, 30), <span style="color: purple;">"Registration"</span>)) {<br /> openRegistrationHandler();<br /> }</span></span></span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Enabling UI:</span> </span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"></span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">GUI</span>.enabled = <span style="color: blue;">true</span>;</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> }</span></span></span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">public function </span></span></span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;"></span><span style="color: black;">setBlockUI</span></span></span></span>(blockUI) {</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">this</span>.</span></span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">blockUI = </span></span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">blockUI;</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> }</span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br />}</span></span> </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"></span></span></span><span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 5. LoginView class</i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Also we need to modify StartMenuController to support this view rendering. Replace content of </span><br />
<span style="font-family: Arial,Helvetica,sans-serif;">StartMenuController file with listing 6.</span><br />
<br />
<div style="text-align: justify;">
</div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Common GUI skin:</span><br /><span style="color: blue;">public var</span> guiSkin : GUISkin;<br /><br /><span style="color: #38761d;">// GUI styles for labels:</span><br /><span style="color: blue;">public var</span> header1Style : <span style="color: blue;">GUIStyle</span>;<br /><span style="color: blue;">public var</span> header2Style : <span style="color: blue;">GUIStyle</span>;<br /><span style="color: blue;">public var</span> header2ErrorStyle : <span style="color: blue;">GUIStyle</span>; <br /><span style="color: blue;">public var</span> formFieldStyle : <span style="color: blue;">GUIStyle</span>;<br /><span style="color: blue;">public var</span> errorMessageStyle : <span style="color: blue;">GUIStyle</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /><span style="color: #38761d;">// Active view name:</span><br /><span style="color: blue;">var </span>activeViewName : <span style="color: blue;">String </span>= LoginView.NAME;<br /><br /><span style="color: #38761d;">// Map views by name:</span><br /><span style="color: blue;">var </span>viewByName : <span style="color: blue;">Hashtable</span>;<br /><br /><span style="color: #38761d;">// Login view:</span><br /><span style="color: blue;">var</span> loginView : LoginView;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /></span></span>
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Do we need block UI:</span><br /><span style="color: blue;">var </span>blockUI = <span style="color: blue;">false</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /><span style="color: #38761d;">// This function will be called when scene loaded:</span><br /><span style="color: blue;">function </span>Start () { <br /><br /> <span style="color: #38761d;">// Setup of login view:</span><br /> loginView.guiSkin = guiSkin;<br /> loginView.header1Style = header1Style;<br /> loginView.header2Style = header2Style;<br /> loginView.header2ErrorStyle = header2ErrorStyle;<br /> loginView.formFieldStyle = formFieldStyle;<br /> <br /> viewByName = <span style="color: blue;">new Hashtable</span>();<br /> <br /> <span style="color: #38761d;">// Adding login view to views by name map:</span><br /> viewByName[LoginView.NAME] = loginView;<br />}<br /><br /><br /><span style="color: #38761d;">// This function will draw UI components</span><br /><span style="color: blue;">function </span>OnGUI () {<br /><br /> <span style="color: #38761d;">// Getting current view by active view name:</span><br /> var currentView : View = viewByName[activeViewName];<br /> </span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Set blockUI for current view:</span><br /> currentView.setBlockUI(blockUI);</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: #38761d;">// Rendering current view:</span><br /> currentView.render();</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Show box with "Wait..." when UI is blocked:</span><br /> <span style="color: blue;">var </span>screenWidth = Screen.width;<br /> <span style="color: blue;">var </span>screenHeight = Screen.height;<br /> <span style="color: blue;">if</span>(blockUI) {<br /> <span style="color: blue;">GUI</span>.Box(<span style="color: blue;">Rect</span>((screenWidth - <span style="color: purple;">200</span>)/<span style="color: purple;">2</span>, (screenHeight - <span style="color: purple;">60</span>)/<span style="color: purple;">2</span>, <span style="color: purple;">200</span>, <span style="color: purple;">60</span>), <span style="color: purple;">"Wait..."</span>);<br /> }<br />} </span></span></div>
<div style="text-align: center;">
<i><span style="font-family: Arial,Helvetica,sans-serif;">Listing 6. Modified </span><span style="font-family: Arial,Helvetica,sans-serif;">StartMenuController</span></i></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Let see what we got. Press play button to switch to game mode. You will see depending on skybox you select something like on fig. 8.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTyGUgayYWJ078OCj42bpSfokC6oNJrkiRU-nME3CB_LC0ckk7psKF2kGUXq3IkgaHYDJR2M9FNfEPIzCusft3bwLgE097F1PKzzgUlQJczG7b_Qn9cHGaZ-Gqexjn1NgJq1rwZMIynIl/s1600/fig8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijTyGUgayYWJ078OCj42bpSfokC6oNJrkiRU-nME3CB_LC0ckk7psKF2kGUXq3IkgaHYDJR2M9FNfEPIzCusft3bwLgE097F1PKzzgUlQJczG7b_Qn9cHGaZ-Gqexjn1NgJq1rwZMIynIl/s640/fig8.PNG" height="358" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"> <i>Fig. 8. UI befor styling</i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"> </span>
<br />
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">All labels are black and almost not visible. We can change it setting style of labels, textfields and buttons. Select StartMenu game object. In Inspector panel you will see next variables:</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Gui Skin - common set of styles</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Header 1Style - defines main label style</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Header 2Style - defines message style</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Header 2Error Style - defines style of message when we need to display an error</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Form Field Style - set styles of fields in forms</span></li>
</ul>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Double click on <b>Gui Skin</b>. In Inspector You will see set of UI elements that style you can set using this skin. We need set next UI elements styles:</span><span style="font-family: Arial,Helvetica,sans-serif;"> </span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Button</span></b></div>
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 16 </span></li>
</ul>
<div style="text-align: justify;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">TextField </span></b></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 16 </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Alignment = Middle Left </span></li>
</ul>
<div style="text-align: justify;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Box:</span></b><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = RGB(255, 211, 211)</span> </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 16</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Style = Bold </span></li>
</ul>
<b><span style="font-family: Arial,Helvetica,sans-serif;">Window:</span></b><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = RGB(255, 40, 40)</span></span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 20 </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Style = Bold</span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;">Select </span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">StartMenu game object </span>in Inspector unfold </span><span style="font-family: Arial,Helvetica,sans-serif;"><b>Header 1Style</b> and set next properties:</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = very light color, I use RGB(131, 255, 219)</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 22</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Alignment = Middle Center</span> </span></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">U</span><span style="font-family: Arial,Helvetica,sans-serif;">nfold </span><span style="font-family: Arial,Helvetica,sans-serif;"><b>Header 2Style</b> and set next properties:</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = very light color, I use RGB(131, 255, 219)</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 18</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Alignment = Middle Center</span></span></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">U</span><span style="font-family: Arial,Helvetica,sans-serif;">nfold </span><span style="font-family: Arial,Helvetica,sans-serif;"><b>Header 2Error Style</b> and set next properties:</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = very light color with red, I use RGB(255, 93, 93)</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 18</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Alignment = Middle Center</span></span></li>
</ul>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">U</span><span style="font-family: Arial,Helvetica,sans-serif;">nfold </span><span style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-family: Arial,Helvetica,sans-serif;">Form Field Style</span></b> and set next properties:</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = very light color, I use white RGB(255, 255, 255)</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 16</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Alignment = Middle Right</span></span></li>
</ul>
<div style="text-align: justify;">
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">U</span><span style="font-family: Arial,Helvetica,sans-serif;">nfold </span><span style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-family: Arial,Helvetica,sans-serif;">Error Message Style</span></b> and set next properties:</span></div>
<ul style="text-align: left;">
<li><span style="font-family: Arial,Helvetica,sans-serif;">Normal/Text Color = very light color, I use white RGB(255, 211, 211)</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Size = 16</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">Font Style = Bold </span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">Alignment = Upper Left </span></span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;">Press play button. You should see something like on fig. 9.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMGOl7sJx7kyOS9c9cqUgq4NuwQ_YQk63HD6y0o7BKSPaCehBLPtGwbTo1XeqGt7o2G3QvlsXffPDIiqf5xBP2K6txDZnMBaUgBO-aBmeGNpd4IokHFup0u3MJfEAwaQixKINOzLbQwmt/s1600/fig9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMGOl7sJx7kyOS9c9cqUgq4NuwQ_YQk63HD6y0o7BKSPaCehBLPtGwbTo1XeqGt7o2G3QvlsXffPDIiqf5xBP2K6txDZnMBaUgBO-aBmeGNpd4IokHFup0u3MJfEAwaQixKINOzLbQwmt/s1600/fig9.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;">Fig. 9. After styling</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">When user press registration button we should switch to registration view. We need create data and view classes for this. In folder StartMenu create RegistrationData javascript and put content of listing 7 in this file.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
</div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class </span>RegistrationData {<br /> <br /> <span style="color: blue;">public var</span> login : <span style="color: blue;">String </span>= <span style="color: purple;">""</span>;<br /> <span style="color: blue;">public var</span> password : <span style="color: blue;">String </span>= <span style="color: purple;">""</span>;<br /> <span style="color: blue;">public var</span> passwordConfirm : <span style="color: blue;">String </span>= <span style="color: purple;">""</span>;<br /> <span style="color: blue;">public var</span> email : <span style="color: blue;">String </span>= <span style="color: purple;">""</span>;<br /> <br /> <span style="color: blue;">public function</span> clear() {<br /> login = <span style="color: purple;">""</span>;<br /> password = <span style="color: purple;">""</span>;<br /> passwordConfirm = <span style="color: purple;">""</span>;<br /> email = <span style="color: purple;">""</span>;<br /> }<br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 8. RegistrationData class</i></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: Arial,Helvetica,sans-serif;">Create RegistrationView javascript file in folder </span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">StartMenu </span> with content from listing 9. </span></div>
<div style="text-align: justify;">
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class </span>RegistrationView <span style="color: blue;">implements </span>View {<br /><br /> <span style="color: blue;">public final static var</span> NAME : <span style="color: blue;">String </span>= <span style="color: purple;">"Registration"</span>;<br /><br /> <span style="color: blue;">public var</span> guiSkin : <span style="color: blue;">GUISkin</span>;<br /> <br /> <span style="color: blue;">public var</span> header2Style : <span style="color: blue;">GUIStyle</span>;<br /> <span style="color: blue;">public var</span> formFieldStyle : <span style="color: blue;">GUIStyle</span>;<br /> <span style="color: blue;">public var</span> errorMessageStyle : <span style="color: blue;">GUIStyle</span>;</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">public var</span> error = <span style="color: blue;">false</span>;<br /> <span style="color: blue;">public var</span> errorMessage : String = <span style="color: purple;">""</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: blue;">public var</span> data : RegistrationData = <span style="color: blue;">new </span>RegistrationData();<br /> <br /> <span style="color: blue;">public var</span> registrationHandler;<br /> <span style="color: blue;">public var</span> cancelHandler;<br /> </span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">private var</span> blockUI = <span style="color: blue;">false</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: blue;">function </span>render() { <br /> <br /> <span style="color: blue;">var </span>screenWidth = <span style="color: blue;">Screen</span>.width;<br /> <span style="color: blue;">var </span>screenHeight = <span style="color: blue;">Screen</span>.height;<br /> <br /> <span style="color: blue;">var</span> xShift = (screenWidth - <span style="color: purple;">360</span>)/<span style="color: purple;">2</span>;<br /> <span style="color: blue;">var </span>yShift = (screenHeight - <span style="color: purple;">300</span>)/<span style="color: purple;">2</span>;<br /> <br /> <span style="color: blue;">GUI</span>.skin = guiSkin;<br /> </span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Disable UI in case of blockUI is true or any error:</span><br /> <span style="color: blue;">if</span>(error || blockUI){<br /> <span style="color: blue;">GUI</span>.enabled = <span style="color: blue;">false</span>;<br /> } <span style="color: blue;">else </span>{<br /> <span style="color: blue;">GUI</span>.enabled = <span style="color: blue;">true</span>;<br /> }</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: #38761d;">// Message label:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(<span style="color: purple;">0</span>, yShift + <span style="color: purple;">0</span>, screenWidth, <span style="color: purple;">30</span>), <span style="color: purple;">"Enter Registration Data"</span>, header2Style);<br /> <br /> <span style="color: #38761d;">// Login label and text filed:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(xShift, yShift + <span style="color: purple;">50</span>, <span style="color: purple;">100</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Login:"</span>, formFieldStyle);<br /> data.login = <span style="color: blue;">GUI</span>.TextField(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">110</span>, yShift + <span style="color: purple;">50</span>, <span style="color: purple;">250</span>, <span style="color: purple;">30</span>), data.login, <span style="color: purple;">16</span>);<br /> <br /> <span style="color: #38761d;">// Password label and text filed:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(xShift, yShift + <span style="color: purple;">100</span>, <span style="color: purple;">100</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Password:"</span>, formFieldStyle);<br /> data.password = <span style="color: blue;">GUI</span>.PasswordField(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">110</span>, yShift + <span style="color: purple;">100</span>, <span style="color: purple;">250</span>, <span style="color: purple;">30</span>), data.password, <span style="color: purple;">"*"</span>[<span style="color: purple;">0</span>], <span style="color: purple;">16</span>);<br /> <br /> <span style="color: #38761d;">// Confirm password label and text filed:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(xShift - <span style="color: purple;">50</span>, yShift + <span style="color: purple;">150</span>, <span style="color: purple;">150</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Confirm Password:"</span>, formFieldStyle);<br /> data.passwordConfirm = <span style="color: blue;">GUI</span>.PasswordField(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">110</span>, yShift + 150, <span style="color: purple;">250</span>, <span style="color: purple;">30</span>), data.passwordConfirm, <span style="color: purple;">"*"</span>[<span style="color: purple;">0</span>], <span style="color: purple;">16</span>);<br /> <br /> // Email label and text filed::<br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(xShift, yShift + <span style="color: purple;">200</span>, <span style="color: purple;">100</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Your Email:"</span>, formFieldStyle);<br /> data.email = <span style="color: blue;">GUI</span>.TextField(Rect(xShift + <span style="color: purple;">110</span>, yShift + <span style="color: purple;">200</span>, <span style="color: purple;">250</span>, <span style="color: purple;">30</span>), data.email, <span style="color: purple;">32</span>);<br /> <br /> <span style="color: #38761d;">// Register button:</span><br /> <span style="color: blue;">if</span>(<span style="color: blue;">GUI</span>.Button(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">50</span>, yShift + <span style="color: purple;">250</span>, <span style="color: purple;">120</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Register"</span>)) {<br /> registrationHandler();<br /> }<br /> <br /> <span style="color: #38761d;">// Cancel button:</span><br /> <span style="color: blue;">if</span>(<span style="color: blue;">GUI</span>.Button(<span style="color: blue;">Rect</span>(xShift + <span style="color: purple;">190</span>, yShift + <span style="color: purple;">250</span>, <span style="color: purple;">120</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"Cancel"</span>)) {<br /> cancelHandler();<br /> }</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Enabling UI:</span><br /> <span style="color: blue;">GUI</span>.enabled = <span style="color: blue;">true</span>;<br /> <br /> <span style="color: #38761d;">// Show errors:</span><br /> showErrors();<br /> }</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// In case of registration error render error window:</span><br /> <span style="color: blue;">private function </span>showErrors() {<br /> <span style="color: blue;">if</span>(error) {<br /> <span style="color: blue;">var </span>screenWidth = <span style="color: blue;">Screen</span>.width;<br /> <span style="color: blue;">var </span>screenHeight = <span style="color: blue;">Screen</span>.height;<br /> windowRect = <span style="color: blue;">GUI</span>.Window (<span style="color: purple;">0</span>, <span style="color: blue;">Rect</span>((screenWidth - <span style="color: purple;">400</span>)/<span style="color: purple;">2</span>, (screenHeight - <span style="color: purple;">300</span>)/<span style="color: purple;">2</span>, <span style="color: purple;">400</span>, <span style="color: purple;">300</span>), <br /> renderErrorWindow, <span style="color: purple;">"Registration Error"</span>);<br /> }<br /> }<br /> <br /> <span style="color: #38761d;">// Render error window content:</span><br /> <span style="color: blue;">private function</span> renderErrorWindow(windowId : <span style="color: blue;">int</span>) {<br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(<span style="color: purple;">10</span>, <span style="color: purple;">30</span>, <span style="color: purple;">380</span>, <span style="color: purple;">230</span>), errorMessage, errorMessageStyle);<br /> if(<span style="color: blue;">GUI</span>.Button(<span style="color: blue;">Rect</span>((<span style="color: purple;">400 </span>- <span style="color: purple;">120</span>)/<span style="color: purple;">2</span>, <span style="color: purple;">260</span>, <span style="color: purple;">120</span>, <span style="color: purple;">30</span>), <span style="color: purple;">"OK"</span>)) {<br /> error = <span style="color: blue;">false</span>;<br /> errorMessage = <span style="color: purple;">""</span>;<br /> }<br /> }<br />} </span></span></div>
</div>
<div style="text-align: justify;">
<div style="text-align: center;">
<i><span style="font-family: Arial,Helvetica,sans-serif;">Listing 9. RegistrationView class</span></i></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">We need add support for registration view in StrartMenuController (listing 10):</span><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">create instance of RegistrationView;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">add this instance to viewByName map;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">add hadnler for button Registration on LoginView (openRegistrationHandler) that will switch active view to registration;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">add handler for button Cancel on RegistrationView (cancelHandler) that will switch active view to login;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">also we will clear previouslly entered data in views using clear function.</span></li>
</ul>
<br />
<div style="text-align: justify;">
</div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Common GUI skin:</span><br /><span style="color: blue;">public var </span>guiSkin : <span style="color: blue;">GUISkin</span>;<br /><br /><span style="color: #38761d;">// GUI styles for labels:</span><br /><span style="color: blue;">public var </span>header1Style : <span style="color: blue;">GUIStyle</span>;<br /><span style="color: blue;">public var</span> header2Style : <span style="color: blue;">GUIStyle</span>;<br /><span style="color: blue;">public var</span> header2ErrorStyle : <span style="color: blue;">GUIStyle</span>; <br /><span style="color: blue;">public var</span> formFieldStyle : <span style="color: blue;">GUIStyle</span>;<br /><span style="color: blue;">public var</span> errorMessageStyle : <span style="color: blue;">GUIStyle</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /><span style="color: #38761d;">// Active view name:</span><br /><span style="color: blue;">var </span>activeViewName : <span style="color: blue;">String </span>= LoginView.NAME;<br /><br /><span style="color: #38761d;">// Map views by name:</span><br /><span style="color: blue;">var </span>viewByName : Hashtable;<br /><br /><span style="color: #38761d;">// Login view:</span><br /><span style="color: blue;">var </span>loginView : LoginView;<br /><br /><span style="color: #38761d;">// Registration view:</span><br /><span style="color: blue;">var </span>registrationView : RegistrationView;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"></span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Do we need block UI:</span><br /><span style="color: blue;">var </span>blockUI = <span style="color: blue;">false</span>;</span></span></span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// This function will be called when scene loaded:</span><br /><span style="color: blue;">function </span>Start () { <br /><br /> <span style="color: #38761d;">// Setup of login view:</span><br /> loginView.guiSkin = guiSkin;<br /> loginView.header1Style = header1Style;<br /> loginView.header2Style = header2Style;<br /> loginView.header2ErrorStyle = header2ErrorStyle;<br /> loginView.formFieldStyle = formFieldStyle;<br /> <br /> <span style="color: #38761d;">// Handler of registration button click:</span><br /> loginView.openRegistrationHandler = <span style="color: blue;">function</span>() {<br /> <span style="color: #38761d;">// Clear reistration fields:</span><br /> registrationView.data.clear();<br /> <span style="color: #38761d;">// Set active view to registration:</span><br /> activeViewName = RegistrationView.NAME;<br /> };<br /> <br /> <span style="color: #38761d;">// Setup of login view:</span><br /> registrationView.guiSkin = guiSkin;<br /> registrationView.header2Style = header2Style;<br /> registrationView.formFieldStyle = formFieldStyle;<br /> registrationView.errorMessageStyle = errorMessageStyle;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: #38761d;">// Handler of cancel button click:</span><br /> registrationView.cancelHandler = <span style="color: blue;">function</span>() {<br /> <span style="color: #38761d;">// Clear reistration fields:</span><br /> loginView.data.clear();<br /> <span style="color: #38761d;">// Set active view to registration:</span><br /> activeViewName = LoginView.NAME;<br /> };<br /> <br /> viewByName = <span style="color: blue;">new Hashtable</span>();<br /> <br /> <span style="color: #38761d;">// Adding login view to views by name map:</span><br /> viewByName[LoginView.NAME] = loginView;<br /> viewByName[RegistrationView.NAME] = registrationView;<br />}<br /><br /><span style="color: #38761d;">// This function will draw UI components</span><br /><span style="color: blue;">function </span>OnGUI () {<br /><br /> </span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Getting current view by active view name:</span><br /> var currentView : View = viewByName[activeViewName];<br /> </span></span></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Set blockUI for current view:</span><br /> currentView.setBlockUI(blockUI);</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br /> <span style="color: #38761d;">// Rendering current view:</span><br /> currentView.render();</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Show box with "Wait..." when UI is blocked:</span><br /> <span style="color: blue;">var </span>screenWidth = Screen.width;<br /> <span style="color: blue;">var </span>screenHeight = Screen.height;<br /> <span style="color: blue;">if</span>(blockUI) {<br /> <span style="color: blue;">GUI</span>.Box(<span style="color: blue;">Rect</span>((screenWidth - <span style="color: purple;">200</span>)/<span style="color: purple;">2</span>, (screenHeight - <span style="color: purple;">60</span>)/<span style="color: purple;">2</span>, <span style="color: purple;">200</span>, <span style="color: purple;">60</span>), <span style="color: purple;">"Wait..."</span>);</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 10. Modified StartMenuController to support RegistrationView </i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">If you press Play button and than press Registration button active view will be switched to registration (fig. 10). If you press Cancel button you will switch back to login. </span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-62RHAgchyphenhyphenpDj_jD8rlr36fZH2S0HQbD5Uf5TeVLa54xNLn9yW9KAOq4ux-2xYeeeXJuiFQ-7Qr8Bmo1_gM_w8sTK72v3fjR9ymjePQJ6ZlyQDrdE7I1MNbpCcffNbZ8zFNIxKuHaBO0/s1600/fig10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-62RHAgchyphenhyphenpDj_jD8rlr36fZH2S0HQbD5Uf5TeVLa54xNLn9yW9KAOq4ux-2xYeeeXJuiFQ-7Qr8Bmo1_gM_w8sTK72v3fjR9ymjePQJ6ZlyQDrdE7I1MNbpCcffNbZ8zFNIxKuHaBO0/s640/fig10.PNG" height="360" width="640" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 10. Registration form</i></span></div>
<br />
<h3>
<span style="font-family: Arial,Helvetica,sans-serif;">Interact with HTTP server</span></h3>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Almost all games interact with servers. In this tutorial we also will implements login and registration functionality based on interaction with HTTP server. I create test HTTP server that support this functionality. Read more about test server API at <a href="http://unity-test-server.appspot.com/" target="_blank">http://unity-test-server.appspot.com</a>.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<b><span style="font-family: Arial,Helvetica,sans-serif;">Login functionality description:</span></b><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">send login and password entered in LoginView to server using POST method;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">receive response from server in json format;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">if provided credentials is incorrect - we will display error message;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">if provided credentials is correct - we will load second scene.</span></li>
</ul>
<b><span style="font-family: Arial,Helvetica,sans-serif;">Registration functionality description:</span></b><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">send registration data entered in RegistrationView using POST method;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">receive response from server in json format;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">if there is any error - we will display error messages;</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">if registration was successful - we will load second scene.</span></li>
</ul>
<span style="font-family: Arial,Helvetica,sans-serif;">We start with login functionality. By Login button click we need to send data to HTTP server. We need create one more class that represents response from server. Create folder in Assets/Scripts and name it NET. Add javascript file to NET folder and name it Response. Replace content of Response file with code from listing 11.</span><br />
<br />
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class </span>Response {</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">public var</span> error = <span style="color: purple;">false</span>;</span></span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;">public var</span> message : <span style="color: blue;">String </span>= <span style="color: purple;">""</span>;<br /> <br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 11. Response class</i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Response from server will be in JSON format. We need parser to convert JSON text into javascript object. In this tutorial we will use parser you can download by this link <a href="https://github.com/tonioloewald/jsonparse" target="_blank">https://github.com/tonioloewald/jsonparse</a>. Download JSONParse.js file, create Json folder in Asset/Scripts and put downloaded file in this folder.</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Separate class LoginService will be responsible for request sending and response parsing. Create this class in StartMenu folder. Content of </span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: Arial,Helvetica,sans-serif;">ServerLogin </span>is in listing 12.</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class </span>LoginService {<br /><br /> <span style="color: blue;">public final static var</span> LOGIN_URL = <span style="color: purple;">"http://unity-test-server.appspot.com/authentication/login"</span>;<br /> <br /> <span style="color: blue;">function </span>sendLoginData(loginData : LoginData, responseHandler) {<br /> <br /> <span style="color: blue;">var </span>response : Response = <span style="color: blue;">new </span>Response(); <br /> <br /> <span style="color: blue;">Debug</span>.Log(<span style="color: purple;">"Sending login request to "</span> + LOGIN_URL);<br /> <br /> <span style="color: #38761d;">// Creating form with login and password fields:</span><br /> var loginForm = new WWWForm();<br /> loginForm.AddField("login", loginData.login);<br /> loginForm.AddField("password", loginData.password);<br /> <br /> <span style="color: #38761d;">// Sending request:</span><br /> var httpResponse = new WWW(LOGIN_URL, loginForm); <br /> <br /> <span style="color: #38761d;">// Waiting for response:</span><br /> yield httpResponse;<br /> <br /> if(httpResponse.error) {<br /> <span style="color: #38761d;">// Error was while connecting/reading response </span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"> // from server:</span><br /> <span style="color: blue;">Debug</span>.Log(<span style="color: purple;">"Error: "</span> + httpResponse.error);<br /> response.error = <span style="color: purple;">true</span>;<br /> response.message = <span style="color: purple;">"Error: failed connect to server"</span>;<br /> } else {<br /> <span style="color: #38761d;">// Response was received:</span><br /> <span style="color: blue;">Debug</span>.Log("Receive response: " + httpResponse.text);<br /> <span style="color: #38761d;">// Parsing response:</span><br /> <span style="color: blue;">var </span>parsed : Boo.Lang.Hash = JSONParse.JSONParse(httpResponse.text);<br /> if(parsed[<span style="color: purple;">"error"</span>]) {<br /> <span style="color: #38761d;">// Wrong login or password:</span><br /> <span style="color: blue;">Debug</span>.Log(<span style="color: purple;">"Error: "</span> + parsed[<span style="color: purple;">"errorMessage"</span>]);<br /> response.error = <span style="color: purple;">true</span>;<br /> response.message = parsed[<span style="color: purple;">"errorMessage"</span>];<br /> } else {<br /> <span style="color: #38761d;">// Correct login and password:</span><br /> Debug.Log(<span style="color: purple;">"You are loggin successfully"</span>);<br /> response.error = <span style="color: purple;">false</span>;<br /> response.message = <span style="color: purple;">""</span>;<br /> }<br /> }<br /> <span style="color: #38761d;">// Calling response handler:</span><br /> responseHandler(response);<br /> } <br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 12. LoginService class</i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">We need add one more handler for Login button in StartMenuController javascript file. For this add LoginService variable to </span><span style="font-family: Arial,Helvetica,sans-serif;">StartMenuController file (listing 13):</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Login service:</span><br /><span style="color: blue;">var </span>loginService : LoginService; </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 13. </i><i>LoginService Variable</i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Add function to file StartMenuController that will process response from server (listing 14):</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Processing login response from HTTP server:</span><br /><span style="color: blue;">function </span>loginResponseHandler(response : Response) {<br /> </span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">blockUI = <span style="color: blue;">false</span>;</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> loginView.error = response.error;<br /> loginView.errorMessage = response.message;<br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 14. </i><i>Login server response handler function</i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">And last step - add handler for Login button in function Start() of StartMenuController (listing 15):</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">loginView.enterGameHandler = <span style="color: blue;">function</span>() {<br /> </span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">blockUI = <span style="color: blue;">true</span>;</span></span><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"> </span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;"> // Sending login request:</span><br /> StartCoroutine(loginService.sendLoginData(loginView.data,</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> loginResponseHandler));<br /> }; </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 15. </i><i>Login button handler</i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Press Play button, enter some login and password and press Login button. While you don't have a registered user with login and password you know you will see message "Incorrect login or password".</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Now it is time to create RegistrationService that will send data for new user registration and wait for response. In folder StartMenu create javascript file with name RegistrationService. Content of RegistrationService should be replaced with listing 16.</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class </span>RegistrationService {<br /><br /> <span style="color: blue;">public final static var</span> REGISTRATION_URL = <span style="color: purple;">"http://unity-test-server.appspot.com/authentication/register"</span>;<br /> <br /> <span style="color: blue;">public function</span> sendRegistrationData(registrationData : RegistrationData, responseHandler) {<br /> <br /> <span style="color: blue;">var </span>response : Response = <span style="color: blue;">new </span>Response(); <br /> <br /> <span style="color: blue;">Debug</span>.Log(<span style="color: purple;">"Sending registration request to "</span> + REGISTRATION_URL);<br /> <br /> <span style="color: #38761d;">// Setting registration parameters:</span><br /> <span style="color: blue;">var </span>registrationForm = <span style="color: blue;">new WWWForm</span>();<br /> registrationForm.AddField(<span style="color: purple;">"login"</span>, registrationData.login);<br /> registrationForm.AddField(<span style="color: purple;">"password"</span>, registrationData.password);<br /> registrationForm.AddField(<span style="color: purple;">"passwordConfirm"</span>, registrationData.passwordConfirm);<br /> registrationForm.AddField(<span style="color: purple;">"email"</span>, registrationData.email);<br /> <br /> <span style="color: #38761d;">// Sending request:</span><br /> <span style="color: blue;">var </span>httpResponse = <span style="color: blue;">new WWW</span>(REGISTRATION_URL, registrationForm); <br /> <br /> <span style="color: purple;">// Waiting for response:</span><br /> <span style="color: blue;">yield </span>httpResponse;<br /> <br /> <span style="color: blue;">if</span>(httpResponse.error) {<br /> <span style="color: #38761d;">// Error was while connecting/reading response from server:</span><br /> <span style="color: blue;">Debug</span>.Log(<span style="color: purple;">"Error: "</span> + httpResponse.error);<br /> response.error = <span style="color: blue;">true</span>;<br /> response.message = <span style="color: purple;">"Error: failed connect to server"</span>;<br /> } <span style="color: blue;">else </span>{<br /> <span style="color: #38761d;">// Response was received:</span><br /> <span style="color: blue;">Debug</span>.Log("Receive response: " + httpResponse.text);<br /> <span style="color: #38761d;">// Parsing response:</span><br /> <span style="color: blue;">var </span>parsed : Boo.Lang.Hash = JSONParse.JSONParse(httpResponse.text);<br /> <span style="color: blue;">if</span>(parsed[<span style="color: purple;">"error"</span>]) {<br /> // Error while login:<br /> <span style="color: blue;">Debug</span>.Log(<span style="color: purple;">"Error: "</span> + parsed[<span style="color: purple;">"errorMessage"</span>]);<br /> response.error = <span style="color: blue;">true</span>;<br /> response.message = parsed[<span style="color: purple;">"errorMessage"</span>];<br /> } <span style="color: blue;">else </span>{<br /> <span style="color: #38761d;">// Registration was successful:</span><br /> Debug.Log(<span style="color: purple;">"You was registered successfully"</span>);<br /> response.error = <span style="color: blue;">false</span>;<br /> response.message = <span style="color: purple;">""</span>;<br /> }<br /> }<br /> <span style="color: #38761d;">// Calling response handler:</span><br /> responseHandler(response);<br /> }<br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 16. RegistrationService class</i><i></i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">To use registration service we need modify StartMenuController. Add new variable (listing 17). Create handler function that will process registration response (listing 18). Set Register button handler in Start function to perform registration request and response processing (listing 19). </span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Registration service:</span><br /><span style="color: blue;">var </span>registrationService : RegistrationService; </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 17. </i><i>RegistrationService Variable</i></span></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Processing registration response from HTTP server:</span><br /><span style="color: blue;">function </span>registrationResponseHandler(response : Response) {<br /> blockUI = <span style="color: blue;">false</span>;<br /> registrationView.error = response.error;<br /> registrationView.errorMessage = response.message;<br />}</span></span> </span></span></div>
<div style="text-align: center;">
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 18. </i><i>Registration service response handler function</i></span></div>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="color: #38761d;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">// Handler of Register button:</span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">registrationView.registrationHandler = <span style="color: blue;">function</span>() {<br /> blockUI = <span style="color: blue;">true</span>;<br /> <span style="color: #38761d;">// Sending registration request:</span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> StartCoroutine(registrationService.sendRegistrationData(</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> registrationView.data, registrationResponseHandler));<br /> }; </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 19. </i><i>Register button handler</i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Finally we can test how it works. Press Play button and switch to registration view by pressing of Registration button. If you left all registration fields empty and press Register you will see error message (fig. 11).</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqsoDMdPgu6wKTkYrbDR28iUHn3M_WwidVXzHDmqJzUkjOKikape0QpxB08wgW-YtTT0Nlcc8DI4mLXVynge3Nb_4VHNeuVJc7f5xMyBHG5sQapczWYHd4wZqH5Ka6NGImgspd06U4lk4j/s1600/fig11-n.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqsoDMdPgu6wKTkYrbDR28iUHn3M_WwidVXzHDmqJzUkjOKikape0QpxB08wgW-YtTT0Nlcc8DI4mLXVynge3Nb_4VHNeuVJc7f5xMyBHG5sQapczWYHd4wZqH5Ka6NGImgspd06U4lk4j/s1600/fig11-n.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 11. Registration error</i></span>
</div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Even if you enter all fields and registration will be successful nothing will happens. You will see same registration form filled with your data.</span><br />
<br />
<h3 style="text-align: justify;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Loading main game scene after login/registration was successful </span></b></h3>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">One more thing we need to implement is switching to other scene when login or registration was successful. Also we need to identify user that was login to game. For this we will send user login to second (main game) scene and display welcome message to check that data was sent.</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">To get user login in main scene we need create game object that will survive after main scene will be loaded. For this add new GameObject and name it UserSession. </span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Create User forled as sub folder of Scripts folder in Assets. We need add two script to this folder:</span><br />
<ul>
<li><span style="font-family: Arial,Helvetica,sans-serif;">UserSession - contains user login (listing 20);</span></li>
<li><span style="font-family: Arial,Helvetica,sans-serif;">UserSessionUtils - utilities that allow set/get user login (listing 21). </span></li>
</ul>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// User login:</span><br /><span style="color: blue;">public var </span>userLogin : <span style="color: blue;">String</span>;<br /><br /><span style="color: blue;">function </span>Awake() {<br /> <span style="color: #38761d;">// Do not destroy this game object:</span><br /> DontDestroyOnLoad(<span style="color: blue;">this</span>);<br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 20. </i><i>UserSession scrip </i></span></div>
<br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// User session utils:</span><span style="color: blue;"></span><span style="color: blue;"></span><span style="color: blue;"></span><span style="color: #38761d;"></span><span style="color: blue;"></span></span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">class </span>UserSessionUtils {<br /><br /> <span style="color: blue;">public static function</span> getUserLogin() {<br /> <span style="color: blue;">return </span>findSctiptInGameObject(<span style="color: purple;">"UserSession"</span>,</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: purple;"> "UserSession"</span>).userLogin;<br /> }<br /><br /> <span style="color: blue;">public static function</span> setUserLogin(userLogin : <span style="color: blue;">String</span>) { findSctiptInGameObject(<span style="color: purple;">"UserSession"</span>,</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: blue;"> <span style="color: purple;">"UserSession"</span></span>).userLogin = userLogin;<br /> }<br /> <br /> <span style="color: blue;">private static function</span> findSctiptInGameObject(</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> objectName : <span style="color: blue;">String</span>, scriptName : <span style="color: blue;">String</span>) {<br /> var userSession : GameObject =</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> GameObject.Find(objectName);<br /> return userSession.GetComponent(scriptName);<br /> }<br />}</span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 21. </i><i>UserSessionUtils class </i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Add UserSession script to UserSession game object. You can do it selecting UserSession game object in Hierarchy and press Add Component button in Inspector. After that select Scripts -> User Session.</span><br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">After success login or registration we need set user login to UserSession game object and load Main scene. To do it we need modify two functions loginResponseHandler and registrationResponseHandler in StartMenuController. Replace content of this functions with listing 22.</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: #38761d;">// Processing login response from HTTP server:</span><br /><span style="color: blue;">function </span>loginResponseHandler(response : Response) {<br /> blockUI = <span style="color: blue;">false</span>;<br /> loginView.error = response.error;<br /> loginView.errorMessage = response.message;<br /> if(!loginView.error) {<br /> UserSessionUtils.setUserLogin(loginView.data.login);<br /> <span style="color: blue;">Application</span>.LoadLevel(<span style="color: purple;">1</span>);<br /> }<br />}<br /><br /><span style="color: #38761d;">// Processing registration response from HTTP server:</span><br /><span style="color: blue;">function </span>registrationResponseHandler(response : Response) {<br /> blockUI = <span style="color: blue;">false</span>;<br /> registrationView.error = response.error;<br /> registrationView.errorMessage = response.message;<br /> if(!response.error) {<br /> UserSessionUtils.setUserLogin(</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> registrationView.data.login);<br /> <span style="color: blue;">Application</span>.LoadLevel(<span style="color: purple;">1</span>);<br /> }<br />} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 22. </i><i>UserSession scrip </i></span></div>
<br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Add current scene to build: select Build Setting from File menu. Press Add Current button (fig. 12).</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9J-mFdt7YvfgkoZfT1rzJYwa6Ns5Irvs9imoXjVA9VIiMIeHbnFIjkt81YcQSLjIO-UNTzSypVIwz3BmDtaze6U6UxtbrcU-ElR6ENk77ekp3LGgAu-FjkzAY_tJ8GdzndjTYKyalwXgF/s1600/fig11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9J-mFdt7YvfgkoZfT1rzJYwa6Ns5Irvs9imoXjVA9VIiMIeHbnFIjkt81YcQSLjIO-UNTzSypVIwz3BmDtaze6U6UxtbrcU-ElR6ENk77ekp3LGgAu-FjkzAY_tJ8GdzndjTYKyalwXgF/s1600/fig11.PNG" /></a></div>
<div style="text-align: center;">
<i><span style="font-family: Arial,Helvetica,sans-serif;">Fig. 12. Adding current scene to build</span></i></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">You can press Build and Run button to see how your project will look in web browser. </span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Create new scene File -> New Scene. Select some skybox for this scene. You can select skybox for this scene as we do for first scene. If you select other skybox the switching effect will be visible. Save this scene File -> Save Scene As... This will be our main game scene so lets call it Main. Now add this scene to build as we do for StartMenu scene. After that you will have two scenes in your build (fig. 13).</span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QR1UQlWGdTih7lOWgIyyf9H3mJjtB_gHf5D0ey9RopkvVTOkSTa0tCEImmDh8TgUl61Qrl3hxq_ZFNfTN9DEBJ2EcDgLVHWVy7AqSm_KJtMq6spwZOTaud0hSPD0yPLwE-GkLBtg9Mgo/s1600/fig12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_QR1UQlWGdTih7lOWgIyyf9H3mJjtB_gHf5D0ey9RopkvVTOkSTa0tCEImmDh8TgUl61Qrl3hxq_ZFNfTN9DEBJ2EcDgLVHWVy7AqSm_KJtMq6spwZOTaud0hSPD0yPLwE-GkLBtg9Mgo/s1600/fig12.PNG" /></a></div>
<div style="text-align: center;">
<i><span style="font-family: Arial,Helvetica,sans-serif;">Fig. 13. Adding Main scene into build</span></i></div>
<span style="font-family: Arial,Helvetica,sans-serif;"><br /></span>
<span style="font-family: Arial,Helvetica,sans-serif;">Create MainMenu game object and MainMenuController javascript. This script will render simple message "Welcome [user name] to Main Game Scene!". Replace content of </span><span style="font-family: Arial,Helvetica,sans-serif;">MainMenuController with listing 23.</span><br />
<br />
<div style="text-align: justify;">
<span style="background-color: white; color: #38761d; font-family: 'Courier New', Courier, monospace; text-align: left;">//</span><span style="background-color: white; color: #38761d; font-family: 'Courier New', Courier, monospace; text-align: left;"> GUI styles for labels:</span></div>
<div style="background: #ffffff; color: black; text-align: left;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"><span style="color: blue;">public var </span>header1Style : <span style="color: blue;">GUIStyle</span>;<br /><br /><span style="color: #38761d;">// This function will draw UI components</span><br /><span style="color: blue;">function </span>OnGUI () {<br /><br /> <span style="color: blue;">var </span>screenWidth = <span style="color: blue;">Screen</span>.width;<br /> <span style="color: blue;">var </span>screenHeight = <span style="color: blue;">Screen</span>.height;<br /> <br /> yShift = (screenHeight - <span style="color: purple;">50</span>)/<span style="color: purple;">2</span>;<br /> </span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> <span style="color: #38761d;">// Getting user login:</span><br /> <span style="color: blue;">var </span>userLogin : <span style="color: blue;">String </span>= UserSessionUtils.getUserLogin();<br /> <br /> <span style="color: #38761d;">// Main label:</span><br /> <span style="color: blue;">GUI</span>.Label(<span style="color: blue;">Rect</span>(<span style="color: purple;">0</span>, yShift, screenWidth, <span style="color: purple;">50</span>), <span style="color: purple;">"Welcome "</span> +</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;"> userLogin + <span style="color: purple;">" to Main Game Scene!"</span>, header1Style);</span></span><br />
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-family: "Courier New",Courier,monospace;">} </span></span></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Listing 23. </i><i>MainMenuController scrip </i></span></div>
<br />
<span style="font-family: Arial,Helvetica,sans-serif;">Open first scene File -> Open Scene... and select StartMenu. Press Play button. If you pass login or registration successfully you will see main game scene with welcome message (fig. 14).</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNrw-EZSCx6d0wluF2ifkH543GJ7guYA0Q-dTc7YR7-dLqlbZ2Zq4xcTGEz7Jq2uj-Gutt0P_neLg-exEM6ZSBhqGvKUV8eQMDZYsbMvRm9QWoeNm_nbFJLXWhi1JU2pcKC6cUKY3m6vrE/s1600/fig14.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNrw-EZSCx6d0wluF2ifkH543GJ7guYA0Q-dTc7YR7-dLqlbZ2Zq4xcTGEz7Jq2uj-Gutt0P_neLg-exEM6ZSBhqGvKUV8eQMDZYsbMvRm9QWoeNm_nbFJLXWhi1JU2pcKC6cUKY3m6vrE/s1600/fig14.PNG" /></a></div>
<div style="text-align: center;">
<span style="font-family: Arial,Helvetica,sans-serif;"><i>Fig. 14. Main game scene with welcome message </i></span></div>
<span style="font-family: Arial,Helvetica,sans-serif;"></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Try demo here <a href="http://unity-test-server.appspot.com/demo" style="color: yellow;" target="_blank">http://unity-test-server.appspot.com/demo</a>.</span><br />
<br />
<br />
<span style="font-family: Arial,Helvetica,sans-serif;"></span></div>
</div>Anonymoushttp://www.blogger.com/profile/10909327194442151645noreply@blogger.com36