ねこバタ会議

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

2015年06月

相変わらずガンナーズ・ハイの作成に勤しんでおります。
シナリオの再生部分を作っているのですが、インターフェースが文字だけというのはさびしい感じなので、アイコンを表示することにしました。
フリーのアイコン画像などもたくさんあるのですが、今回は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

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

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

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

font10

font6

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

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

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

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

適用前
スクショ1 

適用後
スクショ2

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

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

このエントリーをはてなブックマークに追加 mixiチェック

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

で、ゲームの骨格が結構出来てきたので、実機で動かしてみたところ、動作がカクカクして見るに耐えません…。
私の使用している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

このエントリーをはてなブックマークに追加 mixiチェック

最近アップトーキョーさんの頑張りなどの影響で、ブースト広告によるランキング操作について注目が集まっていますね。

今日はそのランキングについてのお話です。
そもそもブースト広告のランキング操作は、ランキングからの自然流入を狙ったものです。
遊びたいアプリや欲しいアプリを探す場合、ストアを見るのが一番手っ取り早いものですし、どのアプリが人気があるのか見るという人は多いため、そこからの流入を得たいというのは、アプリ開発者なら誰でも思うことなのではないでしょうか。

このランキングについてはGoogle PlayとApp Storeで大きな違いがあります。
順位決定のアルゴリズムは公開されていないので、アプリの動きを見て想像しなければいけない部分が多いのですが、App Storeの場合は直近のダウンロード数の比重が大きいと考えられます。
これは拙作ワーズ・アンド・マジックが2ちゃんまとめサイト等に掲載されたその日に大きく順位を伸ばしたことからも明らかです。
対してGoogle Playの場合は、おそらくですが2日程度のスパンでのDL数と起動数を見ているのではないかという感じがします(あくまで自分のアプリのランキング順位からの想像です)。
Google Playは上がるときも下がるときも緩やかな印象を受けます。

では、どちらがより個人開発者にとって恩恵を受けられるのかというと、私はGoogle Playの方だと思います。
App Storeは一時的に順位が上がっても、すぐにより力のある(またはブーストできる体力のある)アプリに押しのけられてしまうため、ランキングの変動が激しく順位を維持するのが難しいと考えます。

また、Google Playの場合は、公開後30日以下のアプリを集めた新着ランキングや、最近のDL数または起動数の上昇率によって計算されていると思われる急上昇ランキング(20DLくらいしか伸びなくても掲載されるので上昇率だと思います)、類似アプリやインストール傾向からユーザー毎にカスタマイズされたオススメアプリの表示など、App Storeにはない形でのアプリ露出機会が多いのもありがたいところです。

実際にどの程度違いがあるのかについて、App Annieによるワーズ・アンド・マジックのランキング推移を見てみたいと思います。

まずはGoogle Playからです。

ranking_google

大体調子のいい時で150位以上、あとは200位あたりをウロウロしている感じですね。

それでは次にApp Storeでの順位です。

ranking_apple

App Storeの場合はロールプレイングゲームカテゴリを外してしまったのでストラテジーカテゴリでの順位を一緒に表示しています。
一番いいときでロールプレイングゲームカテゴリの50位あたりまでいきましたが、ものすごい勢いで急降下しているのがわかります。
また、とても重要な事ですがApp Storeの場合は150位までしか表示されません
ワーズ・アンド・マジックの場合、たまに順位が上がっても大体152位とか154位とかまでしか上がらなかったので、ランキングに顔を出すこともできない状態でした。
Goole Playは確か400位あたりまで掲載されます。

ちなみに、現在のダウンロード数はAndroid版が1日あたり40~120DLに対し、iOS版は10~20DLといったところです。
もちろん他の方の場合にも必ず当てはまるとは思いませんし、Androidでもまったく露出もなくダウンロードされないアプリも数多く存在するので、なるべくなら両方のOSで出した方がいいとは思います。
ただ、iOSとAndroidのどちらでアプリを出そうかと迷っている個人開発者の方がいらっしゃったら参考にしていただければと思います。
このエントリーをはてなブックマークに追加 mixiチェック

先日Twitterで書いたのですが、ワーズ・アンド・マジックのAndroid版のDL数が急に伸びたことがありました。
原因がよくわからなかったのですが、よくよく調べてみたところシャープ公式アプリのSHSHOW様に掲載されたからでした。

CGoD90SUkAEvWma


ちなみにSHSHOW様にはアンドロイダーでも紹介枠獲得のための告知がありますが、アンドロイダー枠ではなく、直接ご連絡をいただきました。

レビューサイト等に掲載された場合、DL数が直接的に上がるのはだいたい2~3日の場合が多いのですが、SHSHOWの場合は1日あたりに紹介されるアプリ数がそれほど多くないこともあってか、かなり効果が継続した感じがします。
とはいえ10日くらい経つとDL数も平常通りに…と思いきや、なぜかここにきて謎の回復を遂げています。

dlcount

今度は原因がさっぱりわからず、ついに世間に理解される日が来たか…と感慨に浸っていたのですが、よくよく見てみるとロールプレイングゲームカテゴリの10位に入っている「異世界に生きる」の関連アプリのトップにワーズ・アンド・マジックが掲載されており、どうやらそのおこぼれにあずかっているのではないかという感じがします。

googleplay1

 googleplay2

Google Playの場合はこうした関連アプリの表示や、現在注目を集めているアプリの表示が地味にDL数に反映されているように思います。
iOSではブースト広告が問題になっていますが、それ以前にApp Storeでのアプリの露出方法が非常に限られていて、ランキングも直近のDL数が非常に重視される仕組なので、まずそこら辺を改善してくれないかなと切に願います。

「異世界に生きる」、がんばれ!
…ではなく、ワーズ・アンド・マジック、がんばれ!

ついでと言ってはなんですが「異世界に生きる」についてご紹介を…と思ったのですが、iPhone AC番外レポート様のレビューが詳しいので、そちらをご参照いただければと思います。

異世界に生きる:Google Play

異世界に生きる:App Store

googleplay3
 
このエントリーをはてなブックマークに追加 mixiチェック

今日も大抵の人にとってはあまり役に立たない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);
}
このエントリーをはてなブックマークに追加 mixiチェック

↑このページのトップヘ