ちゃこブログ

お絵かきとUnityとBlenderと日記

【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

【Unity制作日記、C#】いつも悩むよC#

少しでもかっこよくコードを書きたいと思うとすぐに悩んでしまいます。
今回、久々に作成したEditorツールの中で躓いてしまったところをメモしてみようと思いました。
charcotte.hateblo.jp

  • 継承をするクラス構造
    • 失敗
    • 最終的なクラス構造
  • List<派生クラス>からList<基底クラス>へのキャスト
  • List<派生クラス>からList<基底クラス>へキャストすると参照はどうなるか
  • まとめ
続きを読む

【Unity】InspectorのHeaderに要素が追加できるようになったよ【2018.2】

Unity2018、時代に追いつけてないですが、Editor拡張スキーとしてはPackage配信されてる公式AssetのEditorスクリプトが大公開されていて、それを眺めるのが最近の日課になっております!

公式Editorスクリプトを眺めていて小ネタを発見したので紹介してみます。

InspectorのHeaderに要素を追加する

  • Editor.finishedDefaultHeaderGUI

このイベントが2018.2から追加されました。
Inspectorの一番上の領域に、自作のGUIをねじ込めることができるようです。
(GameObjectのインスペクタを弄ろうとして痛い目にあった身としてはとても嬉しいAPIです!)

適当に表示させてみたスクリプトが以下の通りです。

using UnityEngine;
using UnityEditor;

[InitializeOnLoad]
internal class HeaderTest {

    static HeaderTest()
    {
        Editor.finishedDefaultHeaderGUI += OnMyCustomHeaderGUI;
    }

    public static void OnMyCustomHeaderGUI( Editor editor )
    {
        GUILayout.Label("わーい(^^♪", GUI.skin.label);
    }
}

f:id:charcotte:20180723222216p:plain

Adressable AssetsでAssetのInspectorにどうやって要素を追加しているんだろうかと知りたくてPackageの中身を覗いてたら見つけました。
うーん素敵。

【Unity】GUIStyleAndTextureViewer

自分がEditor拡張してるときに「あのGUIStyleなんだっけ…あのTextureの名前なんだっけ…調べるのメンドクサ(-.-)」ってなるので、頻繁に利用するGUIStyleとかTextureをメモしておけるEditor拡張を作りました。
github.com
f:id:charcotte:20180722205137p:plain

要素をダブルクリックすると、コードにそのまま貼り付けられて利用できる文字列がクリップボードにコピーされます。

new GUIStyle( "hogehoge" );
EditorGUIUtility.Load( "hogehoge" ) as Texture2D;

無駄にTreeViewとかお気に入り機能とかあって便利です。これはリッチなGUIのEditor拡張制作が捗りますね。

誰得なんでしょうか。(^_-)-☆