2016年5月21日

どこでもいっしょのトロのカラー版のウォッチフェイスを作りました。

白黒液晶版Pebbleの時にどこでもいっしょのトロのwatchfaceを作ったのですが(こちら)、今回それをカラー化し、少しバージョンアップしたものを作りました。カラー化と言ってもトロは白いので背景とトロのほっぺに色が付いただけではあるのですが、とりあえず完成しましたのでアップします。(SDK3.0におけるアニメーションの実装には今回もhikoLabさんに多大なご協力を頂きました。毎回本当にありがとうございます!)
白黒バージョンでは毎分顔が動くアニメをしていたのですが、バッテリーを食うので腕を振った時のみアニメをする様に変更し、ついでにその時背景の色もランダム(5色)に変わる様にしました。通常ランダムなタイミングでまばたきしているのは白黒バージョンと一緒です。


Roundにも対応しています。円形ディスプレイだとトロが少し埋まって見えたので、首をちょっとだけ追加しTimeよりも少し上に顔が出てる様にしています。


TimeとRoundとオリジナルのポケステ(ポケットステーション)。前回(もう2年も前!)ポケステを起動してから既にバッテリーは切れているので、バッテリーを交換し再起動したのですが、いなくなったトロをリセットするのにプレステに挿さないと出来ないのが面倒です。


で、カラー版では毎分質問のセリフが変わる様にしました。現状で8種類あります。ポケステのトロから質問がくる度に画面を撮影し、それを見ながらドット文字を起こしました。


Pebbleに表示されている状態はこんなです。白黒バージョンでは「ムネきゅん?」だけだったので、このあたりは大幅な進化です。


腕に巻いた状態。・・・しかしこんな時計をしてる大人はいやですかね?


ということで、これも動画を撮りましたのでどうぞ。


顔のアニメのコマ数が白黒版の半分位になってしまったのですが、その削減した分の容量を使用し毎分変わるセリフ画像を追加したり、時刻表示部の「7:59って」の「:」と「って」はデータ容量節約の為、画像でなくプログラミングで描画してる等、かなり容量上限ギリギリまで使用しています。これ以上のpng画像の追加はビルド出来ても他の画像が表示出来なくなってしまったりしてダメでした。根性でプログラミングで絵を描画すればまだいけるとは思いますが。。

最後に、ドット絵のトロの顔は白黒のみかと思いきや、昔携帯用に出ていたカラー版のアプリを見たら、なんとほっぺがピンクだったので、それに合わせてほっぺをピンクにしました。下はほっぺの色を検討している時の図です。Pebbleは実機上では彩度が低くなるので、派手めな色にし、実機で確認し、色を決定します。最終的には右上の色にしました。


と言いますか、カラー版ならドット絵バージョンでなく、プレステゲーム上のCG版のトロにすべきでは?と思わなくもないですが、、やはりドット絵が好きなのと、Pebbleにはこちらの方が似合うので、ポケステ版のドットなトロにしています。
以上、どこでもいっしょのトロのカラー版を作成したことのアップでした。

2016.5.23. 追記・・・アニメーションの1コマを削除し、その分充電中にトロが風呂に入る様にしました。


振った時のバックの色変更に対応しつつ、セリフを「じゅうでん中?」に固定するのにレイヤー構造を工夫したりしてます。プログラム的にはバッテリー残量表示やBluetooth表示にも対応出来るのですが、あまり細かい要素を追加するのもなんなので、おそらくトロのウォッチフェイスはこれで完成かと思われます。・・・以上、充電中表示追加の追記でした。

追記現在このトロのwatchfaceは上のメニューバーのWatchface Store2で頒布していますのでよろしければどうぞ。