2 of 48

自己紹介

フリーランスゲームプログラマ
大橋一勝（おーはし@ohashi_83）

フリーランス３年目
UE4が９割、その他１割
ゲームが６割、その他４割くらいでお仕事してます

ウェブテクノロジ様からの委託で�本日紹介するプラグインの開発を担当させて頂いてます

3 of 48

SpriteStudio6 Player for UE4 のご紹介
UMGと組み合わせての使い方
SpriteStudio + UE4マテリアル
その他

※本講演では、UE4の一般的な用語や機能については解説しません

4 of 48

SpriteStudio6 Player for UE4 のご紹介

“

”

5 of 48

プラグインの概要

SpriteStudio6で制作した2Dアニメーションを�UE4上で再生するための公式プラグインです
プラグインのソースコードはGitHub上で完全公開
サンプルプロジェクト付き
UE4最新バージョンに追従

通常、UE4の正式バージョン公開から１週間以内くらいに対応してます

最新バージョン v1.4.1 先週(2019/5/19)公開したばかり

V1.4.0でマテリアル関連の機能を色々追加しました

6 of 48

導入方法①

GitHubで公開中　(https://github.com/SpriteStudio/SS6PlayerForUnrealEngine4)
Ss6PlayerExamples/Plugins を�自分のプロジェクトにコピーして下さい

7 of 48

導入方法②

過去バージョンは Tags から　　　　　　　→
ドキュメントはトップページのリンクから　↓

8 of 48

サンプルプロジェクト

各種Blueprintサンプル
BPにはなるべく日本語コメントいれてます
使用しているアニメーションデータは、�同リポジトリ内にSpriteStudio元データあり

9 of 48

アニメーションのインポート

sspj（SpriteStudio Project）ファイルをContentBrowserへ�（UE4用のエクスポート等は不要です。SpriteStudioのセーブデータそのまま）
SsProjectアセットとテクスチャがインポートされる
SsProjectアセットをダブルクリックでビューア起動

10 of 48

主な利用方法

２Dゲーム(キャラクター，エフェクト等)

ActorComponentとして利用
3Dシーン上に配置。板ポリで描画される
SpriteStudio上のパーツをソケットとして扱える

UMG用Widgetとして利用
SpriteStudio上のパーツをSlotとして親子付け出来る

Component / Widget 両方に、ほぼ同等の機能を実装しています。�ActorComponentを使用したサンプルは、そのままWidgetにも適用できます。

11 of 48

UMGと組み合わせての使い方

“

”

12 of 48

UMG＋SpriteStudio のメリット

各ウィジェットが独自のタイムラインでアニメーションできる

ボタン毎、ゲージ毎などでWBPを分けなくても、�画面全体で同期してしまわないアニメーションを再生出来る
複数のWBPへの分割を避け、シンプルな階層に

アニメーターとBP担当者の分業がやり易くなる
UMGの標準機能と組み合わせ可能
UE4マテリアルを使ってSpriteStudioアニメーション＋αの表現も

13 of 48

WidgetBPへの配置

14 of 48

BPからの制御

WidgetBPのGraphで制御

アニメーション切り替え / 一時停止 / 速度変更 / �テクスチャ差し替え / 各種状態取得 etc...
再生終了時，ユーザーイベント発生時用のDelegate

※ユーザーイベント：�SpriteStudio上で、任意のタイミングで自由な型のデータを設定できる

ゲーム側でのSEやコリジョン発生タイミング等に利用できる

15 of 48

Widgetのアタッチ①

SpriteStudioで作ったフレームに�UMGのTextウィジェットをアタッチした例です

16 of 48

Widgetのアタッチ② - SpriteStudio側

17 of 48

Widgetのアタッチ③ - UMG側

18 of 48

Widgetのアタッチ④

SsPlayerウィジェット同士を入れ子構造にも出来ます

19 of 48

アイコンを使う例①

20 of 48

アイコンを使う例② - SpriteStudio側

アイコンを置く予定の場所に空のパーツを配置します

21 of 48

アイコンを使う例③ - UMG側

この例ではSsPlayerウィジェットを入れ子にしてアイコン自体もアニメーション�させていますが、動かないアイコンであれば標準のImageウィジェットでも十分です。

SsPlayer Widget�　|- Button�　　|- SsPlayer Widget

という階層になっています。

マウスオーバーやクリックの判定は、�ボタンウィジェットの機能です。

22 of 48

ゲージの例① - SpriteStudio側

フレーム部分とゲージ部分を分けて作っておきます
ゲージ部分は 0～100フレームのアニメーションで、�フレーム数に従ってゲージが埋まるようにしておきます

23 of 48

ゲージの例② - UMG側

ゲージ側のSsPlayerWidgetを、再生速度 0 に設定しておきます
ゲージの値が変化した際に、BPからアニメーションのフレームをセットすると、�ゲージの長さに反映されます

この例では、フレームとゲージを、アタッチではなく同じ座標に重ねて配置しています

24 of 48

標準機能を使った方がよいところ

縦横比の異なる画面に対して、SsPlayerウィジェット単体でレイアウト補正する機能はありません
Imageウィジェットの Draw As = Box のような、可変サイズフレームのようなコトは出来ません（９スライス）
画面全体をスライドイン/アウトさせるような場合は、UMG標準のアニメーション機能を使った方が簡単です
全く動かないものは、標準のImageウィジェットの方が軽量です�（パーツのレイアウト目的での使用はアリ）
テキスト表示機能はありません。UMGのTextウィジェットをアタッチして下さい
当たり判定機能はありません。標準のButtonウィジェット等をアタッチして下さい

25 of 48

SpriteStudio + UE4マテリアル

“

”

26 of 48

SsPlayerComponent / Widget の描画

基本的にはUE4のマテリアルを使って描画されます
Render Modeプロパティによって描画方法が変わります
SpriteStudio上の「描画モード」「パーツカラー」の�組み合わせでマテリアルが変わります

SpriteStudioの「描画モード」「パーツカラー」

UE4の「Render Mode」プロパティ�左：Component / 右：Widget

27 of 48

Render Mode

Component

Default　…　デフォルト。半透明マテリアルでパーツ毎に描画
Masked　…　ポリゴン構成はDefaultと同じ。Maskedマテリアルを使用。
OffScreen Plane　…　RenderTargetTextureを生成してオフスクリーン描画。�　　　　　　　　　　　４角形の板ポリに貼り付けて描画。
OffScreen Only　…　RenderTargetTextureを生成してオフスクリーン描画。�　　　　　　　　　　シーン上には何も描画せず、RTテクスチャを自由に利用。

Widget

UMG Default　…　デフォルト。半透明マテリアルでパーツ毎に描画
UMG Masked　…　同上。Maskedマテリアルを使用。
UMG OffScreen　…　RenderTargetTextureを生成してオフスクリーン描画。�　　　　　　　　　　４角形の板ポリに貼り付けて描画。

28 of 48

SpriteStudioの描画モードへの対応状況

Default　…　ミックス，加算(※)，減算(※)
UMG Default　…　ミックス，加算(※)
Masked, UMG Masked　…　ミックスのみ
OffScreen Plane, OffScreen Only, UMG OffScreen　…　全て対応

(※)が付いたものは、近い表現にはなりますが、厳密には計算式が異なります
未対応の描画モードを使用した場合、ミックスとして扱われます

29 of 48

カスタムマテリアルの適用方法① � - Project Settings

「Render Mode」x 「SpriteStudio描画モード」x 「SpriteStudioパーツカラー」

　それぞれの描画に使われるマテリアルが、�　Project Settings の Sprite Studio 6 内に全部入ってます�

30 of 48

カスタムマテリアルの適用方法②� - BPでの動的置き換え

BPから動的置き換えが可能です

「描画モード」(UE4上では AlphaBlendModeと表記)�「パーツカラー」(UE4上ではColorBlendModeと表記)�の組み合わせに対してマテリアルを指定
特定のパーツに対してマテリアルを指定

サンプルプロジェクトを見てみて下さい！

31 of 48

カスタムマテリアルの作り方

元のマテリアルは全て Plugin Content に入ってます
実際の描画では、これらをベースにMaterialInstanceDynamicを生成して使用されます
「SsCellTexture」という名前のテクスチャパラメータにSpriteStudioで割り当てたテクスチャ，�頂点カラーにパーツカラーと不透明度が入ってきます
カスタムする場合は、コレを基に改造して下さい
生成されたMIDのArrayをBPから取得できるので、�独自のマテリアルパラメータを追加して制御できます

32 of 48

オフスクリーン描画

OffScreen系のRender Mode では、他と挙動が異なります
内部でRenderTargetTextureを生成し、UE4のマテリアルを使用せずに�usfシェーダを使って直接描き込みます�そのため、SpriteStudioの全描画機能に対応しています
描き込み済みのRTテクスチャを板ポリに貼り付ける際に�UE4のマテリアルを使用しており、このマテリアルはカスタマイズ可能です
いくつかのオプションがあります

OffScreen Material : コレをMID化して描画します。カスタム可能です
OffScreen Render Resolution : RTテクスチャの解像度
OffScreen Clear Color : RTテクスチャのクリアカラー

他のRenderModeよりは負荷が高いので注意して下さい

33 of 48

その他

“

”

34 of 48

テクスチャの設定

SSPJと同時にインポートされたテクスチャは、�自動的にいくつかの設定が変更されます
Editor Preferences 内にインポート設定があります
用途に応じて最適な設定を検討して下さい

35 of 48

フィードバックをお待ちしてます

バグ報告やご要望は、下記のどちらかへ

GitHubのIssue�(https://github.com/SpriteStudio/SS6PlayerForUnrealEngine4/issues)
SpriteStudioコミュニティ�(https://spritestudio.jp/community/index.php)�

プラットフォーム対応などはお問い合わせ下さい

(https://www.webtech.co.jp/help/ja/spritestudio/inquiries/)�

GitHubへのプルリク歓迎！�

37 of 48

OPTPiX SpriteStudioの話

“

”

38 of 48