【Unity】トゥーンシェーダーとポストエフェクトで漫画風な画面を作る

誰得

ここ最近、Twitterのタイムラインに頻繁に出没する謎のマス目だけの投稿に苛立ちを覚えて"wordle"をミュートワードに登録した皆さんこんにちは。投稿した本人以外意味不明なので勘弁してほしい。unity1weekでも偶に「●●さんがスコア××を獲得しました！」的なつぶやきをTwitterに自動投稿するゲームが見受けられますが、アレのおかげで閲覧数が伸びても評価には繋がらないので辞めた方が良いと思います。

漫画風な画面を作りたい

特に需要があるわけではないのですが、自作ゲームをちょっとインパクトのある画面にしたい場合、漫画風な画面にする、という選択肢も有りだと思っています。

「漫画風」とは、色々な意見があるかと思いますが、個人的には以下のような要素を含んだ画面だと考えています。

• 基本的に画面は二色or三色で構成される
• オブジェクトに対して明暗の境界がくっきりと分かれる
• オブジェクト、背景に輪郭線が描かれる

特にUnit製のゲームの場合、巷で「Unity臭がある」と陰口を囁かれるケースを目にするので、それを感じさせないような絵作りの一つとして漫画風な画面造りもチャレンジするだけの価値はあると思います。

オブジェクトに対する設定

まず最初にオブジェクトに使用するシェーダーをトゥーンシェーダーに変更します。
今回使用するモデルはStandardシェーダーだとこんな感じ

これを前々回に紹介したFlatKitToonシェーダーに変更します。

assetstore.unity.com

Colorのみ指定し、Cell Shading ModeでNone(なし)とすると

ここからCell Shading Modeを「Step」に変更

明暗の境界がくっきりと分かれて表示されるようになります。

次に後で付与するアウトラインを補強するために「Rim」の設定を追加します。

「Rim」は本来、オブジェクトの後ろに光源がある場合の回り込む光の具合を表現するために使いますが、ここでは暗い色を指定して背景からオブジェクトの輪郭が浮かび上がるような形に仕上げます。

最後に「Specular」を設定して明るい部分をさらに明るくして

Rimで表現する暗い部分が大きくなり過ぎないように調整します。

輪郭線を付ける

輪郭線はポストエフェクトで表示します。シェーダーで表示する手もありますが、それだとあまり綺麗な線が描画できないし、オブジェクト内部のエッジ部分に線が描かれないのでポストエフェクトを使用した方がベターだと思います。
今回はFlatKitToonに付属していたアウトラインエフェクトを使用しています。

これでオブジェクトに対する設定が完了です。同様に設定した背景と合わせるとこんな感じの画面になります。

課題

これで万事OK、というわけではなくて課題もあります。
ポストエフェクトで表示する輪郭線は主に深度情報と法線情報を使って抽出されますが、その抽出の為の設定が以外にシビアです。

特に深度情報を使って輪郭線を抽出する手法では、その閾値を小さくすると地平線のような遠方にある輪郭線が過大に抽出されて塗潰されてしまいます。

逆に閾値を大きくすると小さな輪郭線が表示されなくなります。下の図だと手前の歩道と道路の段差が輪郭線として表示されません。

下の動画ではカメラが切り替わる毎に輪郭線を抽出する閾値を変更して何とか課題を解決しようと試みていますが、漫画風の画面を作りこむには更に工夫が必要になってきそうです。

【Unity】DOTweenのDOVirtualを使おう

ストレッチ

リングフィットアドベンチャーは最初のストレッチの段階で疲労してしまう皆さんこんにちは。ストーリーモードをプレイするとリングコンをお腹に押し当てる「腹筋ガード」を異常にやらされるのでお臍の辺りが筋肉痛で辛いです。

インプレッション数

毎回ブログを更新するとTwitterの方に告知をするのですが、前回記事の告知ツイートが何故かリツイートされてインプレッション数がいつもとは桁違いでした。
最初は冒頭に載せているゲームの進捗画像が注目を浴びたのか、と喜んでいたのですが、良く調べるとブログの記事がアセット紹介だったのでUnityのアセットストア公式アカウントが記事に反応してリツイートしてくれたおかげでした。ありがとうございます。次は自力でバズれるように頑張ります。(本当にありがとうございます。)

DOTween

今更紹介するまでもないのですが「DOTween」というアセットはオブジェクトの移動や回転、拡大縮小を簡便に行えるアセットで、例えば「地点Aに1.5秒で移動する」といった動作(Tween)はAPIコール1つで実装することができます。

assetstore.unity.com

