Latest Posts

不囉唆，直接先上CODE: https://gist.github.com/dorgonman/cbfe159a83ba07f1c66e   可以看到在header檔裡面宣告了一個WidgetClass跟一個WidgetInstance。 其中尋找WidgetClass的動作必須放在constructor裡面，另外: ConstructorHelpers::FClassFinder<UGameWidget> PutNameHere(TEXT(“/Game/MyUMG”)); 這邊裡面的路徑指的是我們在editor做好放在Content資料夾的Widget Blueprint(名字是MyUMG.uasset 的那個)，這裡不用寫完整路徑的原因是FClassFinder內部會自動加入相關的suffix，如下圖： 接下來在BeginPlay裡面做的事情就是用這個Class把WidgetInstance建立出來，並加入一個UImage進到這個Widget裡面去。 在這裡必須要注意的是並不是所有的Widget都有AddChild這個方法，所以我們才需要先拿出RootCanvasPanel之後才能把image加進去。 什麼是Slot？從名稱來看，它就是用來讓別人把東西掛上去的『洞』，只要我們的child掛上某個parent的洞之後，就獲得了該parent所提供的調整界面，如下圖： 在code裡面我們canvasPanelSlot->SetPosition(FVector2D(100, 100))，其實就是調整editor裡面的Position X跟Position Y。值得注意的是Slot裡面的參數都是相對於parent的，而不是絕對的。 下面再給出一個掛到Button下面之後能夠調整的slot參數： 這邊的Horizontal Alignment跟Vertical Alignment指的就是我們的Image在button中要對齊的是那個位置。 另外要注意的是UCanvasPanelSlot* canvasPanelSlot = (UCanvasPanelSlot*)image->Slot;這行必須要在AddChild之後，因為如果是放在之前的話，因為Slot還沒掛上parent，所以會得到空指標。

預設的Camera的視角其實是以Landscape來呈現，如果我們想要調整成Protrait的話該怎麼做呢？很簡單，我們只要調整Camera中的Aspect Ratio這個設定即可。我們可以看到這個值預設是1.777778，代表寬與高的比例是16:9。只要我們將這個比值反轉改設成0.5625，即9:16，我們就可以得到Portrait的視角。 有人問0.5625怎麼得到的？把9除上16就可以了。 只是這時候我們的Ortho Width裡面值的意義也同樣的跟height對調，因此我們這裡要選擇一個能夠符合9:16的寬高比。常用的比值如下： 我裡我們挑選720×1280，並將ortho Width設成720。 接著把camera的位置設成(-(720/2), -1440, (1280/2))，y值-1440(隨意即可)，x跟z值則是我們挑選寬高的一半。記得camera的rotation.z設成90度。接著把我們的sprite位置設成(0, 0, 0)，我們就完成了Portrait模式的設置。 從上圖我們可以看到，我們sprite的中心點是(0, 0, 0)並出現在視窗的左下角。 在調完Camera的視角之後，接下來我們可以調整我們的Widow size。首先找到Editor Preferences=>Level Editor=>Play中，把New Window Size跟Standalone Window Size設成我們想要的size，這裡先選擇使用iphone 4的size(640×960)，因為可以用來模擬如果在手機上玩的感覺。

