KLabGames Creative Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。

はじめに

この記事は KLab Creative Advent Calendar 2018 の 2日目の記事になります。

こんにちは。テクニカルアーティストグループ(以下:TAG)のfo-taです。
TAGは様々な案件を横断してテクニカルな分野をサポートするグループで、僕はUnityやMayaのシェーダ、各種ツールスクリプト等で各案件のサポートをしています。

概要

今回は、流体っぽい表現を擬似的に平面上で行うシェーダについてご紹介します。

↑のサンプルは各Quad(4角形ポリゴン1枚)+RGBテクスチャ1枚で構成されています。

経緯

このシェーダは、BLEACH Brave Souls(以下:ブレソル) のブレソル3周年記念キャンペーンの際に作成しました。

ブレソルは、ぴえろが大人気コミックをアニメ化した作品 「BLEACH」を題材とした、爽快3Dアクションゲームです。
ブレソル3周年記念キャンペーンでは、原作者・久保帯人先生デザイン監修のもと制作された、ブレソルオリジナルデザインの3周年記念キャラクター「ウルキオラ」を配信しました。

ご覧の通り、頭と尻尾に炎が付いたデザインになっています。

ブレソルは海外にも展開している関係上、推奨端末のスペックがあまり高くないものもあるので、リッチな表現手法をそのまま使うのは現実的ではありません。
それでもこのかっこいいデザインを妥協はしたくない!擬似的にでも軽く表現できないか……!?と考えたことがきっかけです。


最終的には、このような表現を実現できました!

僕も3周年記念ガチャを回しまくってゲットできました!!

内容

流体的な表現には、2枚の白黒画像を重ねる手法を利用しています。

左図のように2枚の白黒画像を重ねて動かすと、グレーが重なる部分にメタボール変形っぽい見た目を得ることができます。
さらに右図のようにキュッとすると、より変形した感じが強くなります。
PhotoShopで2枚の画像を覆い焼き(加算)で重ねて、レベル補正をかけるようなイメージです。

同じことを雲模様で行うと、こんな具合に複雑な変形をしているような結果を得ることができます。
この仕組みをベースにしています。

左から1枚目と2枚目を重ね、さらに3枚目をマスクとして適用(白い範囲だけ表示)すると、一番右のように炎のゆらめきのような結果が得られます。

上で出来た結果を黒い部分を透明とした透過画像にし、更にもう一枚画像を重ねます。

これをキュッとして着彩すると、右画像のような禍々しい炎っぽい効果ができあがります。

使用画像

前項で登場した4つの画像を使用しています。

ただ、せっかく軽くしようとしたのに、4枚もテクスチャを使っていては本末転倒です。なので1枚の画像にまとめます。ちょうど4枚なので、RGBAの4チャンネルにまとめられそうですね。
しかし、せっかくならもっと軽くしたいです。加えて、iOSのPVRTCとアルファ画像の相性が悪いのも気になります。

そこで、1枚目と2枚めの画像を1枚にまとめました。
それぞれ用途的にまとめても問題ないため、半分ずつに潰して1枚にしています。

計3枚の白黒画像を1枚のRGB画像にまとめて、画像は完成です。

バリエーション

パラメータやマスク画像を変えると様々な結果が得られるようになっています。

ウルキオラはこのようなパラメータで、マスク画像は非圧縮RGBの非常に小さいサイズにしています。
非圧縮にすることでブロックノイズを低減しており、やや輪郭などにまだ粗い部分がありますが、画面にあまり大きく映らないことを考慮するとこのぐらいの画像サイズでも全然問題ありません。

水面のような表現をしてみました。
キュッとする」の具合をパラメータで調整できるので、このようにぼやけた表現も可能です。

パラメータはアニメーションさせることもできるので、膨張や明滅と言った表現もできるようになっています。

コードサンプル

ざっくりとですが、計算式は下記のような形になります。

Alpha = saturate((RChannel * 2.0 - 1.0) + GChannel)
Color = Alpha - BChannel

GとBChannelは事前にUVスクロールをしており、ここから更に lerp や smoothstep でキュッとしたり着彩したりしています。

まとめ

中身はUVスクロールと画像合成の合わせ技なので技術的にすごいことはしていませんが、処理の軽い範囲でも工夫次第でこれだけ表現力を上げるパワーがシェーダにはあります!
デザイナーの皆さんもどんどんシェーダに興味を持って貰えればと思います。この記事がその助けになることができれば嬉しいです。