ただ、「1.5秒間でオブジェクトが拡大(縮小)し、最初の大きさに戻る」といった動きをしたい場合は、Sequenceというクラスに「拡大する動作(Tween)」と「もどの大きさに戻る動作(Tween)」をそれぞれ登録してSequenceを実行する(Playメソッドをコールする)必要がありました。

まぁ、そのような実装方式で作業を進めても問題ないのですが、「いったん大きくなって元に戻る」といった単純な動作にわざわざSequenceを使うまでもないかなぁと個人的に思っていて、そういったときはDOTweenのToメソッドを使った方式で実装していました。
この手法についてはかなり前に記事にして紹介しています。

www.karvan1230.com

アニメーションカーブを使う

上の記事では拡大縮小の計算にsin,cosの三角関数を使用していますが、もうちょっと拡大縮小の動きに自由度のある方法がないかと考えた時、アニメーションカーブを使う方法が良さそうに思います。
アニメーションカーブはスクリプト内にAnimationCurveクラスを定義するだけでInspector上にアニメーションカーブを編集できるエディタが表示され、任意の形のカーブを編集する事ができます。

public AnimationCurve _customEasing;

今回は「いったん大きくなって元に戻る」という変化を表すカーブを作りました。
縦軸が変化量で横軸が経過時間を表し、どちらも0～1の値をとります。

縦軸の値は以下の関数から取得できるので、

/// <summary>
/// アニメーションカーブから値取得
/// </summary>
public float GetCurveValue(float time)
{
    return _customEasing.Evaluate(time);
}

timeの値をTweenさせたい時間で0～1に変化させればアニメーションカーブに応じた変化量が取得できます。

DOVirtual

上の記事のようにDOTweenのToメソッドを使ってtimeの値を変化させても良いのですが、その場合、変数timeはグローバル変数である必要がでてくるので、もっと手軽にローカル変数のみで実装したい場合は、DOVirtualを使用した方がコード的にもスッキリした形で実装できます。

DOVirtual.Float(開始の値, 終了の値, 時間, コールバック); 

DOVirtual.Floatに渡す第三引数がコールバック関数で、そこにアニメーションカーブに応じた変化量を渡して

/// <summary>
/// ジャンプ動作終了
/// </summary>
public void OnComplete_JumpMove()
{

    DOVirtual.Float(0.0f, // 開始の値
    		1.0f, // 終了の値
    		0.6f, // 時間
    		value => ChangeScale(GetCurveValue(value))); // コールバック

}

/// <summary>
/// スケールの変換
/// </summary>
/// <param name="value"></param>
public void ChangeScale(float value)
{
    this.transform.localScale = new Vector3(OriScale.x + value,
                                            OriScale.y - value,
                                            OriScale.z + value);

}

縦、横のスケールを変化させるようにします。
下の動画では各ペンギンのジャンプ動作が終わったタイミングで縦、横のスケールを変化させています。

【アセット紹介】それっぽいトゥーンレンダリングの画面が作れる Flat Kit: Toon Shading and Water

持続可能なライフスタイル

ブレス オブ ザ ワイルドの武器の壊れやすさは最近流行りのSDGsの精神に反していると思う皆さんこんにちは。一度壊れると直すこともできないので武器の消費量が半端ない。強敵相手でも属性武器とか勿体なくて使えません。その割に防具はちっちも壊れない(盾を除く)ので一体どういう理屈なんですかね？

Flat Kit: Toon Shading and Water

ご存じのようにブレス オブ ザ ワイルドではトゥーンレンダリングが使用されておりセルアニメ風なビジュアルが特徴です。
最近ではインディー界隈でもトゥーンレンダリングの需要は高いようで、「ユニティちゃんトゥーンシェーダー 」や「lilToon」というシェーダーは無料で配布されており気軽に使用することができますが、どちらもテクスチャを張り付けたモデルに対してトゥーン調でレンダリングする、という物なので必ずテクスチャが必要でした。
今回紹介する「Flat Kit: Toon Shading and Water」では3Dモデルに色をつける色付けシェーダーとして使用でき、かつ、トゥーンレンダリングっぽい陰影をつける事が可能となっています。

Cell Shading Mode

今回は下の車のモデルに対して使ってみました。
この車のモデルはテクスチャを使用しておらず、各色に応じたStandardシェーダーのマテリアルを複数使用してレンダリングしています。

各色マテリアルのシェーダーをFlat Kitのシェーダーに変更していきます。
Colorの項目に色付けしたい色を指定、Cell Shading Modeの項目でトゥーンレンダリングの手法を指定します。

最初はColorのみ指定し、Cell Shading ModeでNone(なし)とした場合

