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.

Fig. 5. Skybox import from Unity asset store

To add skybox texture to scene in Edit menu select Render Settings. In Inspector (right side) you will see setting for rendering (fig. 6).

Fig. 6. Render Settings

Press small circle for Skybox Material and select skybox you like. Now press Play button and enjoy beautiful sci-fi style skybox.

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):

Effects

MVC

StartMenu

Fig. 7. Scripts folders structure

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.

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 -> Camera Rotation Effect. Press Play button and you will see how it works.

Creating menu UI components

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.

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.

// Common view interface:interface View {

// Rendering UI function:function render();

// Enable/disable UI components:function setBlockUI(blockUI);}

Listing 3. View interface

Also we need class that will store login data. Create new javascript file LoginData in folder StartMenu and add listing 4 content to it.

class LoginData {

public var login : String = "";public var password : String = "";

public function clear() { login = ""; password = ""; }}

Listing 4. LoginData class

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.

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.

Fig. 8. UI befor styling

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:

Gui Skin - common set of styles

Header 1Style - defines main label style

Header 2Style - defines message style

Header 2Error Style - defines style of message when we need to display an error

Form Field Style - set styles of fields in forms

Double click on Gui Skin. In Inspector You will see set of UI elements that style you can set using this skin. We need set next UI elements styles:

Button

Font Size = 16

TextField

Font Size = 16

Alignment = Middle Left

Box:

Normal/Text Color = RGB(255, 211, 211)

Font Size = 16

Font Style = Bold

Window:

Normal/Text Color = RGB(255, 40, 40)

Font Size = 20

Font Style = Bold

Select StartMenu game object in Inspector unfold Header 1Style and set next properties:

Normal/Text Color = very light color, I use RGB(131, 255, 219)

Font Size = 22

Alignment = Middle Center

Unfold Header 2Style and set next properties:

Normal/Text Color = very light color, I use RGB(131, 255, 219)

Font Size = 18

Alignment = Middle Center

Unfold Header 2Error Style and set next properties:

Normal/Text Color = very light color with red, I use RGB(255, 93, 93)

Font Size = 18

Alignment = Middle Center

Unfold Form Field Style and set next properties:

Normal/Text Color = very light color, I use white RGB(255, 255, 255)

Font Size = 16

Alignment = Middle Right

Unfold Error Message Style and set next properties:

Normal/Text Color = very light color, I use white RGB(255, 211, 211)

Font Size = 16

Font Style = Bold

Alignment = Upper Left

Press play button. You should see something like on fig. 9.

Fig. 9. After styling

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.

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.

Fig. 10. Registration form

Interact with HTTP server

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 http://unity-test-server.appspot.com.Login functionality description:

send login and password entered in LoginView to server using POST method;

receive response from server in json format;

if provided credentials is incorrect - we will display error message;

if provided credentials is correct - we will load second scene.

Registration functionality description:

send registration data entered in RegistrationView using POST method;

receive response from server in json format;

if there is any error - we will display error messages;

if registration was successful - we will load second scene.

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.

class Response {

public var error = false;

public var message : String = "";

}

Listing 11. Response class

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 https://github.com/tonioloewald/jsonparse. Download JSONParse.js file, create Json folder in Asset/Scripts and put downloaded file in this folder.Separate class LoginService will be responsible for request sending and response parsing. Create this class in StartMenu folder. Content of ServerLogin is in listing 12.

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".

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.

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).

Fig. 11. Registration error

Even if you enter all fields and registration will be successful nothing will happens. You will see same registration form filled with your data.

Loading main game scene after login/registration was successful

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.

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.

Create User forled as sub folder of Scripts folder in Assets. We need add two script to this folder:

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.

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.

You can press Build and Run button to see how your project will look in web browser. 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).

Fig. 13. Adding Main scene into build

Create MainMenu game object and MainMenuController javascript. This script will render simple message "Welcome [user name] to Main Game Scene!". Replace content of MainMenuController with listing 23.