前の投稿の続きです。
前のその1 http://qiita.com/harayoki/items/a8abbf48bac9d246787c
前のその２ http://qiita.com/harayoki/items/f88c439c18bc1881ace1
基本単色で使う事になるDistaneFieldスタイル適用画像ですが、いくつかの方法である程度の装飾が可能です。
ここにデモがあります。
https://harayoki.github.io/StarlingDemoDistanceFieldStyle/demo2/index.html
スマホ向けに動画でもあげておきました。
https://www.youtube.com/watch?v=tr8RD4skF0w
ソースはここにあります。
https://github.com/harayoki/StarlingDemoDistanceFieldStyle/tree/qiita161224_2
詳しい解説
等倍のこのドット絵をいくら拡大しても綺麗というのがDistaneFieldスタイルのすごいところです。つまりはベクター画像みたいなものですね。ただし単色。
２倍表示(よりも大きくなっちゃったのはRetinaディスプレイでキャプチャーしたから。。）のこいつらは色を指定してあります。単色指定しかできないと思われてますが、頂点(４箇所)ごとの色指定ができました。
image.color = 0x0ff00; // 単色指定
image2.setVertexColor(0, 0xff0000); //左上
image2.setVertexColor(1, 0xff0000); //右上
image2.setVertexColor(2, 0xff0000); //左下
image2.setVertexColor(3, 0xff0000); //右下
この３つが、DistaneFieldスタイルに備わっている装飾３つです。左から、枠線、影、発光です。それぞれ色指定も可能です。
// 枠線
var style1:DistanceFieldStyle = new DistanceFieldStyle();
style1.setupOutline();
image1.style = style;
// 影
var style2:DistanceFieldStyle = new DistanceFieldStyle();
style2.setupDropShadow();
image2.style = style;
// 発光
var style3:DistanceFieldStyle = new DistanceFieldStyle();
style3.setupGlow();
image3.style = style;
（デモのようにアニメーションに適用する場合、影エフェクトのみ位置がチラチラずれる挙動を取ってしまうようです。）
これらのエフェクトはフィルターの場合と違い、描画負荷がほとんど増加しないという特徴があります。
これらのエフェクト３つは便利なのですが、重ねがけできないという制限があります。
エフェクトを組み合わせたい場合は、今まで通り重ねてフィルタを適用します。
この画像は枠線スタイルに発光フィルターをかけたものです。標準フィルタにドロップシャドウとグロウが存在するのに対して、ズバリ枠線というものはないので、綺麗に描画されるDistaneFieldスタイルの枠線は重宝しそうです。
こちら２つは自分が作った斜線フィルターと走査線フィルターを適用してみたものです。問題ありません。
てんこ盛り６倍表示したものです。（枠線＋４頂点着色＋斜線フィルタ＋発光フィルタ）なんだかわかりませんがとにかくすごい。
ここから下３つはちょっと変わった実験です。
イメージに9スケールを適用して等倍表示してみました。内部で頂点が増えますので、それぞれに色指定が可能です。
ただし拡大するとこう伸びますので、（正しく9スケールできてるという事)本来の大きく拡大しても綺麗という用途には使えませんね。
なお、そもそもスプライトシートアニメと9スケールは同時使用すると描画が荒れます。
ドローコール数について
DistaneFieldスタイルの同じエフェクトをつけた画像を並べていった場合ドローコールが増えません。違うエフェクトに切り替えるとドローコールが増えます。エフェクトなしに切り替えてもドローコールが増えますが、エフェクト色を透明指定する事で、エフェクトなし状態を再現できます。
締め
DistaneFieldのテクニックはStarlingコンテンツに限った話でなく、そもそもはコンシューマーゲーム界隈からでてきた技術なので、最近のゲームエンジンなどでも活用されてる例があるかと思います。そちらにもこの記事が参考となればと。