ねこバタ会議

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

カテゴリ: 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のアイコンは癖がなくて使いやすいので、一度導入の仕方を覚えておくと、他のゲームなどにも共通して使えると思います。

このブログでも何回か書いていますが、女子高生が校門の前で銃を乱射するというゲームを作っています。
こう書くと非常に物騒な感じですね…レーティングとか色々大丈夫なのか心配になってきますね…(^_^;)

で、ゲームの骨格が結構出来てきたので、実機で動かしてみたところ、動作がカクカクして見るに耐えません…。
私の使用しているAndroidの端末が古いということもあるのですが、古い端末を使用されている方でも、それなりには遊べるようにしたいところです。

特に弾丸などの新しいオブジェクトを生成して表示する際に時間がかかっているようで、その動作がある度にフレームが飛んでしまいます。

今までまったく知らなかったのですが、Unityには色んな情報を見られる機能があるんですね。
以下のページを見て、どんな状態なのかを確認してみました。
Unity 5 Proとなっていますが、Unity 5ならフリー版でも問題なく使えます。

Unity 5 Proの新機能FrameDebuggerでグラフィックパフォーマンスを改善する

ゲームビューにあるStatsというボタンを押すと、色々な情報が見られます。
詳しくは私も知らないのですが、色々なオブジェクトをアクティブ化したり非アクティブ化したりすると数字が変わるので、それを参考にすれば良さそうです。
細かいことはいつか勉強しましょう。

Unity_stats

ただ、上記のStatsで見られるのは、当然Unityエディタ上での情報です。
参考にはなるのですが、重要なのは端末での動作ですね。
端末の方については、こちらのページで紹介されていたスクリプトを使用しました。

【Unity】メモリ使用量とか、FPSとか、色々表示するスクリプト:ほんにゃら重工

スクリプト
AllocationStats.cs

スクリプトを保存して、適当なゲームオブジェクトにアタッチするだけなので、とても簡単です。

 fps

フォントサイズとか調整していないので見づらいかもしれませんが、状態の把握が出来ればいいので私的にはオッケーです(阿武隈)。

上記の画像では30.1FPSと表示されていますが、調整前は9~26FPSあたりを行ったり来たりしていました。
不必要なオブジェクトを非アクティブ化したり、都度生成していたプレハブを最初に一括で生成して使いまわしたりしたところ、動作もかなり軽くなりました。

やはり情報を確認できるというのはいいですね。
多分情報可視化ツールはたくさんあると思いますし、自作もそれほど手間ではないと思うので、自分にあったものを見つけるなり作るなりしてください。

相変わらずレベルの低いブログですが、一歩ずつ進んでいきたいと思います。
ちなみに上記の女子高生銃乱射ゲームのタイトルは「ガンナーズハイ 学年ビリのギャルが40人倒して合格を目指す話」となりました。
なるべく早く完成させられるようにがんばります!

icon512

今日も大抵の人にとってはあまり役に立たないUnityのTIPSです。

Unityに限らず、Objective-CでもJavaでも意外と困ったのが色の指定方法です。
0.0~1.0とか0~255とかでRGB指定をすればいいのですが、そもそも色の配合要素を一々覚えるのは面倒です。

UnityではGUIで指定してPresetに保存したものを使いまわすこともできるので楽ちんなのですが、基本的にコードで操作したい私のようなアナログ人間にとっては使いづらい場面もあります。

color


というわけで、今日は「カラーネームで色を指定する」です。
カラーネームというのは、CSSやHTML等で使用される色名のことです。
color : #FF0000の代わりにcolor : redのような感じで使われます。
ブラウザによって表示される色が若干異なったり、色によっては表示されなかったりするので、個人的にはあまり使いませんでしたが、今は色名からRGB要素の指定を行うだけなので問題ありません。

参考ページ カラーネーム147色:TAG<index>

カラーネームと16進数が併記してあるサイトから適当にデータを引っ張ってきて、適当に作成したphpスクリプトで16進数を10進数に変換しました。
出力結果からC#スクリプトにして、完了です。
最初に変換した時に、なぜか若干色味が違う感じだったので、適当に暗めにするように処理した記憶があります。
なので、以下のスクリプトはカラーネームに正しく対応しているわけではありませんので、ご注意下さい。
あくまで簡易的に色名で指定できるようにしただけですね。
ちなみに適当なので143色くらいしかないと思います。

