こんにちは、ICS鈴木です（orange-suzuki blogというブログもやってます）。2月12日に開催されたStage3D勉強会の活動レポートです。
当日来れなかった方、USTREAMの放送をご覧になれなかった方、録画をご用意しましたのでぜひご覧ください。
次回開催は3月下旬を予定しています。詳細は決まり次第お知らせしたいと思います。
USTREAMの録画、発表資料はこちらです。

StarlingフレームワークのTweenクラスにおける最適化とJugglerクラスの実装

こんにちは、ICSの鈴木です。先日、Stage3Dオンラインカンファレンスが開催されましたが、各種3Dライブラリについてまとまった情報が欲しいなと思ったのでブログ記事にしてみました。Flashを用いた3Dコンテンツを導入するにあたり、3dsMax, Maya、Cinema4Dなどの3Dモデル作成ツールとの親和性、GUIで直感的に作成できるシーン構築ツールなどに重点を置いて解説していきます。

Away3D

http://away3d.com/
Adobeと非営利な活動として提携している。3dsMaxとの親和性が高くユーザー数が多い。シーン編集ツールAwayBuilderが登場し、日々進化を続けています。

3Dツールとの親和性

公式では3dsMaxを推奨。3dsMaxのエクスポータープラグインを備えています。(後述のSEA3Dと組み合わせると強力)
Blender, Maya, Cinema4D用のスクリプトが提供されています。
その他、非公式のCinema4D用プラグイン(C4D-AWD-Bridge)でアニメーション対応したファイルの出力が可能。

GUI でのシーン編集

AwayBuilder (2013.5に登場)
ライティング、マテリアル等をGUIで確認しながら構築できます。さらに、コンテンツファイル(AWD)としてまとめることが可能。現時点ではアニメーションには対応していないものの、今後の発展が大いに期待できるでしょう。

物理演算

AwayPhysicsを備える。業界標準の Bullet エンジンを Alchemy (アルケミー)で固めており、API は JibLib に似たものになっているため今まで 3D で物理演算をやっていた方にとっては比較的とっつきやすいライブラリといえます。
引用:Flash Player 11 対応の 3D 物理演算ライブラリ「AwayPhysics」 | ClockMaker Blog

シェーダー

フィルタークラスを継承したカスタムクラスを作ることで独自のフィルターが作成可能。
。AGALで記述

ライセンス

オープンソース・ApacheLicense v2.0

実績

Nissan JUKE
Perfume global website
ビックロベーダー
どこでもイタメくん（スマートフォンアプリ）
その他

リンク

最新のFlash3Dを使ってコンテンツを作ってみよう Away3D入門講座
Away3Dと3dsMaxを使った3Dモデルの表示 基本的なマテリアル設定
Away3Dと3dsMaxでキャラクターアニメーション
Away Studios: Away3D公式3Dコンテンツ制作サービス。制作、コンサルタント、トレーニング等
Flash Stage3D対応のAway3D 4.0がついに正式版に！ | ClockMaker Blog
APIドキュメント

その他

Away3D.js 大々的に告知されていないようですが、基本的な機能をWebGL用に書きなおされたプロジェクトもあるようです。OpenGL ES2.0準拠のシェーダーを使用可能(FlashのStage3Dと同等に使えるといっていいでしょう)

Flare3D

http://www.flare3d.com/
独自のスタジオツールを備え、GUI操作で3Dシーンの作成でき、シンプルなコードで高度なゲーム、アプリケーションの作成が可能。ゲーム用に様々な便利な関数が備わっていることが特徴です。

3Dツールとの親和性

公式では3dsMaxを推奨。3dsMaxのエクスポータープラグインを備えています。Blender, Maya, Cinema4DへはColladaファイルで対応可。ライトマップの書き出し、頂点カラーの書き出しを備え、本格的な開発に耐えうる設計となっています。

GUI でのシーン編集

数あるライブラリの中では、早くからスタジオツールを備え、高機能な編集が可能。アニメーションにも対応。独自のシェーダー言語、FLSLと合組み合わせることで強力なエフェクト、モーフ、アニメーション等が作成できます。先日のカンファレンスでも頂点カラーを用いたGI (グローバルイルミネーション)によるライティングが披露されました。

物理演算

ひと通りの物理演算の機能を備え、アクションゲームの作成が可能。

シェーダー

独自言語、FLSL(Flare3D Shader Language)を備える。GLSLと似た構文でGPUプログラミングが可能。あらかじめFlare3Dの独自アプリケーションでコンパイルし、バイナリファイルとして取り込んで使用します。上記スタジオツールと組み合わせてエフェクトを用いたマテリアル、頂点データの変形を伴うエフェクトなどが比較的容易に実現できます。FLSLおすすめです。

ライセンス

非オープンソース。
教育用・非商用の場合はフリー。
商用の場合は購入ライセンス(U$D 496　一人あたり年間, 2013年5月末現在)

実績

CityVille2
Lego Heroica Fortaan
その他

リンク

Flare3D入門　簡単なゲームを作ってみよう
FLSL Wiki
Swirl Effect (うずまきエフェクト)
Fifty shaders of grey
APIドキュメント

その他

HTML5-WebGL書き出し – Away3Dと同様、Flare3DもWebGLエクスポートにも注力しているようです。Flash用のコンテンツを作る際と同様のワークフローでWebGL用ファイルの作成ができるとのこと。(サンプルコンテンツ)

Mixamoとの連携 – オンラインでキャラクターアニメーションを作成できるサービスと連携することができ、作成済のアニメーションを選択するだけで簡単にキャラクターアニメーションを作成できます。

Minko

http://minko.io/
PC, モバイルに最適化されたファイルを同時に作成できることが特徴です。

3Dツールとの親和性

公式には3ds Max, Maya, Blenderに対応しているとのこと。フォーマットは、現在Collada、OBJに対応しています。

GUI でのシーン編集

独自のシーンエディターを備えています。PC, モバイルに最適化された独自のフォーマット、MKファイルフォーマットを使用できます。

物理演算

ひと通りの機能を備えています。
(衝突判定、ボックス、球、シリンダー、凸面、リジッドボディ、ジョイント等)

シェーダー

ノードベースの編集ツールを備えています。
さらに独自のシェーダー言語がありAS3でGPUプログラミングが可能。ランタイム時にAGALに変換されます。

ライセンス

オープンソース MITライセンス

実績

SoccerPunch
その他

リンク

APIドキュメント

Alternativa3D

http://alternativaplatform.com/en/
いち早くStage3Dに対応したロシア製のFlash3Dライブラリ
引用: 丸林商店 (@narutohyper さんのサイト)

3Dツールとの親和性

3ds Maxのプラグインが提供されています。

ライセンス

MPL2.0ライセンス

実績

スクエニ レジェンドワールド | SQUARE ENIX MEMBERS
Live with the Wind.
その他

リンク

AlternativaPlayer – an online 3D-models viewer
日本語フォーラム

SEA3D

http://developers.poonya.com/forum/viewtopic.php?f=11&t=36
Away3Dのパーサーとして機能。3dsMaxと組み合わせると最強です。拡張子.sea として3dsMaxから出力でき、アニメーション、モーフ、カメラ、その他多くの要素を出力することができます。
3DゲームのためのファイルフォーマットSEA3Dまとめ

SEA3D and Away3D demo “Morph Effect”

OimoPhysics

githubページ
今回紹介した中では唯一の純国産ライブラリ。物理エンジンに特化しています。
紹介記事

実績

RAGE GIRAFFE
Android Physics

以上、FlashのStage3Dに対応した3Dライブラリの簡単な紹介でした。3Dコンテンツ導入にあたり参考にしていただければ嬉しく思います。
では結局どれがいいの？という話ですが、やはりコンテンツの内容により選択すべきといえます。例えばこんな感じ、
Web上の多くのサンプルを参考にしながら作成したい → Away3D
少ないコード量でGUIを使ってより直感的に作成したい、FLSLでサクッとエフェクトを作ってみたい → Flare3D
モバイルでの最適化に期待して新しいものを触ってみたい → Minko3D
ロシア製の歴史あるライブラリに挑戦してみたい → Alternativa3D

次回は各機能のより詳しい解説をしたいと考えています。

尚、ライブラリ作者の生放送が聞ける、Stage3D オンラインカンファレンスもチェックしてみてください。
参考:  Stage3Dオンラインカンファレンスまとめ
第3回まとめ
第2回まとめ
第1回まとめ

※誤記、その他ご質問などありましたらTwitterなどでお気軽にお声がけ下さいませ

2013.5.29 : OimoPhysicsに実績を追記しました。

こんにちは。ICSの鈴木です。今回は、3D物理演算ライブラリであるOimoPhysics、つい先日公開された3Dエフェクト作成ツールのAwayEffect、そしてそれらのライブラリを用いたFlashのStage3Dサンプルコンテンツを制作しましたのでご紹介します。

OimoPhysics

• デモ1：「Shooting Blocks」を再生する

高くつまれた箱に魔◯光殺砲みたいなビーム砲をあてて撃ち落とす、ゲームなどでありがちなサンプルコンテンツです。OimoPhysicsとAway3Dを連携した際に、どの程度パフォーマンスが出るのか知りたかったので作成してみました。よほど箱の数を増やさない限り(数万オブジェクト単位)、実用に耐えうるコンテンツができると思います。アトラクションコンテンツなどで使う機会があれば使ってみたいと考えています。

• デモ2：「Rolling Ball」を再生する

こちらは、物理演算エンジンのテストでよくあるボール転がし系のサンプルコンテンツ。十字キーでボールを転がし、キャラクターを吹き飛ばして遊びます。このような衝突判定系のコンテンツを作る際、境界ボックスと呼ばれるオブジェクトの境界線を決める必要がありますが、本サンプルではキャラクターの細部まで衝突判定せず、キャラクターを包み込む箱を定義することで計算負荷を軽くしています。キャラクターがプラモデルの箱に入ったようなイメージです。キーボードのBキーで境界が見えるようにしてあります。

また、Away3Dでキャラクターを複数体表示した際のテストも兼ねています。複数のモーション(待機、走る、ジャンプなど)が定義された3Dモデル(AWDファイル)を、読み込み後に複製し、異なるタイムライン(別々に制御可能)を割り当てています。全キャラクターに固有のタイムラインを割り当てると、その分計算負荷が増加してしまうので、いくつかは共有のタイムラインとすることで、計算負荷を下げています。

AwayEffect

AwayEffectは、エフェクトを作成するエディターと、Webへの公開機能(wonderflのような専用のギャラリーサイトへの投稿機能)が合わさったフリーのサービスです。専用のエディターをダウンロードすれば、簡単なエフェクトならすぐに作成できると思います。

このサービスの一番のおすすめポイントは、自分や他の人が作成したエフェクトをAway3Dコンテンツ内に取り込んで使用できるという点です。専用のパーサーを使えばすぐに利用できます。

このツールでは、パーティクル(光の粒)を重ね合わせることで、光の線や、渦、波動などを作成します。色んな種類の動きを合わせることで、特徴的なエフェクトを作ることも可能です。今回のサンプルでは↓のような3つのエフェクトを混ぜあわせて作成しています。

最後に今回作成してみた感想になりますが、OimoPhysics はとても楽しいライブラリなので今後に超期待ということ、次回はよりゲームらしいものを作成してみたいと思っています。

※Away3Dへの適用方法は公式には用意されていないと思いますが(投稿時現在)、気になる方はこちらにコードを掲載しましたのでご覧くださいませ。

• OimoPhysicsとAway3Dの連携 – Qiita [キータ]

こんにちは、ICSの鈴木です。先週8月23日の日本時間深夜に開催されたFlashオンラインカンファレンスにて、3Dライブラリの1つであるMinko の次期バージョンの発表がありました。Flashのみならず、WebGL、さらにその他多くのプラットフォームに対応するということで、とても期待しています。Minko 3のアルファリリースは、今年9月、ベータが12月、最終リリースが2014年4月とのことです。

本記事は、Minkoの公式ページ「Announcing Minko 3 with WebGL support!」の和訳です。Jean-Marc Le Roux 氏に掲載許可をいただいています。お急ぎの方は最後のまとめを読んでいただくことをお勧めします。Thank you Jean-Marc Le Roux!

—

WebGLサポートとMinko 3の発表

投稿日：2013年8月26日 Jean-Marc Le Roux 氏

概要

先週の金曜日にFlashオンラインカンファレンスが開催されました。今回のカンファレンスは我々にとって非常に重要な意味を持っていました。Minkoの次期メジャーバージョンである、コードネーム「Normandie」を発表する機会だったからです。次のバージョンでは、今までに無いくらい多くのプラットフォームをターゲットとしているため、真のゲームエンジンへの進化といえるでしょう。また、数多くの優れた機能を提供することで我々のユーザーを今までにないほどバックアップしていきます。

Minko の最も重要な思想の1つが、「デザインは一度、デプロイは全てに」です。しかも、Adobe Flashのような、数多くの独占的プラットフォームに依存することなく。ただし、勘違いしないでください。我々はFlashについてとやかく言っているわけではないのです。今や我々がかつて考えていた以上に、Minko はFlashプラットフォーム以上のポテンシャルを持ちあわせているのです。

WebGLのサポート

Minko 3は既に有能なフレームワークですが、それを実証するために技術デモンストレーションが必要でした。上記アプリは3D物理演算、リアルタイムライティング、ノーマルマッピング、アルファマップ/スペキュラマップ、パーティクルといった数々の技術とともに、CrytekのSponzaモデルのデモを実現させています。

Minkoエディターが既にMinko 3 に対応していたため、今回のデモの制作はスムーズに進みました。3DコンテンツをFlash以外の多くのwebプラットフォームに対応させることは、非常に重要なステップでした。WebGLはハイクオリティなコンテンツを提供するには十分に成熟していると考えていますので、Minko 3ではAdobe のStage3D と平行してWebGLを視野にいれることにしたのです。新しいスキルを身につけたいと願っているFlashデベロッパーには格好の機会だと思いますよ。また、成熟したフレームワークとツール郡を使って、自身のスキルや創造性を生かしたいと考えているWebGLデベロッパーにも朗報でしょう。

 

新言語C++2011の採用により多くのプラットフォームに対応

Flash、WebGL そして、ネイティブのプラットフォーム(iOS, Android, Mac, Linux and Windowsなど)、に対応するため、ActionScript 3.0 からよりニュートラルかつ、広範囲のサポートが効く言語へと技術シフトすることにしたのです。我々が選択した言語は、C++ 2011です。最新の追加言語機能、最新のクロスコンパイラ技術が、我々が目標としているすべてのプラットフォームに対応するC++によるアプリケーション開発を可能にしています。そしてそのこと以上に、単一のコードによって多くのプラットフォームに対応できるということが最も重要なことなのです。

