進捗報告(13) + UnityAssetStoreのセール

概要

泡盛もろみです。

今回は
・Unity Asset Storeのセール
・タイトル画面公開
です。

Unity Asset Storeのセール

明山昇です。
皆さんは30%オフとか50%オフとか聞くと、必要ないのにお得な気がして買ってしまう、そんな経験は無いでしょうか。私はあります。そうして溜まった積みゲーがどれだけあるか。考えたくもありません。
ですが今からお話しするのは間違いなくお得な話です。(詐欺みたいな導入)

ご存知かとは思いますが、UnityにはAsset Storeという、各種素材…3Dモデルや画像などを購入出来るショップがあります。
https://assetstore.unity.com
こちらのサイトで現在、「Fantastic Fantasy Mega Bundle」というものが販売されています。
https://assetstore.unity.com/mega-bundles/fantastic-fantasy
これが恐ろしい事に、通常$45.98のアセットが、たった$9.99で購入出来るのです。
更にそれだけでは無く…。サイトの下に進むにつれて、「Get more for just $19.99+」「Get everything for only $29.99+」という表記があると思います。これは、「追加で$19.99出せば」では無く、「$19.99出せば($9.99のバンドルに)加えて」その下に書かれたアセットも追加される、という意味です。つまり$9.99のバンドルも内包しています。
$29.99のバンドルに至っては、$9.99、$19.99それぞれのバンドルを内包した上で、更に7つのアセットが追加されます。通常価格の合計は$466.91!!それがたったの$29.99で!!しかも何れも素材としてかなり出来が良さそう!!

という事で当サークルでは、この意味を理解した瞬間、購入を決定しました。
まだ実際に使うかどうかは決まっていませんが、何れにせよ持っておくに越した事はありません。
実際、インポートするだけで、こんな感じのシーンがすぐに作れます。

素材収穫の画面っぽくないですか?
これはサンプルとして用意されたSceneに対しUIを貼り付けただけです。小屋の素材などは別個に用意されていますので、自分で自由に組み合わせて小屋や大きめの家などを作る事も可能です。

とかくお得なバンドルですので、是非皆様も購入をご検討下さい。(回し者ではありません、念のため)
ただ、このセールは月末までなので、この記事が載っているであろう26日の時点で、残り3日程度になっていると思います。決断はお早めに。

進捗報告(11) + Blenderの練習

概要

泡盛もろみです。

今回は
・最近のBlenderの練習成果
・ロゴ画像の作成
です。

最近のBlenderの練習成果

Blenderでの3Dモデル作成の練習にお城を作成しました。
実は和城を舞台にしたゲームなども案が出ているので、その舞台をつくるための練習も兼ねています(?)。

今回作成したのは松本城です。

これをUnityに取り込んで自作シェーダを適用するとこうなります。

進捗報告(10) + UI用ボタンの作成とか

概要

泡盛もろみです。

今回は
・UIボタンの作成 (byミサゴ)
・作成したアニメーションの紹介 (by昇)
です。

UIボタンの作成

東雲ミサゴです。

今回は技術面の記事として、前回作ったゲージ付きボタンの作成の流れを紹介したいと思います。
詳しい方も沢山おられると思いますが、自分用の覚書も兼ねて初歩的な事も書いておきたいと思います。

今回はまず、ゲージのついたボタンの見た目を作っていきます。

画像の準備（エディタ外の作業）

スプライト（2D画像）として使う画像を作成します。
ボタンのアイコンとして用いる円形の画像と、その画像より外径が20px大きい円形の画像を作成します。
これらを重ねた際にはみ出す10px分をゲージとします。今回は100pxと120pxとしました。

これを、pngなどの透過情報が保存される形で出力しておきます。
後に説明がありますが、特にゲージ用の物は真っ白にしておきます。

エディタへの取り込みと設定

上記の画像をエディタに取り込み、InspectorからTexture TypeをSpriteに変更します。

ボタンの配置

ボタン本体となるオブジェクトを作成します。
HierarchyウィンドウにCanvasを、その子オブジェクトとしてUi-Buttonを作成します。
（CanvasはUIを描画するための領域です）
このButtonを選択し、WidthとHeightを大きい方の画像の外径に合わせます。（↓ここでは120x120）

そして、Image内のSource Imageに先程の外径120のSpriteを指定します。
Projectウィンドウから設定欄にドラッグ&ドロップが分かりやすいと思います。

ここでSource Image直下のColorを変更しておいても良いでしょう。上の画像ではグレーっぽい色になっています。
ゲージがない状態での背景として表示させたい色を指定しておきます。

最初に画像を準備した際に真っ白にしたのは、ここの都合です。
指定色になるのではなく乗算のようで、あとから色を変更する事を考えると白が分かりやすそうです。
（特に私はこれまで画像を触ってきていないので、目的の色を出すのに苦労する）
画像を複数準備して差し替える、という場合はこの限りではありません。

