UEの森の一筋

Unreal Engineを深く理解していく上で学んだ知見を整理したいと考えています．

【Unreal Engine】C++でつくる Unreal Engineアプリ開発 for Windows & macOSを読む

目的

「C++でつくる Unreal Engineアプリ開発 for Windows & macOS(以下，本書)」を読むことにしたので，読む最中の気づきや疑問点などをメモしていきます．
章・節によって粒度がまちまちになる気がしますが，気分の問題なので許してください．
尚，今回は3章から読むこととし，必要に応じて遡ろうと思います．3章から読もうと考えた理由は特別なく，直感です．
尚，以下では次の記法を汎用的に利用します．

  • [補]：原著に記述はなく，私の独自解釈が含まれる言明．

本記事で扱う範囲

本記事では3章のリード文と3章1節を扱います．3章は3節構成になっていますが，3章1節は続く4章，5章の導入にもあたる内容になっているように見受けられます．3章1節は具体的に.cppファイルを作成する場合に標準的に作成することになる.hファイルの記法を示しており，各特長が3章以降のどこで扱うことになるかを明示しています．一方で3章2節と3章3節では，Blueprintから呼び出しうる函数を作成するという具体的な目標に絞ってワークフローの説明がなされています．よって二つに分割する場合はここになるであろうと考えた次第です．
このように捉えると3章自体が4章および5章の各論に進むうえでの導入として用意されているように感じますので，あまり深入りせず，疑問点は疑問点として残して進もうと考えています．

3章

本書では独自定義の用語を用いているようなので，記事を将来読み返す際の備忘録のために記録しておきます．

3章の内容としては次の通り．

  • UE C++に特徴的なヘッダファイルの例
  • UE C++函数のBlueprint定義
  • Blueprint函数を定義する場合の具体的な手続き

3章1節

本節ではUE C++のヘッダファイルの具体例が明示され，その特異性が説明されています．その後，コラムに於いてはUnreal Engineに於けるownerとparentの違いについて説明されています．
本書ではMyAppCalculator.cppを作成する場合の記述を紹介していますが，ここでは写経を避け，test.cppを作成する場合の記述を例として用います．以下ではtest.cppを最初に記し，特徴的な行について，後から特筆して補足します．

#import "Engine.h"
#import "test.h"
#import "test.generated.h"
UCLASS()
class Utest : public UObject {
GENERATED_BODY()
public:
    UPROPERTY(BlueprintReadWrite, Category  = "newCategory")
    int32 intProperty;
    UFUNCTION(BlueprintCallable, Category  = "newCategory")
    float LengthOfSomething(const int32 index);
private:
    TArray<int> IntArray;
};
UE ライブラリの例
#import "Engine.h"

Engine.hはUE ライブラリのうち最も標準的なものです．

UE C++に於けるインポート
#import "test.h"
#import "test.generated.h"

test.cppを作成する場合，対応するヘッダファイルtest.hを作成し，インポートします．次に書くUCLASS()マクロを使用する場合，インポートが必須になります．実際，インポートしない場合はビルド時に

test.cpp(1): error : Expected test.h to be first header included.

といったエラーが返ります．尚，test.generated.hはUnreal Engineのビルド系統の一つである，Unreal Header Toolが自動的に生成します．Unreal Engineのビルド系統はこれ自体別の記事にするべき事柄だと感じているのですが，Unreal Build ToolとUnreal Header Toolとがまず動いていることは先に知っていてもよいと感じます．

UE C++に於ける固有のマクロ(1)
UCLASS()

UCLASS()はC++に於けるマクロです．よってビルド時，前処理の段階でUnreal Engine固有のコードに置換されます．UCLASS()マクロと呼ばれるようです．

