ねこバタ会議

スマホアプリ制作に関するブログです。

カテゴリ: Unity

※記事タイトルには5.2と入れていますが、5.1でも起きるようですし、そもそもUnity 5以降の問題かもわかりません。

おはようございます。

せっかくNexus 5を購入したので、Androidで快適に操作できるようにしようと思ってCanvas設定などをいじっていたら、オブジェクトをタップできないという事態に…(;´Д`)

コンソールには以下のようにInvalid AABB inAABBという、見たことがないエラーが出ています。

invalid_aabb

設定を変更する前の状態に戻してみましたが、エラーは変わらず。

色々調べてみると、どうやらUnityのバグらしく、対処方法も状況に応じて変わるようです。
Unityの再起動またはPCの再起動で直る場合もあるとのことで試してみましたが、再起動後も発生したままでした。

これは困ったと思っていたところ、以下のページがヒットしました。

Fixing Invalid AABB error : plyoung forum

書いてある内容はあまりよくわかりませんが、スクロールバーを作り直せ、みたいな感じの文が見えますね。
ということで、元々あったスクロールバーをデリートして、新しくスクロールバーをつくってアタッチし直したところ、正常に動作するようになりました。

スクロールビューを割と多く用意していたので 、全部のスクロールバーを削除して修正するのは面倒ですが、背に腹は代えられませんね(^_^;)

なお、先に書いた通り状況によって変わるので、「今回の場合は」 スクロールバーが原因となっていたものと思われます。
スクロールバーをアタッチし直せば解決するよというものではありませんで、ご注意下さいm(_ _)m 

久しぶりの更新となります。
今回はUnityで直面した問題について書いていこうと思います。

私の持っている古い端末だとLolipopもMushroomMarshmallow(完全に勘違いしてました…)も試すことができないので、OSのサポートがされているNexus 5を購入することにしました。
本日届いたため、早速動作確認をしてみました。

まず、Android 5.1で動作確認を行ったところ特に問題なく動きました。

次に、Android 6.0にアップデートして、こちらも特に問題なく起動…と思ったら、どうも様子が変です。
以下の図のように、本来は円形のマスクが設定されているのですが、マスクが効かず四角になってしまっています。

unity_mask_disable


設定やマスクの指定方法が間違っているのかと思い確認してみましたが、原因がわかりません。

そこで、以下のように新規プロジェクトにマスクするためのオブジェクトと画像だけを置いて試すことにしました。
画像はroom6のここっとダンジョン(予約受付中 iOS / Android)より。

unity_mask_editor

ビルドしてNexus 5の実機に転送してみると…

Screenshot_20151129-205429

見事にマスクが効いていません。

仕方ないので色々調べてみると、以下のトピックがヒットしました。

Unity 5 UI Mask issues Android : stack overflow

 I searched a long time for the answer to this but I fixed this problem in Unity 5 by unchecking the "Disable Depth and Stencil*" Box.

Build Settings -> Player Settings -> Resolution and Presentation -> Disable Depth and Stencil

After that you need to re-launch unity (you will not see working mask if you dont) 
ということで、Project SettingでDisabel Depth and Stencilのチェックを外せばいいようです。

unity_mask_depth
 
再度書き出して実行してみます。

Screenshot_20151129-210039
 
今度はきちんとマスクが有効になっています…!

制作中のアプリもこの通り。

Screenshot_20151129-210422


円形のマスクが有効になっていますね。

原因は私にはよくわかりませんが、5.1の時は確実に問題がなかったことが確かで、stack overflowの別のトピックでも、Nexus 5でマスクが有効にならないと報告している人がいました。
確かそのトピックではUnity 5.1.4だと問題なく動作するとかなんとか…。

端末の問題か、Android 6.0の問題か、Unityのバージョンの問題かよくわかりませんが、もしマスクが有効にならない時は一度お試しいただくといいかもしれません。
なお、2DRectMaskは問題なく動作していました。

また、今回の副産物ですが、Unityのエディタ上でメインカメラを設定し直したところ、Gameウィンドウでマスクが効かなくなる現象が発生しました。
これについてはGameタブをCloseしてから再度開いたところ、無事に反映されました。
もしかしたらUnityを再起動でもよかったのかもしれませんが(^_^;)

というわけで、現在作成中のゲームはワーズ・アンド・マジックで実現出来なかったことを全部詰め込む予定です。
面白いものになるように がんばります!

Unity5 Personalでは、Unity4まではPro版のみ使用可能だった機能が使用できるようになっています。
今回はそれらの機能の一つ、非同期ロードを使用してシーン間のローディング画面を作りたいと思います。

例によって参考ページを挙げておきます。



ローディング中は進捗バーとテキストによって状況を表示します。
進捗バーはImage TypeをFilled、Horizontalに設定しています。
完了を待って処理をしたかったのでロード完了を待とうとしたところ、上記参考ページの二つ目に記載されているように、async.isDoneにならずに0.9までしか進まないという状態になりました。
原因はよくわかりませんが、参考ページと同じく0.9でループを抜けるという強引な解決方法をとっています(シーンのロード自体は問題なく行われます)。
よくわかりませんし、動けばいい派なのであまり気にしないことにします…(^_^;)

IEnumerator LoadScene(){

    AsyncOperation async = Application.LoadLevelAsync("Game");
    async.allowSceneActivation = false;    // シーン遷移をしない

    while (async.progress < 0.9f) {
        Debug.Log(async.progress);
        loadingText.text = (async.progress * 100).ToString("F0") + "%";
        loadingBar.fillAmount = async.progress;
        yield return new WaitForEndOfFrame();
    }

    Debug.Log("Scene Loaded");
    
    loadingText.text = "100%";
    loadingBar.fillAmount = 1;
    
    yield return new WaitForSeconds(1);
    
    async.allowSceneActivation = true;    // シーン遷移許可
    
}
 
シーンのロードが完了してから1秒後に遷移を行なっています。
動画にしてみましたが、実機ではないので読込が一瞬で終わってますね(^_^;)



スプラッシュやタイトルなどは一応完成ということで、現在の完成度は80%くらい…というところです!

前に以下の記事でポーズ時のアニメーションを実効する方法について書きました。

Unityでポーズ中のアニメーションと遅延処理を行う方法

上記記事では、AnimatorのUpdate ModeをUnscaled Timeに設定することで実現しています。
が、よくよく読んでみると、Animationとして登録しているものにしか対応していません。
Invoker.InvokeDelayedによる遅延処理はアニメーション用ではないので(やろうと思えばできるでしょうが…)。

というわけで、今回はポーズ中のアニメーションをもっとスマートに実現する方法として、DOTweenをご紹介させていただきます。
iTweenは手軽にアニメーションできるので便利ですが、uGUIの要素をアニメーションさせることができなかったり面倒だったりという面がありました。
DOTweenはRectTransformなどの変更に対応しているため、簡単にアニメーションを実行できます。

DOTweenでuGUI要素をアニメーションさせる具体的な方法については、下記ブログなどを参考にしていただくのがいいと思います。



簡単な導入フローを書くと、以下のようになります。
【1】DOTweenをダウンロード
【2】Assetsに入れる
【3】UnityエディタのToolsからセットアップ

注意が必要な点としては、DOAnchorPosなどのuGUI要素をコントロールするためには、Tools > DOTween Utility PanelからSetup DOTweenを実行する必要があるということが挙げられます。


Dotween1


その他注意点や設定についてはの詳細はDOTweenの公式サイトをご参照下さい。
私のようにあまり英語が得意でない場合でも理解できるように書かれているので、多分問題無いと思います。

ユーティリティーパネルからPreferencesを開き、TimeScale Independentにチェックを入れれば、ゲーム中のタイムスケールに関係なくアニメーションを実行することができます

Dotween2

 
あとは以下のような感じでアニメーションの指定を行えば、ゲーム中のタイムスケールに関係なくアニメーションを実行することが出来ます。
 
RectTransform rt = GetComponent<RectTransform>();
rt.DOAnchorPos(new Vector2(100, 0), 0.5f);

なお、アニメーションのタイムスケールをゲームのものと合わせたいときには、以下のように個別にタイムスケールを設定することもできます。

rt.DOAnchorPos(new Vector2(100, 0), 0.5f).timeScale = Time.timeScale;

iTweenを使ったことのある人もそうでない人も簡単に導入できると思いますので、コード側でアニメーションの実行をしたいという方は検討してみてもいいと思います。
ちなみに私はMecanimはとても苦手です…(^_^;)

相変わらずガンナーズ・ハイの作成に勤しんでおります。
シナリオの再生部分を作っているのですが、インターフェースが文字だけというのはさびしい感じなので、アイコンを表示することにしました。
フリーのアイコン画像などもたくさんあるのですが、今回はFont AwesomeをUnityで使うことにしてみます。
(Unity 5.2で仕様が変わったため、対応版をアップしました) 

Font Awesomeというのは、数百種類に及ぶアイコンをフォントとして使えるようにしたものです。
CSSなどで手軽に使えるようになっているので、ウェブデザインをされたことのある方は、ご存知の方も多いと思います。

font11
 
Font Awesomeについての詳しい説明は以下のページなどをご参照下さい。


この非常に便利なFont Awesomeは、Unityでも手軽に使えるようにパッケージになっています。
以下のページの説明に従って導入します。
なお、Unity4.6以上が必要です。


導入の手順は以下の通りです。

1.Unity用パッケージのダウンロード

2.Assets > Import Package > Custom Packageで上記ファイルを選択してインポート

3.TextUnicode.csを以下のページからコピーして保存

4.uGUIのTextコンポーネントを削除して、TextUnicodeをアタッチ
Add Component > Scriptsあたりからどうぞ 

5.表示したいアイコンをUnicode形式で指定

という感じですね。
追記:よく見たら、Font AwesomeのサイトからフォントファイルをDLしてAssetsに追加すれば パッケージの導入はいらないかもしれません。 

uGUIのTextコンポーネントの場合はUnicode形式での文字コードの指定ができないため、できるように拡張したものがTextUnicode.csです。

それでは、実際に使ってみましょう。

まず、TextUnicodeのFontに「fontwawesome-webfont」を指定して下さい。

次に、Font Awesome Cheatsheetを参考にして、使いたい文字を以下のように指定します。
ここでは家のアイコンを例にやってみましょう。

home

[&#xf015;]→\uf015として指定します。「&#x」を「\u」にして、セミコロンを取ればいいですね。

home3
 
すると、以下のようにアイコンが表示されます。
とても簡単ですね。
 
home2

たくさん表示することもできます。
色はColorプロパティで自由に変更できます。

font10

font6

ちなみに、私はいちいち入力するのが分かりづらかったので、フォントの名前から自動的に変換されるようにしました。
以下に変更したものを置いておくので、使いたい方はご自由にどうぞ。
動作保証はしませんので、ご理解いただいた上でご利用下さい。

TextUnicode.cs
5.2対応版。ダウンロード後にファイル名をTextUnicode.csに変更してください。

上記のスクリプトを使用すると、Cheatsheetの名前からアイコンを指定することができます。
例えば家の場合は「fa-home」です。
アイコンは1つのみしか指定できません。
複数指定できるようにしてもよかったのですが、まああまり使わないかなと…(^_^;)

font18
 
というわけで、画面はこんな感じになりました。

適用前
スクショ1 

適用後
スクショ2

文字だけに比べると、若干見やすくなったような感じが…するような、しないような…。

Font Awesomeのアイコンは癖がなくて使いやすいので、一度導入の仕方を覚えておくと、他のゲームなどにも共通して使えると思います。

↑このページのトップヘ