1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DistanceFieldスタイルをスプライトシートアニメに適用してみた2

Last updated at Posted at 2016-12-24

スクリーンショット 2016-12-24 11.54.38.png

こちらの記事の続きです。
http://qiita.com/harayoki/items/a8abbf48bac9d246787c

先の例ではまだ描画が汚かったのでやり直しました。

デモは同じくここに上がっています。(要FlashPlayerのためPCでしか見られません)
https://harayoki.github.io/StarlingDemoDistanceFieldStyle/demo1/index.html

上記最新デモを動画にしたものがここに上がっています。

左のキャラクターが通常の描画方法で拡大したもの、右のキャラクターがDistance Fieldスタイル(シェーダー)を用いて拡大表示したものです。10倍程度拡大してもアウトラインがかなり滑らかです。
一方、目のように細いラインが出てくる部分に関しては荒れが出てしまっています。ここはパラメータをチューニングするか元画像であまり繊細なデザインを作らないなどの手段を取らなくてはいけなそうです。

#アウトラインが綺麗に表示される画像の作り方

前回の記事ではSpritesheet設定ファイルの座標設定を活かしたいため、等倍で画像変換をしたのですが、これがよくなかったようです。やり方を変えて4倍の大きさの連番画像をそれぞれ用意して、バッチ的に全てを変換、これを元にスプライトシートを生成しました。以下、具体的に説明します。

スクリーンショット 2016-12-23 17.03.33_.png
AnimateCCで作ったアニメーションを連番画像を4倍の解像度にして書き出します。もっと大きくても良いかと思います。(スムージングは念のためoffにしました。)

今回の画像変換では4倍の画像を等倍に戻すので、スケール値は0.25倍を指定します。

ruby field_agent.rb $file $outfile --scale 0.25

実際には連番画像に変換をかけないといけないので、1つ1つ手作業で実行しなくても良いように、下記のようなシェルスクリプトを用意して行いました。
カレントフォルダのpngファイル全てに対して接頭語としてdf_をつけた名前でDistance Field 形式の画像に変換をかけます。

makeDffImg.sh
for file in `\find . -maxdepth 1 -name '*.png'`; do
	outfile=`echo ${file/.\//.\/df_}`
	echo "$file -> $outfile"
	ruby field_agent.rb $file $outfile --scale 0.25
done

何度も実行すると変換後の画像に対してもさらに変換をかけようとするので注意です。シェルスクリプトなのでWindowsでは動きませんが、ここにおいてあります。必要あればカスタマイズして使ってください。
https://github.com/harayoki/StarlingDemoDistanceFieldStyle/blob/qiita161224/material/spritesheet/makeDffImg.sh

真横に変換スクリプト本体のfield_agent.rbが配置されている必要があります。
field_agent.rbはStarlingリポジトリで入手できます。
https://github.com/Gamua/Starling-Framework/tree/master/util/field_agent

スクリーンショット 2016-12-23 17.38.15_.png
出来上がった Distance Field 画像は左のように白くてぼやけて小さいものになりますが、これでOKです。

スクリーンショット 2016-12-23 17.46.45_.png
バッチ処理したので、実際はこのようにたくさんの画像が生成されています。

スクリーンショット 2016-12-24 12.48.08.png
出来上がった画像をスプライトシートに変換をかけます。ここではTexturePackerを使っていますが、別のソフトでも良いです。TexturePackerは定番の良いソフトですが有料なので。

以上で出来上がったスプライトシートファイルをStarlingに取り込んだ後は前回の記事と同じやり方になります。

デモのソースファイルはここにあります。
https://github.com/harayoki/StarlingDemoDistanceFieldStyle/tree/qiita161224

以上です。

Distance Field Styleにはアウトラインがスムースになる機能の他に装飾をする機能があるのでそちらは別途投稿する予定です。

スクリーンショット 2016-12-24 13.18.48.png
1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?