読者です 読者をやめる 読者になる 読者になる

Let's Enjoy Unreal Engine

Unreal Engineを使って遊んでみましょう

UE4 ブループリント超入門編

さて、今回は少しだけプログラマブルちっくな解説となりますが、UE4に搭載されているビジュアルスクリプティングシステム、通称"ブループリント"の解説をしたいと思います。

よくWebにある○×基礎文法マスターみたいな感じにしようと思いましたが、ブループリントを紹介するにはあまりにも膨大な量になってしまうので、今回は本当に最低限の解説に留めようと思います。

まぁ表題通り超入門編なので、プログラマーな方もそうでない方もブループリントの雰囲気だけでもつかめればいいかと思います。

まずは Hello World から

プログラマーなら誰もが必ずやるであろう"Hello World"をまずはやりましょう。

まずはUE4を空のプロジェクトで起動してください。そして上部にあるメニューアイコンから"Blueprints"ボタンを押してください。その中の項目のひとつである、"Open Level Blueprint"をクリックしましょう。

レベルブループリントとはなんぞやという詳細はここでは省きますが、あえてプログラマーに説明するならメイン関数、メインメソッドみたいなものだと思ってください。とりあえずここから開始の処理を書いていきます。

 

開いた先のウィンドウの右下に"LEVEL BLUEPRINT"という文字があればそこを右クリックしてください。そして出てきたメニューの中で"begin"と入力し、エンターを押してください。"Event Begin Play"という赤いノードが出てきたと思います。そしてそのノードの右下のピンをドラッグ&ドロップで適当に離して、今度は"print"と入力してエンターを押してください。

f:id:alwei:20140505191723j:plain

 この画像はちょっと弄っているので、画面が違うかもしれませんがIn Stringの中の文字列を編集すると自由な文字列をゲーム上に表示できます。

Event Begin Playはこのブループリントの開始ノードと覚えておいてください。大体の場合はここからスタートします。そしてそれを繋ぐ白い線は実行する流れです。疑似コードだとこんな感じですかね。

 EventBeginPlay()

{

    PrintString("Hello World!!")

}

  この状態で左上のPlayボタンを押すとそれだけでゲーム画面上に"Hello World!!"と表示されます。簡単でしたね。

コメントの挿入

プログラムやスクリプトなら当然必要となるコメントですが、ブループリントでも出来ます。ウィンドウ上で右クリックして"Add Comment"を押すか、そのままキーボードのCキーを押すとコメントが画面上に出現します。

あとは大きさを変えたりして、調整すれば処理の意味が簡単にわかったり、グループ処理の範囲を理解しやすくなりますね。コメントの色を変えたり、日本語のコメントも当然つけられますので、用途に応じて使い分けましょう。

f:id:alwei:20140505192319j:plain

変数の種類

プログラムやスクリプトなら当然変数があります。

ウィンドウの左上の方にある"Variable"というボタンを押してみてください。これで新しい変数ができあがります。新しい変数は"NewVar"という名前が自動的につきます。これをクリックすると左下のDetailsの中に詳細情報が出てきます。

Variable Typeというところをクリックすると変数の種類一覧がでてきます。

f:id:alwei:20140505193010j:plain

ここらへんは既にプログラミングの基本的な解説になるので、あまり多くは解説しませんが、よくある種類の変数タイプは揃っています。とりあえずboolやint、float、stringあたりをよく使います。structやobject、class、Enumには更に様々なものがありますが、必要に応じて調べてみてください。

文字列の表示

ではさっき作った変数をstringに変えてみてください。クリックしたあとstringを選択するだけです。これで変数タイプが変わります。変わった変数をドラッグ&ドロップでウィンドウ内にもってきてください。この時、"Get"と"Set"という2つの選択が表示されると思います。

文字列の情報がほしいので、"Get"を選択してください。そしてできあがった文字列ノードを引っ張ってPrint Stringの中のIn Stringに繋ぎます。

f:id:alwei:20140505193612j:plain

これで文字列の表示ができました。何気に変数の名前には日本語などの文字列が使えてしまいます。今回は"文字列変数"という名前のstring型変数を作りました。プログラマーな方には気持ち悪いかもしれませんが、場合によってはこれもありかもしれません。

擬似コードではこんな感じ。

 EventBeginPlay()

{

    PrintString(文字列変数)

}

 

変数や文字列の初期値は一旦左上の"Compile"ボタンを押してから、左下の"Default Value"の中で設定できますので、覚えておいてください。 

ちなみに表示される文字列もフォントが日本語入りフォントの設定がされている場合、普通に日本語文字列の表示ができそうです。(未確認)

 簡単な計算処理

ここから少しずつ複雑になってきます。とりあえず足し算をしましょう。変数をさっきと同じように今度はint型で2つ作ります。名前は適当に。そして配置してください。今度は右クリックしてSearchの中で"+"を入力してみてください。いわゆるプラス演算子ですね。

そしてその中から"Integer + Integer"を選びます。これを画像のようにノードを繋ぐと2つの変数の足し算の完成です。