ちなみにこのシェーダはプロトタイプを ShaderForge で作りました。ノードベースなのでコードが書けない人でも簡単に作れます。残念ながら ShaderForge は開発終了してしまいましたが、Unity の ShaderGraph や UnrealEngine の MaterialEditor など、ノードベースでシェーダを作る環境は多くあるので、興味がある方はとりあえず軽く触ってみることをオススメします!シェーダ楽しい!!

はじめに

お疲れ様です、atsushiです。

この記事は KLab Creative Advent Calendar 2018 の記念すべき1日目の記事になります。

KLabGames Creative Blogを開設しました

CreativeBlog_logo_mini

早速ですがこの度「KLabGames Creative Blog」を開設いたしました!

このブログではKLabのクリエイタースタッフが日々スマートフォン向けのゲームを開発・運営していく中で培った技術やそのノウハウの情報を発信していきたいと考えています。

この「KLab Creative Advent Calendar 2018」もその一環で今年から参入致しました。

本日12月1日から12月25日まで毎日記事を投稿する予定となっておりますので、良ければ毎日覗いてみてください!

Advent Calendarとは?

Advent Calendarは主にエンジニア界隈で流行っているもので、クリエイター界隈ではあまり一般的ではない?かもしれません。

なので、もし聞いたことがないという方は以下をご覧ください。

Advent Calendarは本来、12月1日から24日までクリスマスを待つまでに1日に1つ、穴が空けられるようになっているカレンダーです。WebでのAdvent Calendarは、その風習に習い、12月1日から25日まで1日に1つ、みんなで記事を投稿していくというイベントです。

引用元:Adventar

弊社でもエンジニアスタッフが先駆けて KLab Engineer Advent Calendar というものを毎年作成しており、もちろん今年も作成されているので良ければこちらのカレンダーと合わせてご覧いただければと思います!

KLabクリエイターの活動事例のご紹介

ただ「ブログを開設しました」というだけの記事だと味気ないので、宣伝も兼ねてKLabクリエイターの活動事例を2点ご紹介したいと思います。

1. KLab Creative Fes

image2

『君の作ってるそれ、案外凄いかも。』

のキャッチフレーズでおなじみの「KLab Creative Fes」(以下、KCF)についてご紹介です。

KCFとは、世界で活躍するトップクリエイターの皆様を審査員に迎え、静止画・動画の2部門で日本一の学生3DCGクリエイターを決定するコンテストが行われるイベントとなっています。

今年も4回目の開催である「KLab Creative Fes’18」が行われ、沢山の素晴らしい作品が会場に集まりました!(リンク先で入賞作品を見ることが出来ます)

余談ですが、実は私はこのKCFが最初に開催された2015年に3DCGクリエイターとして新卒入社しており、最初のKCFにも会場スタッフとして参加していました。

当時は自分とほとんど年齢が変わらない学生達によるハイレベルな作品を目の当たりにし、一人のクリエイターとして感動や焦りなど沢山の刺激を受けたことを今でも覚えています。

KCFは学生だけではなく社会人の方も無料で気軽に参加することが出来るイベントとなっていますので、来年は是非遊びに来てみてください!

2. KLab Creative Seminar

image1

名前の通り、KLab主催のKLabクリエイターによるクリエイターのための勉強会です。

KLabではクリエイタースタッフのスキルアップや交流を目的として「KLabクリエイティブ勉強会」という社内向けの勉強会を開催しており、普段一緒に働いている同僚が講師になって流行なCGソフトの技術講習や各案件のノウハウ共有等、あらゆる情報交換の場として利用されています。

そんな数ある発表の中で、「この発表って、もしかして社内に発表するだけじゃ勿体ないのでは?」と思うような有益かつ汎用的な発表を、社外の皆様にもお届けできるような場として用意したのが「KLab Creative Seminar」です。

今年はまだ活動を始めたばかりということもあり手探り状態ではありますが、最近では他社様とコラボしてMeetupを開催するなど、活動の幅も徐々に広がってきました。

来年からも少しずつ開催できる機会を増やしていけるように計画中です。

当日は簡単ではありますが軽食を用意した懇親会も行う予定なので、開催した暁には是非遊びに来てみてください!

さいごに

KLabでは社内・社外問わずクリエイティブの魅力を高めていこうと努力しています。

繰り返しになりますがこのブログではAdvent Calendar企画が終了した後も随時記事を更新し、KLabクリエイティブの魅力を伝えてきたいと考えておりますので、今後ともお付き合いいただければと思います!

最後までご覧いただきありがとうございました!

明日の記事はTAG 太田さんのシェーダーのお話です!