UE C++に於けるクラス名の命名規則と継承
class Utest : public UObject {

test.cppを作成しているわけですが，ここで定義されるクラスはUtestであることに注意しましょう．Unreal Engineの公式文書を参照すると

Extend from the base class of all gameplay objects. These cannot be directly instanced into the world; they must belong to an Actor. These are generally objects like Components.

とあり，gameplay objectクラスを継承する場合は接頭辞Uを付けることになっているようです．Unreal Engineのビルドツールを利用する場合，どのクラスから継承すべきかが分かっていないので，このあたりは優先的に調査が必要です．

UE C++に於ける固有のマクロ(2)
GENERATED_BODY()

GENERATED_BODY()はC++に於けるマクロです．Engine\Source\Runtime\CoreUObject\Public\UObject\ObjectMacros.hに定義が書いてあるようですが，詳細は終えていません．要調査．

UE C++に於ける宣言(1)
public:
    UPROPERTY(BlueprintReadWrite, Category  = "newCategory")
    int32 intProperty;
    UFUNCTION(BlueprintCallable, Category  = "newCategory")
    float LengthOfSomething(const int32 index);

UPROPERTY()はC++に於けるマクロです．インスタンス変数を宣言する直前に挿入するようです．引数を二つ取り，第一引数ではBlueprintから使用可能かといった権限の管理に利用され，第二引数はプロパティ指定子を渡すことでBlueprint側からどのように制御できるかを指定できるようです．これも要検証・要調査．特に，この文脈に於けるメタデータとプロパティ指定子の差異もあまり理解できていないので，これは優先的に調査が必要です．
このようにUPROPERTY()はUE エディタと連携を取る際のプロパティを定義することができますが，参照がある限り自動的にガベージコレクションが利かないようにするといった機能があるようです．このあたりはソースコードを具体的に読まないと分からないので，一旦保留することにします．
UFUNCTION()はC++に於けるマクロです．メソッドを宣言する直前に挿入するようです．UPROPERTY()とほとんど同様と理解しています．

UE C++に於ける宣言(2)
private:
    TArray<int> IntArray;

TArrayはUE ライブラリで定義されている可変長配列であり，これの宣言です．この記述でTArray型のインスタンス変数IntArrayが宣言できています．

参考：UnrealBuildTool勉強会まとめ
参考：UE4とUnrealC++について
参考：UE4 C++ビルドエラー対応覚書 - ハッカーと同人作家
参考：Gameplay Classes | Unreal Engine Documentation
参考：Gameplay Classes | Unreal Engine Documentation
参考：プロパティ メタデータ指定子のメモ - お醤油をこよなく愛するニワトリの備忘録
参考：[UE4] meta情報を活用しエディタでの動作を制御しよう！｜株式会社ヒストリア
参考：プロパティ指定子 | Unreal Engine ドキュメント
参考：凡人の活動記録: UE4のUObjectを継承したオブジェクトについて
参考：[Unreal C++]意図しないガベージコレクションを起こす
参考：アンリアルでのオブジェクト処理 | Unreal Engine ドキュメント
参考：UE4 C++コードをブループリントで使えるようにする（アクタークラス編） - Let's Enjoy Unreal Engine
参考：Unity 引っ越しガイド | Unreal Engine ドキュメント
参考：コーディング規約 | Unreal Engine ドキュメント
参考：Unreal Engine 4メモ：structの接頭辞が「F」の理由 - Qiita
参考：std math function ? - #3 by Antares - C++ Programming - Unreal Engine Forums

最後にコラムに於いて，次のように記述されています．

オブジェクトの所有関係を示すのがownerで、そのオブジェクトを所有しているオブジェクトを示します。幾何的な従属関係を示すのがparentで、そのオブジェクトが従属しているオブジェクトを示します。

正直，この記述の意味は全く分かりませんでした．具体的には次の疑問が生じ，解決できていません．本書を読み進める間で解決し次第あらためて記事にしようと思います．

  • この文脈に於けるオブジェクトは，UObjectのことでよいのか．
  • 所有関係とは何か．同様に従属関係とは何か．相違点が不明．

【はてなブログ】はてなブログに於けるソースコードの表記について

目的

Unreal Engineやそれに関連する話題を記述していく中で，ソースコードを美しく記述することが肝要と考えています．そのためブログ記事に於いてソースコードを正しく表示する方法を調べたので，これを備忘録として記録します．

参考記事

参考にした記事は以下の通りです．

本記事の構成

本記事は次の通りの構成になっています．