f:id:alwei:20140505195502j:plain

途中によくわからないノードが入っていますが、これはint型をstinrg型に変換してくれるノードです。Print Stringに繋ぐ時に自動で挿入されますので、覚えておいてください。これを疑似コードで書くとこんな感じです。

EventBeginPlay()

{

    PrintString(Convert(Var + Var1))

}

 計算式を組む時に便利なMath Expressionプラグイン

デフォルトでは実は使えない状態なのですが、"Windows"→"Plugins"→"Editor"の中にある、Math Expressionプラグインというものの"Enabled"にチェックをつけて再起動してみてください。これで非常に便利なものが使えるようになります。

右クリックでノードを作る時に"Add Math Expression"という項目が増えますので、選択後にできあがるノードで適当な計算式をいれてみてください。これを使うと複雑な計算式を計算する関数マクロを自動で生成してくれます。今回は単純な計算ですが、こんな感じに作ってみました。

f:id:alwei:20140505200338j:plain

擬似コードだとこういう計算になっています。

EventBeginPlay()

{

    PrintString(Convert( (Var + Var1) * 2 ) )

}

  これは複雑な計算式になればなるほどきいてくると思いますので、ぜひ覚えておきましょう。他にも必要な計算用の演算子は基本的なプログラミングと同じように使えますので、色々と試してみてください。

配列の扱い

 次はプログラミングで必須であろう配列です。いつもと同じように変数を作りましょう。そしてVariable Typeを選択する時、右側に■のたくさん詰まったアイコンがあると思うので、それをクリックします。これでその変数は配列になりました。

あとはCompileボタンを押すと、Default Valueで配列の要素数を増やすことができます。今回は適当に配列を作ってインデックス1の要素の中をみてみます。

f:id:alwei:20140505201314j:plain

右クリックして"Array"と入力してください。その中に"Get"があると思うので、選択し、要素番号を入力してVarArrayとPrintStringに繋ぎます。これで配列の中身を出力できました。最後に擬似コードです。

EventBeginPlay()

{

    PrintString(Convert( VarArray[1] )

}

 配列の基本はこんな感じです。Arrayと入力した時に色々な関数がでてきますので、検索、挿入、削除など基本的な動的配列にあるものを使えると思ってもらえたらいいです。

分岐処理をする

分岐処理、いわゆるif文ですね。これは少し複雑ですが、考え方は単純です。右クリックして"Branch"と入力してください。これがifの分岐にあたるものです。ここにふたつの変数を比較させるために右クリックして"=="を入力します。

そしてふたつの変数をもってきてから、それを繋ぎ、更にBranchに繋ぎます。あとはTrueとFalse、真と偽の処理を分けるだけです。

f:id:alwei:20140505202245j:plain

これで、同じ値ならTrue、違う値ならFalseと表示されます。疑似コードだとこうですね。

EventBeginPlay()

{

    if (Var == Var1)

    {

        PrintString("True")

    }

    else

    {

        PrintString("False")

    }

}

 分岐もこれで出来るようになったので、一気に作れるものが広がりました。

Forループ処理

分岐の次はループ処理です。まずは一番基本的なForループをみてみましょう。

f:id:alwei:20140505202633j:plain

単純に10回ループするだけの処理です。疑似コードだとこうなります。

EventBeginPlay()

{

    for (int i = 0; i < 9; i++)

    {

        PrintString("Hello")

    }

}

 ハイ、本当に簡単なループですが、できました。ノードの名前もわかりやすく、"ForLoop"とそのままです。これを実行するとゲーム画面中にHelloが10回表示されます。

Whileループ処理

Forループに比べて条件が必要なWhileループは多少複雑です。しかし分岐処理を覚えた今ならすぐに理解できると思うので、今回も画像を先に載せます。

f:id:alwei:20140505203058j:plain

ふたつの値を比較して、同じでなければループを実行します。今回はすぐに条件を達成してしまうので、一度ループに入ったら終了です。疑似コードだとこうなります。

EventBeginPlay()

{

    while (Var != Var1)

    {

        PrintString("Hello")

        Var = Var1

    }

}

 条件を達成すればループを抜ける処理の出来あがりです。

ちなみにブループリントは優秀なことに無限ループが発生してもなんとハングアップしません。かわりに無限ループが発生したと判断すればエラーになってエディターに戻ってきますので、安心して実行できますのでご安心ください。

まとめ

以上がブループリントの超基本的な解説でした。プログラムの疑似コードを混ぜながらだったので、プログラム経験がある人にはわかりやすかったと思います。そしてこれを見れば、ブループリントで大半のことが実現できるということもわかったのではないでしょうか。

実際のブループリントはもっともっと様々なことが出来ます。そして直感的なフローの流れをビジュアル的に示してくれるので、あとで読んだ時も非常に楽です。デバッグに関しては実行しながら値の流れを確認できるので、本来のプログラムやスクリプトの何倍も楽というのを実感できるでしょう。

とりあえず今回は長くなりすぎましたので、このくらいにしておこうと思います。