ぴぽやフレンズについて
ぴぽや - ゲームグラフィック素材販売 -

FlashCS6のスプライトシート出力

2012.09.03
アドビのFlashCS6にはスプライトシート出力という新機能が搭載されました。
スプライトシートや詳しいFlashCS6での操作手順はこちらの動画をご覧ください。

スプライトシートの作成とワークフロー | Learn Flash Professional CS6 | Adobe TV


要はウディタの戦闘エフェクトアニメーションのような、アニメーションのコマを1枚の画像にまとめた状態に出力してくれるわけです。
てことはFlashでエフェクトアニメを作ったりしたときの画像出力が超ラクチンになる!と思って、いじり始めてみましたが、いくつか注意が必要でしたので、簡単にまとめておきます。



まずは、FlashCS6でシンボルを作って、シンボル内でアニメーションを作っていきます。
今回は簡単にこんなかんじのを。

spsheet-test.gif


タイムラインやレイヤーはこんなかんじ。
上のレイヤー「アニメ」に丸が変化するアニメーションので、
下のレイヤー「ガイド」に青いグラデーションの四角枠があります。
下のレイヤーに置いてある四角枠がポイントになるのですが、あとで説明します。

spsheet-test1.jpg


シンボル内でアニメーションが完成したら、ライブラリパレットからそのシンボルを選択右クリックメニューから「スプライトシートを生成」を選択します。

spsheet-test2.jpg


「スプライトシートを生成」画面が表示されますので、いくつか項目を設定していきます。
まずは「画像のサイズ」、自動調整にすると勝手に余白をつけちゃうので、ギリギリの画像にするため、手動入力します。
今回は1コマの画像サイズ240×240pixelなので、その倍数で指定します。
あとは「出力ファイル名」を入力して、「書き出し」ボタンを押せばOKです。

※↓画像をクリックすると拡大されます。
spsheet-test3.jpg


出力されたファイルはこの2点。
PNG画像ファイルとXMLファイル。XMLファイルはHTML5やFlashのアクションスクリプトなどのプログラムで制御する際に、PNG画像中のどの位置にどのサイズのコマ画像があるといった情報が記述されています。
私には今のところ用がないのでXMLファイルはゴミ箱行きになってしまいます。

spsheet-test5.jpg


さて、すんなり出力できたじゃないか。というところですが、
予め問題に対処したタネを仕込んでおいたので、簡単でした。
そのタネは最初のシンボル内のレイヤーの説明で下のレイヤーに配置した青いグラデーションの四角枠です。

FlashCS6のスプライトシートの生成では、1コマの画像サイズをそのシンボル内の画像がある領域から判断してしまうため、普通にアニメーションを作った場合は明確に指定することができません。
というわけで、1コマのサイズを明確に指定するためにアニメーションを作ったレイヤーの下に青いグラデーションの四角枠を配置したわけです。
この四角枠のサイズが240×240pixelになっています。

今回はわかりやすく枠に色をつけてありますが、スプライトシートの生成を実用する場合には枠を透明や透明色にしちゃえばいいわけです。

今回は枠をシンボル化してあるので、「カラー効果」アルファを0%にしてやれば、出力されるスプライトシートは1コマのサイズを240×240pixelのままで、この枠が画像に出力されることはありません。

また、注意事項として、この1コマサイズを決める枠の「位置とサイズ」の数値に小数を含まないように調整しましょう。
少数を含んでしまうと、出力される1コマのサイズが微妙にずれてしまうことがあります。

spsheet-test4.jpg




おまけとして、「スプライトシートを生成」以外にも便利な機能が。
同じ手順でライブラリからシンボルを選択し、「PNGシーケンスを書き出し」を選択すると1コマ1コマのバラ画像を出力することができます。
こちらは「スプライトシートを生成」みたいに面倒なことはないので、出力サイズの数値を入力して書き出せばOKです。
1コマサイズを固定するための枠を用意する必要もないです。

私が普段使っているFlashCS3ではこの機能(シンボル単体でのシーケンス画像出力)はなかったので、CS4以降かCS6で追加されたものだと思います。

spsheet-test6.jpg

spsheet-test7.jpg




さて、これでFlashで作ったアニメーションを他プログラムで使用できる画像に出力するのがとても手軽になりました。
ちょっと工夫すればウディタのキャラクター歩行画像だってFlashで作って出力できちゃいますねぇ。
今までは出力がめんどくさかったので、FlashではAfterEffectsで使用するパーツを作るぐらいしかしてこなかったけど、Flash上だけで作る新たな素材を考えてみたいと思います。
関連記事

この記事へのコメント

非公開にする :

トラックバック

URL :

プロフィール

ぴぽ

管理人:ぴぽ
フリーのグラフィックデザイナーという傍ら、「ゲームを作りたいなぁ♪」と奮闘中です!

TwitterYoutubeチャンネルtwitchチャンネル
Fantia-ぴぽやフレンズCi-en ぴぽやフレンズ

▼運営サイト
・ぴぽや - ゲーム画像素材販売 -
 有料素材の販売
・ぴぽや倉庫
 公開した素材のまとめ

・ぴぽやリンク
 素材配布サイトリンク集
・はじめてのウディタ
 ウディタお勉強wiki

ご感想・ご利用報告・ご連絡


最新記事一覧
戦闘エフェクトアニメ 投げナイフ&矢 12セット 2018/05/18
有料素材 4・8方向対応 乗り物キャラチップ10種 2018/05/15
戦闘エフェクトアニメ バナナっぽい色の3点 2018/05/07
ぴぽやフレンズ(Fantia,Ci-en) 4月の活動報告 2018/05/06
ぴぽやフレンズ(クリエイター支援サイト Fantia,Ci-en)まとめ 2018/05/06
カテゴリ
最新コメント
リンク

リンクして頂ける場合はこちらのバナー画像をお使いください。
※バナー画像なしでも構いません。

RSS
広告
おすすめ有料素材
同人誌、同人ゲーム、同人ソフトのダウンロードショップ - DLsite.com

タイルセット(マップチップ)
ねくらファンタジーマップチップ素材集
ねくらレトロフューチャーマップチップ素材集
普通シティ 現代日本都市タイルセット
ファミコン風RPG基本マップ素材セット

背景イラスト
みにくる背景CG素材集『ファンタジー編』part01
みにくる背景CG素材集『ファンタジー編』part02
みにくる背景CG素材集『ファンタジー編』part03

エネミーイラスト
イラスト素材集-baroque-
イラスト素材集-異界のアリス-
RPG制作に使えるデフォルメ素材集~モンスター娘編~ Vol.3

キャラチップ
ぴぽやキャラチップ素材集 乗り物10種
どうぶつキャラクターチップセット3

キャラ立ち絵
中世ファンタジーRPG風2Dキャラクターパック【キャラクター画像素材】
立ち絵素材男女
【立ち絵素材】Aさんのバイト服
【立ち絵素材】現代人まとめ (女子生徒・男子生徒・一般女性・一般男性・少女)

エフェクトアニメ
物理攻撃エフェクト素材集1 71点収録
ぴぽやゲームエフェクト素材集01-斬撃- &02-属性斬撃- セット

アイコン
イラストアイコン素材集Vol.2-和-
イラストアイコン素材集Vol.1
ゲーム製作用アイコン集#01
ファンタジーゲーム向けアイコン素材1
ファンタジーゲーム向けアイコン素材2

ゲーム制作ソフト
SMILE GAME BUILDER
SRPG Studio
ティラノビルダー PRO