ちゃこブログ

お絵かきとUnityとBlenderと日記

【blog】C95 冬コミに出ます

突然ですがC95コミケで席をいただきました。
Unity本を出す予定です。二日目の日曜日 東ト09a です。
webcatalog-free.circle.ms

f:id:charcotte:20181122231923p:plain

内容としては、
Crown Of Nothingness | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
ButterflyWatching | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう
のメイキング本となります。
興味のあるかたは是非遊びに来てください。( ˘ω˘ )

【Unity】Crown Of Nothingness

 UnityRoomに作品を公開しました。前回投稿した作品よりもインタラクティブな要素がある2Dアート作品です。

Crown Of Nothingness | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

f:id:charcotte:20181122223126g:plain

 少女の冠に触れると少女は目を覚まし、世界が闇に包まれてしまいます。リンゴをタップすることで、少女は目を閉じ、世界は元に戻ります。

Spine

Animatorでのアニメーション管理

 前回制作した作品では、単純に瞬きIdleのみを合成するだけだったのでスクリプトから再生していたのですが、今回は色んなステートがあるのでAnimatorを利用しました。スクリプトで瞬きの再生を管理するのは簡単ですが、Animatorではどのように再生をすればよいか悩みましたが以下の記事を参考にStateMachineBehaviourを利用することで実現しました。

tsubakit1.hateblo.jp

f:id:charcotte:20181122214046p:plain
f:id:charcotte:20181122214055p:plain

 

特定パーツのマテリアルを分離

 デフォルトのSkeletonRendererはマテリアルは1つで構成されてます。今回はリンゴに演出を追加するために分離必要がありました。Slotを分離するためのSkeletonRenderSeparatorと特定Slotにマテリアルを上書きするSkeletonRenderCustomMaterialsを利用することで実現しました。詳しくは別記事で書こうと思っています。

ここはリファレンスがかなり少なくドキュメントもなかったので実現するのに一番時間がかかりました。もうリンゴをSpineに含めずに作成しようか迷うほどでした…

 f:id:charcotte:20181122220242p:plain

Shader Graph

 前回に引き続きShader Graphの力を使ってShaderの作成を行いました。

Dissolve Shader

 いったん黒く浸食されてから、消えていくようなシェーダです。一つのパラメータを動かすことで一連の演出を実現できるようにノードを組みました。基本的によくあるDissolveShaderの構造を改造するだけで実現できたので改めてShaderGraphの強さというのを実感しました…これらは薔薇・冠マテリアル適用されています。
DissolveShaderを作るにあたって以下のサンプルがとても分かりやすくて勉強になりました。

github.com

f:id:charcotte:20181122220806p:plainf:id:charcotte:20181122220810p:plain

Apple Shader

 基本的にはDissolve Shaderと同じようなシェーダですが、浸食された際に本体の部分を妖しく光らせるShaderとなってます。これも一つのパラメータを操作するだけで状態を変えられるような構造になってます。Dissolve Shaderを改造して同じShaderにしようか迷いましたが、グラフやパラメータがカオスになりそうだったので分けてしまいました。 

f:id:charcotte:20181122220949p:plainf:id:charcotte:20181122220955p:plain

感想

 冠にタッチすると世界が闇に飲まれていく様子などをShader等を駆使することで概ね自分の想像通りに実現できて満足です。前回よりShaderGraphをよりたくさん使うことができて表現の幅を広げることができたと感じます。Dissolve Shaderでは、UV座標で上から下へ崩壊していくように組んでみたのですが、Spineで出力されたテクスチャUVでは順番がちょっと不自然になってしまったので、もっとShaderを勉強して自然な演出ができるようにしたかったです。
今回はShaderを作ってWebGLでピンクになってしまったり(プロパティに_MainTexをつけ忘れてただけ…)、Spineでうまくマテリアルを分離できなかったりして、モチベーションが下がりまくって完成までめちゃくちゃ時間がかかってしまいました。モチベーションを下げないで創作を続けられるぐらい技術を上げたいです…( ;∀;)