上記の表のように、Minko 2での数多くの機能は既に Minko 3 で動作しています。そのため、我々の最初のパブリックリリースでは、Minko に関してみなさんがよく知っていて好んでいる機能に加え、いくつかの新しい機能をお届けできるでしょう。

まとめ

こんにちは、ICSの鈴木です。今回はゲームエフェクトポータルサイトのEffectHub.comが主催するパーティクルエフェクトコンテストをご紹介します。

• コンテスト公式ページ
  EffectHub&Sparticle Particle Effect Contest: Enter to Win a 16GB iPad Air!
  
  

Sparticle (旧AwayEffect) は、リアルタイムプレビュー付3Dパーティクルエフェクト作成ツールです。AIR製のデスクトップツール、オンライン上のWebツールがあり、いずれも無料で利用できます。FlashのStage3Dを使用していますのでGPUパワーを利用し高速に動作する上、GUIによるシンプルな操作で例えば魔貫光殺砲みたいなエフェクトも数ステップで作成可能です。
さらに専用ツールからポータルサイトへ直接アップロードをすることで、すぐに作品を公開できます。
Sparticleについては以前本ブログで紹介記事を書いていますので、詳しくはこちらをご参考ください。
(参考記事：物理演算ライブラリ「OimoPhysics」と3Dエフェクトツール「AwayEffect」のご紹介)

3ステップで応募完了

本コンテストでは、専用ツールを利用したパーティクルエフェクトが条件となっています。キラキラ眩くエフェクトを作成して楽しむもよし、ゲーム用のエフェクトを作成するもよし。このコンテストをきっかけにパーティクル作りにチャレンジしてみませんか？応募方法は以下3ステップです。

1. 「サインアップ」- まずはEffectHub.comに登録しよう。Eメールまたはお好みのSNSを使って簡単に登録できます。
2. 「ツールを開く」 – AIR製のエフェクト作成ツール「Sparticle」をインストールするか、オンライン上のツールを開きます。
3. 「アップする」 – エフェクトを作成して公開しよう。「contest」タグを付けることでコンテストへの応募となります。

優勝者には豪華景品あり！

腕に自信のある方はトップ3を狙いましょう。コンテスト優勝者にはiPad Air、Nexus5、Kindle Paperwhiteなどの豪華景品が授与されます。この機会をお見逃し無く！

• 1位：16GB Wi-Fi iPad Air または、Amazonギフトカード500ドル分
• 2位：16GB Nexus 5 または、Amazonギフトカード350ドル分
• 3位： Kindle Paperwhite または、Amazonギフトカード120ドル分

締め切り

• 応募締め切りは、2014年3月2日16時59分 (日本時間)
• 投票締め切りは、2014年3月16日16時59分 (日本時間)

その他注意事項

• ActionScriptは使用不可。
• 著作物を扱った作品はNGです。
• 応募可能ファイル .zip または.awp (Sparticleのファイル形式)
• 最大ファイルサイズ 20MB

エフェクトの作成はここから

• Effecthub公式サイト
• Sparticle AIRバージョンのダウンロード
• Sparticleオンラインバージョン(要サインアップ)

公式チュートリアル

• Basic Sparticle Tutorial - エディターのインストールから作品の公開までの基本的なチュートリアル
• Advanced Sparticle Tutorial - パーティクルエフェクトの最適化についての記事

おまけ：作成したエフェクトをFlashのAway3Dに読み込む方法

Sparticleを用いて作成したエフェクトは、FlashのStage3DライブラリであるAway3Dを使って読み込むことができます。以下はエフェクトファイル(.awpファイル)を読む込むスクリプトの一例です。
私がよく使う方法は、エフェクトを読み込むスクリプトをObjectContainer3Dクラスを継承したクラス内に記述するという方法です。こうすることで、シーンにaddChildするだけでエフェクトが表示されるようになります。この方法はゲーム開発のモック段階で重宝します。(※実際にはアセットの読み込み管理等の最適化を行います。)
また、Sparticleが用意している専用の拡張ファイル(.awp形式を読み込むためのクラス)が必要となります。

public class FireEffect extends ObjectContainer3D
{
	private var particleGroup:ParticleGroup;

	public function FireEffect()
	{
		AssetLoader.enableParser(ParticleGroupParser);
		// エフェクトファイルの読み込み
		var loader:AssetLoader = new AssetLoader();
		loader.addEventListener(AssetEvent.ASSET_COMPLETE, onAssetCompleteHandler);
		loader.load(new URLRequest("effect_file.awp"));
		// または
		loader.loadData(new EmbedEffect(), "effect");
	}

	// エフェクトファイル読み込み後の処理
	private function onAssetCompleteHandler(e:AssetEvent):void
	{
		if (e.asset.assetType == AssetType.CONTAINER && e.asset is ParticleGroup)
		{
			particleGroup = e.asset as ParticleGroup;
			// 表示に追加
			addChild(particleGroup);
			// アニメーションをスタート
			particleGroup.animator.start();
		}
	}
}

より詳しいソースファイルはEffectHubの公式サイトからダウンロードできます。

• Sparticle 各種ダウンロード

関連記事

• 物理演算ライブラリ「OimoPhysics」と3Dエフェクトツール「AwayEffect」のご紹介

The post 優勝者には豪華景品あり！Flashのエフェクトを作って、Sparticleパーティクルエフェクトコンテストに挑戦しよう appeared first on ICS LAB.

こんにちは、ICSの鈴木です。先日弊社が開催したWebGL & Stage3D 勉強会 (第5回)にてパーティクルエフェクトツールの「Sparticle」についてのデモをさせていただきました。今回はそのフォローアップ記事になります。

1. Sparticleの紹介

Sparticleは、リアルタイムプレビュー付3Dパーティクルエフェクト作成ツールです。AIR製のデスクトップツール、オンライン上のWebツールがあり、いずれも無料で利用できます。FlashのStage3Dを使用していますのでGPUパワーを利用し高速に動作する上、GUIによるシンプルな操作が特徴です。ツールで作成したエフェクトは、Away3Dライブラリを使用したコンテンツにに取り込むことができるため、3Dの展示デモや、ゲームコンテンツ、モバイルアプリなどの開発に利用できます。(SparticleはCheng Liao氏による実験的プロジェクトです。)

2. 本記事のゴール

Sparticleの肝である様々なビヘイビア(パーティクルに動きを与えるオブジェクト)に焦点を当て、アニメーションGIFとともに解説します。ビヘイビアをマスターすることで思うようにツールが操れるようになるでしょう。エフェクト作成の際の参考にしてもらえると嬉しいです。(画像はSparticleを利用していくつかのパーティクルを組み合わせて作成したエフェクトです。)

• サイト上(EffectHub.com)でエフェクトを見る

3. ビヘイビアについて

Sparticleでは1つのエミッターに様々な振る舞い(以下ビヘイビア)を追加しアニメーションを作りこんでいきます。各ビヘイビアにはプロパティが存在し、その値を調整していくことでモーションを調整していくという流れになります。Sparticleに用意されている17個のビヘイビアを解説していきます。

3-1 時間(Time)

最初から設定されている必須ビヘイビアです。設定項目は4つの項目があります。

• パーティクルが発生する開始時間(startTime)
• パーティクルの生存時間(duration)
• ループの有無
• 延滞時間(delay)

値の設定方法は3通りです。

• 固定値
• 範囲付きランダム
• カーブ値 (設定した範囲の中で一様に分布する値)

デフォルト設定 (開始時間ランダム、生存時間ランダム)　常に発生し続けるパーティクルになります。

開始時間、生存時間を固定にした場合の例。同時に発生させ、同時に消滅させることができます。

Tips

• 車の排気ガスのようなエフェクトを作成する場合はループをオン、エフェクトの表示時間が決まっているものを作成する場合はオフにするとよいでしょう。
• エフェクト作成の序盤では、ランダムは多用せずに大枠から作っていくとよいでしょう。

3-2 速度(Velocity)

パーティクルの速度(単位時間あたりの移動量)を設定します。
タイプによって様々な動きを作成できます。

タイプ1. 定数：ThreeDConst

X, Y, Z,の3方向の移動量を固定値で設定する方法です。全てのパーティクルが同じ方向に移動することになります。

タイプ2. コンポジット：ThreeDComposite

X, Y, Zの3方向に対し、それぞれ独立の移動量を設定する方法です。設定方法は、固定値、範囲付きランダム、カーブ値(設定した範囲の中で一様に分布する値)を選択しそれぞれ設定する方法。動きを細かく設定する場合に用います。

タイプ3. 球体：ThreeDSphere

球体の中心から外側に向かって移動させる方法です。速度ビヘイビアの中では1番使いやすいと思います。原点プロパティ(center)を操作することで一定方向に噴射するようなエフェクトが作成できます。

タイプ4. シリンダー：ThreeDCylinder

円柱の底面の中心から外側に向かって移動させる方法です。

Tips

• 速度を決めるということは、単位時間あたりの移動ベクトルを決めるということです。その移動ベクトルを様々な方法で決定するということが重要なポイントです。
• 「球体」では、仮想球体の表面へのベクトルをランダムに抽出するという方法で速度(移動ベクトル)を設定します。そのため仮想球体の中心(center)をワールド座標の原点からずらすことで、例えば消火器からパーティクルが噴射するような動きなど(円錐のイメージ)、様々な効果を演出できます。
• 内側半径(inner radius)、外側半径(outer radius)を設定すると、移動量をランダムに抽出する際に、仮想球体の中身をどの程度含むかを細かく設定することができます。
• このようなベクトルの指定方法は、他のビヘイビアでも頻繁に出てくる方法になります。

3-3 加速度 (Acceleration)

パーティクルの加速度を設定します。速度ビヘイビアと同様にタイプを設定することで、様々な方法で加速度を設定できます。基本的な考え方は速度ビヘイビアと同様です。サンプルは、速度をシリンダーでY方向に、加速度を-Y方向に設定した例です。

3-4 位置 (Positoin)

パーティクルの1つ1つの初期位置を設定します。
こちらも速度ビヘイビアの決定方法と同様に、4つのタイプから選択し設定していきます。
例えば、球体を選択した場合、球体の内部の点からランダムに抽出し初期値位置を決定します。サンプルはパーティクルの発生位置をY方向にずらした例です。

Tips

• 内側半径(inner radius)、外側半径(outer radius)を近づけて設定すると球体の表面を覆い尽くすようにパーティクルを配置できます。(皮の部分にだけ残るという意味です)

3-5 ビルボード (Billboard)

パーティクルの向きを常にカメラ方向に向くように設定します。
ジオメトリータイプに平面(Plane)を設定したときに威力を発揮します。

Tips

• 軸使用(uses axis)をオンにすると、カメラ方向に向く際のプリミティブの回転を設定した軸固定で行うようになります。
• X軸固定の場合、例えばプリミティブをX軸方向から串刺しにしてその軸を固定してカメラを向くといったことになります。そのためプリミティブを真横から見たとき(X軸から見たとき)カメラの方向を向きません。
• 特に必要がない場合は軸使用はオフで良いでしょう。

3-6 追尾 (Follow)

パーティクルのエミッターを移動させた際に、各パーティクルをその場に留まらせるような効果を追加できます。ツール上で動作を確認したい場合は、タイムラインのmoveボタンを有効にすると確認できます。流れ星からこぼれる光の粒子のような表現を作成できます。

3-7 スケールトゥイーン (Scale Tween)

拡縮アニメーションを設定できます。
初期スケール、終了スケールを設定しアニメーションさせます。

Tips

• 位相(phase)を設定することで初期値にばらつきを加えることができます。拡大アニメーションが三角関数を用いて計算されているため、位相をランダムな角度値(0～360)にセットすることで、モーションにランダムさを加えることができます。(After Effectsなどのソフトではよく使われる手法です。)

位相あり

位相なし

3-8 セグメントスケール (Segment Scale)

キーフレーム毎に設定した値で拡縮アニメーションが設定できます。このビヘイビアをうまく使うことで好みのイージングを演出できます。エフェクト作成の終盤に使うとよいでしょう。

3-9 初期カラー (Initial Color)

パーティクルの初期カラーを設定できます。

• 強度(multiplier)：マテリアルのそのものが持つ色の強度を0～1の間で設定します。RGBの全てを0にすると真っ黒になり、すべて1にするとマテリアル本来の色になります。
• オフセット(offset)：マテリアルそのものが持つ色に対して、色を乗せるまたは減色させることができます。こちらは-255～255の間で設定するので注意が必要です。

3-10 カラートゥイーン (Color Tween)

色変化するアニメーションを設定できます。
初期カラーの項目と同様に、強度とオフセットをそれぞれ設定できます。

3-11 セグメントカラー (Segment Color)

セグメントスケールと同様に、キーフレーム毎に設定した値でカラーアニメーションが設定できます。

3-12 振動 (Oscillator)

各パーティクルそれぞれに振動するアニメーションを設定できます。
振動する量として、オフセット(振動移動量)を3次元ベクトルとして設定します。設定方法は速度ビヘイビアの設定タイプと同様に定数、コンポジット、球体、シリンダーから選択できます。振動する方向を決めるというところがポイントです。

Tips

• 激しく震えるような効果を加えたいときには、長さ(duration)のプロパティに小さな値を設定し、単純な動きに自然なランダム加減を加えたいときは、長さに大きな値を設定するとよいでしょう。

3-13 回転トゥイーン (Rotation Tween)

パーティクルに回転アニメーションを設定できます。

Tips

• ビルボードビヘイビアを設定している場合、Z軸のみ回転させるとよいでしょう。
• 長さ(duration)をランダム(OneDRandom)に設定することでランダム加減を調整できます。

3-14 軌道 (Orbit)

パーティクルに弧を描くようなアニメーションを設定できます。半径(radius)は孤の大きさ、長さ(duration)には1周する時間を設定します。

Tips

• 長さ(duration)をランダムに設定すると渦のような効果を作成できます。
• オイラー(eulers)を設定すると軌道の向きを設定できます。

3-15 二次ベジェ曲線 (Quadratic Bezier Curve)

終点(end point)と、コントロールポイント(control point)を用いてパーティクルを曲線的にアニメーションさせることができます。サンプルは終点を定数に、コントロールポイントをSphereに設定した例です。

3-16 スプライトシートアニメーション (Sprite Sheet animation)

行数、列数を指定することで現在設定しているマテリアルをスプライトシートとして使用できます。サンプルはスプライトシート画像を使った炎エフェクトです。スプライトシート画像として作成していない画像でも使用することができるため、様々な用途に使うことができます。

各パーティクルにこちらのスプライトシート画像を使用し、カラートゥイーン、速度、加算を設定しています。

3-17 Rotate To Heading

パーティクルそれぞれを原点を向くように回転させる効果を設定できます。ビルボードとの違いに注意するとよいでしょう。

4. エクステンション (Extensions)

