[Unity3D]遊戲開始的時候通過指令碼設定逐漸淡出的歡迎介面

學習Unity指令碼推薦：Unity3D官網索引

在遊戲介面的設定中，開始介面的製作十分必要，是歡迎玩家並且簡要介紹遊戲背景的必備過程。

這一章學習如何使用JS指令碼控制開始介面的淡出並且最終顯現出遊戲介面。

首先，先建立一個指令檔，聲明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;}}}

然後建立一個用來實現歡迎介面全屏的指令檔DisplayTextureFullScreen，

指令碼的源碼如下：

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;}

可以看出其他的幾個方法都是調節顏色和alpha值的函數，關鍵的函數是DrawTexture方法繪製紋理貼圖。

接下來再建立一個叫做GameState的JS指令碼，源碼如下：

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);} }

將這個和DisplayTextureFullScreen一起拖動到一個GameState的GameObject上面實現控制，

並且在Inspector面板上拖動歡迎介面的貼圖指向指令碼中的Graphic。

運行結果如下：

兩秒的延時之後，歡迎介面淡出：