読者です 読者をやめる 読者になる 読者になる

デジタルフロッグ

Unityのアプリの開発をしながらいろいろと忘れないための備忘録でございます。

Anima2Dを使ってみたところ

f:id:karaagedigital:20170210122500p:plain

今年からAnima2Dが無料でUnityで利用できるようになりました。
Anima2Dってなんなの?というところからですが、Spineと同じようなものと書かれていました。

Spineってなんなの?っていう方は

ja.esotericsoftware.com

こちらから確認してみて下さい。

Anima2Dを落としてくると中にサンプルのシーンがあるので、どんなものか確認してみてから同じものを実際に自分で作ってみようと思います。

f:id:karaagedigital:20170210122633p:plain

シーンに映っているのが完成品です。

まず画像を切り抜いていきます。

その後に、右クリックからAnima2Dを選択してSpriteMeshを選択して下さい。

f:id:karaagedigital:20170210122647p:plain

そうするとそれぞれの切り出したパーツがSpriteMeshとして生成されます。
これを組み立てて実際にT-Rexを作っていきます。

空のオブジェクトを作ってその中にさらに空のオブジェクトを作成してSpriteMeshesという名前にしてそれぞれのパーツを入れていきます。

f:id:karaagedigital:20170210123656p:plain

配置が完了したらBonesという空のオブジェクトを作成して、そこから右クリック2D Object→BoneをクリックしてBoneを作っていきます。

f:id:karaagedigital:20170210123742p:plain

Boneがどこの部位のBoneなのか名前をつけて管理していきます。
オブジェクトに入っているBoneに関しては親のBoneとの繋がりを持ちますのBoneの構造上、繋がっていた方がいいものに関しては子オブジェクトに追加していく形になります。

子オブジェクトに追加しない場合は連結されないので独自のBoneの動きになります。

ちなみにBoneを配置しただけではBoneを使って動かすことが出来ません。

Assetの中にあるSpriteMeshをクリックするとInspectorにEdit Sprite Meshというボタンがあるので、それをクリックしてEditorを開きましょう。

f:id:karaagedigital:20170210123756p:plain

こんな感じですね。

f:id:karaagedigital:20170210123810p:plain

その次にSpriteMeshesの中にあるSpriteMeshをクリックしてSetBonesにBoneをセットしていきます。

f:id:karaagedigital:20170210125239p:plain

Bindを押したりしてApplyを押すとBoneの設定が出来たと思います。(若干前にとったスクショでうろおぼえ・・・)

f:id:karaagedigital:20170210130002p:plain


それでは実際にBoneを曲げてみましょう…

f:id:karaagedigital:20170210125903p:plain







f:id:karaagedigital:20170210130014g:plain




もうちょっと勉強してきます!!

パーティクルが四角いピンクになった時は・・・

エディター上では上手くいっていたけどビルドしてみると画面にちゃんと映っていたパーティクルがピンクの四角になっちゃうことがあったりします。

WebGLでの開発をしていて結構ここで躓いてしまったので、メモで残しておきます。

Shader shad = Shader.Find("なまえ");
obj.GetComponent<Renderer>().shaderMaterial.shader = shad;

一先ずこれでいけるのですがShader.Find()だけでは参照出来てないのかで症状が改善されないことがあります。

そういう場合はUnityエディタのメニューからEditを選択してProject Setting、Grahicsを選択してクリック

f:id:karaagedigital:20170209200642p:plain

そうするとInspectorの下の方にAlways Included Shadersとあるので、そこに参照したいShaderを選択しておけば漏れなくShader.Find()で呼び出すことが出来ます。

f:id:karaagedigital:20170209200846p:plain

初期値はSizeが7になっているので、参照したいShaderを追加したい場合はSizeの数を大きくして追加して下さい。

これでShader.Find()で参照できない問題は解決しました。

Video Player

Unity5.6bからVideo Playerが追加されましたね。

f:id:karaagedigital:20170207122135p:plain

ファイル形式はmp4を使用しています。
mp4のファイルをProjectにドラッグアンドドロップで追加して下さい。

f:id:karaagedigital:20170207123332p:plain

追加したファイルをそのままHierarchyにドラッグアンドドロップで追加します。
追加したらそのままUnityを再生させるとこんな感じに

f:id:karaagedigital:20170207122303g:plain

ただ、そのまま再生すると音声が流れなかったのですが、InspectorのAudio Output ModeをDirectからAudioSourceに変更して

f:id:karaagedigital:20170207122552p:plain

AudioSourceをAdd Componentで追加します。

f:id:karaagedigital:20170207122703p:plain

追加したAudioSourceをアタッチしてから再生すると

f:id:karaagedigital:20170207122746p:plain

音声が再生されます。

Renderer Textureを使ったりすると3Dオブジェクトにそのまま動画を流し込めたりするのでいろんな使い方が出来そうですね。

Movide Textureと比べると圧倒的に軽いという事なので、今後使用されることも多くなりそうです。

