天天看點

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

文章目錄

  • 前言
    • 相關介紹
    • 其他介紹
    • 上一篇筆記
    • 下一篇筆記
    • 藍圖預覽
      • 控件藍圖
      • 關卡藍圖
  • 一、圖檔導入
  • 二、控件藍圖
    • [1]. 設定背景
    • [2]. 按鈕
    • [3]. 文本
    • [4]. 藍圖
      • (1) 開始遊戲
      • (2) 結束遊戲
  • 三、關卡藍圖
    • [1]. 觸發事件
    • [2]. 建立控件
    • [3]. 添加界面

前言

遊戲界面的建立,需要使用到一張圖檔

虛幻引擎版本: 4.23.1

相關介紹

哔哩哔哩-(舊)UE4初學者系列教程#25-UI(使用者界面)簡單入門

其他介紹

虛幻4官方文檔

虛幻4中文官網

虛幻引擎藍圖API參考文檔

虛幻引擎4藍圖節點-小狐狸FM

HelloCJC虛幻引擎社群

上一篇筆記

虛幻引擎(11)-人物加速

下一篇筆記

虛幻引擎(13)-遊戲地圖

藍圖預覽

控件藍圖

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

關卡藍圖

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

一、圖檔導入

首先我們需要一張圖檔作為遊戲界面的背景,将所需要的圖檔

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

二、控件藍圖

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

[1]. 設定背景

将剛剛導入的背景圖檔拖動到控件藍圖中

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

然後調整背景的大小,将背景覆寫虛線框即可。如果你在遊戲中發現了背景圖檔沒有充滿整個螢幕時,可以再回來控件中拉伸背景以達到相應的效果。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

[2]. 按鈕

在左邊搜尋欄中搜尋Button元件

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

然後将該按鈕元件拖動到面闆中,和背景圖檔并列

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

建立完畢後如下,按鈕将會預設放置于左上角

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

我們需要兩個按鈕,一個是開始遊戲,另一個是結束遊戲

建立兩個按鈕後,調整按鈕相應的位置和大小,淡灰色的即為按鈕

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

[3]. 文本

此時的按鈕上面并沒有文字,如果要讓玩家知道點選了這個按鈕有什麼作用時,就需要有相應的文本解釋。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

然後拖動到Button下變成按鈕中的文本

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

選中文本元件,在細節面闆中有一個text參數,可以對相應的值進行修改。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

[4]. 藍圖

控件的右上角有一個設計器和圖表,設計器即目前的界面,圖表即藍圖

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

(1) 開始遊戲

先在左邊的層級界面中選中開始按鈕,在細節面闆中拖動到末尾,有一個On Clicked事件,點選加号進行添加。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

當玩家點選開始按鈕時,将會觸發這個事件節點

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

然後建立一個Remove from Parent節點,這個節點的作用是删除按鈕的父類,即我們之前建立的控件。當控件被删除之後,背景和按鈕相應的東西就會被清除掉,然後玩家就能看見遊戲裡的東西了。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

(2) 結束遊戲

同樣的方法,在結束遊戲的按鈕添加一個On Clicked節點

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

再建立一個Quit Game節點,執行了這個節點之後,遊戲将會退出。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

将兩個節點相連

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

記得編譯儲存

三、關卡藍圖

[1]. 觸發事件

光是完成控件藍圖是沒有作用的,因為控件藍圖還沒有被調用執行。

這時我們就需要通過Begin Play節點來執行菜單的控件藍圖。

先打開關卡藍圖,建立一個Begin Play節點

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

[2]. 建立控件

然後建立一個建立控件節點

注:在較舊版本中,該節點為英文

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

建立完畢後選擇剛剛的控件,通過執行這個節點,我們可以為自身建立一個控件(遊戲界面),并輸出相應控件的操作對象。

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

将其與事件節點相連

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

[3]. 添加界面

通過這個節點的輸出接口,我們可以調用一個Add to Viewport節點,因為在我們為自己建立了相應的控件後,螢幕上并不會顯示什麼東西,是以需要通過這個節點将控件中的遊戲界面輸出到我們的螢幕上。

注:Add to Viewport無法直接搜尋建立

虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖
虛幻引擎(12)-遊戲界面前言一、圖檔導入二、控件藍圖三、關卡藍圖

最後編譯儲存即可

繼續閱讀