Away3Dでの表示には対応していないSparticle独自のエフェクトです。現状2つのモードが用意されています。

4-1 陽炎エフェクト(heat haze effect)

適用したエミッターの背景に対して陽炎効果を追加できます。
現在設定できるプロパティありません。

サンプルは先ほど作成した炎のエフェクトに対して陽炎エフェクトを適用した例です。
レースゲームなどでカートの排気口部分に使うと良さそうです。

4-2 幻影エフェクト(phantom effect)

適用したエミッターに残像効果を追加できます。
現在設定できるプロパティありません。流れ星や花火などを作る際に重宝するかもしれません。

おわりに

エフェクトツールには様々なアプローチが存在します。どういう仕組みで動いているのかを理解すると、思うようにツールを操れるようになると思います。パーティクルが動く仕組みをもっと知りたい方はAway3Dのソースコードを追ってみるとよいでしょう。質問などありましたら、コメント欄またはTwitterで直接お返事いただけると嬉しいです。

The post たった5分でクールなパーティクルエフェクトが作れる！「Sparticle」徹底解説 appeared first on ICS LAB.

こんにちは、ICSの鈴木です。

みなさんはコンテンツを作成する際、最適化の期間をどれくらい取っていますか？ストレスなく最適化が実施出来ていますか？今回の記事では、弊社で取り入れている最適化の基本的プロセスをご紹介し、さらに最適化を問題解決と捉え、最適化を行う際に押さえておきたい問題解決と分析の7つ道具を具体例を挙げてお話します。これからゲーム開発やアプリ開発を始めようとしている方、コンテンツのブラッシュアップがうまくいかないと感じている方、本記事を参考にしていただきコンテンツ力アップにお役立てくださいませ。

1. 最適化の重要性とメリット
2. 最適化の基本プロセス
   2-1. 測定 (定量化)
   2-2. 分析・問題定義
   2-3. 仮説の構築
   2-4. 仮説の立証 (再測定)
3. 問題解決と分析の7つ道具
   3-1. MECE
   3-2. 問題発見の4P
   3-3. ゼロベース思考
   3-4. 仮説思考
   3-5. CS/CE分析
   3-6. 感度分析
   3-7. ABC分析

最適化の重要性とメリット

品質・パフォーマンス面での重要性・メリット
コードの最適化を行うことで、「アニメーション」や「エフェクト」という重要な要素を作りこむことが可能になり、ユーザー体験の向上につながります。さらに、CPUの稼働率、メモリの使用量に余裕が生まれ、継続的な開発を行う余地も残せます。パフォーマンスがギリギリの状態では、バージョンアップによる機能追加やエフェクト追加をすることが厳しくなってしまうためです。最適化を行わない状態では、メモリリーク、プチフリーズなどといったユーザーにとって嬉しくない現象が発生することが多く、最適化は必須の対応と言えるでしょう。

コスト・収益面での重要性・メリット
運用データを分析し改善項目に優先度を設けることや、ユーザー期待度の高いものに開発資源を集中させることは、費用対効果の増大につながります。また、最適化されたコンテンツはより多くのユーザーにリーチすることができ、ユーザー数・収益の拡大につながるでしょう。最適化の実施はコンテンツをより良いものにしユーザー体験を向上させるだけでなく、コンテンツを継続開発していく上でも必要なことだと言えます。続いて弊社の開発フローに取り入れている最適化の基本プロセスをお話しします。

最適化の基本プロセス

1. 測定 (定量化)
   コンテンツの特定の動作に対し定量化を実施します。例えば、特定画面間の遷移を10回繰り返す。ゲーム中の特定のユーザー操作を10回繰り返すなど。その際、フレームレートの変化、メモリ量の変化をデータとして収集します。この動作は繰り返し行うため、測定を自動化したり、コンテンツに再現機能を持たせると尚良いでしょう。
   
   
2. 分析・問題定義
   定量化されたデータを元に問題となる箇所を定義します。特定の箇所でFPSが大きく低下している。特定の操作でメモリがリークしているなどの問題を見つけます。さらに詳しく調査する場合、重要な箇所でコードの実行に何ミリ秒かかっているかなども計測します。
   
   
3. 仮説の構築
   問題の原因となる仮説を立て、仮説を確かめるための変更を行います。例えば、特定の動作でメモリリークしていることが確認された場合、ある一部分の機能が原因であると仮定し単体テストを行ったり、単機能に分解するのが難しい場合は一部分のパラメーターを増加させ、その変化量(影響度)を計ることで原因を絞り込むことができます。
   
   
4. 仮説の立証 (再測定)
   再度測定を行い仮設を立証します。原因が特定できれば最適化できる可能性があることがわかります。

このサイクルを最適化したい項目毎に実施します。最適化やブラッシュの作業は試行錯誤を繰り返すことになるため、パラメータを変更しやすい作りにしておくとよいでしょう。測定には以下の計測ツールを使うとが大変便利です。

• Adobe Scout (AIRアプリやFlashコンテンツの計測に)
• Chrome DevTools (HTML5やWebGLコンテンツの計測に)

問題解決と分析の7つ道具

物事の効果を測定し課題を設定して解決していく手法は、コンテンツ開発に限らずビジネスを進めていく上でも大切な考え方の1つです。ここからは最適化プロセスを1つの問題解決とみなし、最適化とコンテンツのブラッシュアップに役立つ問題解決の7つ道具を紹介します。

1. MECE
   MECEとは、Mutually Exclusive, Collectively Exhaustiveの頭文字から取ったもので「モレがなくダブりもない」という集合の概念。見落としていた問題はないか、重複して検討している問題はないか。効率的に問題を対処するためにコンテンツや再生環境をあるテーマのもと分類してみましょう。

   単純に画面毎に最適化を考えるより、例えば通信性の有無が与える影響を考慮した最適化や、更新性を考慮した設計の最適化など、MECEを用いることで問題が発見しやすくなるでしょう。

   モバイル環境での最適化を考えたとき、特定のOS毎での検証・最適化、ハードウェアの違いによるパフォーマンス最適化、メモリスペックを考慮した設計など、検討することが多岐に渡ります。前もって最適化項目を把握しておけば工数の見積もりが立てやすくなるでしょう。

2. 問題発見の4P
   「問題」とは「現状」と「理想」とのギャップとも言えます。理想の姿、最適化された状態をイメージするためには、様々な軸(目的、空間、立場、時間)でコンテンツを眺める必要があります。
   ・Purpose (目的軸) – 何のためにその施策を行うのか。何のためのアニメーション、何のためのボタンなのか。真の目的を理解することでブラッシュアップ・最適化を効率的に実施できるでしょう。
   ・Position (立場軸) – 誰にとって、どんなユーザーにとって問題なのか。どういう立場で問題をとらえるかによって、問題の発見・解決により早く近づくことができます。例えばモバイルゲームのライトユーザーになったつもりで見てみる、クライアントの立場になって見てみる。コンテンツを様々な立場から眺めてみるとよいでしょう。
   ・Perspective (空間軸) – 物事を捉える「視野」を広げたり、視点を変えることで問題が発見されたり、新たな解決策が見出されることがあります。例えば、1画面では違和感はないがコンテンツ全体の中で捉えると違和感に感じることや、ターン制と捉えて開発してたゲームを、アクションシューティングと捉えて開発することでよりアクティブな実装が可能となる事など。
   ・Period (時間軸) – その問題はどの時点での問題なのか。例えば、月初では問題がなかったことが月末になると問題になってしまったことはありませんか？物事を時間軸を変えて捉えると新たな問題や解決策が見つかる場合があるでしょう。
3. ゼロベース思考
   問題を解決しようとするときに、既成概念にとらわれずゼロから物事を捉え直して考える思考法。例えば、コンテンツのパフォーマンスアップという課題があった際、コードレベルでの解決のみに頼らず、ビジュアル面さらには表現方法まで検討する範囲を広げると、解決策が見つかることがあります。
4. 仮説思考
   最適化のプロセスでも触れた通り、問題に対してその時点で考えられる「仮説」を立て、それを立証していく手法。経験が長い開発者は、新たな問題に直面した際でも過去のノウハウから類推し仮説を立てるのに長けています。様々な問題を解決していくことで仮説構築力は上がります。仮説が外れても気にせず試行錯誤を繰り返すことも大切です。
5. CS/CE分析
   

   ユーザー満足度(Customer Satisfaction)とユーザー期待度(Customer Expectation)をマトリックスにして問題の優先度付けを行います。ユーザー期待度の高いものから対応することで開発の投資対効果を高めることができます。

6. 感度分析
   
   

   問題に影響するパラメーター(変動要因)を設定し、各パラメーターによる影響度を計測します。最も影響のあるパラメーターから順に調整することでより効率的に最適化を行うことができます。影響度の高いパラメーターのノウハウがあれば開発工数の削減につながります。

7. ABC分析
   
   
   複数の事象にランクをつけて管理する分析手法の1つ。例えばアイテム販売数の累積比率を算出し70～80%付近までをAランク(主力商品)、95%付近までをBランク(準主力商品)、95%～100%付近をCランク(非主力商品)とすると、それぞれの特性に応じた最適化を行うことができます。またこの表によると全体の20%の商品(アイテムAとアイテムB)が売上の80%を占めるというパレートの法則(全体の数値の大部分は、全体を構成するうちの一部の要素が生み出しているという経験則)があてはまることがわかります。このことを事前に予測し最適化の対象を選択・集中するとさらに効果的です。

まとめ

今回の記事ではコンテンツのブラッシュアップ・最適化に有効ないくつかのフレームワークや考え方をご紹介しました。最適化の作業は一見難しそうですが、細かいレベルに分解すると全体の作業工程が明らかになり開発フローの中に取り入れることができると思います。本記事で紹介したフレームワークを活かしてコンテンツのブラッシュアップに役立てていただければと思います。
次の内容も合わせてご覧ください。

• Flash Player/Adobe AIRでのメモリリーク対策まとめ (Flash Builder/Scout編)
• 参考図書：問題発見プロフェッショナル「構想力と分析力」

※Icons by dryicons

The post コンテンツブラッシュアップのための最適化手法をマスターしよう！ appeared first on ICS LAB.

こんにちは、ICSの鈴木です。

小規模なゲームコンテンツやキャンペーンサイトを短期間で作る際、ゲームのログデータや設定ファイルなどのデータをオンライン上で管理したいことがあると思います。データベースやデータを書き込むサーバーを用意する手間を省きたい、そんなときに便利なライブラリを作成しましたので紹介します。Google Apps ScriptとFlashを通信させるまでの下準備のチュートリアルも兼ねていますので、Google Apps Scriptに触れたことが無い方はぜひ参考にしていただければと思います。

GASTの紹介

Googleスプレッドシートへデータの入出力ができるActionScript3.0のライブラリです。実際の通信はGoogleスプレッドシート上にGoogle Apps Scriptを設置することで行います。

• orangesuzuki/Gast (ライブラリとテストプロジェクト)
• ライブラリのAPI (データの書き込み、データの取得)

GASTの機能と特徴

1. スプレッドシートへのデータの書込み
   ・予めシートに定義した項目名をキーとして任意の文字列を追加する機能
2. スプレッドシートからのデータの取得
   ・JSON形式で出力
   ・現状は指定した任意の1行の取得にのみ対応
3. データ書込みの際、ログデータとして便利なユーザー情報を自動的に追加 (下記のデータが追加)

• date：日付
• OS：OSとバージョン
• browser：ブラウザ名とバージョン
• flashplayer：Flash Playerのバージョン
• isDebugger：デバッグプレイヤーかどうか
• lang：使用言語
• cpu：CPUのタイプ
• totalMemory：使用メモリ量(KB)
• resX：ディスプレイサイズ幅(px)
• resY：ディスプレイサイズ高さ(px)
• stageW：ステージ幅(px)
• stageH：ステージ高さ(px)
• dpi：解像度

GASTの使い方

1. Googleスプレッドシートの作成とGoogle Apps Scriptの作成

まず始めにGoogleスプレッドシートの作成とGoogle Apps Scriptの下準備を行います。事前にGitHubからライブラリ一式をチェックアウトいただくか、適宜必要ファイルを参照してくださいませ。

必要なGoogle Apps Scriptファイル (ライブラリ内 apps-scriptフォルダ以下)

• main.gs
• util.gs
• test.gs

Googleドキュメント上にスプレッドシートを作成、タブ名を「s0」(任意の英数字)に変更後、「ツール」→「スクリプトエディター」をクリックして、スクリプトエディターウィンドウを開きます。

次に「Google Apps Scriptファイル」を作成します。「ファイル」→「新規作成」→「スクリプトファイル」をクリック、GASTライブラリに必要なスクリプトをコピー&ペーストしていきます。

• main.gs
• util.gs
• test.gs

スクリプトの初期設定を行います。main.gs のスクリプト中にあるシートIDを設定します。例えば、スプレッドシートがこのようなURLだった場合、https://docs.google.com/spreadsheets/d/XXXXX/edit#gid=0　「XXXXX」の部分がシートIDになります。ここまででGoogleスプレッドシートの作成とGoogle Apps Scriptの下準備が完了しました。

2. Googleスプレッドシート上でのデータ追加のテスト

Flashから接続する前に、Googleスプレッドシート上で通信テストを行います。最初にデータの追加テストをしてみましょう。

test.gs を開き、関数選択メニューから「appendTest」をクリック。

アプリ承認ウィンドウが開くので「承認する」をクリック。

承認完了後、再生ボタンでスクリプトを実行。(appendTest関数が実行されます。)

シートに戻ると「none」という文字列が追加されていると思います。(※これはライブラリの想定通りの動作です)

1行目に図のような「項目名」を設定して再度スクリプトを実行してみましょう。

正しく設定できていれば、上図のような結果となります。今回用意したappendTest関数はシート上にある項目名の箇所にテスト用のデータを追加する関数です。(シート上に設定した項目名を「キー」としてデータを追加できる機能がライブラリのメイン機能であるためそのテストを行いました。)

スプレッドシートなのでグラフも作成でき、自動的に更新されます。

3. Googleスプレッドシート上でのデータ取得のテスト

今度はデータを取得するテストを行います。

test.gs を開き、関数選択メニューから「fetchTest」をクリック。

ログウィンドウを開き、スプレッドシートから取得したデータが出力されれば成功です。ここまでで、Googleスプレッドシート上でのGoogle Apps Scriptを用いてデータの追加と取得までを行いました。

4. Webアプリケーションとして公開する

FlashからGoogleスプレッドシートにアクセスするには、スクリプトをWebアプリケーションとして公開する必要があります。

「公開」→「ウェブアプリケーションとして導入」をクリック。

「アプリケーションにアクセスできるユーザー」に全員(匿名ユーザーを含む)を選択。

成功するとウェブアプリケーションのURLが発行されますので、このURLをコピーします。これにより外部アプリケーションからGoogle Apps Scriptを通して、スプレッドシートを操作することができます。