  1. 理論：はてなブログに於ける編集モード
  2. 理論：はてなブログに於けるはてな記法とスーパーpre記法
  3. 実践：スーパーpre記法(シンタックスハイライト付き)を使ってみる
  4. 理論：はてなブログに於けるMarkdown記法とスーパーpre記法

接頭辞「理論：」を用いている節を理論部，接頭辞「実践：」を用いている節を実践部と呼ぶことにします(以下で一度ずつ用いています)．

理論：はてなブログに於ける編集モード

はてなブログは，ウェブページ上でブログ記事を編集するためのエディターをサービスとして提供しています．はてなブログが提供しているサーバに直接HTMLファイルなどをアップロードする方法は標準では提供されていないため，通常はこのエディタを利用することになります．そこで今回の目的を達成する上で，第一に各編集モードごとにソースコードの表記をよしなに変更できるかを調べるのがよいでしょう．
このように考えると，まずは編集モードを総覧するところから始めるのがよく，実際こちらは参考記事で挙げているはてなブログ公式のヘルプに記述されています．具体的には，はてなブログのエディタ上では原理的に四つの編集モードが選択できます．

このうち，はてなブログ公式のヘルプによるとHTML記法はpro版でのみ利用できるようです．(但し，後述する通り任意のCSSとjavascriptを使用できるので，ブログ記事を表示端末のブラウザ側でDOMノードを書き換える処理を走らせる方法を採れば任意の表示が実現できると思います．特別なページで特別な装飾をしたい場合などはこの手法が有効かもしれません．)
そこで，本記事では簡単かつ無料で実現する方法として，はてな記法およびMarkdown記法を用いる場合を検討することにします．尚，編集モードの変更方法などは参考記事として挙げているはてなブログ公式のヘルプを参照するか，後述する実践部までお待ちください．

理論：はてなブログに於けるはてな記法とスーパーpre記法

前節までではてなブログに於ける編集モードを確認し，はてな記法とMarkdown記法を用いる場合に実現する方法が存在するという事実を述べました．本節でははてな記法を用いた場合に実現する方法を説明します．はてなブログ公式のヘルプを参照すると，はてな記法は大別して次の四つの機能を提供していることが分かります．

今回の目的を達成するためには，入力支援記法のうち，「スーパーpre記法」と呼ばれるものを利用します．これを説明する上で，恐らく「pre記法」から説明する方が座りがよいと思われるので，本記事ではこちらから説明します．
「pre記法」の機能としては，はてなブログ公式のヘルプに於いて「整形したテキストをそのまま表示します（pre）」と説明されており，具体的には>| <テキスト>|<と記述することで「<テキスト>」部をテキストとしてそのまま表示することができます．この機能を用いると，テキスト「これはテストです．」や「<div>これはテストです．</div>」を次のように表示可能です．*1

これはテストです．
 
これはテストです．

このように単にpre記法を用いるのみだと，htmlタグなどはhtmlタグとして処理されてしまいます．これでは本来の目的は達成できないのですが，この欠点は次のスーパーpre記法を用いることで解決することができます．
尚，若干蛇足の感が否めませんが，pre記法の開始を意味する記号>|で一度改行しないとpre記法として認識されないように思われました．一方でpre記法の終端を意味する記号|<の前では改行は必ずしも必要ではないようですが，次に紹介するスーパーpre記法との一貫性を保つためにも改行するように努めるのがよいように思われます．但し，はてなブログの公式のヘルプに於いては明記されていないため，断言するにはもう少し調査が必要です．間違いが含まれている可能性がございますので，そのことをご了解いただけたら幸いです．

「スーパーpre記法」の機能としては，はてなブログ公式のヘルプに於いて「整形したHTMLなどのソースをそのまま表示します（pre）」と説明されており，具体的には>|| <テキスト> ||<と記述することで「<テキスト>」部をそのまま表示することができます．
pre記法と異なる点は，スーパーpre記法の開始を意味する記号>||を>|html|のように記述することで，テキストの「<テキスト>」部がどの言語で記述されているかを明記することができる点にあります．以下ではスーパーpre記法の開始を意味する記号>||の二つのパイプ記号|の間に記述する文字列をスーパーpre記法のオプションと呼ぶことにします．
スーパーpre記法ではテキストの「<テキスト>」がオプションで設定した言語として認識されるため，htmlタグなどもブラウザでレンダリングする際に文字列として処理されるように適切にエスケープされますし，更には言語ごとに適切にパースし，ハイライトしてくれるようです．試しにpre記法を試した際の「<div>これはテストです．</div>」をスーパーpre記法を用いて再度表示してみましょう．順にオプションはhtml，css，pythonになります．

<div>これはテストです．</div>

<div>これはテストです．</div>

<div>これはテストです．</div>

htmlのみ期待された通りの表記がなされていることが分かります．オプションを正しく設定することが肝要になるため，オプションとして使える文字列のリストへのリンクを再度掲載しておきます．

実践：スーパーpre記法(シンタックスハイライト付き)を使ってみる

さて，以上ではてなブログに於いてはてな記法を使う場合にソースコードを美しく表示する方法を述べました．ここでは具体的な手順を手続き的に述べておきます．