【Unity】UnitySceneMenu v1.1をリリース!

github.com

 UnitySceneMenuをv1.1へ更新しました。とても大きな変更はないのですが、以下の作業を行いました。
関係ないですが日本語のリドミも追加しておきました。

GUIの微修正

 完全に自己満足ですが、ところどころ雑な個所があったGUIを修正しました。

SceneMenu WindowのContext MenuからConfig Windowが開けるように

 SceneMenuのContext MenuにConfig Windowを開く機能を追加してみました。わざわざ上のメニューから探さなくて良くなったので便利になりました。
f:id:charcotte:20180922003047p:plain

左Ctrlキーを押しながらシーン選択で単一ロードが可能に

 ツールの特性上、一つのシーンだけ開きたい場合、そのシーンを選択した後に前に開いていたシーンを選択してアンロードする必要がありました。左Ctrlキーを押しながらシーンを選択することで1つのシーンのみがロードされるようになりました。
f:id:charcotte:20180922002448g:plain

自動ビルドシーンセッティング機能の修正

 自分でこのツールを利用してるときに遭遇した不具合なんですが、自動でビルド設定に登録する機能を利用した後、ビルド設定のシーンの順番を自分の都合のよいように入れ替えたのに、気が付くと初期の順番に戻っているのです。各シーンをIndexで呼ぶ実装をしていたのでシーンの順番は重要でした。にも関わらずこの自動ビルド設定機能は、1番最初のシーン以外は自分がロードできた順で設定するので必ず順番が固定されてしまうのです。
とても不便さを感じたので、前のビルドシーンの設定と順番が変更にならないように実装しました。新規シーンが追加されたら最後に追加され、今まで既に登録されてたものは順番が変わらないようになっています。

全く売れてないです

ぜひ買ってくださいネ!
assetstore.unity.com

【Unity】ButterflyWatching

 UnityRoomに作品を投稿させて頂きました。少女の周りを蝶が舞うというただ眺めるだけの作品です。
ButterflyWatching | 無料ゲーム投稿サイト unityroom - Unityのゲームをアップロードして公開しよう

f:id:charcotte:20180920155102g:plain

 ゲームじゃないの投稿してもいいのかな・・・と思ったけど見るだけの作品を投稿されてる方が他にもいたので思い切ってアップロードしてみました。一応インタラクティブな要素があって、画面をクリックすると青い蝶が出現します。

Spine

 少女を動かすのはSpineを利用しています。髪の毛の部分はSpringBoneで勝手に揺れるようにしています。
SpineでIdleモーションと瞬きモーションの二つを作成して、Unity側ではスクリプトで二つのモーションを合成したり、瞬きのタイミングを制御したりしています。
f:id:charcotte:20180920152334p:plain

ShaderGraph

 なんとなく使ってみたかったのでShaderGraphを使うことにしました。ShaderGraphを使うにはRender Pipeline(今回はLight Weightのほう)が必要なのですが、WebGLでビルドするとPointLightが反映されない問題が発生しました。やけくそでベータ版がリリースされたばかりの2018.3でビルドしたら問題なかったのでこのまま作業しました。
Unity2018.2シリーズではLWRPを入れてビルドするのも一苦労でLibrary内のキャッシュを消さないとビルドができないなどのバグもあり…

Diffuse Sprite Shader

 絵作りのために、少女のスプライトにライトを反映させたかったのですが、SpineのUnityプラグインのDiffuse Shaderだと目のところが不自然にテカッてしまうのでした。そもそもLWRPではこれは使えないし、ライトの影響を受けるシェーダーをShaderGraphで作成しました。初心者だったので以下の記事がとても参考になりました。
www.febucci.com

蝶シェーダー

 シェーダーの知識は1mmもなかったのですが、以下の記事の蝶シェーダの計算式をそのままShaderGraphで表現してみたらあっという間に蝶シェーダーが完成していました。すごいですね。
tips.hecomi.com
f:id:charcotte:20180920155834p:plain