5. Flashからのデータ入出力テスト

最後にFlashからの通信テストになります。GitHubにサンプルプロジェクトをコミットしていますのでご利用ください。

1. Flash Builderで必要なプロジェクトをインポートします。GastTest(テスト用プロジェクト)、GAST(ライブラリ本体)。さらにGastTestへGASTライブラリのパスを通します。
2. GastTestプロジェクトでGastTestクラスを開き、初期設定を行います。url に先ほど取得したウェブアプリケーションのURLを設定します。defaultSheet にシート名を設定します。
3. GastTestを実行し、「データの追加」「データの取得」のテストを行います。

以上でFlashからのデータの追加・取得のテストが終了です。

まとめ

今回のライブラリは、ゲームのモックを作る際のプレイデータの保存と取り出し(リプレイ)のために作成しました。デモプレイ時にプレイデータを保存しておくと、レベルデザインに反映したりバグを見つけやすくすることができます。開発時のクラッシュレポートツールとしても利用できます。(※アプリの本公開の際は専用のサーバーまたはサービス等を利用することをお勧めします。)

Googleスプレッドシートを利用するメリットは、データベースやサーバーサイドモジュールを準備する必要がない点にあります。ただ現状では残念ながら応答が2〜3秒かかってしまい、リアルタイム性を求める場合にはおすすめできません。その場合は中間地点としてサーバーを用意してデータをキャッシュさせるなどの対応が必要でしょう。

コンテンツ制作にGoogleスプレッドシートを利用されている方は多いと思います。今回のような「データの置き場」にも活用できますのでぜひお試しください。

参考サイト

• Apps Script | Google Developers

The post Googleスプレッドシートと通信できるActionScript3.0のライブラリ「GAST」を公開 appeared first on ICS LAB.

どうもこんにちは、ICSの鈴木です。普段はエフェクト作成やアニメーション演出作成、ゲーム開発などの仕事をしています。

先月(7月15日)にバージョン1.0が公開され、同日開催された第1回ゲームエフェクト勉強会(株式会社さくらソフト主催。参加者108名)でも話題になった、エフェクトツール「Effekseer」(エフェクシアー)を使ったエフェクトの作成方法を紹介します。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。

今回使うエフェクトツール 「Effekseer」

Effekseerは簡単に綺麗なビジュアルエフェクトを制作できるツールです。
Effekseerはゲーム向けの爆発やヒットエフェクトなど様々なエフェクトを制作できるフリーでオープンソースなツールです。 制作したエフェクトは2Dのアニメーションとして出力したり、3Dのエフェクトとしてゲームに組み込んで再生できます。
ランタイムを組み込むことでDirectXやOpenGLを用いたC++のゲームでエフェクトを再生できます。 それだけでなく、UnityPackageによりUnityでも再生できます。 また、Windowsだけでなく、Mac OS XやLinux、iOS、Android、Emscriptenといった様々な環境に対応しています。

エフェクト制作ツール「Effekseer」

• Effekseerのダウンロード
  ※公式サイトから「Effekseer 1.00」をダウンロードします。ツールの対応OSはWindowsのみ。現在Macは未対応のようです。
• Effekseerの採用実績
  現在様々なゲームでの採用実績があります。

Effekseerを使ったエフェクト制作の流れ

こちらはEffekseerのエディターの画面です。エフェクトの調整をするためのインターフェースが複数並んでいますが、おおよそ次の手順でエフェクトを作成していきます。

1. ノードツリーでパーティクルノードを作成する (※後に解説する各パーツのそれぞれが1ノードとなります。)
2. 位置・角度・大きさ・移動速度などを設定する。
3. 発生タイミング・生存時間などを設定する。
4. テクスチャーや色、ブレンドモードなどを設定する。
5. ビュワーで動きをチェックしながらパラメータの調整をする。 (2,3,4の操作をする。)
6. Unityなどのランタイムに読み込む場合は、エディターから「標準形式(.efk)」に書き出す。
7. Effekseerから直接スプライトシート画像に出力したり、GIFアニメーションや連番画像に出力することもできます。

スプライトシート画像出力を使って、HTML5 CanvasやWebGLの表現作成に利用してもいいでしょう。具体例な操作については、公式のチュートリアルとリファレンスありますので、そちらも合わせてご覧ください。

今回のお題：UVスクロールアニメーションによるマグマとフレアエフェクト

エフェクトのコンセプト

あなたは魔王を倒すために冒険をする世界の勇者です。ついにボスキャラとの対戦まで辿り着きました。ボスが必殺技を繰り出そうと周りのエネルギーを集め始めると、エネルギーは勢い良く一箇所に引き寄せられ、強大なマグマのパワーとなって燃え盛ります。マグマからは熱気(フレア)があふれ怪しい光を放っています…(続く)

そんなシーンで使われるエフェクトをイメージしました。マグマの熱気(フレア)をあえて青白い炎とすることで非日常の魔法っぽさを演出してみました。アニメーションやエフェクトを作るとき、コンセプトを考えることはとても楽しい作業です。

技術解説：UVスクロールアニメーション

エフェクトと3Dレンダリング

UVスクロールアニメーションの解説をする前に、エフェクトと3Dレンダリングの関係について触れておきます。エフェクトは一般的には3Dレンダリングによって描画されています。なぜかというと、

1. 大量にエフェクトを描画してもパフォーマンスが落ちないようにするため。(3DレンダリングはGPUを使って描画するため。)
2. 実際のゲームでは、エフェクト以外にも画面にキャラクターや背景を表示したり、物理演算などの処理をするため、エフェクトの処理はなるべく負荷のかからないようにしたいため。

このようにエフェクトと3Dレンダリングには密接な関係があります。続いて3Dレンダリングの仕組みを見て行きましょう。

3Dレンダリングの仕組み

詳しく解説するととても奥が深いので、今回必要になる大事な部分だけにしぼってみていきましょう。画面に3Dモデルを表示するためには、必要な3つの要素は以下の3つです。

1. 頂点データ：どんな形状をしているか。3Dモデルの各頂点の座標のデータです。
2. テクスチャー画像：どんな模様をしているか。一般的には画像ファイルのことをさします。
3. UVデータ(UV座標)：どの模様を3Dモデルのどの部分に描画するか。各頂点の座標と、テクスチャー画像上の位置(UV座標)がペアになったデータです。

UVスクロールアニメーションとは？

3Dレンダリングの要素の1つとして、「UVデータ」という要素が出てきました。このUV座標を動かすことによって、3Dモデルの模様を変化させるテクニックをUVスクロールアニメーションといいます。(「UVスクロール」「UVアニメーション」「UV流し」などということもあります)

UV座標のVの位置(縦位置)を動かすと縦方向にアニメーションされます。(左図)
UV座標のUの位置(横位置)を動かすと横方向にアニメーションされます。(右図)
 

リング(円盤型のオブジェクト)にUVスクロールアニメーションを適用したところ。(左図)
さらにテクスチャーを変更するとゆらめく光のようなエフェクトができあがります。(右図) 今回はこのテクニックを多用しています。
 

UVスクロールアニメーションの仕組みをつかんでもらえましたか？　Effekseerを使えば、簡単にこのテクニックを使うことができます。

やってみよう：デモエフェクトの作成

デモエフェクトの構成

今回のエフェクトは大きく4つのパーツから成り立っています。今回のデモエフェクトのファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

デモエフェクトのダウンロード

• サンプルファイル一式 (ZIP形式)
• GitHub（ics-creative/150820_effect_samples）

制作の流れ

各パーツ毎に制作の流れを解説していきます。

1. スパークの作成 (パーティクルを利用)
2. フレアの作成 (リング型モデルとUVスクロールアニメーションを利用)
3. うねる光の作成 (3DモデルとUVスクロールアニメーションを利用)
4. マグマの作成 (3DモデルとUVスクロールアニメーションを利用)
   ※輪郭グローと背景グローについてはサンプルファイルを直接ご覧くださいませ。

Step1：スパークの作成

1. パーティクルのテクスチャーに[もみじ型の形状]を利用し、動きの勢いを演出します。
2. 仮想の球の表面上にパーティクルをランダムに配置します。
   ※Y軸固定のビルボードとすると、球の中心に角度が揃うようになります。
3. [引力]機能を利用して中央に集まる動きを表現します。

Step2：フレアの作成

1. After Effects CCを使ってフラクタルノイズテクスチャーを作成します。
   ※After Effects CCは一般的には動画を作成するソフトウェアですが、今回は静止画のテクスチャー画像を作成するために使っています。
2. リング状のオブジェクトにフラクタルテクスチャーを適用します。
3. テクスチャーのUVスクロールアニメーションを適用することで炎のゆらめきを表現します。
4. 複数のリングをランダムな角度で配置して、もやもや感を表現します。

Step3：うねる光の作成

1. 3Dモデルリングソフトウェア(※1)を使って球の3Dモデルを作成。球にフラクタルテクスチャーを適用し、球体の見え方を確認します。ここではStep2で使ったテクスチャーをそのまま再利用しています。
2. メタセコイアの標準形式である mqoファイルをmqoToEffekseerModelConverter.exeを使ってEffekseer用モデルファイル(.efkmodel)に変換します。
3. Effekseerに3Dモデルをインポートし、テクスチャーのUVスクロールアニメーションを適用します。
4. 同じ球体を2つずらして配置し、スクロールの速度と方向をずらすことで表面のうねりを表現します。
5. 描画のカリングを[両面表示]、ブレンドモードを[加算]とすることで、光が重なった部分にメタボール的な表現(※2)を演出できます。
   ※1. Metasequoia(メタセコイア)を利用。
   ※2. 複数の物体の重なったときにお互いが引き合うようにくっつき、滑らかなに繋がること。

Step4：マグマの作成

1. After Effects CCを使って燃え盛るマグマのフラクタルテクスチャーを作成します。
2. Step3の流体エフェクトで使った球体の3Dモデルを複製し、マグマのフラクタルテクスチャーを適用します。
3. UVスクロールアニメーションを適用し、動きを調整します。ここではUVの動きと回転の動きを組み合わせています。

おわりに

今回、EffekseerでUVスクロールアニメーションの手法を用いて様々なエフェクトパーツを作りました。UVスクロールアニメーションは、簡単なステップで目を引く演出効果が得られるため、エフェクトの定番技として様々なゲームに利用されています。水面の揺らめきを表現する際によく使われるStep4のエフェクトが個人的には好みです。エフェクトツール「Effekseer」が気になった方は、アニメーションや演出力UPのきっかけとしてチャレンジしてみてはいかがでしょうか？　今後、ICS LABにてエフェクトや演出作成の記事を連載していく予定ですので、ぜひチェックしていただけると嬉しいです。

おまけ：Unityとの連携

今回のエフェクトはEffekseer上で作成し、Unityにインポートをしています。Unityへの読み込み方法はいたってシンプルです。公式サイトにUnityとの連携方法が記載されていますので合わせてご覧ください。

※Unityにインポートして再生したところ

GIFアニメ―ションのキャプチャ

Unityの画面をキャプチャーしてGIFアニメーションにする際、TweetMediaというプラグインを使用しました。制作したエフェクトをTwitterなどで使いたいときに大変便利なのでおすすめです。(Effekseerからも直接GIFアニメーションに出力できます。)

参考サイト

• 公式サイト：エフェクト制作ツール「Effekseer」
• 公式ドキュメント：Effekseer Help
• エフェクトツール Effekseerの最近事情2014

The post エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成 appeared first on ICS LAB.

エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第2弾です。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。前回のエフェクトと同様に、作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は前回の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。

今回のお題：リング描画を使った乱れ斬りエフェクト

エフェクトのコンセプト

魔王との決戦の舞台、勇者はついに必殺「乱れ斬り」を発動、
「ズバッ、ズバババババババババッ！」「ジャキーン、バチバチバチバチ(火花)」
炎属性の剣で膨大なダメージを与えることができる必殺技で魔王はあっさりとやられてしまい細かい紙切れとなって空中に散らばった。
「ひら、ひらひらひらひら」…(続く)

※擬音語は演出のコンセプトや動きのニュアンスを人と共有する際に便利だったり、制作中もその擬音語のリズムに合わせて作ることで効率よく演出を制作できます。

やってみよう：デモエフェクトの作成

エフェクトの構成図です。今回は大きく6つのパーツから成り立っています。サンプルファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

Step3：炎 (剣の軌跡)の作成

1. [リング描画機能]を使って扇型のポリゴンを作成します。
2. 作成したポリゴンに次に作る炎のテクスチャーを設定します。
3. After Effects CCを使って炎のテクスチャーを作成します。今回のエフェクトで一番肝となる箇所です。Effekseer上で動作をチェックしながら、最終的にはPhotoshopを使って炎に見えるように細部を調整します。
4. 炎が軌道上を移動する動きは、[UVスクロールアニメーション]を使って実現します。

Step6：乱れ斬りモーションの作成

1. 乱れ斬り(無数の攻撃)の動きを作成します。Step5で作成した[SwordContainer]ノードを1パーティクルとして複数個発生させます。回転角度、生成するタイミングをずらし、20個のパーティクルを発生させ連打の動きを実現しています。
2. Step3の火花エフェクトで設定した回転への影響をなしのおかげで剣モーションはランダムな角度で動きつつも、火花は現実世界のように画面下方向に落下する動きを再現できます。動きのリアリティーを追求するうえでとても重要な設定です。

おわりに

アクションゲームでよく登場する剣のモーションエフェクトを作成しました。エフェクト作成当初は1つの剣モーションの予定だったのですが、大量に発生させてみたところカッコイイと思ってしまったため、急遽「乱れ斬りエフェクト」を作成するという流れになりました。制作途中でも柔軟に方針を変更できるところはEffekseerのおすすめポイントです。次回もエフェクト作成や演出作成の記事を投稿する予定ですのでぜひお楽しみに。

Twitter投稿用GIFアニメです。ツイートする際にぜひご利用ください。

The post エフェクト作成入門講座 Effekseer編 リング描画を使った乱れ斬りエフェクトの作成 appeared first on ICS LAB.

エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第3弾です。普段エフェクト作成やゲーム開発をしない方も、本記事をきっかけにエフェクト作成に興味をもってもらえたら嬉しいです。前回のエフェクトと同様に、作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。

今回のお題：Fカーブを使った吹雪エフェクト

やってみよう：吹雪エフェクトの作成

エフェクトの構成図です。今回は大きく5つのパーツから成り立っています。サンプルファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

Step1：吹雪の軌跡(A)を作成

まず「軌跡描画機能」を用いて吹雪の軌跡を作成していきます。軌跡にバリエーションを出すための空のノード「variation」を作成後、子ノードとして軌跡の各頂点を設定するためのノード「move_curve」を作成します。この「move_curve」に対して軌跡描画を行います。
※「軌跡描画機能」については第2弾の記事「エフェクト作成入門講座 Effekseer編 リング描画を使った乱れ斬りエフェクトの作成」でも解説していますので合わせてご覧ください。

次に今回のメインテーマである「Fカーブ」機能を用いて、軌跡を描くための曲線を作成していきます。「Fカーブ」(ファンクションカーブ)とは、アニメーションさせるパラメーターをベジェ曲線などを用いて視覚的に操作する機能のことです。Flash Professionalのような直感的な操作でアニメーションを編集できます。さらにEffekseerでは、アニメーションを再生中に「Fカーブ」のグラフを編集すると、エフェクトのモーション・形状などがリアルタイムに反映されます。

Step2：吹雪のパーティクル(A)を作成

軌跡ノード「move_curve」に子ノード「random」を追加後、さらに位置をランダムに設定することで軌跡上にパーティクルが配置される効果を得ることができます。軌跡を作成した後、子ノードを作成するテクニックは覚えておくと色んな所で使えるでしょう。ノードエディターの特徴的な動作の1つです。

ランダム加減の設定です。「位置」に対して「加速度」を設定していないのは、パーティクルがバラバラになりすぎて煩雑になり、結果的によくわからないエフェクトになってしまうためです。「拡大率」にバリエーションを持たせ、新雪のパウダーのような雰囲気を演出します。ここまででこのようなアニメーションが作成できます。

参考動画

• 『アナと雪の女王 MovieNEX』レット・イット・ゴー ～ありのままで～/エルサ（松たか子）＜日本語歌詞付 Ver.＞

エフェクト作成入門講座 Effekseer編 Fカーブを使った吹雪エフェクトの作成はICS MEDIAで公開された投稿です。

リアルタイムパーティクルエフェクトミドルウェア「PopcornFx」(ポップコーン FX)を使ったエフェクト作成の入門講座第1弾です。公式サンプルをお題にPopcornFxの持つパワフルな機能に触れながら、エフェクト作成に役立つテクニックを紹介します。WebGLやシェーダーを使ったVFX作成にも役に立つと思いますのでぜひご参考ください。

PopcornFxとは？

パリとモントリオールに拠点を置くPersistant Studios社が提供するリアルタイム3Dグラフィックスのソフトウェアです。エフェクトエディター(Windowsのみ対応)、マルチプラットフォーム対応のランタイムSDK(C++)、Unity, Unreal Engineのプラグインから構成されます。エディター自体は無料で利用することができます。ランタイムSDK、プラグインは有料となっています。
※対応プラットフォームは、Xbox One, PS4, Xbox 360, PS3, WiiU, PSVita, Windows PC, Mac, Linux, Android, iOSなど、多岐に渡ります。

ICS MEDIAではいくつかのエフェクトエディターを紹介してきましたが、それらと比較した際の大きな特徴は、以下の3つです。

1. スクリプトで制御可能なパーティクルエディター：
   GLSL風の独自言語「popcorn-script」で動きやビジュアルを設定することにより、数十万規模のパーティクルエフェクトでもパフォーマンスを落とすことなく作成できます。
2. 多様な物理運動のサポート：
   基本的な物理運動に加え、3Dモデルとの衝突検知、フロッキングアルゴリズム(魚や鳥などの群れの動きをAIを使って制御するアルゴリズム)を使った群衆の動きを設定できます。
3. 豊富なサンプリング機能：
   サンプリングとは、特定の値をもつ集合体からある1つの値を選択することを指します。例えば直方体や3Dモデル空間内の点から値を抽出したり(サンプラーシェイプ)、2Dテクスチャー上の特定の色からパーティクルを発生させたり(テクスチャーサンプラー)、3Dタービュランスノイズを使った流体表現などを作成することができます。

GUIとスクリプトを組み合わせて構築していくスタイルは、プログラム志向のアーティスト向きであり、シェーダーの学習としても実用的でしょう。
※ICS MEDIAでのエフェクトエディター紹介記事は記事最後にある参考サイトに掲載しています。

花火エフェクト

本記事では公式サンプルを元に重要と思われる箇所にしぼってピンポイントで解説していきます。PopcornFxを使ったエフェクト作成の流れをつかんでもらえればと思います。
※今回の花火エフェクトのパーティクル数は10万パーティクル前後です。

今回紹介するテクニック

1. パーティクルの発生と移動
2. 尺玉から流れる火花(キラキラスパーク)をつけるには？
3. へびの体のようなうねった動きをつけるには？
4. 尺玉が消えると同時に花火を爆発させるには？

打ち上がる尺玉：パーティクルの発生と移動

尺玉を1つのパーティクルとみなし、3D空間上に発生位置と移動方向(速度)を決めると、尺玉を打ち上げることができます。この方法は多くのパーティクルエディターでも同様の手法です。

発生位置は直方体のシェイプを3D空間上に定義し、そのシェイプ内の位置をサンプリング(ランダムに抽出)するという手法でスクリプトを記述します。移動速度(移動量)も同じような手法です。半球のシェイプを3D空間上に定義し、原点からその空間内へのベクトルをサンプリングすることで移動量を定義します。スクリプト定義は以下のようになっています。
※スクリプトの詳しい解説は省略します。

Position = StartPosition.samplePosition();
Velocity = StartVelocity.samplePosition() * height * 0.7;

このようにシェイプやメッシュを使ったビジュアルエディターとスクリプトを組み合わせてエフェクトを構築できる点がPopcornFxの大きな特徴の1つです。

尺玉から流れる火花(キラキラスパーク)をつけるには？

尺玉のパーティクルに合わせて「火花」と「煙」を追加してあげるとグっと本物の花火っぽくなってきます。尺玉のノードに「Spawner」と呼ばれるノードを追加します。こうすることで、流れ星から舞い散る星屑のような動きを再現できます。PopcornFxでも、ノードに親子構造を作ることで様々なビジュアルを作り出すことができます。VFXでの親子ノードは鉄板テクニックですね。

へびの体のようなうねった動きをつけるには？

尺玉から流れ落ちる火花は蛇行しながら空中に散っていくとリアリティーが出てきます。ここで登場するのが、タービュランスノイズを使った動きの定義です。

タービュランスノイズとは？

煙や炎のような流体の動きを表現する際によく使われるノイズ関数です。3DCGの世界では、山々を自動生成したり、テクスチャーの模様をコードで描く際にも利用されています。関数をコードで用意しておくと、ランダムな値を必要なときに好きなだけ生成できるメリットがあります。ノイズの実装方法によって様々なノイズ模様が展開でき、とても奥の深い世界です。

スクリプトの解説

float3    velDistort = 5.0 * Turb.samplePotential(float3(spawner.LifeRatio * 3, scene.Time * 2, 0));
Velocity = velDistort;

詳細な解説は省きますが、大雑把に解説するとこのような流れです。

1. Turb.samplePotential(float3 location)というコードでノイズ値(3次元ベクトル)を取得できます。引数には3次元ベクトルが必要です。
2. 引数のXにパーティクルの年齢(生まれてから消去するまでを0～1としたときの現在時間)、Yにエフェクトシーンの現在時間、Zに0を代入して、タービュランスノイズ関数から3次元座標を取得
3. 取得したノイズ座標を元に係数をかけて速度を決定

タービュランスノイズのパラメーターによる動きの比較

ノイズを生成するパラメーターによる比較です。パラメーターを変更すると動きに変化が出ることがわかります。

• 左(1つ目)：デフォルトのサンプルの状態
• 中央(2つ目)：ノイズの強さを5倍にした状態。横ぶれする回数は変わらず、振幅が強くなり荒々しさが強調されます。
• 右(3つ目)：ノイズのスケールを2倍にした状態。横ぶれする回数が減り、規則性が強調され波のような動きになります。

尺玉が消えると同時に花火を爆発させるには？

PopcornFxには「パーティクルイベント」という概念が存在します。各パーティクルノードの生成、消失、メッシュなどとの衝突イベントを取得することができます。

1. ノードの生成 (OnSpawn)
2. ノードの消失 (OnDeath)
3. ノードの衝突 (OnCollide)

今回のサンプルでは「ノードの消失イベント」を駆使することで、尺玉の消失と同時に花火本体を爆発させるといった挙動を生み出しています。このようなインタラクティブなイベントを定義できることも、パワフルなエフェクトを生み出せる要因となっています。

1. シーン1：尺玉が打ち上がり、頂点まで達した所でパーティクルが消え「消失イベント」が発動します。
2. シーン2：尺玉が消えたポイントから放射状に花火が放出され、移動し終わったところで次の「消失イベント」が発動します。
3. シーン3：円周上の各ポイントから余韻用の流し花火が発生して終了です。

終わりに

PopcornFxの高機能な物理エンジン、豊富なサンプリング機能とスクリプトを組み合わせることで、ハイエンドなVFXを作り出すことができるでしょう。スクリプトと聞くとためらってしまう人もいるかもしれませんが、公式サンプルが充実しているので効率よく学習を進められると思います。PopcornFxにはサウンドと連携したビジュアライザー機能などもあり、リアルタイムのデモ作成ツールとしても用途が広がっています。次回もエフェクト作成や演出作成の記事を投稿する予定ですのでぜひお楽しみに。
※Google+の「エフェクトミドルウェアコミュニティ」でもPopcornFXの話題を取り上げていますので気になる方はぜひご参加ください。

参考サイト

• 公式サイト：PopcornFX | Realtime particle FX solution
• 公式ドキュメント：Popcorn FX Wiki
• 公式YouTubeチャンネル・チュートリアル：Persistant – PopcornFX
• Sparticle徹底解説。パーティクルエフェクトを作ろう！

エフェクト作成入門講座 (バックナンバー)

• Effekseer編 UVスクロールを使ったマグマエフェクトの作成
• Effekseer編 リング描画を使った乱れ斬りエフェクトの作成
• Effekseer編 Fカーブを使った吹雪エフェクトの作成

ヴィジュアルプログラマー必見。PopcornFxによる花火エフェクトの作成はICS MEDIAで公開された投稿です。

エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第4弾です。今回はUVスクロールを使ったロゴアニメーションを取り上げます。作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。

今回のお題：UVスクロールを使ったロゴアニメーション

やってみよう：ロゴアニメーションの作成

エフェクトの構成図です。大きく3つのパーツから成り立っています。サンプルファイルをダウンロードして、記事と照らし合わせながら進めることができます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

今回紹介するテクニック

1. UVスクロールによる文字の変更とアニメーションの仕組み
2. スプライトシート画像を使って素材から文字を切り出す
3. Fカーブを使ったジャンプモーションの作成
4. UVスクロールを使ったロゴのアニメーションの作成
5. UVスクロールを使ったパーティクルのアニメーションの作成

デモエフェクトのダウンロード

• GitHub（ics-creative/150916_effect_samples）

UVスクロールによる文字の変更とアニメーションの仕組み

今回の肝となるテクニックの解説です。横方向のUVスクロールにより文字の変更を、さらに縦方向のUVスクロールにより文字のアニメーションを適用します。横方向のUVスクロールは時間とともにアニメーションさせることはありませんが、縦方向のUV値は一定時間毎にスクロールさせます。Effekseerではプログラムを一切書くこと無くこのようなUVスクロールの設定が可能です。

スプライトシート画像を使って素材から文字を切り出す

サンプルエフェクトでは「LEVEL UP!」というロゴをアニメーションさせています。今回のエフェクトではロゴを1文字ずつ個別にアニメーションさせたいので、1文字に対して1つのパーティクルノードを作成していきます。ここで上の図にあるようなロゴの文字を均等に配置したスプライトシート画像を作成し、テクスチャーに設定していきます。文字毎にテクスチャーのUV座標位置を設定することで、文字を変更することができます。この段階ではUV座標の数値をアニメーションさせることはしません。
※スプライトシート画像の作成はPhotoshopにて行います。

ロゴの文字すべてを個別の画像として作成する方法もありますが、あえて個別の画像にせず1枚のスプライトシート画像を使います。こうすることで素材の作成と管理がシンプルになるメリットと、エフェクト実行時のパフォーマンス最適化のメリットがあります。

Fカーブを使ったジャンプモーションの作成

ロゴのモーションの設定方法です。ロゴがジャンプして登場するモーションは、Fカーブ(ファンクションカーブ)によってパラメータを調整して作成します。ロゴがくるくると横回転するモーションは、回転パラメータのYの値をイージング付きで設定することで作成します。ロゴの1文字の動きを作成した後は、その文字を複製して「LEVEL UP!」の文字を作成していきます。

UVスクロールを使ったロゴのアニメーション

さらに文字の見た目そのものをアニメーションさせていきます。各ロゴに設定していたスプライトシート画像を、各文字毎にアニメーションできるように修正し、その上でUVスクロールを使ってコマアニメーションの要領で設定していきます。

UVスクロールを使った星のパーティクルのアニメーション

ロゴアニメーションのおまけとして、星のパーティクルアニメーションを作成します。ここでもUVスクロールを使い、星の見た目そのものをアニメーションさせています。星の大きさを拡縮させて星がキラキラと瞬く効果を作成しています。

ここでもちょっとしたテクニックをご紹介します。本エフェクト講座でおなじみの親子ノードのテクニックです。親子ノードを作成し、親ノードの位置を画面右から左に動かします。さらに子ノードで星のパーティクルを作成します。ここで大事なポイントは子ノードのパーティクル設定の中で位置への影響=[生成時のみ]とすることです。この設定により、星がその場に留まる動きを生み出すができます。ここぞというときに役立つおすすめのテクニックです。

さらにおまけとして動きのニュアンスが異なる星のアニメーションを追加します。ロゴの文字が上から落ちて着地するタイミングに合わせ星を湧き出すことで高揚感を演出しています。このエフェクトでも親子ノードと位置への影響=[生成時のみ]のテクニックを流用しています。

終わりに

UVスクロールについては、本エフェクト講座の第一弾「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」でもご紹介しましたが、今回のようなタイトルロゴのエフェクトにも利用できます。1つのテクニックで色んな使い道があるということを感じていただけたら嬉しいです。ぜひ本記事のサンプルを改造してオリジナルのエフェクト作りにチャレンジしてみてください。次回もエフェクト作成や演出作成の記事を投稿する予定ですのでお楽しみに。

※Google+の「エフェクトミドルウェアコミュニティ」でもEffekseerの話題を取り上げていますので気になる方はぜひご参加ください。

エフェクト作成入門講座 (バックナンバー)

• Effekseer編 UVスクロールを使ったマグマエフェクトの作成
• Effekseer編 リング描画を使った乱れ斬りエフェクトの作成
• Effekseer編 Fカーブを使った吹雪エフェクトの作成
• PopcornFx編 タービュランスノイズを使った花火エフェクトの作成

エフェクト作成入門講座 Effekseer編 UVスクロールを使ったロゴアニメーションの作成はICS MEDIAで公開された投稿です。

エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第4弾です。今回はゆがみ効果を使ったトランジションエフェクトを取り上げます。作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。

2016年6月7日、Effekseerの公式Twitterから、EffekseerのUnityプラグインがPCとモバイルで歪み効果に対応したとのお知らせがありました。この機会にぜひ本記事も合わせて活用してもらえると嬉しいです。

Effekseer For Unityを更新しました。PCでもモバイルでも歪みに対応しました。　https://t.co/Qe4JlH9eHu

— Effekseer (@Effekseer) 2016年6月6日

今回のお題：ゆがみ効果を使ったトランジションエフェクト

やってみよう：トランジションエフェクトの作成

エフェクトの構成図です。サンプルファイルをダウンロードして、記事と照らし合わせながら進められます。各エフェクトのパラメータ設定値はサンプルファイルを直接ご覧ください。

今回紹介するテクニック

1. ゆがみ効果の仕組みを抑えよう
2. UVスクロールとゆがみ効果の合わせ技は効果絶大！
3. テクスチャーによるゆがみ効果の違いを抑えよう
4. ゆがみ効果でトランジションエフェクトを作成しよう

デモエフェクトのダウンロード

• GitHub（ics-creative/150916_effect_samples）

ゆがみ効果の仕組みを抑えよう

「ゆがむ」というのは具体的にはどういうことなのでしょう？ まずはゆがみ効果の仕組みを解説していきます。上の図はチェック柄の板ポリゴン(エフェクトを適用したいオブジェクト)の前面にグラデーション模様のポリゴン(ゆがみテクスチャー)を配置した図です。テクスチャーにゆがみ効果を適用すると、そのテクスチャーを適用したオブジェクトより背後にあるオブジェクトがゆがんで描画されます。

Effekseerでは、ゆがみ効果を適用するテクスチャー画像の各ピクセルのRGBの値を取得し、その赤(R)と緑(G)の値を個別に使用して、背後にあるオブジェクトのテクスチャーのピクセル位置(UV座標)を移動させています。赤(R)の値で左右にゆがみ、緑(G)の値で上下にゆがみます。RGBの各値は0～255となりますので、中間値である127を境界にして、左右、または上下に移動する(ゆがむ)という仕組みです。これがゆがみの正体です。
※赤(R)の値によるサンプルは省略します。上下左右の方向はカメラの角度、オブジェクトの角度により変化します。

UVスクロールとゆがみ効果の合わせ技は効果絶大！

ゆがみ効果の仕組みはつかんでもらえましたか？ これまで本エフェクト講座で度々登場したUVスクロールと組み合わせると、このゆがみ効果に動きが加わります。勘の良い方はもう想像がついてるかもしれません。下図のようにゆがみ用テクスチャーをUVスクロールさせると、ゆらゆらとしたゆがみエフェクトを作り出せます。

ここまで来ると「これは面白い、使えそう！」と感じてもらえるかなと思います。このようなエフェクトはWebGLのシェーダーを使ったエフェクトでもテクニックの一つとして応用できるでしょう。

テクスチャーによるゆがみ効果の違いを抑えよう

本題のトランジションエフェクトに入る前に少し寄り道してみましょう。ゆがみ用のテクスチャーを変えたり、UVのスケール値を変更すると様々な効果を生み出せます。上の図は、シンプルな円形グラデーションのゆがみテクスチャーを使ってすりガラスエフェクトを作成する工程です。UVのスケール値を変更するテクニックが効果的です。

もう一工夫してみましょう。Effekseerでは複数のゆがみ効果を一緒に使えます。先に作成したすりガラスエフェクトに、新たに円形のゆがみ効果を加えて、UVスクロールを施した例です。全くコードを書くこと無く、このような流体エフェクトを生み出せました。組み合わせ次第でさまざまな効果を作成できるのもゆがみ効果の魅力の1つです。尚、UVスクロールの移動量をそのテクスチャーのサイズを割り切れるように設定すると、下記のようなループ素材を作成できます。

ゆがみ効果でトランジションエフェクトを作成しよう

いよいよトランジションエフェクトを作っていきしょう。まずは上図の左上にあるようなノイズテクスチャーをリング型オブジェクトに適用し、ゆがみ効果を作成します。さらにノイズテクスチャーにUVスクロールを施すと、このような波紋エフェクトができあがります。

下図の左側はリング型オブジェクトの境界部分をぼかしたエフェクト(Effekseerのデフォルト設定)、右側は境界部分をくっきりとさせたエフェクトです。この設定はリング型オブジェクトの頂点のアルファ値を変更することで変化可能です。今回のデモエフェクトでは左側のぼかしたタイプを適用しています。用途に応じて使い分けるとよいでしょう。

波紋エフェクトができたところで、背景をシンプルにフェードインで切り替えるアニメーションと合成させると、トランジションエフェクトの出来上がりです。デモエフェクトでは、六角形型の光のテクスチャーに加算の効果を加えてゆがみ効果をさらに印象強くさせています。

終わりに

今回は「ゆがみ効果」の仕組みと基本的な使い方について解説しました。このようなエフェクトはWebGLやUnityのシェーダーを使っても作成できると思います。実際にコーディングをする前にエフェクトツールであたりを付けると、開発チームで認識を合わせる際に便利だったりと、制作がスムーズに進行すると思います。UVスクロールについては、本エフェクト講座の第一弾「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」でもご紹介していますので合わせてチェックしてみてください。

※Google+の「エフェクトミドルウェアコミュニティ」でもEffekseerの話題を取り上げていますので気になる方はぜひご参加ください。

エフェクト作成入門講座 (バックナンバー)

• Effekseer編 UVスクロールを使ったマグマエフェクトの作成
• Effekseer編 リング描画を使った乱れ斬りエフェクトの作成
• Effekseer編 Fカーブを使った吹雪エフェクトの作成
• PopcornFx編 タービュランスノイズを使った花火エフェクトの作成
• Effekseer編 UVスクロールを使ったロゴアニメーションの作成

エフェクト作成入門講座 Effekseer編 ゆがみ効果を使ったトランジションエフェクトの作成はICS MEDIAで公開された投稿です。

エフェクト作成ツール「Effekseer」(エフェクシアー)を使ったエフェクト作成の入門講座第6弾です。今回はテキストストロークアニメーションの作り方を取り上げます。作成したエフェクトはUnityに読み込んで使用したり、連番画像ファイルに出力することでWebGLやFlash等にも利用できます。「Effekseer」の使い方は第1弾の記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」で解説していますので、あわせてご覧ください。

今回のお題：テキストストロークアニメーション

サンプルファイルをダウンロードして、記事と照らし合わせながら進められます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

今回紹介するテクニック

1. 3Dモデルを使ったパーティクルエフェクト
2. 3Dモデルを使ったテキストストロークアニメーション
3. ネオン風のテキストストロークアニメーション

デモエフェクトのダウンロード

• GitHub（ics-creative/150916_effect_samples）

3Dモデルを使ったパーティクルエフェクト

Effekseerには3Dモデルを使ってパーティクルエフェクトを作る機能があります。今回はその機能を使ったエフェクトを作ってみましょう。まずはEffekseerで3Dモデルを利用する手順を紹介します。

1. 3Dモデル作成：3Dモデリングソフトウェア「Metasequoia（メタセコイア）」で3Dモデルを作成し、.mqo 形式 (Metasequoiaの標準形式)で保存する(またはその他の3Dツールで3Dモデルを作成し、.mqo 形式に変換する)。
2. ファイル変換：mqoファイルをEffekseer公式ツールである「mqoToEffekseerModelConverter.exe」にドラッグ&ドロップして、.efkmodel 形式に変換する。
3. エフェクト作成：Effekseer に3Dモデルファイル(.efkmodel)を読み込んで利用する。

Effekseerに3Dモデルを読み込んだ後は、3Dモデルの頂点の座標情報、面の座標情報を利用したエフェクトを作成できます。上図の左側のエフェクトは3Dモデルの各頂点にパーティクルを発生させた例です。右側のエフェクトは各頂点をリボン描画機能を使ってワイヤーのように結んだ例です。3Dモデルの各頂点からパーティクルを発生させると、このような効果を生み出せます。

サンプルとしてアニメーションを付けてみました。各パーティクルの発生順序をランダムにするか、頂点の並び順(または面の並び順)にするか選ぶと、アニメーションに変化をつけられます。

3Dモデルを使ってエフェクトを作ると面白い効果が得られることを感じてもらえましたか？ 次のステップでテキストストロークアニメーションの作り方を紹介します。勘のいい人はもう作り方がわかってしまったかもしれませんね。

3Dモデルを使ったテキストストロークアニメーション

さて、上の図のエフェクトはどうやって作られたものかわかりますか？ 先ほど出てきた3Dモデルのエフェクトがヒントです。もうわかりましたね。「Happy」というテキストを3Dモデルとして作成し、その3Dモデルに対して先のステップのようにパーティクルエフェクトを適用したというわけです。

先のステップと同じようにアニメーションを付けてみると、驚くほど簡単にテキストストロークアニメーションの出来上がりです。テキストの3Dモデルの頂点を順番にリボンが繋いでいくことで、テキストが描かれる効果が得られます。

描かれるスピードはパーティクルの生成速度で調整できます。最後に演出の例としてネオン風のストロークアニメーションを作成してみましょう。

ネオン風のテキストストロークアニメーション

今回のお題となっているエフェクトの構成図です。既にテキストストロークアニメーションを作成しているので、そのテキストのテクスチャーとして、ネオンテクスチャーを設定し、おまけの演出としてパーティクルを追加したシンプルな構成です。エフェクトの肝となるところを重点的に解説します。

ネオンテクスチャーをUVスクロールさせることで、テキストの色合いを変化させています。わかりやすいサンプルとしてレインボーカラーのテクスチャーを適用したエフェクトがこちらです。

UVスクロールについては、本エフェクト講座の第一弾「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」でもご紹介していますので合わせてチェックしてみてください。
※リボン描画・軌跡描画でのUVスクロールは現在β機能としてGitHub上のEffekseerでのみ使用可能です。

おまけで付いているパーティクルは、テキストの3Dモデルの各頂点の子ノードとして追加したエフェクトです。このような親子構造を設定すると、テキストが描かれると同時にパーティクルを発生させられます。このテクニックは様々な応用が効くでしょう。

終わりに

テキストストロークアニメーションは、After Effects CCやAnimate CCなどのアニメーションソフトを使用しても作成できますが、それらと比較すると今回紹介した作り方は、短時間でラフな動きを作成するのに向いているでしょう。エフェクトツールはゲームのエフェクトだけでなく、デザインコンセプトをビジュアルで伝えたいときにも重宝します。デザインツールの1つとして触れておくと、思わぬところで役に立つと思いますのでぜひチャレンジしてみてください。

※Google+の「エフェクトミドルウェアコミュニティ」でもEffekseerの話題を取り上げていますので気になる方はぜひご参加ください。

エフェクト作成入門講座 (バックナンバー)

• Effekseer編 UVスクロールを使ったマグマエフェクトの作成
• Effekseer編 リング描画を使った乱れ斬りエフェクトの作成
• Effekseer編 Fカーブを使った吹雪エフェクトの作成
• PopcornFx編 タービュランスノイズを使った花火エフェクトの作成
• Effekseer編 UVスクロールを使ったロゴアニメーションの作成
• Effekseer編 ゆがみ効果を使ったトランジションエフェクトの作成

超簡単! Effekseerで作るネオン風テキストストロークアニメーションはICS MEDIAで公開された投稿です。

ICS MEDIAではUnity 5.5 (2016年11月30日リリース)の目玉の一つであるパーティクルシステムの新機能に注目し、新機能をふんだんに使ったエフェクトの作り方を解説します。普段Unityに触れない方でも、エフェクトの作り方を通して3DCG制作やWebGL開発のヒントにしていただければ嬉しいです。

今回のお題：滝の表現

サンプルファイルをダウンロードして、記事と照らし合わせながら進められます。各エフェクトのパラメータ設定値などはサンプルファイルを直接ご覧ください。

今回紹介するテクニック

1. [Trails(軌跡)]モジュールを使ったリボンの表現
2. [Shape(シェイプ)]モジュールを使った滝の表現
3. [Sub Emitters(子要素)]モジュールを使った水しぶきの表現
4. [Noise(ノイズ)]モジュールを使った揺らぎの表現

サンプルファイルのダウンロード

• GitHub（ics-creative/150916_effect_samples）

Trails(軌跡)モジュールを使ったリボンの表現

Unity 5.5で追加された新機能[Trails(軌跡)]モジュールを使うとパーティクルの粒子に軌跡(リボン)を付けられます。

リボンの作り方

例えば噴水の粒子の動きをパーティクルで作った後、[Trails(軌跡)]モジュールを追加すると、粒子の移動曲線に沿ったリボンを簡単に作成できます。

1. まずはヒエラルキーウィンドウでParticle System(パーティクルシステム)を作成します。
2. 次にインスペクターの[Trails(軌跡)]モジュールをONにします。　※この時点でパーティクルに軌跡が追加されます。
3. 最後に[Renderer(レンダラー)]モジュールの[Trail Material(軌跡のマテリアル)]に、お好みのリボンのマテリアルを設定すれば完成です。

リボン作りのヒント

• リボンの長さは[Trails(軌跡)]モジュールの[Lifetime(生存時間)]の値で設定しよう。
• リボンの太さは[Trails(軌跡)]モジュールの[Width over Trail(軌跡の幅)]の値で設定しよう。
• リボンの太さを先細りさせたいときは、[Width over Trail(軌跡の幅)]からパラメーター曲線を調整しよう。ディテールアップにおすすめ。
• リボンの曲線を滑らかにしたいときは、[Trails(軌跡)]モジュールの[Minimun Vertex Distance(最小頂点距離)]の値を小さくしよう。
  ※リボンを構成する頂点の距離が短くなるため
• マテリアルの[Tiling(タイリング)]プロパティを調整して、リボンの模様に変化を付けよう。

Shape(シェイプ)モジュールによる滝の表現

滝の作り方

[Shape(シェイプ)]モジュールを使い、滝に見えるようにパーティクルの放出位置を調整します。 このモジュールを利用すると、球体や立方体、さらには特定のメッシュ形状(3Dモデル)からパーティクルを放出できます。

1. リボンのParticle Systemを選択し、[Shape(シェイプ)]モジュールの[Shape]プロパティを[Edge(エッジ)]に切り替えます。
2. パーティクルが一方向に噴出されるので、角度を調整します。
3. [Renderer(レンダラー)]モジュールで水のマテリアルを設定します。
4. 水マテリアルのShaderを[Particle/Additive(Soft) 加算効果]に設定します。

Sub Emitters(子要素)モジュールを使った水しぶきの表現