※QuiqTimeが必要かも

広告を非表示にする

SpriteEditorの新機能Edit Outline

karaagedigital.hatenablog.jp

前回のSpriteEditorの使い方で画像が重なっている場合は綺麗に切り取れないと書いたのですが、Unity5.6bから追加された新機能で切り出す範囲を細かく指定する事が出来るみたいです。


f:id:karaagedigital:20170207115042p:plain

SpriteEditorの左上からEdit Outlineを選択して

f:id:karaagedigital:20170207115142p:plain

範囲を選択したい画像を選択。

f:id:karaagedigital:20170207115156g:plain

こんな感じで頂点の位置を移動させるだけで(頂点を新たに追加することもできます。)

f:id:karaagedigital:20170207115232p:plain

これまで切り取れなかった形の画像も簡単に切り取る事が出来ます。

またまた便利になりましたな。

SpriteEditorの使い方

初歩的な部分で今更ですがSpriteEditorの使い方をまとめておきます。

SpriteEditorの使い方

まず適当にこんな画像を準備しました。

f:id:karaagedigital:20170204172907p:plain

背景が白くなっていますが、白い部分は透過処理しています。
透過処理しておかないとSpriteEditorで切り出すときに一枚の画像として認識されてしまいます。
SpriteEditorで使うにはまず画像をUnityのプロジェクトにドラッグアンドドロップして下さい。

f:id:karaagedigital:20170206122607p:plain

ドラッグアンドドロップするとUnityのProjectにTestImageが表示されるのでそれをクリックして下さい。

クリックするとInspectorに詳細が表示されるのでSprite ModeをSingleからMultipleをクリックして選択した後にSprite Editorをクリックして下さい。

f:id:karaagedigital:20170206122611p:plain

これはApplyを押して下さい。

f:id:karaagedigital:20170206122614p:plain

クリックするとSprite Editorが開きます。
SpriteEditorが開いたら左上のSliceをクリックして下さい。

TypeはAutomaticのままSliceボタンをクリックするとUnityが自動で画像を1つ1つ切り分けてくれます。

f:id:karaagedigital:20170204174147p:plain

切り分けられると下記のようになります。

f:id:karaagedigital:20170204174411p:plain

OKであれば右上のApplyボタンを押すと切り分けを実行してくれますが、ここで気を付けたいのが一番下の三角形の画像です。

基本的にUnityで切り分けする場合には縦と横の頂点を取得して四角形にしか切り出しをしてくれません。
なので三角形のものも四角形にしか切り出すことが出来ませんので最初に準備した画像のように四角形が重なるように画像を並べると綺麗に切り出してしてくれません。

f:id:karaagedigital:20170204174924p:plain

綺麗に切り出したい場合は下記のように画像を並べ直さなければいけません。

f:id:karaagedigital:20170204175101p:plain

こうすると綺麗に一つ一つパーツを綺麗に切り出してくれます。
UIなどの部材を作る場合に一つの画像にまとめる場合などには気を付けないと手直しする事にもなるので面倒事が一つ増えてしまいます。

MaxSizeの設定

f:id:karaagedigital:20170206122631p:plain

画像を選択してInspectorの下にMaxSizeというものがあるのですが、これは低ければ低いほど画像のファイルサイズは小さくなりますが、もともとの画像の解像度を大きく下げてしまう場合があります。
試しに128に設定してSpriteEditorを開いてみると

f:id:karaagedigital:20170206122638p:plain

こんな感じでとても汚くなります。
もともとのサイズが370×1426のサイズでしたので1426以上のサイズに設定しなければもともとのクオリティを保持する事が出来ません。

加えて画像がぼやけてしまうのでサイズが微妙にずれてしまうという事があるので、気をつけたいところです。

デフォルトは2048に設定されているのでそれ以上に大きいサイズの画像を使用する場合はMaxSizeを設定してみて下さい。

広告を非表示にする

InvalidOperationException: Collection was modified; enumeration operation may not execute.が出た場合

このエラーが何度か出てコードを見返しても原因がわからなかったのでgoogle先生に翻訳してもらったところ。

InvalidOperationException:コレクションが変更されました。 列挙操作が実行されないことがあります。

という事でした。

調べてみると処理中にコレクションに追加・削除などの処理が加わるとコレクションの中身を変えるんじゃない!という事でエラーが吐き出されてしまうようです。

解決策として考えたのはListにしてしまおうという事で解決しました。

List<型> hoge = IEnumerable.ToList();

Listにしてしまえば処理中に変更を加えても大丈夫みたいです。ToArray()とかでもOKのようです。

非アクティブなコンポーネントを取得する方法

Component[] hoge = GetComponentsInChildren<Renderer>(true);

(true)を入れてあげると非アクティブになっているオブジェクトのコンポーネントも取得することができます。
一気に子オブジェクトすべてのコンポーネントに変更をかけるときに非アクティブのコンポーネントが取れなかったので、調べてみたらこれでとれるみたいで解決!