指定した色でのベタ塗りなのでUnlitシェーダを使ったような表示になります。

次にCell Shading Modeを「Single」とした場合

先ほどのベタ塗状態から少し陰影がつけられた感じになります。

次にCell Shading Modeを「Step」とした場合

陰影ががっつりとつけられ、いかにもトゥーンレンダリングという感じ

最後にCell Shading Modeを「Curve」とした場合

陰影がなめらからにつけられて自然な感じになります。

アウトラインも付けられる

ありがたいことにアウトライン付きのシェーダーも用意されています。
Cell Shading Mode「Curve」＋アウトライン

そこそこ綺麗な線が出せます

ただ、このシェーダに限ったことではありませんが、シェーダを利用するアウトラインは線を太くし過ぎると角の部分で線が途切れたり、外殻以外のエッジ部分ではアウトラインは表示されなかったり、と思ったような線が出せない場合もあります。
エッジ部分を含んだ綺麗なアウトラインを付けたい場合は、カメラエフェクトの方を使用した方が良いと思います。

幸い、アウトライン抽出のエフェクトがこのアセットには付属しているので、それを使用します。下のコンポーネントをMainカメラにアタッチして

Cell Shading Modeを「Step」とした場合

綺麗なアウトラインが表示され、漫画風の絵になります。当然ながら車以外のオブジェクトにもアウトラインが付きますが。

そこはケースバイケースで考える必要がありそうです。

【雑記】Unity1Weekの感想等

福袋報告

抽選販売に当選したSwitch(+ソフト4本)がお正月にようやく届いたと思ったら、同梱されてきたゲームはパーティゲーム2本(桃鉄とボンバーマン)とカードゲームとモンハンで独り身には中々辛い結果だった皆さんこんにちは。桃鉄なんか一人でやっても涙が出るだけですし、デュエリストではないのでカードゲームのルールとか覚えられる気がしません。結局、ブレスオブザワイルドを改めて買い、桃鉄とカードゲームは会社の同僚にお譲りしました。BOTW面白すぎ。おかげでモンハンが未だ未開封です。

結果報告

unity1weekの結果が発表されました。今回はお題が「正」ということで私は"間違い探し"をベースにした作品を投稿したのですが、総合で47位という結果に終わりました。

各指標をみると絵作りや雰囲気が高評価でTop20内にランキングされている半面、斬新さや操作性が3.2点台ということで、総合ランキングで伸びずにランクインがギリギリの結果になりました。

楽しさ	3.618 (ランク外)	絵作り
操作性	3.206 (ランク外)	雰囲気
斬新さ	3.265 (ランク外)	サウンド

反省報告

unity1weekでは毎回そうなんですが、お題からゲームを構想するのでなく、その時に作りたいゲームをお題に合わせる形で作成していきます。
今回の作品はゲーム企画コンテスト向けに作っていたデモゲームの一部をunity1week向けにアレンジしました。
なので作品の出来自体は自分的には満足なのですが、デモゲームを本作として作りこむ際には斬新さや操作性が低かった原因をきちんと精査して反映する必要があるようです。

また、楽しさの指標が伸びなかったのは、オブジェクトクリック時のSEや間違いを見つけ出した時のエフェクトといったUXデザインに対する作りこみが浅かったのではないかと思いますし、もう少しステージ構成というかレベルデザインを詰めればよかった、細かいディテールをもっと積み上げる必要があったのだと思います。

上位にランキングされている作品を見るとやっぱりそういった方面の作り込みがきちんとされている作品が多いように思います。
また、ランキングには関係なく投稿作品全般として、一時期のような「2Dドット絵のスタティックパズル」が多数を占める傾向から、個性的な斬新さを求めるような作品が増えてきており、其らが高い評価得ている傾向が見れるので、これからは(参加するかは別として)定番型のゲームをアレンジするのでなく、ちょっと視線をずらした作品を作る必要があるのかなぁ、と思います。

作品報告

という事で、実際の投稿作品は以下のリンクです。前述のように手軽に遊べる"間違い探し"なので気楽にプレイしてみてください。

unityroom.com

ポートフォリオ向けにプレイ動画も作成しました。

www.youtube.com

【雑記】夜明けの薄明

寒波到来

長く続くコロナ禍もあって思うようなボーナスが支給されずに身も心も財布の中身も寒い皆さんこんにちは。思いがけずヨドバシカメラの抽選販売に当たってしまい四万五千円が飛んだ挙句、届くのは来年の一月以降とか完全にお預け状態、キャッシュだけが失われているので年末年始は寂しい予算で手持ち無沙汰を埋めないといけません。どうしよう。

Unity1Week

