BlogKLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。2日目の記事になります。テクニカルアーティストグループ(以下:TAG)のfo-taです。TAGは様々な案件を横断してテクニカルな分野をサポートするグループで、僕はUnityやMayaのシェーダ、各種ツールスクリプト等で各案件のサポートをしています。今回は、流体っぽい表現を擬似的に平面上で行うシェーダについてご紹介します。↑のサンプルは各Quad(4角形ポリゴン1枚)+RGBテクスチャ1枚で構成されています。ブレソル3周年記念キャンペーンの際に作成しました。「BLEACH」を題材とした、爽快3Dアクションゲームです。デザイン監修のもと制作された、ブレソルオリジナルデザインの3周年記念キャラクター「ウルキオラ」を配信しました。2018ご覧の通り、頭と尻尾に炎が付いたデザインになっています。ブレソルは海外にも展開している関係上、推奨端末のスペックがあまり高くないものもあるので、リッチな表現手法をそのまま使うのは現実的ではありません。それでもこのかっこいいデザインを妥協はしたくない!擬似的にでも軽く表現できないか......!?と考えたことがきっかけです。流体的な表現には、2枚の白黒画像を重ねる手法を利用しています。左図のように2枚の白黒画像を重ねて動かすと、グレーが重なる部分にメタボール変形っぽい見た目を得ることができます。右図のようにキュッとすると、より変形した感じが強くなります。PhotoShopで2枚の画像を覆い焼き(加算)で重ねて、レベル補正をかけるようなイメージです。同じことを雲模様で行うと、こんな具合に複雑な変形をしているような結果を得ることができます。この仕組みをベースにしています。左から1枚目と2枚目を重ね、さらに3枚目をマスクとして適用(白い範囲だけ表示)すると、一番右のように炎のゆらめきのような結果が得られます。上で出来た結果を黒い部分を透明とした透過画像にし、更にもう一枚画像を重ねます。これをキュッとして着彩すると、右画像のような禍々しい炎っぽい効果ができあがります。前項で登場した4つの画像を使用しています。軽くしようとしたのに、4枚もテクスチャを使っていては本末転倒です。1枚の画像にまとめます。4枚なので、RGBAの4チャンネルにまとめられそうですね。加えて、iOSのPVRTCとアルファ画像の相性が悪いのも気になります。そこで、1枚目と2枚めの画像を1枚にまとめました。それぞれ用途的にまとめても問題ないため、半分ずつに潰して1枚にしています。計3枚の白黒画像を1枚のRGB画像にまとめて、画像は完成です。バリエーションパラメータやマスク画像を変えると様々な結果が得られるようになっています。ウルキオラはこのようなパラメータで、マスク画像は非圧縮RGBの非常に小さいサイズにしています。非圧縮にすることでブロックノイズを低減しており、やや輪郭などにまだ粗い部分がありますが、画面にあまり大きく映らないことを考慮するとこのぐらいの画像サイズでも全然問題ありません。水面のような表現をしてみました。「キュッとする」の具合をパラメータで調整できるので、このようにぼやけた表現も可能です。パラメータはアニメーションさせることもできるので、膨張や明滅と言った表現もできるようになっています。コードサンプルざっくりとですが、計算式は下記のような形になります。したり着彩したりしています。まとめ中身はUVスクロールと画像合成の合わせ技なので技術的にすごいことはしていませんが、処理の軽い範囲でも工夫次第でこれだけ表現力を上げるパワーがシェーダにはあります!デザイナーの皆さんもどんどんシェーダに興味を持って貰えればと思います。この記事がその助けになることができれば嬉しいです。ノードベースなのでコードが書けない人でも簡単に作れます。始めましたはじめにお疲れ様です、atsushiです。記念すべき1日目の記事になります。Blog」を開設いたしました!このブログではKLabのクリエイタースタッフが日々スマートフォン向けのゲームを開発・運営していく中で培った技術やそのノウハウの情報を発信していきたいと考えています。2018」もその一環で今年から参入致しました。Calendarは主にエンジニア界隈で流行っているもので、クリエイター界隈ではあまり一般的ではない?かもしれません。聞いたことがないという方は以下をご覧ください。Calendarは本来、12月1日から24日までクリスマスを待つまでに1日に1つ、穴が空けられるようになっているカレンダーです。Calendarは、その風習に習い、12月1日から25日まで1日に1つ、みんなで記事を投稿していくというイベントです。いうものを毎年作成しており、もちろん今年も作成されているので良ければこちらのカレンダーと合わせてご覧いただければと思います!KLabクリエイターの活動事例のご紹介ただ「ブログを開設しました」というだけの記事だと味気ないので、宣伝も兼ねてKLabクリエイターの活動事例を2点ご紹介したいと思います。Fes『君の作ってるそれ、案外凄いかも。Fes」(以下、KCF)についてご紹介です。KCFとは、世界で活躍するトップクリエイターの皆様を審査員に迎え、静止画・動画の2部門で日本一の学生3DCGクリエイターを決定するコンテストが行われるイベントとなっています。Fes’18」が行われ、沢山の素晴らしい作品が会場に集まりました!(リンク先で入賞作品を見ることが出来ます)余談ですが、実は私はこのKCFが最初に開催された2015年に3DCGクリエイターとして新卒入社しており、最初のKCFにも会場スタッフとして参加していました。当時は自分とほとんど年齢が変わらない学生達によるハイレベルな作品を目の当たりにし、一人のクリエイターとして感動や焦りなど沢山の刺激を受けたことを今でも覚えています。Seminar名前の通り、KLab主催のKLabクリエイターによるクリエイターのための勉強会です。KLabではクリエイタースタッフのスキルアップや交流を目的として「KLabクリエイティブ勉強会」という社内向けの勉強会を開催しており、普段一緒に働いている同僚が講師になって流行なCGソフトの技術講習や各案件のノウハウ共有等、あらゆる情報交換の場として利用されています。Seminar」です。今年はまだ活動を始めたばかりということもあり手探り状態ではありますが、最近では他社様とコラボしてMeetupを開催するなど、活動の幅も徐々に広がってきました。来年からも少しずつ開催できる機会を増やしていけるように計画中です。当日は簡単ではありますが軽食を用意した懇親会も行う予定なので、開催した暁には是非遊びに来てみてください!さいごにKLabでは社内・社外問わずクリエイティブの魅力を高めていこうと努力しています。ライブドアブログ前ページトップ。