• 62
    いいね
  • 0
    コメント

Unreal.js.png

近年メジャーなゲームエンジンの二大巨頭と言えば、 UnrealEngine (UE)と Unity3D (Unity)だ。特にUEはハイエンド用途1に強く、映像用2としても使われている。

最新バージョンのUE4系では、C++もしくはブループリントと呼ばれるビジュアルプログラミング環境でゲームロジックを開発する。前者は主にプログラマ、後者は主にゲームデザイナやアーティストが使用する。職種による使い分けという意味ではC#かUnityScriptしかないUnityに比べると明確で、とても分かりやすい設計になっている。

一方で、C++は複雑過ぎるけど、ブループリントは冗長、という考え方もある。ちょうど中間で気軽に書ける環境が欲しいという需要もある。

今回紹介する Unreal.js はJavaScriptでUE4を操る事が出来るプラグインだ。

Unreal.js

NCSOFTがリリースするプラグイン。V8をUE4のプラグインとして組み込み、UE4のC++ APIをラッパーを経由する事でたたく事ができる。ゲームロジックを記述する事はもちろん、エディター拡張と連携してツールをつくることもできる。

できること

  • UE4のAPIへのアクセス
    • 既存クラスやブループリントのクラスのサブクラス化にも対応するらしい
    • UMGやSlateUIを使ったWidgetやエディタ拡張の作成も可能
  • CommonJS + npm
    • CommonJS方式のモジュール呼び出しに対応しているためnpmモジュール等が使える
  • 型定義ファイル(d.tsファイル)の自動生成
    • VSCode等でAPIの補完ができる
    • 使用するレベルのマップで使っているAPIの型定義ファイルを自動生成できる
    • ただし、間違った出力になっているので TypeScriptで使うには手を入れる必要がある3
  • ライブリロード
  • JSでコンソールコマンドやCommandletが書ける
  • JavaScriptデバッガ連携
    • V8プロトコルに対応
  • ES2015対応
    • UnityのJavaScript(ES4ベースのUnityScript)とは異なり、モダンで標準なJSが使える

面白い例としてはgistに置かれた外部JSファイルをランタイムに読み込んで実行する例などもある。

導入

必要環境:

  • Windows 32/64-bit / (mac) OS X
  • UnrealEngine 4.11.x - 4.13.x
  1. Epic Game Launcherなどからマーケットプレイスにゆき、「Code Plugins」カテゴリもしくは「Unreal.js」で検索してUnreal.jsを見つける

    • UE_marketplace_unrealjs.png
  2. 「エンジンにインストールする」をクリックしてインストール

    • install_unrealjs.png
  3. UE4を起動し、任意のプロジェクトを開く

  4. 「Edit」>「Plugins」を開きUnreal.jsがインストール済&有効になっていることを確認

    • Plugins_installed_unrealjs.png

プラグインが有効になると、Content/Scriptsディレクトリが自動で生成される。JSはこの中に書いてゆくことになる(なお、コンテンツブラウザからはJSファイルを閲覧できない=Assetとして認識されない)。

Unrealjs_script_folder.png

Hello World

Javascript Console上でHello World

とりあえず一番かんたんな方法はREPLにもなる Javascript Console を使ってみることだ。

  1. 「Window」>「Developer Tools」>「Javascript Console」を選択

    • OpenJSConsole.png
  2. 入力欄に「console.log("Hello World")」 と入力

    • JSC_helloworld.png
    • ※なお、テキスト補完も効く
  3. Hello Worldが出力される

    • JSC_helloworld2.png

レベル上でHello World

  1. Content/Scripts以下をExplorer/Finderで開き、空のJSファイルを作る
    • とりあえず helloWorld.js
    • なお、おすすめのエディタはVisualScriptCode
  2. 以下のJSを書いて保存
helloWorld.js
let actor = new TextRenderActor(GWorld,{X:100,Z:100},{Yaw:180})
actor.TextRender.SetHorizontalAlignment('EHTA_Center')
actor.TextRender.SetText('Hello World')
  1. UE4に戻り、新規のBlueprintクラスを作成する

    • とりあえず今回はActorを継承する
    • Unreal-js_Actor1.png
  2. レベル上に今作ったBPクラスをD&Dする
     * Unreal-js_Actor2.png

  3. DetailsタブでJavascriptコンポーネントを検索&追加する

    • Unreal-js_Actor3.png
  4. Script Source File 」にさきほどのJSファイル名を入力

    • 例だと「helloWorld.js
    • Unreal-js_Actor4.png
  5. Playしてワールドに3Dの文字列が表示されるのを確認できればOK

    • Unreal-js_Actor5.png

なお、このコードはライブリロードができない。ライブリロードは公式サンプルの中に含まれるHello Worldのようにtry-catch文で同梱のbootstrap.jsを呼ぶ処理を書く必要がある。