使い方としては
GetComponent<Image>().color = Colors.Crimson;
のような感じで指定します。
透過色の場合は、以下のようにColors.Alphaで色と透過率を指定します。
GetComponent<Image>().color = Colors.Alpha(Colors.Crimson, 0.3f);
もし色が気に食わない場合や自分好みの色がない場合は、数値を変えたり新しい色名を付け加えていけばいいんじゃないかなと思います。
Objective-CやJavaでも似たようなものを作ると楽になります。

なお、プログラミングの文法等は私は全然理解していないので、色々正しくない部分もあると思います。
くれぐれも参考程度でお願いいたします<(_ _)>

Colors.cs
using UnityEngine;
using System.Collections;

public class Colors : MonoBehaviour {

    public static Color rgb(int red, int green, int blue) {
        return new Color(red / 255f, green / 255f, blue / 255f);
    }

    // usage : Color color = Colors.Alpha(Colors.Red, 0.5f);
    public static Color Alpha(Color color, float alpha) {
        return new Color(color.r, color.g, color.b, alpha);
    }
	
	public static Color White = rgb(255,255,255);
	public static Color Whitesmoke = rgb(245,245,245);
	public static Color Gainsboro = rgb(220,220,220);
	public static Color Lightgrey = rgb(211,211,211);
	public static Color Silver = rgb(192,192,192);
	public static Color Darkgray = rgb(169,169,169);
	public static Color Gray = rgb(128,128,128);
	public static Color Dimgray = rgb(105,105,105);
	public static Color Black = rgb(0,0,0);
	public static Color Red = rgb(255,0,0);
	public static Color Orangered = rgb(255,69,0);
	public static Color Tomato = rgb(255,99,71);
	public static Color Coral = rgb(255,127,80);
	public static Color Salmon = rgb(250,128,114);
	public static Color Lightsalmon = rgb(255,160,122);
	public static Color Darksalmon = rgb(233,150,122);
	public static Color Peru = rgb(205,133,63);
	public static Color Saddlebrown = rgb(139,69,19);
	public static Color Sienna = rgb(160,82,45);
	public static Color Chocolate = rgb(210,105,30);
	public static Color Sandybrown = rgb(244,164,96);
	public static Color Darkred = rgb(139,0,0);
	public static Color Maroon = rgb(128,0,0);
	public static Color Brown = rgb(165,42,42);
	public static Color Firebrick = rgb(178,34,34);
	public static Color Crimson = rgb(188,6,12);
	public static Color Indianred = rgb(205,92,92);
	public static Color Lightcoral = rgb(240,128,128);
	public static Color Rosybrown = rgb(188,143,143);
	public static Color Palevioletred = rgb(219,112,147);
	public static Color Deeppink = rgb(255,20,147);
	public static Color Hotpink = rgb(255,105,180);
	public static Color Lightpink = rgb(255,182,193);
	public static Color Pink = rgb(255,192,203);
	public static Color Mistyrose = rgb(255,228,225);
	public static Color Linen = rgb(250,240,230);
	public static Color Seashell = rgb(255,245,238);
	public static Color Lavenderblush = rgb(255,240,245);
	public static Color Snow = rgb(255,250,250);
	public static Color Yellow = rgb(255,255,0);
	public static Color Gold = rgb(255,215,0);
	public static Color Orange = rgb(255,165,0);
	public static Color Darkorange = rgb(255,140,0);
	public static Color Goldenrod = rgb(218,165,32);
	public static Color Darkgoldenrod = rgb(184,134,11);
	public static Color Darkkhaki = rgb(189,183,107);
	public static Color Burlywood = rgb(222,184,135);
	public static Color Tan = rgb(210,180,140);
	public static Color Khaki = rgb(240,230,140);
	public static Color Peachpuff = rgb(255,218,185);
	public static Color Navajowhite = rgb(255,222,173);
	public static Color Palegoldenrod = rgb(238,232,170);
	public static Color Moccasin = rgb(255,228,181);
	public static Color Wheat = rgb(245,222,179);
	public static Color Bisque = rgb(255,228,196);
	public static Color Blanchedalmond = rgb(255,235,205);
	public static Color Papayawhip = rgb(255,239,213);
	public static Color Cornsilk = rgb(255,248,220);
	public static Color Lightyellow = rgb(255,255,224);
	public static Color Lightgoldenrodyellow = rgb(250,250,210);
	public static Color Lemonchiffon = rgb(255,250,205);
	public static Color Antiquewhite = rgb(250,235,215);
	public static Color Beige = rgb(245,245,220);
	public static Color Oldlace = rgb(253,245,230);
	public static Color Ivory = rgb(255,255,240);
	public static Color Floralwhite = rgb(255,250,240);
	public static Color Greenyellow = rgb(173,255,47);
	public static Color Yellowgreen = rgb(154,205,50);
	public static Color Olive = rgb(128,128,0);
	public static Color Darkolivegreen = rgb(85,107,47);
	public static Color Olivedrab = rgb(107,142,35);
	public static Color Chartreuse = rgb(127,255,0);
	public static Color Lawngreen = rgb(124,252,0);
	public static Color Lime = rgb(0,255,0);
	public static Color Limegreen = rgb(50,205,50);
	public static Color Forestgreen = rgb(34,139,34);
	public static Color Green = rgb(0,128,0);
	public static Color Darkgreen = rgb(0,100,0);
	public static Color Seagreen = rgb(46,139,87);
	public static Color Mediumseagreen = rgb(60,179,113);
	public static Color Darkseagreen = rgb(143,188,143);
	public static Color Lightgreen = rgb(144,238,144);
	public static Color Palegreen = rgb(152,251,152);
	public static Color Springgreen = rgb(0,255,127);
	public static Color Mediumspringgreen = rgb(0,250,154);
	public static Color Honeydew = rgb(240,255,240);
	public static Color Mintcream = rgb(245,255,250);
	public static Color Azure = rgb(240,255,255);
	public static Color Lightcyan = rgb(224,255,255);
	public static Color Aliceblue = rgb(240,248,255);
	public static Color Darkslategray = rgb(47,79,79);
	public static Color Darkslatenavy = rgb(47,47,79);
	public static Color Darkslatered = rgb(147,47,47);
	public static Color Steelblue = rgb(70,130,180);
	public static Color Mediumaquamarine = rgb(102,205,170);
	public static Color Aquamarine = rgb(127,255,212);
	public static Color Mediumturquoise = rgb(72,209,204);
	public static Color Turquoise = rgb(64,224,208);
	public static Color Lightseagreen = rgb(32,178,170);
	public static Color Darkcyan = rgb(0,139,139);
	public static Color Teal = rgb(0,128,128);
	public static Color Cadetblue = rgb(95,158,160);
	public static Color Darkturquoise = rgb(0,206,209);
	public static Color Aqua = rgb(0,255,255);
	public static Color Cyan = rgb(0,255,255);
	public static Color Lightblue = rgb(173,216,230);
	public static Color Powderblue = rgb(176,224,230);
	public static Color Paleturquoise = rgb(175,238,238);
	public static Color Skyblue = rgb(135,206,235);
	public static Color Lightskyblue = rgb(135,206,250);
	public static Color Deepskyblue = rgb(0,191,255);
	public static Color Dodgerblue = rgb(30,144,255);
	public static Color Ghostwhite = rgb(248,248,255);
	public static Color Lavender = rgb(230,230,250);
	public static Color Lightsteelblue = rgb(176,196,222);
	public static Color Slategray = rgb(112,128,144);
	public static Color Lightslategray = rgb(119,136,153);
	public static Color Indigo = rgb(75,0,130);
	public static Color Darkslateblue = rgb(72,61,139);
	public static Color Midnightblue = rgb(25,25,112);
	public static Color Navy = rgb(0,0,128);
	public static Color Darkblue = rgb(0,0,139);
	public static Color Slateblue = rgb(106,90,205);
	public static Color Mediumslateblue = rgb(123,104,238);
	public static Color Cornflowerblue = rgb(100,149,237);
	public static Color Royalblue = rgb(65,105,225);
	public static Color Mediumblue = rgb(0,0,205);
	public static Color Blue = rgb(0,0,255);
	public static Color Thistle = rgb(216,191,216);
	public static Color Plum = rgb(221,160,221);
	public static Color Orchid = rgb(218,112,214);
	public static Color Violet = rgb(238,130,238);
	public static Color Fuchsia = rgb(255,0,255);
	public static Color Magenta = rgb(255,0,255);
	public static Color Mediumpurple = rgb(147,112,219);
	public static Color Mediumorchid = rgb(186,85,211);
	public static Color Darkorchid = rgb(153,50,204);
	public static Color Blueviolet = rgb(138,43,226);
	public static Color Darkviolet = rgb(148,0,211);
	public static Color Purple = rgb(128,0,128);
	public static Color Darkmagenta = rgb(139,0,139);
	public static Color Mediumvioletred = rgb(199,21,133);
	public static Color Midnightblack = rgb(50,50,50);
	public static Color Midnightgray = rgb(75,75,75);
}

↑このページのトップヘ