さらに画像を配置

続けて、ゲージとして伸縮する部分とボタン中央のアイコンとなる部分の画像も配置します。
先程のボタンの子オブジェクトとしてUI-Imageを2つ作成し、同様の流れでSource Imageを指定していきます。

1つめにはゲージ用の外径120、2つめにはボタンアイコン用の外径100のものを指定します。

ここで注意点ですが、UI-Imageはデフォルトでは100x100で作成されてしまうようなので、ゲージに用いる側のオブジェクトはInspectorのRect TransformからWidthとHeightを120にしておきます。

指定できたら、ゲージのInspectorから色を変更してみましょう。
サイズの設定が出来ていれば、アイコン部分の外側にゲージの色が表示されるはずです。

これで見た目が出来上がりました。
この緑色の部分が表示される割合を増減させることで、ゲージを表現しています。

ゲージとして動かすために

さて、形は出来上がりましたが、どこをどう操作すればゲージが動いて見えるでしょうか。
設定していくのは動かしたい部分なので真ん中の画像ですね。

Hierarchyウィンドウからボタンの子オブジェクトとして配置したUI-Imageを選択し、Inspectorから…

Image Typeの指定

Image Typeでは画像の表示方法を指定することとができますが、この中からFilledを選択します。

するとImage Type以下の項目がFiled用に変わり、その中にFill Amountというものがあります。

このFill Amountを0〜1の間で指定することで、画像がその割合だけ表示されるようになります
（拡大縮小ではなく、始点から終点に向けて順に表示していく形）

Fill MethodとFill Originの指定

Fill Methodの項目からRadial 360を選択します。初期値がこれかもしれません。
さらにFill Originの項目から起点を選択します。

Clockwiseのチェックボックスは、有効にすると時計回り、無効にすると反時計回りになります。

〜〜
余談になりますが、回転する動きは他にRadial 90、Radial 180があり、それぞれ90度、180度の扇形に動きます。
デジタル式のスピードメーターのような動きには良いかもしれませんね。
直線的に動くものはHorizontal、Verticalでそれぞれ横向き、縦向きの動きになります。
こちらは棒状のゲージが伸びていくイメージですね。
〜〜

とりあえず完成

こうして下のようなものが出来ました。

エディタ上ではこれで一段落となります。やったぜ。
最終的にはこれをスクリプトから操作していく事になります。

切りが良いので今回はここまでとします。

進捗報告(9) + アニメーションレイヤーの話

概要

泡盛もろみです。

今回は
・アニメーションレイヤーについて (by昇)
・UIボタンの作成 (byミサゴ)
です。

アニメーションレイヤーについて

明山昇です。
ちまちまとアニメーションを作っていますが、合わせてアニメーションレイヤーについて調べてみたりしたのでここでご報告を。

なお、今回の記事はこちらのサイトを参考にさせて頂きました。この場を借りて御礼申し上げます。
- Unityを使った３Dゲームの作り方（かめくめ）
- XR-HUB

まずはこちらをご覧ください。

これは私が作った、走るアニメーションです。
よく見て頂くと分かる通り、変わっているのは上半身だけで、下半身は同じ動きをしています。
最初はUMotionでキーフレームをコピー&ペーストして作っていたのですが、コピペでちょっとズレたりする場合もあります。
共通の部分は使いまわしたり出来ないものかと調べた結果、アニメーションレイヤーが使えそうだなという話になりました。

アニメーションレイヤーってなんやねん

アニメーションに別のアニメーションを被せるものです。
例えば上半身だけ動いているアニメーションと、下半身だけ動いているアニメーションを重ねることで、全身が動いているアニメーションを作ったり出来ます。
デジタルで絵を描く時に使うレイヤーと感覚は同じです。
これを使うとこんな感じのことが出来ます。


↓

レイヤーの設定には、ベースとなるアニメーションに対し、アバターマスクという、どの部位に対するアニメーションレイヤーを有効にするかという設定を使用します。
アバターマスクは[Assets]→[Create]→[Avater Mask]で作成できます。

上の例ではこんな感じで上半身のみに対し有効になるように設定しています。
(緑が有効にする部分)

アニメーションレイヤーの制御

アニメーションレイヤーはAnimator画面で設定出来ます。

"Spine"というのが追加したレイヤーです。

設定したレイヤーを有効にするか、しないかというのも設定出来ます。
これはUnityのGUI上で設定出来る他、スクリプトではAnimator.SetLayerWeight(x,y)で設定可能です。
　x=対象レイヤーのインデックス番号(Animator.GetLayerIndex("レイヤー名")で取得可能)
　y=Weightの値(0なら無効、0より大きく1未満なら両者を合成、1なら完全上書き)

