Unityで累積時間を管理するアプリを作ったので振り返り

f:id:peroon:20150420231620p:plain

Unity 4.6から入ったuGUIに慣れてきたので、何か作ろうと思った。同時期に中国語に興味があったので、中国語にどれだけ時間をかけたか記録できる「ツール」を作ることにした。ゲームエンジンであるUnityではツールも作ることができる。

  • タイマーと同じ操作で測定を開始でき、その時間が累積して記録される
  • リストのアイテムの追加、編集、削除

上記機能がある。

  • UIの参考

iOSの時計アプリのアラームを参考にした。

  • 色の参考

adobeの色見本サイト「kuler」で5色を選び、その5色のみを使うようにした。

  • 1シーン

シーンロードの時間を避けるため、全てを1シーンに入れた。

言語設定を見て、表示を日本語、英語、中国語に切り替え可能。各TextコンポネントにアルファベットのキーをInspectorから入れておくと実行時に置換するようにした。辞書はコンポネントにstatic変数に直接書いたが、もっと大きいアプリになるとExcelやGoogle Docsで表管理してJSONでアプリに入れることになるだろう。中国語の漢字がフォントに含まれていないことがあったので、翻訳候補の中からフォント表示できるものを設定した。もっと大きいアプリになると回避するより文字数の多いフォントを選ぶことになるだろう。

iOS, Androidでそれぞれ設定が必要。別記事に書いた。

  • フォント

ロゴたいぷゴシックを仕様。5MBほど。良いフォントを使うだけで品質が上がる。

  • アニメーション

DOTweenでuGUIのanchoredPositionをTweenさせたり、色をフェードさせたり。

  • リストビュー

お決まりの、ScrollRect, ContentSizeFitter, VerticalLayout, LayoutElementの組み合わせ。

  • アプリを抜けてもタイマーは生かしておきたい

抜けるときと復帰時の時刻を取得して、差分を足すことで同期できる。

Unity で List を string に変換して PlayrePrefs に保存する - nirasan's tech blog

  • タイマーデータ
[System.Serializable]
public class TimerData{
    public int id;
    public string title;
    public float time; // 経過時間
}

これをLINQのListで管理した

Youtubeの動画を初めてストアに付けてみた。Lolipop screen recorder 5.0で端末画面をキャプチャして、iMovieで最初と最後をカットしたら完成。apkの更新も楽なのでAndroidファーストで完成まで持っていった。

動画もストアに上げられるが、30FPSじゃないとはじかれるとか、640x1136などサイズがきっちり決まっているので時間がかかった。ffmpegで変換したらサイズが1ピクセル違うとか、HandBrakeで変換してみたり、AfterEffectsで変換してみたり。フリーのHandBrakeを使えばいい。QuickTime + Mac + iPhoneで端末操作をキャプチャできる。iPhone6なら640x1136でジャストサイズの動画が得られそう。私はiPhone5だったのでサイズ調整などが大変だった。画像サイズはインチごと、言語ごとに設定する必要があり、手間である・・・。iPhone5のスクリーンショットは640x1136なので4inchにそのまま貼れる。あとはちょっと歪んでもいいやってことで、ImageMagicで各インチで求められるサイズに mogrify -resize 123x456! *.png などで一括変換して設定した。

  • 宣伝用画像

という横長の画像を別に用意する必要がある。PhotoShopで横長のプロジェクトを作って、スクリーンショットを並べて作った。

  • まとめ

「Unityでツール」「色」「アニメーション」「シリアライズ、LINQ」「uGUI, リストビュー」「フォント、ローカライズ（中国語）」「ストアで動画」振り返ってみると、新しいことをいろいろしていた。次は何を作ろうかな。