年末恒例というべきか、現在unityroomというサイトでunity1weekというイベントが開催されています。

unityroom.com

もうすでに開発期間は終わっているのですが、私はいつも通り未だ開発中です。ごめんなさい。
今回は「正」がお題ということで、間違い探しに少しアレンジを加えたゲームを作っています。

間違い探しのロジック自体は以前デモ用に作成したゲームから流用しているのでゲーム自体は普通に遊べるのですが、何故か開発が終わりません。なぜでしょう？自分でも不思議です。もう世界の七不思議に加えても良いと思う。
とりあえず年内の完成目指して頑張ります。

今年を振り返る

年内最後の更新になるので今年を振り返ってみると、今年は例年とは違い色々な努力や苦労が報われる場面が多かった気がします。
例えばこのブログも一日のPV数が年始の頃と比べて2倍強増えています。ありがとうございます。
まぁ収益化できるほどのPV数では無いのですがブログを続ける励みになるし、更新のモチベーションになります。

またunity1weekへの投稿作品も念願だった総合ランキング入りすることが出来たし、その作品が色んなサイトやTV番組で紹介されて鼻高々な気分になれたり、開発中の脱出ゲームの方もIndieLiveExpoで紹介されてリアクションを貰えたり、プロモーション動画にコメントが付いたりして嬉しかったし、ゲーム企画コンテストに応募した作品は一つが二次審査通過、もう一つは予備審査通過で、どちらも今日現在(12/28)の段階ではお断りされていなかったり、とゲーム開発の方にも光明が差し込んできた気がします。

まだ薄明りの段階ですが、これが「夜明けの薄明」だと信じて来年は日が明けるような年になるよう頑張りたいと思います。

【アセット紹介】粘土細工気分で3Dモデルが作れるアセット「Clayxels」

例年通り

今年もクリスマスは無かった事にしようと画策している皆さんこんにちは。街を歩けばクリスマスイルミネーションにクリスマスソング、店に入ればクリスマスセールで子連れやカップルで一杯、とか、もうリア充重視の社会形態にはウンザリなので、私は自戒の意味も込めて今年は目を閉じ、耳をふさいで自室に閉じこもっていようと思います。ハイそこ、いつも通りとか言わない。

ゲーム企画コンテスト中間結果

秋口に募集されていた集英社と講談社のゲーム企画コンテストですが、中間結果が続々と発表されています。
集英社の方のゲーム企画コンテスト(GAME BBQ)は二次の書類審査までが終わり、私の企画は無事に書類審査を通過したので次は年明け早々に面接審査(オンライン)を行う予定です。かなり緊張するとかと思いますが、次で最後の審査らしいので自分の企画に自信をもってアピールしたいと思います。
講談社のゲーム企画コンテスト(ゲームクリエイターズラボ)の方は予備審査が終わり、こちらも無事に通過しましたようです。まぁ、予備審査は半数以上の作品が通過しているのであまり予断を許さないのですが、自分が苦労して練った企画の力を信じて一次審査の結果発表を待ちたいと思います。

ゆく年くる年セール

現在、Unityのアセットストアでは「ゆく年くる年セール」と題されたセールが行われており、いくつかのアセットが30%オフ、50%オフで購入することができます。
その中でも気になったアセットを購入したので今回はそのアセットのご紹介

"Clayxels はUnityエディター上で3Dモデルを作成するするためのツールキットです。ボクセルを使用することでさまざまな方法全体で使用できる軽量のポイントクラウドを生成します。エディターとゲームの両方で機能し、Clayxels で作成されたすべてのものはいつでもインタラクティブに変更できます。
すべての Render Oipelines、Built-In、URP、HDRP で動作します。"

(アセットストア紹介文より)

・・・とあるようにこのアセットでは3Dモデルを作ることができるのですが、特徴としては粘土細工を作るように幾つかのプリミティブ(基礎的)な形のオブジェクトを使用してそれをくっつけたり削ったりしてモデルを作成する方法を取ること。

こう書くとちょっと難しい印象を持つかもしれませんが、曲率や半径を指定してオブジェクト作るCAD的な操作方法よりもこちらの方が直感的にモデルを作成できると思います。

使い方

Hierarchy上で右クリック→3D models→Clayxel Containerを選択、HierarchyにClayxel Containerが作成されます。

このClayxel Containerが作成する3Dモデルのルートとなり、その配下にオブジェクトを追加していきながらモデルの形状を整えていきます。

Inspector上のClayxel Containerコンポーネントにて[add clay]ボタンを押下、

Clayxel Containerの子オブジェクトとしてClay Objectが生成されます。

