[Unity3d] The welcome page gradually fades out through script settings at the beginning of the game

Recommended for learning unity scripts: index on the unity3d Official Website

In the settings of the game interface, it is necessary to start making the interface. It is an essential process to welcome players and briefly introduce the game background.

This chapter describes how to use JS scripts to control the fading out of the starting interface and finally display the game interface.

First, create a script file to declare the required class of Gui:

import System.Collections.Generic;// TextureGUI Class: create a basic class for creating and placing GUI elements// texture = the texture to display// offset = pixel offset from top left corner, can be modified for easy positioningclass TextureGUI {var texture:Texture; //useful: texture.width, texture.heightvar offset:Vector2; // .x and .yprivate var originalOffset:Vector2; //store the original to correctly reset anchor pointenum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center} //what part of texture to position around?var anchorPoint = Point.TopLeft; // Unity default is from top left corner of texturefunction setAnchor() { // meant to be run ONCE at Start.originalOffset = offset;if (texture) { // check for null textureswitch(anchorPoint) { //depending on where we want to center our offsetscase anchorPoint.TopLeft: // Unity default, do nothingbreak;case anchorPoint.TopRight: // Take the offset and go to the top right corneroffset.x = originalOffset.x - texture.width;break;case anchorPoint.BottomLeft: // bottom left corner of textureoffset.y = originalOffset.y - texture.height;break;case anchorPoint.BottomRight: //bottom right corner of textureoffset.x = originalOffset.x - texture.width;offset.y = originalOffset.y - texture.height;break;case anchorPoint.Center: //and the center of the texture (useful for screen center textures)offset.x = originalOffset.x - texture.width/2;offset.y = originalOffset.y - texture.height/2;break;}}}}//Timer Class:class TimerGUI extends TextureGUI { // Extend functionality from TextureGUI for a depreciating timer graphicvar textureLEnd:Texture; // left side of full texture (non stretching part)var offsetLEnd:Vector2; // left side of full texture (non stretching part) start positionvar textureCenter:Texture; // center of timer (will be stretched across width)var offsetCenter:Vector2; var textureREnd:Texture;var offsetREnd:Vector2;var timerPerct:float = 1; // percentage (0 to 1) this stretches the centervar desiredWidth:float = 403; // max width of the timer in pixelsfunction setTime(newTime:float) {timerPerct = newTime; // sets the percent based on value}}// SwitchGUI Class: Extends the TextureGUI to be able to load in multiple textures and switch between themclass SwitchGUI extends TextureGUI {var switchableTextures = new List.<Texture>();var currentTexture:int = 0;function Start() {if (switchableTextures.Count > 0) {texture = switchableTextures[currentTexture];}}function changeTexture(switchTo:int) {if (switchTo < switchableTextures.Count && switchTo >= 0) {texture = switchableTextures[switchTo];currentTexture = switchTo;} else {//Debug.Log( this + ": tried to call invalid part of switchTextures array!");}}function up() {if ((currentTexture+1) < switchableTextures.Count) {++currentTexture;texture = switchableTextures[currentTexture];} else {//Debug.Log( this + ": at the top!");}}function nextTexture() {if ((currentTexture+1) < switchableTextures.Count) { // if we are at the end of the array++currentTexture;texture = switchableTextures[currentTexture];} else {// loop to the beginningcurrentTexture = 0;texture = switchableTextures[currentTexture];}}function down() {if ((currentTexture-1) >= 0) {--currentTexture;texture = switchableTextures[currentTexture];} else {//Debug.Log( this + ": at the bottom!");}}}// Location class: class Location {enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center}var pointLocation = Point.TopLeft;var offset:Vector2;function updateLocation() {switch(pointLocation) {case pointLocation.TopLeft:offset = Vector2(0,0);break;case pointLocation.TopRight:offset = Vector2(Screen.width,0);break;case pointLocation.BottomLeft:offset = Vector2(0,Screen.height);break;case pointLocation.BottomRight:offset = Vector2(Screen.width,Screen.height);break;case pointLocation.Center:offset = Vector2(Screen.width/2,Screen.height/2);break;}}}class TextureAnchor {enum Point { TopLeft, TopRight, BottomLeft, BottomRight, Center}var anchorPoint = Point.TopLeft;var offset:Vector2;function update() {switch(anchorPoint) {case anchorPoint.TopLeft:offset = Vector2(0,0);break;case anchorPoint.TopRight:offset = Vector2(Screen.width,0);break;case anchorPoint.BottomLeft:offset = Vector2(0,Screen.height);break;case anchorPoint.BottomRight:offset = Vector2(Screen.width,Screen.height);break;case anchorPoint.Center:offset = Vector2(Screen.width/2,Screen.height/2);break;}}}

Create a script file displaytexturefullscreen to implement full screen on the welcome page,

The script source code is as follows:

var graphic = TextureGUI(); //(28,23);var GUIColor:Color;function OnGUI() {GUI.color = GUIColor;if (graphic.texture) {GUI.DrawTexture(Rect(graphic.offset.x,graphic.offset.y,Screen.width,Screen.height),graphic.texture,ScaleMode.StretchToFill,true);}}function AlphaUp(change:float) {GUIColor.a += change;}function setStartColor(color:Color) {GUIColor = color;}function setDelay(delay:float) {if (GUIColor.a > .5) {GUIColor.a += delay;} else {GUIColor.a -= delay;}}function AlphaDown(change:float) {GUIColor.a -= change;}

We can see that the other methods are the function for adjusting the color and Alpha values. The key function is to draw the texture map using the drawtexture method.

Next, create a JS script named gamestate. The source code is as follows:

var renderOverlay : DisplayTextureFullScreen;function Start() {renderOverlay = GetComponent(DisplayTextureFullScreen);renderOverlay.setStartColor(Color.white);renderOverlay.setDelay(2.0);}function Update () {if (renderOverlay.GUIColor.a > 0) {renderOverlay.AlphaDown(Time.deltaTime);} }

Drag this interface and displaytexturefullscreen to a gameobject in the gamestate for control,

Drag the welcome page texture on the inspector panel to point to the graphic in the script.

The running result is as follows:

After two seconds of delay, the welcome interface fades out: