[ CATEGORY ] RECENT…メインページ・最近の記事一覧

http://www.dango-itimi.com/blog/


ETC ETC Adobe Character Animator: メモリ不足と画質劣化に関して

先日正式版が公開された Adobe Character Animator を早速色々試してみたところ、いくつか問題が見つかりました。メモリ使用量がたいへん多い、という点と、特定の条件で 出力データの画質が劣化してしまう問題です。

多大なメモリ使用量

Adobe Character Animator で作成したシーンは Dynamic Link を介して Premiere 内に配置が可能です。ここで、Adobe Character Animator のシーンの尺が長ければ長いほど PC のメモリ使用量が増加するようです。

タスクマネージャーで観察した所、30分尺の動画で メモリ 35GB が使用された事がありました。一つのシーンのみでなく、複数のシーンを一つの動画にまとめようとすると、そこから更に メモリ使用量が増す可能性があります。

メモリが足りなくなった時点でエラーを起こして何かアプリケーションが強制終了する、あるいは PC がシャットダウンします。

私の PC は初め 16GB でしたが、まったく足りず、32GB に拡張するも まだ足りず、56GB にして、ようやくなんとか編集作業が行えるようになりました。(56GB でもエラーで Premiere が落ちた事があります。)

最近のゲーミング PC のメモリはよくて 16GB という方も多いと思います。しかし Adobe Character Animator を用いた実況を行いたいと考える方は、注意が必要です。

メモリの問題を解決するために Dynamic Link を介さず、シーンのデータを連番 PNG で出力する方法もありますが、出力に何時間と要してしまうため、長い尺の動画の場合 現実的ではありません。

画質劣化

1)Adobe Character Animator のシーンを Dynamic Link で Premiere に配置
2)Premiere 内でクリップを拡大して配置
3)Premiere 動画出力画面で「キュー」を選択し Media Encoder で動画出力

上記条件の時、Premiere 内で拡大したクリップの画質が著しく劣化します。他にも条件はあるかもしれません。

Media Encoder を介さず Premiere から直接動画を出力すると 画質劣化は発生しません。直接動画出力は、複数の動画を予約して出力する事ができないため、不便な状況となってしまいます。

最後に

今回の問題は現時点(2017年11月)のものなので、今後改善される可能性はあります。
メモリ使用量に関しましては、もう少し良くなって欲しいものですが、Adobe Character Animator は After Effect のプラグインから独立して誕生した製品なので、この重たさは納得でもあります。

別途、日本の Adobe フォーラムで、Adobe Animator CC と Adobe Character Animater を同じフォーラムにまとめるのは、混乱を生むだけかなと思います。主に Adobe 製品を触らない人たちにとって。「Flash」という名前の問題でさんざん混乱を起こしてきたように。

[ ETC ] [ ETC ] 2017年11月03日 12:11 | コメント (0) | トラックバック (0)

FLASH FLASH tips 特定のフォルダ構成をした時にシンボルが壊れる致命的な不具合: Adobe Animate CC

長らく悩まされていた Flash CC もとい Adobe Animate CC での致命的な不具合の再現方法が判明しました。業務にて再現方法を教えていただいた形となります。Adobe フォーラムのほうへは報告済み。

この不具合は、ライブラリ内で特定のフォルダ構成をした場合、100% 発生します。シンボルが壊れるため、致命的なエラーです。

再現手順は以下の通りです。

1)画像のようなライブラリ構成の fla ファイルを作成

2)symbol1 に bitmap1 を配置
3)ファイルを保存
4)ライブラリの folder1 を削除
5)ファイルを保存して閉じた後、再度 fla を開く
6)symbol1 が壊れる

同名のフォルダが親に存在する場合、発生します。今回の場合は aaa というフォルダが影響しています。

symbol1 には bitmap1 が配置した事にはなっておらず、symbol1 を開こうとしても開けなくなります。私のようなドット絵ビットマップを大量に用いる製作者にとっては脅威の不具合です。

致命的なエラーのため Adobe さんには、早急にこの不具合を修正してくれることを望みます。

[ FLASH ] [ FLASH ] [ tips ] 2017年09月29日 18:47 | コメント (0) | トラックバック (0)

ETC Geforce Experience 3.x での強制アップデートを行わないようにする

(1) 以下の setup.exe ファイルを setup.exe.end といった具合に適当な名前にリネーム
C:\ProgramData\NVIDIA Corporation\Downloader\latest\setup.exe

(2) host ファイルに次の行を追加する
127.0.0.1 services.gfe.nvidia.com

(3) 完了

---
参考) Geforce Experience Forum
https://forums.geforce.com/default/topic/862779/geforce-experience/how-do-i-disable-geforce-experience-auto-update-/post/5073543/#5073543
---

私の PC 環境では GeForce_Experience_v3.1.2.31 は正常に動作するのですが、それ以降のバージョン(現在は GeForce_Experience_v3.3.0.95)が起動してくれないという不具合に遭遇しています。

[ ETC ] 2017年02月03日 20:16 | コメント (0) | トラックバック (0)

FLASH tips Adobe Animate CC WebGL(Preview) Document の調査と Haxe からの利用サンプル

Adobe Animate CC から利用可能な WebGL Document Preview版の調査と、Haxe からの利用サンプルを作成しました。

サンプル

今回作成した WebGL で表示する簡易ムービーです。5秒ほどのムービーをループさせています。

Adobe Animate CC WebGL Document とは

情報がほとんど無く 自分で使用してみての調査報告となるため、誤っている箇所があるかもしれませんが、その場合はつっこみください。

---

Adobe Animate CC には HTML5 コンテンツを制作するための「HTML5 Canvas Document」と「WebGL Document」の二種類のドキュメント形式があります。

「HTML5 Canvas Document」は CreateJS ライブラリを利用してコンテンツ制作を行います。Adobe Animate CC で作成したムービーの再生も可能です。しかしムービーを WebGL で再生したい場合、MovieClip をスプライトシートで出力する・専用の処理を記述する等 手間が増え、更に複雑な構造のムービーを WebGL で再生するのは難しい状況です。

「WebGL Document」は独自の API により、Adobe Animate CC で作成したムービーをそのまま WebGL 上で再生する事が可能です。複雑な構造のムービーであってもです。ムービー内部で使用されている ビットマップデータは一つの画像に自動的に収められ、ベクターデータは数値として別途出力され描画されます。描画に関しては 「HTML5 Canvas Document」よりも高い機能を持ち合わせています。

以上から WebGL Document は HTML5 版 GAFMedia 的 立ち位置となりそうです。GAFMedia 詳細に関しましては以下の過去記事をご参考ください。
Haxe(Adobe AIR or Flash) から GAFMedia を利用する

Preview 版による問題

現在 WebGL Document は Preview 版となっており、不具合のような動作や問題点が結構あります。これら問題点が解決するまで実用するにはまだ難しいかもしれません。

ビットマップデータを利用すると描画がちらつく

ビットマップデータを利用すると Internet Explorer や Microsoft Edge では描画がちらついてしまいます。Google Chrome ではちらつくことはありません。現状の一番致命的な問題です。

ビットマップデータを拡大すると画像がぼやける

スムージングがデフォルトでかかってしまっています。解除方法がわかりません。解決作としては、初めから拡大したビットマップ画像を利用する等がありますが、データ量に無駄がでてしまいます。

短いサウンドファイルは正常に出力されず

ムービー内に埋め込んだサウンドを再生する事も可能です。しかしサウンドファイルの再生長が短い場合、正常にファイルが出力されず 0KB の mp3 ファイルが出力されてしまいました。

総画像サイズは 2048 x 2048 px まで

コンテンツ内で使用している全てのビットマップを結合した画像サイズが 2048 x 2048 px を超えると、正常に素材出力が行われません。