感想

 自分はイラスト描くのが好きなんですが、なんとかその趣味をUnityとマージできないか考えた結果こういうのが出来上がってました。とにかくインタラクティブで動くイラストが作りたかったんだなと完成させてみて実感しました。今回のはインタラクティブとも言い難いですが・・・もうすこし少女と干渉できるような仕組みを作りたかったです。
 LWRPがWebGLに対応してないけど何とかしようとしてとにかく時間を溶かしました。2018.3では利用できるようになってて良かったです。PostProcessingStackで画面を加工したり、パーティクルをいい感じに舞わせたりするのは結構難しかったですが、Unityではトライ&エラーが簡単にできるので完成までひたすら微調整ができるのが良かったです。Shaderもちょっと理解できた気がするので色んなことを学べたと思います。



現在これと同じような作品を作ってるのですが、今度はビルドとかシェーダーでうまくいかなくて1週間ぐらい時間を溶かすことがないようにしたいです。
ちなみに、この作品のイラスト制作~Unityでビルドするまでを解説した技術同人誌を執筆するとかしないとか・・・( ^)o(^ )

【Unity】SpreadSheetConvertTool 使い方-Editor編-

github.com

こちらで公開しているSpreadSheetConvertTool の使い方について解説します。

続きを読む

【Unity制作日記】SpreadSheetConvertTool v1.0をコミットしました

スプレッドシートのデータをコンバートしやすいツールのSpreadSheetConvertTool v1.0をコミットしました!
使い方などは現在作成中です><

github.com
f:id:charcotte:20180825213421p:plain

v0.1からの変更点

ランタイムでデータをコンバー

当初はシートのデータを自分のデータに変換しなんらかのファイルを保存するという想定だったのでエディターでのみ利用することができました。しかし、データを保存する以外にも用途があると感じたので、ランタイムでもコンバートの利用できるように改造しました。

複数シートコンバー

同じようなシートのデータを複数コンバートするために、多くのコンバータを作成する必要があったのが不便でしたので、一つのコンバータで複数データをコンバートできるように対応しました。

シート名の取得

SpreadSheet内にあるすべてのシート名を取得し、表示できるようになりました。シート名をクリックすると、クリップボードへとコピーされます。

【Unity】UnityEditorMemo ver2.1をリリース!

UnityEditorMemoのver2.1をAssetStoreにリリースいたしました。
各所GUIを調整したほか、いろいろな小機能を追加いたしました。
ぜひお試しあれ!
assetstore.unity.com

メモにURLを設定する機能

メモにURLを設定できるようになりました。設定するとメモに[Open]というボタンが出現し、クリックするとブラウザでリンク先が表示されます。
f:id:charcotte:20180817090120p:plain

Slackへメモを投稿する機能

Slackへメモを投稿できるようになりました。
Slackと連携するには事前にSlackのアプリを作成しOAuth Tokenの取得が必要になります。
こちらの記事に取得方法が非常にわかりやすく解説されていますので参考にすればバッチリだと思います。
kan-kikuchi.hatenablog.com

Slackへ投稿するには、Preferenceから[Use slack integration]をオンにして先ほど取得したOAuth Tokenを設定します。
f:id:charcotte:20180817085040p:plain
するとメモ投稿画面にchannnel名とPostToSlackというトグルが出現します。Slackへ投稿したいときはPostToSlackをオンにして、目的のチャンネル名を記述してください。
f:id:charcotte:20180817085207p:plain

Postすると同時にSlackへも投稿されます。
f:id:charcotte:20180817085245p:plain
SlackのAPIエラー処理が上手くできなかったので投稿されなかった場合はいろいろと設定を見直してみてください。

実装にあたって以下の記事を参考にさせていただきました!

baba-s.hatenablog.com
baba-s.hatenablog.com

フォントサイズ変更機能

Preferenceからメモのフォントサイズを変更できるようになりました。
f:id:charcotte:20180817090810p:plain

SceneMemoがよりカスタマイズ可能に

フォントの色やSceneView上に表示するメモの大きさなどが調節できるようになりました。
f:id:charcotte:20180817090613p:plain