細かいソースは省略しますが、これを使って、片手持ちと両手持ちを切り替えるボタンを作ってみました。
こんな感じになります。

このように、アニメーションレイヤーを使えば、予め設定したレイヤーを有効にしたりしなかったりする事で、対象のコンポーネントの動作を制御する事が出来ます。
今はレイヤー制御用のコントローラーを作ってそれにスクリプトをアタッチしているのですが、実際には、コンポーネント自身にスクリプトをアタッチして、コンポーネント毎にどのレイヤーを有効/無効にするかを設定出来るようにした方が良さそうです。
それはまた後日作りたいと思います。

さて、簡単ですが以上になります。
参考になれば幸いですし、また、「いやこうした方がいいよ」みたいなご意見頂けますと勉強になります。

1作目進捗(7) + シェーダの調整

概要

泡盛もろみです。

今回は
・シェーダの調整 (by泡盛)
・装備について (by泡盛)
について書きたいと思います。

シェーダの調整

シェーダに関する内容は前回支援者限定部分に記載していましたが、今回はこちらで解説します。
理由は
・先週時点でこんなに弄ることになるとは思わなかった
・技術的な話は進捗とは別に公開していきたい
というところからです。

前回ちょこっと言った「ゲーム画面にあわせた調整」をはるかに超える大改修が入ってしまいました。
シェーダについて右も左もわからない人間がシェーダを自作した過程を、二回に分けて掲載したいと思います。

1回目：
・Toon
・アウトライン
・法線マップ
・ハイライト
・影を落とす/受ける

2回目：
・影の単純化
・透過
・金属っぽさ

Toon

「Toon」とは。つまりアニメっぽい感じです。
左：Standardシェーダ
右：Toonシェーダ

明暗がハッキリクッキリとします。

これについてはこちらのサイトを参考に作成しました。
Rampテクスチャの色を白〜黒にして使用しています。
【Unityシェーダ入門】トゥーンシェーダを自作してみる

アウトライン

アウトラインは、絵でいうところの主線ですね。

こちらを参考に実装しました。
Unityでシェーダー描いてみたい

そこで色々探した結果、ポストプロセスという手法も検討することにしました。
ポストプロセスとは...なんかカメラ側で撮影した画像をあとから調整する？撮影後加工？そんな感じだと思ってます。

色々探してこちらを参考にさせていただくことに。
【Unity】セルシェーディングを１から作ってみるメモ その３ 脱Post-process【Shader】

これはいい感じなので、アウトラインはこれで決定。

ちなみにアウトライン色は単に黒ではなく、RGBをHSV変換して少し暗くした色にしています。
参考はこちらです。
【Unity】RGBをHSVに変換して明るさとかを変えるシェーダー

先週の進捗で触れた内容はここの実装の話まででした。
正直、シェーダの実装はここまででもいいんじゃないかと思ってました。

法線マップ

色々あって、法線マップを適用したくなりました。
法線マップとは...まっ平らな面に凸凹の情報を与えられる魔法のような仕組みです。
参考はこちらです。
Unity シェーダーチュートリアル ノーマルマップ

この何もない壁が、

法線マップ適用で突然それっぽくなります。

ハイライト

アニメっぽい表現になって、法線マップも適用できて、もういいかな？と思ったところで気がつきました。
ハイライトがない。
ここまで色々シェーダをいじりながら調べたのでだんだんわかってきています。
ハイライトを入れるなら、スペキュラーとグロスをいじればいいのでは。
ということで適用したのがこちら。

・・・なんか物足りない。(二度目)

光り方が自然すぎて、逆になんか変というか、アニメっぽくなくなってる気がします。
アニメっぽいハイライトってなんだ。
視点とは関係なく、なんかこう白くなるアレ。アレがほしい。
(注:R18的なアレを隠す魔法の光ではない)

ということで、ここはRampで対応することにしました。
(ここで壁の色が変わったのは、前回撮影まで色を適用するのを忘れていたからです。書きながら実装を巻き戻しつつ撮影していたので。あまり影響ないので気にしないでください)

うん、これくらいの方が好みです。いいかんじ。
ゴブリンの鼻の頭が光っているのが個人的にポイント高いです。

ちなみに実装方法はRampテクスチャをこうしておいて

影を落とす/受ける

ハイライトを入れた後に気づきました。
この人たち、影が落ちていないんです。

まずはなぜ影が落ちていないのかの調査から・・・も何も、Toonで参考にさせてもらったサイトではCustom Lighting Modelでatten(=attenuation, 減衰)を無視してました。
これを適用してあげれば、影が落ちました。

今回はここまで

先週の内容からだいぶシェーダに変更が加わりました。
冒頭でも述べました通り、次回もシェーダの実装について触れたいと思います。