jQuery との併用の注意

WebGL Document API が記述してある flwebgl-0.2.min.js を定義する前に jQuery 用 js ファイルを読み込んでしまうと、jQuery の $ 記述が認識されなくなってしまいます。併用したい場合は flwebgl-0.2.min.js 定義後に jQuery 利用の記述を行う必要があります。

今回のサンプルで行った問題回避策

サンプルムービーではドット絵(ビットマップデータ)を利用していますが、IE や Edge でも正常に表示するために、一つ一つのビットマップデータをベクターデータ化する、という手間を費やしています。
比較的シンプルなドット絵なのでベクターデータ化しても問題なく、力技とも言えましょう。

Haxe からの利用

WebGL Document をパブリッシュすると、素材用データやライブラリファイルの他、素材を読み込む処理(JavaScript)が記述された html が出力されます。この読み込み処理部分を Haxe で別途記述し github にアップロードしました。JavaScript 処理では イベントハンドラの数珠つなぎ状になっているため、処理を整理しタイマーで順次読み込みを行うような形式に変更しています。

https://github.com/siratama/WebGLDocument

今後 Haxe で WebGL Document コンテンツ制作を行う場合のテンプレート的ファイルとしてご参考ください。

終わりに

WebGL Document が登場してから Preview 版状態が結構長く続いています。今後どうなるのかわかりませんが、今一番に期待できる機能なので、問題点を全て解決し正式版になってほしいものです。

WebGL Document 用 API はそこそこ整っており、ゲームコンテンツにも使用できます。サウンド制御用の API が用意されていない等ありますが、不足分は CreateJS ライブラリを利用する等すれば良しとなりそうです。

Adobe Animate CC WebGL Document API
https://helpx.adobe.com/jp/flash/webgl-runtime-api-help/index.html

[ FLASH ] [ tips ] 2016年09月25日 12:10 | コメント (0) | トラックバック (0)

FLASH update Adobe Animate CC 拡張機能 Linkage 1.0.4: WebGL Document 対応

Adobe Animate CC ライブラリ内の、選択したアイテムのリンケージ設定を一括で行う 拡張機能、Linkage 1.0.4 を公開しました。
WebGL(Preview) Document に対応しています。

https://github.com/siratama/Linkage

[ FLASH ] [ update ] 2016年09月18日 19:02 | コメント (0) | トラックバック (0)

FLASH tips ShowCase UI サンプル作成と Haxe 利用のポイント

今後の制作物において必要になりそうな UI パーツ Showcase を作成しました。加えて Haxe を利用するポイントを記述します。

■ Showcase 動作サンプル

ボタン押しっぱなしで自動スクロールします。ボタン当たり判定は両側から画面中央近くまであります。

http://www.dango-itimi.com/blog/swf/227/

使用言語・環境

以下の環境で作成しています。

・Haxe/JavaScript
・JQuery
・SCSS

ソースコード一式は以下に公開しています。
https://github.com/siratama/ShowCaseDom

ポイント

DOM構造を処理側から判別可能になるファイル出力ツールがあると良さそう

今回のサンプルの html DOM 構造は以下となっています。
https://github.com/siratama/ShowCaseDom/blob/master/deploy/index.html

上記に対しクラスファイル Root.hx を用意しました。
https://github.com/siratama/ShowCaseDom/blob/master/src/showcase/dom/Root.hx
これにより、以下のようにプログラムから DOM 構造へアクセスできます。

var root = new Root();
var itemsElement:JQuery = root.showcase.screen.items;

難点は、Root.hx を作成するのは面倒であり、開発中 DOM 構造が変化するたびに Root.hx を書き換える必要があります。よって html の DOM 構造を解析して Root.hx を自動的に出力するようなツールがあると便利となりそうです。これは Flash コンテンツ開発でいうところの、swc ファイルに近いです。

※ファイル出力は行わずとも Haxe のマクロ機能で もしかしたらなんとかなるのかなあ、などとも考えています。
http://qiita.com/shohei909/items/c71f9a8774245319d182

