はじめに

このシリーズでは iOS/Android ゲームアプリの描画手法として、ベジェ曲線の可能性を模索します。
第二回目は、ストローク(線)の処理結果を利用した表現について探っていきます。

サンプルアプリのプロジェクトは GitHub にあります。
https://github.com/hakumai-iida/BezierSample

前回：【その①：環境準備とアンカーポイント(点)による形の変化】
次回：【その③(完結)：パーツによる絵のバリエーション】

ストローク（線）による表現

ベジェ曲線でストローク（線）を描く際、ストロークに沿って一点一点の画素を処理していきます。
この時、画素の情報（主に座標）を利用することで、ストロークの形状に沿った表現が可能となります。

エッジの塗りつぶし

２本のストロークによる角度が尖っている場合に、２本のストロークの接続部分を塗りつぶします。

↓ 図：エッジの塗りつぶし

ストロークの接続部分が尖っているアンカーポイント 2 と 3 のエッジが塗りつぶされます。
そのほかのアンカーポイントは角度がなだらかなため、エッジが塗りつぶされません。

タッチ

ストロークに沿って、タッチストロークを呼び出します。

↓ 図：ストロークに沿ってタッチ

円のストローク（アンカーポイント 0 → 1 → 2 → 3 → 0）に沿って、タッチストローク（A → B）が描画されます。
この例では、上側と下側で適用方向を反転させ、適用サイズも変化させています。

ストライプ

２本のストローク間に沿って、ストライプストロークを呼び出します。
この時、できた閉領域への塗りつぶし色を指定すことで、ストライプ模様を表現します。

↓ 図：ストローク間でストライプ

円のストロークにおいて、左上（アンカーポイント 0 → 1）と右下（2 → 3）に沿って、ストライプストローク（A → B）が描画され、閉じた領域が交互に塗りつぶされます。

この例では、左上のストロークの方向と一致させるため、右下のストローク座標を（3 → 2）となるように反転参照しています。

フリル

ストロークに沿って、シェイプ（別の描画データ）を呼び出します。

↓ 図：ストロークに沿ってフリル

円のストロークに沿って、シェイプ A と B が交互に描画されます。
この時、B の上部左右から内側に伸びる二本のストロークは、隣り合う A の上部左右のアンカーポイントに結合されることで、フリル感が出るように調整されます。

シフト明暗

ベジェ曲線ではストロークで閉じた空間を形成することで、その内側を塗りつぶします。
この時、塗りつぶした領域の形状を利用して、擬似的な明暗を表現できます。

↓ 図：塗りつぶした領域を自身にシフトして重ならなかった部分を明るく／暗く

塗りつぶした領域を右下へシフトして重ならない部分（左上）が、明るく調整されます。
同様に、左上へシフトして重ならない部分（右下）が、暗く調整されます。

↓ 図：塗りつぶした領域をシフトして、未出力領域へ明暗予約

このサンプルの描画順は、中央の円 → 左上と右下の菱形となります。
円が塗りつぶされる段階では、左上と右下の菱形はまだ描画されておらず、その領域の画素は未出力となっているという認識で、下記の説明をお読みください。

動作としては、まず円を塗りつぶします。
その後、塗りつぶし領域を左上へシフトし、まだ塗られていない領域に「明るさ予約」を行います。
同様に、塗りつぶし領域を右下へシフトし、まだ塗られていない領域に「暗さ予約」を行います。

その後、左上の菱形が描画される際、予約されていた明るさが反映され、円に接する領域が明る調整されます。
同様に、右下の菱形には予約されていた暗さが反映され、円に接する領域が暗く調整されます。

サンプルデータと動作確認

サンプルデータとして、ストライプやフリルと相性がよさそうな、ゴスロリアリスっぽいものを作成してみました。
このデータに対して、上記の各表現を適用してみましょう。
（※サンプルプアプリの「EDGE」、「TOUCH」、「STRIPE」、「FRILL」、「FILL_OPTION」メニュー項目の機能）

↓ 図：左上から時計回りに表現が追加されていく様子

シンプルな素材データが最終的に、ゴテゴテした表現の絵になりました。
また、各種表現はアンカーポイントによる変化を受けるため、アニメさせることも可能です。
（※アンカーポイントによる形状変化については【その①：環境準備とアンカーポイント(点)による形の変化】をご覧ください）

↓ 図：じと目のゴスロリちゃんアニメ

↓ 図：前回作成したミクさんに適用した様子

最後に

今回は、ストローク内容を軸とした表現について探ってみました。

まず、エッジ塗り、タッチに関しては、アナログ的な表現に一役買ってくれそうです。
ブラシ（ストロークの形状）と組み合わせることで、鉛筆やペン画のような絵作りが可能そうです。

次に、ストライプとフリルですが、作ってはみたものの手応えはイマイチでした。
色々な調整値を組み込んでみたのですが、基本的にはストローク上に機械的に配置するだけなので、
服の形状に合わせた自然な感じを出せるまでに至っておらず、現状では使い所がなさそうです。
一方で、UI素材等、シンプルでデザイン的な描画へのアクセントに流用できそうな気もします。
今後の工夫次第といった所でしょうか…。

最後のシフト明暗ですが、こちらはかなり便利だと感じました。
ベジェ曲線では色を塗るのに閉空間を作成するわけですが、その際、シフト方向と明度を指定するだけでお手軽に影が付けられました。
一方で、データの順番のせいで変な影がついたり、形状がゴチャゴチャしたところが汚くなったりするのは、今後の課題でもあります。

形状に応じた処理ができるのはベジェ曲線ならではです。
ストロークを利用したお手軽で効果的な表現手法を、今後も模索していきたいと思います。

前回：【その①：環境準備とアンカーポイント(点)による形の変化】
次回：【その③(完結)：パーツによる絵のバリエーション】