近期一直不知道寫點什麼文章，剛好看到家中牆上貼了一個電子時鐘，于是想在UE中實現出來，于是就有了今天的文章。

先來看一下最終的演示效果：

1前期準備

首先要有一個時鐘的模型，這裡按鈕我為了設置成有自發光的效果，在max裡面把按鈕拆成了兩個材質ID，為了顯示效果真實，屏幕外側還有一個玻璃罩的模型。

然後将全部模型都導入UE中，對每一個模型部件設置材質，這裡就不介紹材質的設置了，可以根據自己的需求設置材質。

2時間界面的制作

時間界面這裡使用了控件藍圖的方式制作，首先右鍵創建一個控件藍圖，選擇用戶控件。

添加複層和文本控件，這裡可以把文本控件排布居中。

給文本的文本内容和顔色這裡分别創建綁定。

文本這裡做一個分支，引出布爾作為以後顯示文字内容的變量，返回節點這裡的文字内容，分别來自于UTC時間和UTC日期。

顔色的腳本設置比較簡單，隻需要連接一個顔色的變量即可。

3按鈕交互的制作

接下來右鍵創建一個藍圖類，類型選擇Actor。

把設置好材質的模型全部拖進來。

添加控件組件。

把之前做的控件藍圖添加進“控件類”中，空間選擇“場景”，材質使用有Masked蒙版的。

将控件組件擺放到合适的位置。

選擇場景空間後文字會帶有投影，這裡在構造腳本中去掉控件的陰影。

事件開始運行這裡，從Widget控件組件中獲取控件，并類型轉換為之前做的那個控件藍圖，拖出來的目标設置剛才的顔色變量。

由于直接運行UE的話，是看不到鼠标的。也不能生成點擊事件，所以這裡需要單獨設置。

接下來選中按鈕的Actor後，選擇點擊時的“ ”加号。在點擊時這個時間裡，使用流程控制的“Flip Flop”節點，這樣點擊按鈕Actor時會在AB兩個選項中來回切換。

設置變量就是之前的切換時間分支的變量，然後這裡做了一個AB之間按鈕高亮材質的變換效果。

注意這裡會先執行“Flip Flop”的A節點事件，所以第一次按下按鈕，效果為高亮材質，注意這裡的設置順序。

最後還設置了按鈕之間點擊時的上下相對位移效果，注意這裡在還原的時候，位移坐标要和Actor本身一緻。

在外部看的時候，打開了顔色設置的變量編輯，這裡可以調節顔色。

在運行的狀态下點擊上方的按鈕，就可以看到時間和日期切換的效果了。

藍圖設置的節點共享在我的blueprintue網站中，大家可以在網頁中複制節點到你UE項目中

本次案例是我的個人練習，如有不足之處，希望大家可以一起交流學習，一起變得更強！

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!