リボンを使った滝の動きができたところで、次に水しぶきの表現を追加します。今回は[Sub Emitters(子要素)]モジュールを使ってみましょう。

水しぶきの作り方

リボンの子要素として水しぶきを設定し、滝のところどころで水しぶきが吹き上がる表現を作成します。

1. ヒエラルキーウィンドウでParticle System(パーティクルシステム)を作成します。このパーティクルが水しぶきの一塊(20粒程度のパーティクル)となります。
2. 水しぶきの一塊をイメージしながら動きを調整します。
3. 先ほど作成したリボンのパーティクルを選択し、[Sub Emitters(子要素)]モジュールに水しぶきのパーティクルを設定します。これにより親子関係が設定され、滝の各所から水しぶきが吹き上がる表現となります。

水しぶき作りのヒント

• 粒子の大きさにばらつきを持たせてリアリティを出そう。
• 粒子が移動する動きを早めたいときは、パーティクルシステムの[Simulation Speed(シミュレーションスピード)]の値を上げて調整しよう。
• 粒子が消失する動きは、パーティクルシステムの[Size over Lifetime(生存時のサイズ変化)]モジュールで設定しよう。※透明度を操作するより、大きさを変える方がパフォーマンスにも優しい。

Noise(ノイズ)モジュールを使った揺らぎの表現

[Noise(ノイズ)]モジュールを使うとパーティクルの動きに揺らぎを加えられます。今回はリボンの曲線に揺らぎをつけてみましょう。水独特のなめらかな質感を加えられます。

揺らぎの作り方

揺らぎのつけ方は、[Noise(ノイズ)]モジュールをONにするだけ。いたって簡単です。

1. 作成した滝のParticle Systemを選択し、インスペクターから[Noise(ノイズ)]モジュールをONにします。
2. ノイズの各パラメーターを調整してお好みのノイズを作成します。

揺らぎ作りのヒント

ノイズを加える際、まずは[Strength(強度)]と[Frequency(振動数)]のパラメーターを調整すると良いでしょう。

• 揺らぎの大まかな形状は、[Strength(強度)]パラメーターで調整しよう。
• 揺らぎを細かくしたいときは、[Frequency(振動数)]パラメーターを大きくしよう。
• 揺らぎを特定の方向に絞りたいときは、[Separate Axes(XYZ軸別に調整)]のチェックをONにした後、各軸の値を0にするとその方向へのノイズは適用されません。値を強くするとノイズが強まります。

[Strength(強度)]と[Frequency(振動数)]を変えると様々なノイズを作成できます。

終わりに

「Unity公式サイトのロードマップ」によると、次回アップデート(2017年3月 Unity 5.6)でもパーティクルシステムの改善が予定され、今後の発展が期待できます。
ICS MEDIAではUnityを使ったエフェクト作成の記事を連載していく予定です。ぜひお楽しみに。

参考サイト

• UNITY 5.5がリリースされました！ – Unity Blog

エフェクト作成入門講座 (バックナンバー)

• Effekseer編 UVスクロールを使ったマグマエフェクトの作成
• Effekseer編 リング描画を使った乱れ斬りエフェクトの作成
• Effekseer編 Fカーブを使った吹雪エフェクトの作成
• PopcornFx編 タービュランスノイズを使った花火エフェクトの作成
• Effekseer編 UVスクロールを使ったロゴアニメーションの作成
• Effekseer編 ゆがみ効果を使ったトランジションエフェクトの作成
• Effekseer編 ネオン風テキストストロークアニメーション

Unityエフェクト3分クッキング－滝の表現はICS MEDIAで公開された投稿です。

先月末、Effekseer開発者の方とこんなやりとりが！？

ICS MEDIAを通して度々紹介してきましたエフェクトツール「Effekseer」ですが、2017年5月25日、WebGLに対応したEffekseerForWebGLがリリースされました。今回はEffekseerで作成したエフェクトをJavaScriptライブラリ「Three.js」を使ってWebGLで表示するまでの流れを紹介します。

EffekseerForWebGLのデモ

• デモを別ウインドウで再生する
• ソースコードを確認する

Effekseerでのエフェクト作成をおすすめしたい理由とは？

• 1つのエフェクトソースでマルチプラットフォームに展開できる点。例えばEffekseerはUnityにも対応しているため、WebブラウザとUnityプラットフォームの両方に対応できます (DirectXやOpenGLを用いたアプリケーション、Cocos2d-x、Unreal Engine4、さらにはMMDやSiv3Dにも対応)。Unity用コンテンツをWebに展開する際(逆もまた同様)、Effekseerでエフェクトを作成しておくと作り直しは必要ありません。
• GUIを使ってエフェクトが作成できるため、プログラマーとアーティストの分業ができる点
• ツールがオープンソースで無料
• ツールの動作が軽快なところ
• 公式サイトで150個以上の自由に使えるサンプルがダウンロードでき、エフェクト初心者でもはじめやすい

EffekseerForWebGLの使い方

ウェブページでWebGLとして表示するまでの流れはこんな感じです。

Step1：JSライブラリの読み込み

HTMLでscriptタグを使って、Three.jsとEffekseerForWebGLのJSライブラリを読み込みます。

<script src="three.min.js"></script>
<script src="effekseer.min.js"></script>

Step2：エフェクトファイルの読み込みとThree.jsへの組み込み

JavaScriptとして次のように書きます。ここではEffecseerのエフェクトファイルを読み込む処理を記載しています。

// WebGLRendererの初期化
var renderer = new THREE.WebGLRenderer();

// effekseerの初期化
effekseer.init(renderer.context);

// エフェクトファイルの読み込み
var effect = effekseer.loadEffect("Laser01.efk", function(){
  // 読み込み完了
  // エフェクトファイルの再生
  effekseer.play(effect);
});

Step3:エフェクトのレンダリング

JavaScriptに毎フレーム実行されるループ処理を書きます。EffekseerとThree.jsの3D空間を合わせた後、それぞれのレンダリング処理を行います。「3D空間を合わせる」とは、カメラの位置や画角・ズームなどを合致させる処理になります。

(function renderLoop() {
  requestAnimationFrame( renderLoop );

  // Effekseerの更新
  effekseer.update();

  // Three.jsのレンダリング
  renderer.render(scene, camera);

  // EffekseerをThree.jsの3D空間に合わせる
  effekseer.setProjectionMatrix(camera.projectionMatrix.elements);
  effekseer.setCameraMatrix(camera.matrixWorldInverse.elements);

  // Effekseerのレンダリング
  effekseer.draw();
})();

終わりに

Web3Dコンテンツを作る際、Three.jsを選ぶ方は多いと思います。Three.jsの3D空間へ簡単にエフェクトを組み込むことができるEffekseerForWebGL、使ってみたいと思われた方が多いのではないでしょうか？　現在β版のためEffekseerの一部の機能でうまく動かないところもありますが(3Dモデルを使ったエフェクト等)、パーティクルやUVスクロール、リボンを用いたエフェクトなどGUIツールで作成したエフェクトが動作可能となっています。
Effekseerが気になった方は下記のエフェクト作成入門講座などを参考にしていただき、ぜひチャレンジしてもらえると嬉しく思います。

サンプルファイルのダウンロード

• GitHub（ics-creative/170612_effekseer_webgl）

ライブラリのダウンロード

• GitHub（effekseer/EffekseerForWebGL）
• three.js

エフェクト作成入門講座 (バックナンバー)

• Effekseer編 UVスクロールを使ったマグマエフェクトの作成
• Effekseer編 リング描画を使った乱れ斬りエフェクトの作成
• Effekseer編 Fカーブを使った吹雪エフェクトの作成
• PopcornFx編 タービュランスノイズを使った花火エフェクトの作成
• Effekseer編 UVスクロールを使ったロゴアニメーションの作成
• Effekseer編 ゆがみ効果を使ったトランジションエフェクトの作成
• Effekseer編 ネオン風テキストストロークアニメーション

エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるかはICS MEDIAで公開された投稿です。

Unityアセットストアには、36,000点以上のアセットやツールが販売されていて(※1)、制作効率アップにはかかせない存在となっています。本記事では、アセットストアのなかでも人気が高いノード型シェーダーエディター「Shader Forge」(販売価格 $40)を使ったシェーダーテクニックをご紹介します。直感的な操作で制作を進められ、レスポンスもよく安定していますので筆者おすすめのツールです。

ノード型シェーダーエディターの利点は、シェーダーコードの細かい文法を知らなくてもノードの操作だけでエフェクトが作成できることです。できることが少ない分、エラーでつまづくことも少なくなります。シェーダーの導入として手にとってみると良いでしょう。本記事でご紹介するシェーダーテクニックは、WebGLやその他のゲームエンジンにも応用できますので、ぜひチェックしていただければと思います。
※1 参照元：新しいアセットストアのはじまり – Unity Blog

炎エフェクトのデモ

Shader Forgeノードの全体図

シェーダーの全体図です。小さな四角がノードと呼ばれる最小単位の要素です。一番右にあるMainノードに接続すると、色や透明度などのパラメーターを設定でき、作成したシェーダーをメッシュに割り当てれば反映されます。ノードエディターの編集作業は、このウィンドウ内でノードを作成したり、結合しながら作業をすすめていきます。

さて、図中の点線で囲んだ部分は何を示しているのでしょうか？　これがまさに本記事で解説していく炎エフェクトの各要素です。炎のギザギザを構成する形状ノード、炎のゆらぎを構成する色味ノード、炎の動きを構成する頂点変形ノード、時間変化による調整ノード、そして温度を構成する屈折ノードです。

温度なんて表現できるの？　と思われるでしょう。ある自然現象を3Dシーン上で再現して炎の熱を演出します。次の章で解説していきましょう。
※時間変化による調整ノードは割愛します。

エフェクトの作成方針

炎の形状や色見、動き、温度を下記の手順で表現します。

1. 炎の形状を三角関数で作ります。縦方向のグラデーションと縞模様を合成し、炎のギザギザした形状を作成します。
2. 炎の基本的な色味はグラデーションテクスチャーで準備します。炎の芯と周辺の色味の違いを、ノイズテクスチャーとUVスクロールで表現。前行程で作った炎の形状でマスクして炎のベースができあがりです。
3. 炎が風にゆらめく様子をメッシュの頂点移動(Vertex Offset)で表現します。色と形だけで炎を表現すると、しばらく見続けると既視感がでてしまいます。ゆらめき要素を加えることで既視感を解消し、その場の空気感を演出して場になじませます。
4. 炎の温度を陽炎現象で演出します。陽炎現象とは、「密度の異なる大気の中で光が屈折し、地上や水上の物体が浮き上がって見えたり、逆さまに見えたりする現象。もやもやとしたゆらめきのこと。」(Wikipedia)のことです。光の屈折表現のため、ノードの屈折パラメーター(Refraction)を利用します。
5. パーティクルを飛ばして火花を演出。上空に飛んでいく火の粉、炎周辺で小さく舞う火の粉の2種類を配置します。ノイズ関数を利用して風と熱の影響でうねうねと舞う様子を演出します。※この部分の解説は割愛します。

炎の形状を三角関数で作る

炎の形状を作成します。炎はどんな形をしているでしょう？　炎といってもローソクの炎、たいまつ、焚火など、種類によって特徴が異なります。炎という漢字が示すように、まずはこのギザギザした形状をシェーダーで作成してみましょう。

UVノードとSinノードを利用したグラデーションの作成

UVノードを使うと、上下方向、左右方向のグラデーションを作成できます。横方向の0～1のグラデーションと、Sinノードをかけあわせると様々な縞模様を生み出せます。ここが大事なポイントです。Sin関数は基本的に-1～1を返します。入力値として0～π(3.14)を与えれば1本のライン(0→1→0というグラデーション)、もっと大きな入力値、例えば0～10πを与えれば、5本の縞模様を描けます(0→1→0→-1→0を5回繰り返し)。三角関数っておもしろいですね。

Multiplyノードによる掛け算とSliderノードによるパラメーター調整

5本の縞模様と1本の縞模様、そして上下のグラデーションをMultiplyノードで掛け算すると、目的の炎の形状となります。掛け算はPhotoshopのレイヤーの乗算をイメージしてみてください。Timeノードを利用して、ギザギザが横に移動する(ゆらめく)表現を加えています。ギザギザの数、半円の太さはSliderノードの値で調整できます。Sliderノードをシェーダーパラメーターに混ぜることで、基本エフェクトを作る行程と、パラメーターを調整する行程にわけられ効率的です。

Powerノードによる鋭利化

Powerノードを利用して、入力値を鋭利にしています。Powerノードの入力値に1以上を与えるとグラデーションを鋭利化、1未満を与えると鈍化できます。シェーダー作成でよく使いますので覚えておくと良いでしょう。
※参考 無数にパーティクルを飛ばすエフェクトはまさにポップコーン！　PopcornFXによるサウンドビジュアライザー CGWORLD.jp

炎のゆらぎをUVスクロールで作成

ICS MEDIAで記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」などで何回かとりあげてきたUVスクロールをここでも利用します。

UVノードをPannerノードに接続するとUVスクロールが作成できます。単純な平行移動に加え、ノイズテクスチャーのRチャンネルGチャンネルを混ぜ合わせることで揺らぎを加えます。炎のゆらぎテクスチャーのUV値にスクロールさせたUVを入力します。この部分は、ゆらぎテクスチャーをノイズテクスチャーで歪めているので、イメージしづらく難しいところだと思います。

炎の形状、炎のゆらぎ、炎グラデーションを合成

ここまでの工程で作成した炎の形状、炎のゆらぎ、炎グラデーションを合成して、まずは炎のベースが完成です。Clampノードで入力値を0～1の値に制限します。予期せぬエラーを防ぎ、3Dシーン上に配置したときに正しく合成できます。

メッシュの頂点移動による炎のゆらめきを表現

MainノードのVertex Offsetに値を入力すると頂点を変形できます。3Dモデルに対して頂点カラーを設定しておき、その頂点カラー値をパラメーターとして頂点の移動量を調整します。メッシュ上ではランダムな頂点カラーを設定していますが、シェーダー上ではカラー値をモノクロに変換して利用します。最初からモノクロを頂点カラーに設定しても問題ないですが、制作を進めるなかで色んな用途に使えるため、ランダムな色に設定しておくと面白いでしょう。Shader Forgeでは数式を設定できるので、数式とノードを併用して編集できます。

屈折効果による陽炎エフェクト

MainノードのRefractionに値を入力するとレンダリング時に背景と合成されゆがみ効果を適用できます。これを使用するためには、透明度を1以下に設定する必要がありますのでご注意を。メッシュの中央部分が最も強くゆがみ効果を得られるように、Opacity値にグラデーションの値を設定します。このシェーダーを設定したマテリアルを炎のメッシュと重ねることで屈折効果を出しています。

終わりに