エディタ拡張WindowでHello World

Unreal.jsはエディタ拡張をつくることもできる。エディタ拡張版Hello Worldもやってみよう。

  1. Content/Scripts以下をExplorer/Finderで開き、extensionというprefixを付けたファイル名で新規jsファイルを作成
    • 例:extension-helloWorld.js
  2. 内容を以下にする
extension-helloWorld.js
"use strict";

let I = require('instantiator')
let UMG = require('UMG')

let design = UMG(JavascriptWindow, 
{
    SizingRule:'AutoSized', 
    Title:'Hello World'
},
UMG(Button, {},
    UMG.text({},"Hello World Window!")
)
)
I(design).TakeWidget().EditorAddModalWindow()   //①
//I(design).TakeWidget().AddWindow()    //②
  1. UE4を起動し、以下のWindowが開けばOK
    1. unreal-js_hello_extension.png
    2. なお、②を有効にすると以下のウィンドウがでる
      • unreal-js_hello_extension2.png

ドキュメント

英語だが公式の動画チュートリアルやWikiが参考になる。日本語の情報は残念ながらほとんどない。

サンプルでさらっとやっていたり、githubのIssuesで回答がある内容もあったりするのでgithub内を根気よく探すと情報がでてくるだろう。

サンプルの解説

GoogleDrive / github以下にサンプルが用意されている。

https://drive.google.com/file/d/0B8EsJUQpOkucRVJna3dEczJHN2M/view

現時点(2016-10-10)で一部うごかないものもあるが、いくつか紹介。

helloWorld.js

公式版Hello World。前述のとおりライブリロードに対応したコードがある。ライブリロードを聞かせるには bootstrap.js が必要(後述)。

なお、冒頭のue.d.tsへのリファレンスパスコメントは、実は最新のVSCodeでは不要。

bootstrap.js

サンプルの大半はこのファイルを使う想定で書かれている。

VSCodeなどで補完が効くのは、ue.d.tsがあるからだが、実際のレベル中に設置されたものにアクセスするには、実行中に一度JS中からContext.WriteDTS()を呼ぶ必要がある。

bootstrap.jsは普段はコメントアウトされているが、コメントアウトを外して実行することでue.d.ts / aliases.jsを更新できる形になっている。

とりあえず、このファイルを流用しておくのが安定。

helloBlueprint.js

既存のBPクラスをJSで継承するサンプル。Unreal.jsではUPROPERTYは独自期法で記述する形になっており、それのサンプルにもなっている。

extension-spiralGenerator.js

Unreal-js_spiralgen.png

らせん状に並ぶMeshを生成するツールのサンプル。高機能なエディタ拡張のサンプルとなっている。コード量は多い。

helloProcess.js

要Node.js。Node.jsのプロセスを起動するサンプル。

helloUMG.js

Unreal-js_helloUMG.png

UIを表示するサンプル。JSコンソール機能付き。

同梱ライブラリ・API

API

UEとのブリッジAPIはScripts/typings以下の*.d.tsファイル群に定義されている。ただし、コメント等はないのでソースUE4のドキュメントを参照して調べる必要がある。

同梱JavaScriptライブラリ

プラグインに同梱のJSライブラリが以下のパスにある。
Engine\Plugins\Marketplace\UnrealJS\Content\Scripts

lodashなどが含まれるほか、instantiator.js, UMG.jsなどサンプルでもよくつかわれるライブラリが含まれる。

で、実際どうなの?

  • できることの印象
    • UE4 C++ > Unreal.js > Blueprint
  • 👍環境が用意しやすい
    • プラグイン+テキストエディタ(VSCodeなど)で始められる
  • 👎ドキュメントの充実具合は×
    • 👏型定義ファイル生成機能があるのはいい
  • 👎型情報の扱いがJSなのでビミョウ
  • 👍エディタ拡張が作りやすい
    • UE4 C++は冗長&ビルドが必要、BlutilityはUIが作れない
    • ノンビルドで、サクッと作れる
    • NCSoftでもその用途に使っているらしい
  • 👍コンソールコマンドやCommandletにも使える
    • C++で組むより気軽で頻繁な変更に対応しやすい
  • ゲームロジックに使うには…
    • 出力プラットフォームむけにV8をビルドする必要がある
    • Win/Mac/Linux/Androidはすでにある
    • ランタイムにJSを読んで実行もできるらしい

--


  1. いわゆるAAAタイトル。FF7リメイクがUE4を採用したのは記憶に新しい。 

  2. 最近で言えばドラマ版デスノートのリュークがUE4で作られた映像だ。 

  3. TypeScriptでUnreal.jsを扱う方法については別の記事でまとめたい。