在上一篇我們討論了如何在editor上建立CameraActor，並在C++中找到該actor的instance。這篇將會反過來討論怎麼樣在C++上進行客制化，並將調整完的CameraActor加入到world中。首先我們先建立我們自己的C++類別並繼承自CameraActor： 記得要選Show All Classes，不然會找不到。 在建完我們的MainCameraActor之後，我們必須對裡面的CameraComponent進行設定。   AMainCameraActor::AMainCameraActor(const FObjectInitializer& ObjectInitializer) : Super(ObjectInitializer) { GetCameraComponent()->ProjectionMode = ECameraProjectionMode::Orthographic; GetCameraComponent()->OrthoWidth = 2048.0f; }   跟上一篇不同的是，這裡我們將ProjectionMode調整成Orthographic，並將寬度設為2048。調完之後，我們就可以直接把C++ class拉進我們的editor中，並命名為MainCamera： 從上圖中可以看到在我們的MainCamera的instance底下有一個CameraComponent。上面程式碼中的GetCameraComponent()取到的就是這個物件。在引擎中通常會把Actor中可以隨時抽換組合的功能寫成一個Component，可以很方便我們進行功能的復用及重組。在我們的CameraActor中，預設有一個CameraComponent，主要用來描述我們CameraActor的viewpoint以及各種cmera相關的設定，例：projection type、field of view……。Actor本身並不會有transform相關資訊( location、rotation,、scale)，這些資訊是保存在RootComponent中。以下是ACameraActor的建構子內容：   ACameraActor::ACameraActor(const FObjectInitializer& ObjectInitializer) : Super(ObjectInitializer) { // Setup camera defaults CameraComponent = … Continued

當我們按下play按鈕的時候會發現，其實玩家還是在3D world中進行操控，當玩家按下旋轉或移動時，camera會進行對應的動作。那麼我們該怎麼固定Camera的視角呢？ 為了解決這個問題，我們所需思考的，便是想辦法將一個我們固定好的camera設給玩家所使用的view port，並禁止其改變這個camera的位置。實際上我們該怎麼辦到這件事？由於在UE中對於不同關卡的管理是用『map』的概念來進行操作，因此我們必須想辦法在map中找到我們的PlayerController，並將這個被我們固定住的camera設給他。 map，其實就是一個擺設好關卡內容的場景再加上GameMode中所描述的game rule所組合而成。由於我們剛剛建立了一個MainMap取代了預設的template map，因此可以預見的是現在這個map的game mode會是空的。雖然在引擎中大部份的參數如果沒有設定的話，通常都會有引擎的預設值，但這裡我們希望將GameMode設回HopeGameMode這個類別。要在哪裡才能找到這個設定呢？首先先在右上角找到目前的map按右鍵，選取WorldSettings： 然後在下面找到GameMode，將GameMode Override設成HopeGameMode： 這時候我們會發現下面幾個參數都是灰色的：Default Pawn Class、HUD Class、Player Controller Class、Game State Class。當我們按下Play按鈕時，會發現在右上角的World Outliner中引擎自動生成的instaance包含了這幾個類別： 由於PlayerController負責用來接收Human Player的輸入並轉發給對應的Actor，因此為了達到固定視角的目的，因此我們必須使用我們自己的PlayerController，並設定這個CameraActor不該接受Human Player操控。只是由於我們的GameMode是C++ Class，因此要更改上面那四個預設的類別也只能在C++中操作。當然，若是使用BluePrint，我們就會發現在editor中就可以直接選擇了。 這裡我們討論的是C++，因此首先我們要做的，便是先建立一個C++ PlayerController，並在HopeGameMode的建構子中指定。在這裡，我們將其命名為GamePlayerController。   AHopeGameMode::AHopeGameMode(const FObjectInitializer& ObjectInitializer) : Super(ObjectInitializer) {   PlayerControllerClass = AGamePlayerController::StaticClass(); }   有了PlayerController，接下來我們要在editor中建立一個CameraActor，並調整到正確的位置上。在這裡提供一個技巧，可以很快速的就將Camera的位置調好。首先，在右上角的World Outliner中對剛剛建好的CemeraActor按右鍵： 我們可以看到有三個選項： … Continued

  寫在前面：   這系列的文章基本上預期要做一個簡單的2D遊戲，但也有可能會談到一些3D的東西。總之，內容基本上還未定案，但可以保證的是我會儘量的使用C++來實作所有的功能。 對於想要入門UE4的同學們，我想，我們可以一起加油來研究這個強大的引擎！ 對於引擎使用的版本，基本上在寫文章的當下，若有新版本我應該都會去進行更新。   本文開始： 在建立完專案之後，首先我們會進到預設的Map： 但其實這個map是引擎底層所提供的template，之所以Editor會在一開始就載入這個頁面，是因為在Project Settings->Maps & Modes預設做了下面這個設定： 路徑是指向Engine底下的：Epic Games\4.8\Engine\Content\Maps\Templates 為了讓環境乾淨一點，因此我們選擇File->New Level，並建立一個新的Empty Level，並命名為MainMap。路徑存放在我們遊戲Content的Maps目錄底下： 從上面的內容我們應該可以看出來，UE對於『/Engine』跟『/Game』這二個路徑有做了一些處理，前者指向Engine底下的Content目錄，後者專向我們專案底下的Content目錄。 接著我們將Project Settings->Maps & Modes換成我們剛剛新建立的MainMap。關掉引擎，並雙擊Hope.uproject之後，我會就會發現Editor預設載入的Map變成剛剛我們所指定的了。 接著，讓我們試著加入一張2D sprite進到地圖看看吧！ 首先在Content底下建立一個ArtWorks目錄，並將我們的圖檔拉進引擎裡面，就會自動建立對應的texture。由於引擎沒辦法直接吃texture，因此我們必須先對該texture建立Sprite才能開始使用。對該圖檔案右鍵，我們會發現有一個Create Sprite的選項： 點擊之後，我們就發現引擎在同目錄底下幫我們建立了一個Sprite： 左邊c1的type是texture，右邊的type是Sprite，而c1_Sprite會參考到c1這個texture。接著直接把Sprite拖到我們的map裡面去： 視角變成這樣子，但要做2D遊戲的話，用Perspective其實不好看，因此我們改用Orthographic模式會比較好看一點： 選擇之後變成這樣： 嗯，這樣在編輯2D遊戲的時候就比較符合直覺了。