こんにちは、SpriteStudio エバンジェリストの池田陽朗です。
今回はSpriteStudio Ver.6.4から搭載されている「カスタムシェーダー機能」について制作例を3つご紹介します。 皆さまのご制作のヒントになれば嬉しいです。
※ OPTPiX SpriteStudioのインストールパッケージにカスタムシェーダーファイルは同梱されておりません。OPTPiX ヘルプセンターでサンプルのシェーダーファイルを配布していますのでご活用ください。
カスタムシェーダー機能とは？
「シェーダー」の意味はツールによって異なりますが、SpriteStudioにおけるカスタムシェーダー機能は素材に対して様々な効果を付与する機能になります。
図の左上がオリジナルのアニメーションです。他のアニメーションはSpriteStudioのカスタムシェーダー機能でそれぞれ別の効果を与えています。
効果を与えたいパーツを選択しアトリビュートウィンドウから各効果を選択できます。アトリビュートウィンドウにシェーダーの項目が無い場合は、メインメニューの「ファイル」→「プロジェクト設定」→「互換性」→「再生環境の指定」からシェーダーのチェックボックスを入力してください。
制作例
妖精が卵の絵と融合して色が浮かび上がるシーン。
このカットでは3つのカスタムシェーダー機能を使用しています。
「アウトライン」
このような、線が形を変化し続ける演出の作成方法です。
スプライトアニメーションは基本的に一枚絵を拡大縮小での描写が主になるため絵面の変化単一になりがちになりますが、上図のような輪郭が変化し続けるものもあると情報量がまして絵面が豊かになります。
星型のアウトラインが欲しい場合はこのような素材を用意します。
カスタムシェーダー機能のパラメータ変更で輪郭を変えるためには用意する素材に一工夫必要です。
上段の輪郭がはっきりした素材では、パラメータを変更してもアウトライン化された素材は変化が起きません。 下図の素材のように輪郭にぼかしを加えておくと、ぼかしの範囲も検出されてパラメータ変更の時に形が変化し続けます。 これを補間することで線が変化するアニメーションにすることが出来ます。
パラメータ変更で形を変更できる。
星型のアニメーションを２つに複製して位置をずらして完成です。
「明度マスク」
明度マスクを使用して指定したパーツをじわじわ浮かび上がらせる見せ方ができます。
こちらはシンプルにパラメータのみの操作で変化を与えることができます。
RGBの暗い箇所→明るい箇所の過程に効果を適応したり、その逆も出来ます。 用意する素材次第で狙った効果を表現することが出来ます。
じわじわ浮かび上がる演出にも使えれば、しゅわしゅわ～っと消える演出にも使えます。
明度マスクのその他の制作事例はこちらの記事にも紹介しています。
「SpriteStudioで1枚のイラストを動かすテクニック 第2弾 ろまゆくえさん編」
「波」
素材に波のようなうねりを与えることが出来ます。
パラメータの操作で波の縦横の幅を調整することが出来ます。
ラスタースクロール演出が可能です。
波の効果の制作事例はこちらの記事にも紹介しています。
髪の毛や風に揺れる布などといった揺れものに適応することで、ボーンパーツを使うこと無く手軽にに効果を与えることが出来ます。
21年3月『SpriteStudioオンラインセミナー』各セッションのポイントをピックアップ！
以上、3つのカスタムシェーダー機能を用いた事例を紹介しました！
手軽に面白い表現が可能なこの機能、ぜひ色々試してみて制作に活かしてみてください。
ぜひクリエイターの皆さまのご参考になれば幸いです。
池田陽朗(twitter)
OPTPiX SpriteStudio公式(twitter)
SpriteStudioでわからないことが出てきたら、ヘルプセンターやコミュニティをご活用ください。
OPTPiX SpriteStudio ヘルプセンター （各種Tips / FAQ）
OPTPiX SpriteStudio コミュニティ （助け合い所）