近年では様々なフレームワークが出ており、JavaScript 側から DOM 構造を知ることができる仕組みが用意されているものもある、ようです。

描画処理の分離と enum の利用

今回の Showcase UI では、描画とそれ以外の処理は分離して作成しています。肝となるクラスファイルは以下の三点(MVC)です。
Display.hx : View
Operator.hx : Model
Transmitter.hx: Controller

描画が分離していない処理とは 例えば以下となります。DOM の p エレメントを右に30px移動する処理です。(Haxe JQueryExtern を利用)

class View
{
	public function move(){
		var element = new JQuery("p");
		var positionLeft = element.position().left;
		element.css({left: positionLeft + 30});
	}
}

描画処理を分離すると以下のようになります。実データ(描画位置を示す positionLeft)は Model で持ち、データの加工も Model で行います。

class Model
{
	var positionLeft:Float;
	public function move(){
		positionLeft += 30;
	}
}

View は更新された内容を画面に反映するだけとなります。

class View
{
	public function setPosition(positionLeft:Float){
		new JQuery("p").css({left: positionLeft});
	}
}

Model から View へのデータ受け渡しは Controller を介して行います。Contoroller にて、Model 内どのデータに変更があったのか、あるいは View の どの表示更新を行えばよいか の判定を行うには enum を利用すると便利です。

例えば Model を以下のようにします。「どの変更があったのか」「変更されたデータは何であるか」を enum に設定します。

enum Event
{
	NONE;
	MOVE(positionLeft:Float);
}
class Model
{
	private var event:Event;
	public function getEvent():Event
	{
		var n = event;
		event = Event.NONE;
		return n;
	}

	var positionLeft:Float;
	public function new(){
		event = Event.NONE;
	}
	public function move()
	{
		positionLeft += 30;
		event = Event.MOVE(positionLeft);
	}
}

Controller は以下のようにします。Controller の update メソッドは随時呼び出されます。

class Controller
{
	private var model:Model;
	private var view:View;

	...初期化処理 略...

	public function update(){
		switch(model.getEvent())
		{
			case Event.NONE: return;
			case Event.MOVE(positionLeft): view.setPosition(positionLeft);
		}
	}
}

今回 Showcase 用に作成した、Display.hx, Operator.hx, Transmitter.hx は上記 Model, View, Controller の形式で作成されています。

描画分離と Haxe

今回は HTML/JQuery で UI を作成しましたが、Flash Player ターゲットでも、HTML5 Canvas ターゲットでも、その他 Haxe が対応している言語であるならば何にでも Model をソースコードそのままで利用できます。出力ターゲットを変更するには、View の内容を変更すれば良しとなります。これがクロスプラットフォーム言語の面白いところでしょうか。

私は、ブラウザミニゲームは何の出力ターゲットで作ったらよいかなあ、と悩む事がありますが、先に Model だけ先行して作成してしまう、という開発手法も採る事ができ 少々悩みの種がとれたりします。

出力ターゲットを切り替えてのテスト

Haxe 用 UnitTest ライブラリの MassiveUnit では、JavaScript ターゲットや Flash Player ターゲット出力の場合 テストはブラウザを介す事で実行され、テスト結果はブラウザに表示されます。
ブラウザ表示により、テスト結果が html で色分けされて表示されるのはとても見やすい一方、テストの度にアプリケーションがブラウザに切り替わるのはやや面倒な場合もあります。

ここで、Model はどの環境でも利用できるという性質から、ブラウザを介す必要のないターゲット(neko等)でテストを行ってしまう方法が採れます。

コマンドラインツールの同梱している IDE(IntelliJ IDEA の Terminal 機能等)を用いる事で、JavaScript ターゲットのソースコード開発を行いながら テストは Terminal の neko ターゲットで行う、といった具合に、ロジック部分はブラウザ無しでの開発手法が可能です。(出力ターゲットによっては処理結果が異なる場合があるので、その点は注意が必要です。)


