如何製作一個loading加載頁

功能效果展示

 

運行環境

Win7，Win8，Win10

Reworld版本 體驗版

vc_redist.x64 運行環境

 

針對零基礎讀者的補充

下載安裝 Reworld對應版本

Reworld官網鏈接：http://www.reworlder.com/

Reworld創作者之家論壇：http://bbs.reworlder.com

下載後安裝後註冊賬號打開空地圖

下載安裝 vc_redist.x64.rar運行環境

redist.x64下載鏈接

 

思路分析

想要製作一個loading加載頁，我們首先需要製作一個2D容器界面，在這個界面下分別創建一個圖像控件來作爲我們加載的UI，創建一個滑動條控件作爲我們加載的進度條，通過客戶端腳本來控制，這樣一個簡單的加載頁面就製作完成了。

 

功能搭建

一、加載頁面搭建過程

1.首先我們需要在界面初始化裏創建一個2D容器界面，重命名爲Loading,同步屏幕大小，導入一張黑色的背景圖片。如下圖所示：

2.在Loading下創建一個圖像控件，重命名爲Loading圖像控件，然後導入加載的UI圖片，修改大小和位置。如下圖所示：

3.在Loading下創建一個滑動條控件，重命名爲Loading滑動條控件，調整大小和位置。如下圖所示：

4.在滑動條控件下創建一個文本控件，重命名爲LoadingText，調整大小和位置。如下圖所示：

 

二、加載功能搭建過程

在玩家初始化的玩家初始化腳本下創建一個客戶端腳本。如下圖所示：

編寫客戶端腳本如下：

local _LoadingImage = GameUI.Loading.Loading圖像控件
local _LoadingScobar = GameUI.Loading.Loading滑動條控件
local _Loadingtext = GameUI.Loading.LoadingText
local count = 0
local MaxValue = 1
GameRun.Update:Connect(function()
    _LoadingImage.LocalEulerAngles = Vector3(0,0,_LoadingImage.LocalEulerAngles.z-3)
    if (_LoadingScobar.Value < MaxValue) then
        count = _LoadingScobar.Value
        local a =tonumber(string.format('%.2f',tostring(count)))*100
        _LoadingScobar.Value = _LoadingScobar.Value+0.009
        _Loadingtext.Text =tostring(a).."%"
    else
        GameUI.Loading.IsVisable = false
    end
end)

 

補充說明

1.什麼是2D容器界面？

2D容器界面是顯示在玩家屏幕上的2DUI對象的主要存儲對象。UI對象若要顯示在編輯器中，必須作爲容器控件的子級。

遊戲運行後，存放在界面初始化StarterUI下的界面會複製到玩家界面下，只有在玩家界面GameUI下的界面才能在遊戲中顯示。

 

2.什麼是圖像控件？

圖像控件顯示非交互圖像，經常用於裝飾或者圖標使用。

 

3.什麼是滑動條控件？

滑動條控件是從一個預先確定的範圍選擇一個數值的控件。

 

4.什麼是文本控件？

文本控件顯示非交互文本，經常用於標題或者標籤使用。

 

5.什麼是客戶端腳本？

只會在客戶端執行的腳本，執行的邏輯和表現也只會在本地客戶端展現；可在以下幾個文件目錄下自動執行，客戶端腳本在“工作區”下不會自動執行，需要放在以下對象裏面：
1. 客戶端最先加載 。
2. 工作區中的角色模型。玩家初始化中的角色初始化腳本，在運行後會自動移動到角色模型下。
3. 玩家列表中的玩家。玩家初始化中的玩家初始化腳本，在運行後會自動移動到玩家下
4. 玩家的玩家界面。界面初始化的腳本，在運行後會自動移動到玩家界面下。
5. 玩家的揹包，例如工具裏面的。

 

好了，接下來我們開始遊戲，就會出現我們預先設置好的loading加載頁面啦。如果有什麼問題或者有更好的實現方式，大家可以在下方積極交流討論，我們也會參與進來和大家一起分享經驗，期望能和大家共同進步~~