Shader Forgeで作成したシェーダーは実際にシェーダーコードを確認できます。今回はおおよそ170行程度でした。ノード図で見ると一見複雑に見えますが、コードにすると割りとシンプルなものですね。

Unityのロードマップによると、Unity 2018.1.0でノード型のシェーダーエディター「Shader Graph」が搭載されるようです。Shader ForgeよりもUV操作系、ノイズ系が充実している印象でした。この機会にノード型シェーダーエディターに触れてみてはいかがでしょうか？

サンプルファイルのダウンロード

• GitHub（ics-creative/150916_effect_samples） ※準備中

Unityで炎エフェクトを作成！ 拡張機能Shader Forgeを使いこなすシェーダーテクニックはICS MEDIAで公開された投稿です。

3月19日～23日、カリフォルニア州サンフランシスコでゲーム開発者向けイベント「Game Developers Conference 2018」が開催されました。筆者も現地に赴き、初日から5日間さまざまなセッションを受講してきました。

3月21日のセッション「Realtime VFX: Designing Practical and Efficient Simulation Node Graphs」で、Persistant Studios社によってPopcornFXの次期バージョン最新情報が紹介されました。その内容をダイジェストで紹介します。このセッションではノード編集型の新しいエフェクトエディターや、内部エンジン最適化のこだわりが披露されました。

PopcornFxとは

PopcornFXとはパリとモントリオールに拠点を置くPersistant Studios社が提供するリアルタイム3Dグラフィックスのソフトウェアです。スクリプトで制御可能なパーティクルエディターなどがあり、数十万規模のパーティクルエフェクトでも性能を落とすことなく作成できます。ゲーム開発、映像制作、AR/VR/MR、ライブショーなどで幅広く利用されています。
※ICS MEDIAでも「ヴィジュアルプログラマー必見。PopcornFxによる花火エフェクトの作成」にて取り上げています。

次期バージョンのアイデア

Substance Designer、Houdini、Unreal EngineのBlueprintなど、他社ノード製エディターの編集画面。これらツールからインスピレーションを受けて、PopcornFXでも新しいノード編集型のエフェクトエディターを開発中です。

PopcornFXを単純にノード編集型に置き換えると左図の概念図となります。PopcornFXでは、パーティクルのライフサイクル毎に、下記のフェーズにわけて振る舞いを定義していく必要があり、左図のままだと直感的に制作しづらい。

• Spawn：生成時の処理
• Evolve：毎フレームの処理
• Render：描画の処理

右図のように1つのノードに統合し、より直感的に扱えるように工夫しました。

エフェクト実装例と内部処理

簡単なパーティクルエフェクトの実装例。青が生成時の処理、赤は毎フレーム時の処理。オレンジは描画処理です。

ノードを実行リスト順に縦に並べ、さらにフレーム毎の様子を横軸に置いたイメージ図。2フレーム目以降では、Spawn(初期化処理)が不要のため、Evolve(毎フレームの処理)とRender(描画処理)のみの処理となります。

データをメモリに保持するタイミングを工夫し最適化を施しました。ここでのデータとは、頂点位置や移動速度など、毎フレーム変化するパーティクルの情報を指します。PopcornFXではGPUを利用した演算の高速化をはかっているため、メモリへのアクセスがパフォーマンス最適化の鍵となります。※後に詳しく解説あり

フレーム毎の処理イメージ図。描画処理に移る前に必要な値をメモリに保持します(Store)。

Layer Graph

「Layer Graph」機能により、エフェクトを構成するパーティクルの種別毎にノードをわけて制作できます。ノードの内部実装を意識せずに、高レベルでのエフェクトの構造を可視化する機能です。

少し複雑なエフェクトの実装例。「Layer Graph」を使うと、エフェクトの構造をシンプルに捉えて試行錯誤しやすい。

直線補間と曲線補間

低フレームレート時でも滑らかなパーティクル曲線を描く機能。曲線補間(cubic)、直線補間(linear)を備えます。原理は、毎フレーム時のパーティクル移動開始点、終了点での移動ベクトル(接線)を計算し、低フレームレートでも描画は1回としながら、高フレームレート時と同様の計算処理を行います。エフェクトの品質を大きく向上させる工夫と言えます。

最適化

このようなノードエフェクトをコンパイルしたところ、

330回もの命令処理となりましたが(写真左)、以後解説する最適化処理により、69回に圧縮することができました(写真右)。

コンパイルパイプラインの全体図。以下4つのステージがあります。本稿では詳細な解説を割愛しますが、概要としては下記の処理となります。

1. Event frontend：エフェクトの全体構造(Eventgraph)をチェックするステージ
2. Data frontend：エフェクトの詳細ノード(Datagraph)とスクリプト(Scripts)から、AST(Abstract Syntax Tree)を生成するステージ
3. IR：ASTからIR(中間言語)を生成するステージ。この段階でコンパイラーによりさまざまな最適化が行われます。
4. Backend：IRからネイティブ言語(機械語)に変換するステージ

中間言語の最適化一例。重複したコードを削除しています。「load storage_123」という処理が重複しているため、削除されました。

最適化の結果

4つのエフェクトで最適化前後の命令数の変化を表した図(グラフが小さい方が命令数が少なくパフォーマンスが高い)。オレンジ色のバーが最適化前、緑は命令数最適化、青はメモリ読み書き最適化を表します。いずれも3倍以上の性能向上となっています。

最適化前後でのシミュレーション時間の変化を表した図(グラフが小さい方が高速)。いずれのエフェクトでも命令数最適化によりシミュレーション時間が変化していることがわかります。メモリ読み書き最適化の影響は少ない。

最適化前後でのメモリサイズの変化を表した図(グラフが小さい方がメモリ量が少ない)。メモリ読み書き最適化によりメモリサイズを縮小できることがわかります。

おわりに

リードプログラマーのJulien Bilalte氏(写真右)とプログラマーのRomeo Incardona氏(写真左)にお話を伺いました。Persistant Studiosでは10数名のプログラマーがツール開発に従事されています。今回使われているコンパイル最適化の多くは、一般的なC++コンパイラーで使われている手法とのこと。次期バージョンは2018年中には公開予定だそうです。筆者も新しいエンジンを楽しみにしています。

参考サイト

• 公式サイト：PopcornFX | Realtime particle FX solution
• 無数にパーティクルを飛ばすエフェクトはまさにポップコーン！　PopcornFXによるサウンドビジュアライザー | 特集 | CGWORLD.jp
• ヴィジュアルプログラマー必見。PopcornFxによる花火エフェクトの作成

[GDC2018] リアルタイムパーティクルエフェクトミドルウェア「PopcornFX」は次期バージョンでどう進化するか？はICS MEDIAで公開された投稿です。

8月22(水)～24(金)にパシフィコ横浜で開催されたCEDECにて、ICSが開発に携わっているブラウザゲームの技術について発表しました。この記事では、アイオウプラスよりリリースしているブラウザゲーム「編隊少女 -フォーメーションガールズ-」で採用したWebGL関係の技術を紹介します。

CEDEC（Computer Entertainment Developers Conference）はゲームを中心とするコンピュータエンターテインメントの開発、ビジネス、関連する技術、機器の研究開発などに携わる人々の技術力向上と知識や情報の交流を促進するためのカンファレンスです(公式サイトより)

当日の発表資料は下記リンクからご覧いただけます。

• スライド資料：JavaScriptとWebGLで圧倒的な3D空戦バトルを再現。「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 ～Babylon.jsとBISHAMON WebGL版の合成～

※発表は株式会社アイオウプラス 伊藤 弘樹氏との共同発表

はじめに、「編隊少女 -フォーメーションガールズ-」のゲーム紹介。続いて、米国マイクロソフトが主導するOSSであるWebGLフレームワーク「Babylon.js」と株式会社マッチロック社製エフェクトミドルウェア「BISHAMON WebGL版」についての解説。最後に、2つのWebGLフレームワークを合成する手法について解説しました。

「WebGLによる3D表現手法の習得」を目標にかかげ、Babylon.jsとBISHAMON WebGL版の合成手法を解説しています。

「BISHAMON」は10年以上にわたり、ビデオゲームの分野で実績がある汎用的なリアルタイム3Dによるパーティクル・エフェクトツール＆ミドルウェアです。元々Web用ではないため、そのままではJavaScriptからは利用できません。

そこで今回のプロジェクトでは、Emscriptenという技術により、Web用にコンパイルしたエフェクトSDKを利用し、WebGLプロジェクトにBISHAMONを搭載しました。Babylon.jsとBISHAMONの組み合わせは日本初の事例です。ブラウザゲームへの採用事例として、技術と仕組みについて解説しました。

Emscriptenとは、LLVMのバイトコードのJavaScriptへのコンパイラです。LLVMバイトコードは、たとえばC/C++をClangでコンパイルすることで出力できます。バイトコードをJavaScriptに変換することで、それらをWebブラウザ上で動作させられます。

Babylon.jsとWebGLフレームワーク比較

今回のゲーム開発に、Babylon.jsを採用した理由は主に3つ。

開発元が米国マイクロソフトである

米国マイクロソフトが主導していることもあり、ドキュメントがしっかりと整備されています。

フレームワーク自身がTypeScriptで開発されている

ゲーム開発を進めるなかで、フレームワークに対して修正が必要な場面にしばしば遭遇します。とくにオープンソースプロジェクトでは、機能の修正やプルリクエストを送ることもあるでしょう。その際、フレームワークの言語がTypeScriptであることは、大きなメリットだと考えます。

Unityを使ったシーン書き出しツールがある

Unityでアセットを管理しておけば、今後ブラウザではないプラットフォームにも展開しやすいでしょう。そのため、Unityのエクスポーターを備えるBabylon.jsは、アセットの観点から見てもメリットがあると言えます。

Unity WebGL

当初(2017年8月時点)はUnity WebGLでの開発を第1候補として検討していました。デモを作成したところ、iOS Safariでの動作が不安定でした。

WebGLフレームワークとの比較

three.jsやその他のフレームワークとの比較です。フレームワーク言語、表現力、モバイル対応、アセット管理、価格の面で比較検討しています。

BISHAMON WebGL版の紹介

BISHAMONを採用した理由は下記のとおり。Babylon.jsと同様に、アセットが今後活かせるというのは大きなメリットでしょう。

1. 10年以上の実績があり、ゲームエフェクトを作る上での要素が揃っている
2. 今後、他プラットフォームへ展開する際にアセットを活かせる (※要ライセンス)
3. 習得したエフェクト作成スキルが他のゲーム、プラットフォームで活かせる

WebGLフレームワークの合成

セッションではムービーによる例とともに、合成フローと具体的なコードを紹介しました。WebGLフレームワークを合成する方法は大きく2つの方法が考えられます。

2つの異なるCanvasを単純に重ねる方法

2Dゲームのように、メインとなる描画とエフェクトが完全にわかれている場合には有効な手段でしょう。この場合、メインのグラフィックスとエフェクトは異なる座標空間上に存在することになります。

1つのCanvasのコンテストを共有してレンダリングする方法

3Dゲームの場合は、3Dモデルの奥と手前にレンダリングしたいため、コンテキストを共有し、同一の座標空間上に配置をする必要があります。今回はこの手法を解説しています。

1つのコンテキストを共有し、2つの異なるWebGLフレームワークを合成する全体のフローです。

STEP1 コンテキストの共有

コンテキストとは、WebGLRenderingContextのことを指します。WebGL命令を実行するブラウザのインターフェースであり、このコンテキストを通して描画命令をすることで、画面に3Dポリゴンをレンダリングします。

2つのWebGLフレームワークでこのコンテキストを共有すると、同じ座標空間上へポリゴンをレンダリングできます。

STEP2 座標空間を合わせる

3DCGでの座標空間の解説です。3Dポリゴンを画面に描画する際には、メッシュ(上記の例では立方体)の頂点座標をプロジェクション座標空間に変換します。

このようなコードによりBabylon.js側の座標空間と、BISHAMON側の座標空間を合わせます。

STEP3 エフェクトの位置・スケール・回転を合わせる

Babylon.js側の3Dポリゴン(上記例では戦闘機の位置)とエフェクトの位置・スケール・回転を合わせます。

STEP4. レンダリングとポストエフェクト

レンダリングは下記の3ステップとなります。BISHAMONエフェクトのレンダリング後にポストエフェクトをかけるところがポイントです。

1. シーンのレンダリング (Babylon.jsの3Dポリゴン)
2. エフェクトのレンダリング (BISHAMON)
3. ポストエフェクト(Babylon.jsによるポストエフェクト)

3ステップの具体的なコードです。ここで重要なポイントは下記のコードにより、WebGLステートをリセットできるところです。異なるWebGLフレームワークを合成するためのメソッドとして、Babylon.jsに機能が用意されています。

engine.wipeCaches(true);

BISHAMONエフェクトはBabylon.js側で準備したレンダーターゲットに描画する点がポイントとなります。

context.bindFramebuffer(gl.FRAMEBUFFER, renderTarget.getInternalTexture()._framebuffer);

Babylon.jsを使うことで、ゲーム開発に必要な機能が効率よくそろいました。(物理ベースレンダリング、レンダリングのカスタマイズなど)

また、BISHAMONの導入によりエフェクトの表現力が向上され、ワークフロー面ではデザイナーとエンジニアの分業の促進につながったため、導入メリットは大きいといえるでしょう。

おわりに

CEDEC当日まで空席があるかなと思っていたのですが、大変ありがたいことにセッション開始前から並んでくださる方が多く、正直なところ驚きました。ブラウザゲームでのWebGL導入の熱量が高まってきていると言えるでしょう。

本プロジェクトでWebGL開発をスタートしてから、レンダリング合成をはじめ様々な問題を解決し、その結果得られた知見をCEDECという場で共有できたことは、とても貴重な経験となりました。今後も新しいことに挑戦していきたいと思います。今回の技術について興味がある方、ご意見・ご質問などありましたら、お気軽にお寄せください。

補足

WebGLの基本的な描画フロー

フレームワークを使えば、WebGL命令を知らなくても簡単に3D空間にポリゴンをレンダリングできるでしょう。ただし、WebGLフレームワークを合成したい場合、WebGL命令をコーディングする場面に遭遇します。WebGLによるシンプルなライブラリを作成してみると、その後の開発がスムーズに進みます。またライブラリの設計意図を汲んで、修正するための知識も身に付きますのでオススメです。

WebGL命令の分析・最適化

WebGLの開発では、WebGL命令を分析する必要がでてきます。本プロジェクトでは、Babylon.jsが提供しているSpector.jsを使ってWebGL命令のチェックと最適化を行っています。

CEDEC2018発表資料 「編隊少女 -フォーメーションガールズ-」における3Dレンダリング技術解説 Babylon.jsとBISHAMON WebGL版の合成はICS MEDIAで公開された投稿です。