このClay Objectには幾つかのプリミティブな形状が設定されており、Clay Objectコンポーネントの[type]の設定を変えることでリアルタイムに形状を変更することができます。

type別の形状

cube	sphere	cylinder	torus
curve	hexagon	prism	noise

また、Clay Objectは同じ形状を繰り返して作成することもできます。

mode欄を[offset]にしてsolids欄の値を3にすると

同じtype(cube)のオブジェクトが3つ作られます。
これらの繰り返しの間隔はClay Objectの子オブジェクトのoffsetterの位置が影響しています。

このため、offsetterを上下に変更すると繰り返しの間隔を変えることができます。

同様にoffsetterを回転させると繰り返しの角度差も変更することができます。

くり抜く/色を塗る

例えば箱状のものを作ろうとした場合、5面の平板を組み合わせるよりも直方体をくり抜いた方が作成は早く済みます。

こうした場合、

1. [add clay]ボタンを押下してCubeのオブジェクトを生成
2. 再度[add clay]ボタンを押下してCubeオブジェクトを追加作成
3. 追加したClay Objectのblendの設定を[sub]に変更

すると
その形状で他のオブジェクトをくり抜くことができ、かつ、色を上塗りすることが出来ます。

オブジェクトをくり抜かずに色だけを変えたい場合はblendを[paint]にすると、デカールを張るように色を上塗りすることができます。

なお、これらの処理はHierarchy内で上にあるオブジェクトに対して影響を与える(下には影響を与えない)ことに注意が必要です。

作ってみた

機能説明だけしても仕方ないので形状が簡単な宝箱のモデルを作成してみました。

CubeとCylinderで箱と蓋の部分として、それぞれを同じ形状でくり抜いています。初めてなのでドキュメントを見ながらの作成でしたが20分～30分ぐらいで作成することができました。

利点と注意点

オブジェクトを組み合わせて作る手法は慣れが必要かもしれませんが、モデルの厚さや曲率などに厳密な正確性を必要しない場合はこちらの手法の方が直感的に早く作成できると思います。

また、リアルタイムに処理されるためゲームプレイ中でもモデルの形状を変更することができます。下の動画のように閉じた箱をリアルタイムにくり抜いて内部を見せるようなこともできます。(先ほどの[sub]属性のオブジェクトを移動させるだけ)

ただし、相応にPCの負荷は掛かっているため大規模なオブジェクトの作成には向いてないと思います。
箱庭的なオブジェクトもしくは小物など、シーン内で使う場所を限定的にすることが必要です。
また、WebGLには対応していないことも注意してください。

【雑記】注意喚起と進捗報告

ローチケ電子チケット

コンサートのチケットを購入したのにコンサート当日になってもチケットが受け取れず、かつ払い戻しもされずに泣き寝入り状態の皆さんこんにちは。

ローソンチケット(ローチケ)の電子チケットは二度と利用しません。
電子チケットは専用アプリでしか受け取れない、としているにもかかわらず、アプリを起動するとSMS認証を求められ、データ通信のみの携帯では認証エラーとなり先に進めません。WEB等で認証用の電話番号を修正することもできないので完全に詰みです。

アプリレビューを確認するとこのような不具合は以前から指摘されているようですが、ずっと改善されずに放置状態となっているようですね。
ちなみに仮にSMS認証できたとしてもチケット購入時に入力した情報は変更不可なので、チケット購入後に携帯を新調して電話番号が変わった場合や、購入時に入力ミスをした場合でも受け取ることはできないようです。なんだそれ、ローソンチケットとしては手数料さえ手に入れば後はどうでも良いということなんでしょうね。

進捗報告

ゲーム企画コンテスト向けの作業が終わり、11月から3D脱出ゲームの制作を再開しています。
7月から約4ヵ月間放置していたので、再開当初は内部の仕様をアレコレ忘れてしまって取り戻すのに苦労しましたがようやくペースを取り戻し、新しいステージ(フロア)の制作が一段落つきそうです。

エレベーターを出てからキッチンまで

キッチン内部の様子

その奥のダイニング

キッチン内部にはランプのパズルを仕込んでいます。

こんな感じでキッチンルーム側からスイッチを押すとダイニングルーム側のいずれかのランプが点灯、

ダイニングルームのランプがキッチンルームのどのスイッチと繋がっているか記号を合わせる、というパズルなんですが、

別の壁際にもスイッチが3つあり

キッチン側からは見えない場所にそれと繋がっているランプがあり、且つ

ダイニングからキッチンへは戻れないので

どうやって3つ分の正解を導き出すか？というパズルです。

ちなみに正解の組み合わせはランダムなので毎回変わります。
ちょっと解答法を考えてみて下さい。