  1. はてなブログのブログ記事の編集画面に移動する
  2. ブログ記事の編集画面に於いて，次の画像の通りとなるように[編集]をクリックし，[はてな記法]を選択する．

　f:id:UE_skr:20211120030236p:plain

  1. ブログ記事の編集画面に於いて，実際に次の写真のように記述する．

　f:id:UE_skr:20211120030344p:plain

  1. ブログ記事の編集画面に於いて，[プレビュー]をクリックするとf:id:UE_skr:20211120030611p:plainのように記述されていたら成功．

尚，この画像では各行に数字が表示されているが，これは行番号に数字を振っているからであり，参考記事に挙げているものを適切に参照して設定してください．

理論：はてなブログに於けるMarkdown記法とスーパーpre記法

次にMarkdown記法を用いた場合に如何にソースコードを美しく表示するかを説明します．こちらはバッククオート（`）を3つ続けた```で囲まれたコードブロックを作成することでpre記法を実現できます．更に先頭のバッククォートの最後にファイルタイプを指定することでスーパーpre記法を実現できます．
Markdown記法を利用する方の多くは実践部が必要ないと思いますので，こちらについては省略いたします．よって，本質的な内容は以上になります．

実際の経緯

既に述べた通り本質的な内容は前節で終わっています．本節はおまけです．どのようにこの情報に辿り着いたかを記録しておきます．

  1. 「はてなブログ コード 記述方法」を鍵語にGoogleで検索しました．
  2. はてなブログでソースコードを表示させる方法 - コンサルでデータサイエンティストに辿り着き，この手順でソースコードのハイライトができることを確認しました．
    • このブログ記事により，はてなブログの編集モードをはてな記法にし，謎の記法を用いるとよいことが分かりました．
    • 謎の記法の正体が分からないと気持ちが悪いので，前項で太文字にした事柄を調べることにしました．
    • その際，まずは記事中の参考記事をあたることにしました．
  3. ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプに辿り着き，はてなブログ公式のヘルプに詳細な解説がある可能性に気づきました．
  4. 次にソースコードをはてなブログ上で試験的に表示できることを確認しました．
    • 特に問題なく成功しました．
    • この時点でもともと書こうとしていた記事の執筆に戻ったのですが，執筆中に行数の勘定をするのが面倒であることに気づき，行数の表示をする方法を探すことにしました．
  5. 「はてなブログ コード 記述方法 行数を表示」を鍵語にGoogleで検索しました．
  6. 【はてなブログ】コード部分に行番号を表示するカスタマイズ - そういうのがいいブログに辿り着き，この通りに実践しました．
    • 特に問題なく成功しました．
    • 実装していることも特に問題なく理解できました．
    • ついでにCSSとJavascriptを自由に弄れることが分かったのは思わぬ収穫でした．
  7. 今回の目的は達成されたのですが，引用されている記事を辿っておくことにしました．結果，今回参考にした記事は曾孫引きに当たることが分かりました(なので本記事は玄孫引きにあたります)．
  8. 一通り読み終えたので，備忘録がてら本記事を執筆しました．

*1:尚，ここでdivタグを文字列として記述するために執筆時には<をエスケープ処理して&lt;と記述しています．基本的に適切なブラウザによって適切にレンダリングがされているならば，表示されている通りの文字列を入力していると思って差し支えありません(細かいことを言い出すと，この脚注の中でもエスケープ処理を行っているため話がややこしくなります)．

【週報】読んだ記事と読みたい記事(2021/11/15-2021/11/19)

今週読んだ記事

画像処理関係

その他

 

今後読みたい記事

【Unreal Engine】ゲームプレイ時にスクリプト言語を動かしたい

状態

ブログなんで，メモ段階です．本記事は調査記録になります．

さしあたり次のブログ記事に従って試験しています．

参考記事

  1. [Unreal Engine 4] Luaスクリプトで設計がより柔軟に（１） | ORENDA

  2. [Unreal Engine 4] Lua スクリプトで設計がより柔軟に（２） | ORENDA

  3. [Unreal Engine 4] Lua スクリプトで設計がより柔軟に（３） | ORENDA

  4. [Unreal Engine 4] Lua スクリプトで設計がより柔軟に（４） | ORENDA