【UE4】MacからVSCodeを用いてUE4プロジェクトをビルド・デバッグをする方法





# 最初に

 この記事はMacからVSCodeを使用してUE4のビルド、デバッグを行えるか試した一連の流れについて記したものとなっています。間違いや更に良い方法があった場合にはそっとTwitter( [@ろっさむ](https://twitter.com/4_mio_11) )やコメント、修正リクエストなどでお知らせ頂けるととても有難いです。 



# 作業環境

記事内で使用する作業環境は以下の通りとなります。

- Unreal Engine：4.23.1
- MacBook Pro 2019 | Core i9 | 32GB | Catalina 10.15.1
- VSCode 1.40.2
- Xcode 11.2.1



# 作業手順



## 必要なツール群をダウンロードする

#### Xcodeのダウンロード

まずはApp StoreにてAppleからMacOS用にリリースされている「Xcode」と言うIDEをダウンロードします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/794127e6-a89d-96bf-86b1-e1ffbe79ac6f.png)



ダウンロードが終わり次第一度Xcodeを開いてください。規約の同意画面が表示されるのでそのまま進めて、起動確認までしておきましょう。



#### VisualStudio Codeのダウンロード



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/49d1bc0a-abdc-e1d2-1956-028afe75e23e.png)

Visual Studio Codeについては以下で解説を行なっています。

要約すると、マルチプラットフォームでオープンソースのコードエディタです。

カスタマイズがしやすく、サクサク動くため、人気も高いです。

https://qiita.com/4_mio_11/items/e7b0a5e65c89ac9d6d7f



Visual Studioの公式ページから「Download for Mac Stable Build」を押下し、ダウンロードを開始してください。

特に何か特別な設定をする必要はありません。

https://code.visualstudio.com/?wt.mc_id=vscom_downloads



#### .NET SDKのダウンロード

以下の公式ページから.NET SDKをダウンロードしインストールを行います。

https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/fe05918f-dd7c-fc90-fb3b-07c02521a791.png)

> > これをインストールすることでUE4のUnreal Build Toolsが機能し、プロジェクトデータを自動生成するようになります。またVisual Studioを起動するために必要となる、".sln"ファイルも不要となります。（alweiさんの「[UE4 Visual StudioなしでVisual Studio CodeからC++プロジェクトを実行する](http://unrealengine.hatenablog.com/entry/2017/10/26/215621)」より）



## Visual Studio Codeにて拡張機能を追加する

以下の拡張機能をVSCodeの拡張機能検索バーから検索を行なってインストールしてください。

#### C/C++

C++開発を行うにあたってのデバッグサポートやコード整形などが機能として含まれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/5cda516e-7475-5400-3e8f-607c9d816f66.png)



### C#

上のC/C++拡張機能と同等のC#版機能が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/0227701b-99cc-de24-f720-037e61a188c1.png)



### CodeLLDB

ビルドしたプログラムをLLDBを使用してデバッグしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/d1be9e83-9351-9ad6-1b18-23c71e27e5fa.png)



## UE4側でVSCodeを使用するよう設定する

VSCodeをデフォルトで使用するように初回のみUE4エディタ側で設定を行う必要があります。

まず、上部メニューからエディタの`Preferences`を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/2d4f5c9a-ac10-8227-1dd5-73ed5232b9d5.png)



`ソースコード`と言う項目から`Source Code Editor`を`Visual Studio Code`に変更して再起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/6d92572b-1450-ee98-cd85-6a1caef86ab3.png)



再起動後に上部メニューから`Visual Studio Code プロジェクトを作成`を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/a5058da8-5c15-48d2-67c0-51250fb98b67.png)



ゲームプロジェクト下にVSCode用のワークスペースが作成されるので、今後はそれを開きましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/becc4d15-84dc-68c0-643c-8fa32da37a2e.png)



## VSCodeからUE4をデバッグ実行する



プロジェクトのワークスペースを開いたらサイドばーのデバッグボタンを押下するかショートカットキーでデバッグウィンドウを表示してください。そうすると上に構成と三角ボタンが表示されます。今回は`プロジェクト名+Editor(Development)`に設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/beda3e5b-82e5-d4b3-5176-5b421c9eec55.png)



設定した後に三角ボタンを押下するか、`F5`キーでデバッグを開始してください。



しばらくすると、この画面で処理が一旦止まると思います。続けてF5キーを押下し、続行してください。UE4が立ち上がると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/4eb2328d-b434-a6a0-2f99-b90f135e1186.png)



# 所感

VSCodeを使用して起動、コード編集、ブレイクポイント設定、ステップ実行などの基本的な操作に関しては確認することができました。ただ、デバッグ時の情報がどうしても見辛いため、簡易的な実装やビジュアル面でのテスト、BP作成などに使用して、本格的な実装はWinのほうになるかなーという印相です。もっとうまい方法や、デバッグのやり方があったら教えてください…（心が折れました）。



# 参考

- [UE4 Visual StudioなしでVisual Studio CodeからC++プロジェクトを実行する](http://unrealengine.hatenablog.com/entry/2017/10/26/215621)
- [[Rust IDE に化ける VSCode](https://tech-blog.optim.co.jp/entry/2019/07/18/173000)](https://tech-blog.optim.co.jp/entry/2019/07/18/173000#CodeLLDB-拡張機能の使い方)