[ FLASH ] [ tips ] 2016年05月09日 19:30 | コメント (0) | トラックバック (0)

FLASH FLASH tips Haxe: Photoshop 自動画像アセット生成機能の拡張子記述の手間を省く拡張パネル GenerativeLayerRenaming を公開

Photoshop CC 用拡張パネル GenerativeLayerRenaming を公開しました。Haxe で作成しています。

https://github.com/siratama/GenerativeLayerRenaming

Photoshop から画像出力を行う方法の一つとして、自動画像アセット生成機能があります。

https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html

レイヤー名に画像拡張子を設定する事で、自動的にそのレイヤーが画像出力される、といった内容です。

しかしレイヤー名設定ルールはやや使い勝手が悪く、フォルダ分けして画像出力したい場合、絶対パスでレイヤー名を記述する必要があります。フォルダ構造が深いと記述するのは大変で、レイヤー名が長くなる事で見通しが悪くなり、フォルダ構造を変更したい場合 逐一手動でパスを記述しなおす必要が出てきます。

このわずらわしさを解決するために当拡張パネルを作成公開しました。

[ FLASH ] [ FLASH ] [ tips ] 2015年12月13日 21:35 | コメント (0) | トラックバック (0)

FLASH update Haxe: Photoshop タイムラインフレームアニメーション情報を出力する FrameAnimationExport と、その出力データを Flash Pro CC に読み込み MovieClip 化する FrameAnimationImport を公開

Photoshop CC 用拡張パネル FrameAnimationExport と、Flash Pro CC 用拡張パネル FrameAnimationImport 二点を公開しました。Haxe で作成しています。

https://github.com/siratama/FrameAnimationExport

https://github.com/siratama/FrameAnimationImport

紹介動画

詳細

FrameAnimationExport を利用する事で、今まで不可能だったタイムラインフレームアニメーションの各フレーム内画像データの位置情報・不透明度を出力する事が可能です。原点座標オフセット機能等を用意しており、Photoshop で作ったデータをそのまま他のアプリケーションで利用しやすい形に再現できます。

FrameAnimationExport から出力したデータを別アプリケーションで利用する一例が、FrameAnimationImport for Flash Pro CC となります。

今までは、Photoshop で作成したフレームアニメーションを Flash Pro CC 上で再現するために、データ読み込み後、毎回どのフレームでどの画像が表示されるか、あるいは配置位置はどこなのかを手動で調整しなくてはなりませんでした。しかし当拡張機能を利用する事で、その手間は無くなります。

[ FLASH ] [ update ] 2015年09月21日 13:43 | コメント (0) | トラックバック (0)

FLASH FLASH update Haxe: 全選択レイヤー内 各キーフレームのフレームを増減させる Flash Pro CC 拡張パネル FrameInsertEveryEachKeyFrame を公開

選択したレイヤー内 各キーフレームのフレームを増減させる Flash Pro CC 拡張パネル FrameInsertEveryEachKeyFrame を公開しました。Haxe で作成しています。

https://github.com/siratama/FrameInsertEveryEachKeyFrame

[ FLASH ] [ FLASH ] [ update ] 2015年09月12日 09:12 | コメント (0) | トラックバック (0)

FLASH FLASH update Haxe: 選択したライブラリ内アイテムを一括で複製する Flash Pro CC 拡張パネル LibraryItemDuplication 公開

選択したライブラリ内アイテムを一括で複製する Flash Pro CC 拡張パネル LibraryItemDuplication を公開しました。Haxe で作成しています。

https://github.com/siratama/LibraryItemDuplication

なるべく利用しやすい形で複製するようにしています。例えば左図の選択状態で LibraryItemDuplication を実行すると 右図のような状態で複製されます。





[ FLASH ] [ FLASH ] [ update ] 2015年08月22日 22:11 | コメント (0) | トラックバック (0)