LINEスタンプでPebbleのウォッチフェイスを作ってみた

女子高生美少女棋士として名高い将棋界のヒロイン、竹俣紅ちゃんのLINEスタンプが発売になりました。

LINEは使ってないけど描いているのは将棋ウォーズでおなじみの「みなみん」さんだし、欲しくなったのでとりあえず購入し、スタンプのイラストをPebbleのウォッチフェイスにしてしまいました。

竹俣紅ちゃんLINEスタンプを使ってpebbleのウォッチフェイスを作った。一時間ごとに画像が変わる機能つき。かわいい。 #pebble pic.twitter.com/BqcUWr9oWa
— pikaring (@pikaring) 2016年1月14日

紅ちゃんウォッチフェイスの作り方

有料スタンプなのでストアに並べるわけにも行かないため完全に自己満足の世界。それだとちょっともったいないので、作り方だけここで紹介します。

１　スクリーンショットを取る

まずは原始的に、iPhoneでLINEアプリのスクショを取ってPCに取り込みます。

f:id:Red-Comet:20160115211704p:plain:h400

２　画像を加工する

次にIrfanviewを使って、適当に正方形に切り取ります。このソフトはCTRL+Yで選択した範囲だけを切り出しできるので楽。

f:id:Red-Comet:20160115211849p:plain

続いてCTRL+Rでリサイズし、144×144にします。Pebbleの解像度は144×168なのに、なんで正方形にするかって？　それは、残りの144×24の部分に時計を表示するためです。

Shift+Vで「外枠の追加」を行い、topかbottomの好きな方に24ピクセルを追加します。さらにオリジナルの配色そのままだと64色のPebbleではぼんやりした画像になってしまうので、コントラストと彩度をどぎついぐらいに上げてメリハリのある画像にします。

f:id:Red-Comet:20160115212022p:plain

GIMPでPebble用の配色にする

Pebble timeで使用できる64色は独自のものなので、フルカラーのものをそのまま取り込むのはもちろん、通常の画像ソフトを使って64色に減色しても色合いがおかしなことになります。そこで、次のページからお使いの画像編集ソフトにあったパレットをダウンロードして、カラーインデックスを変更してやる必要があるのです。

https://developer.getpebble.com/guides/pebble-apps/display-and-animations/intro-to-colors/#color-palettesdeveloper.getpebble.com

GIMPを起動してさきほどの画像をドラドロし、画像->モード->インデックスからカスタムパレットを適用します。

f:id:Red-Comet:20160115212317p:plain

エクスポートしたらその上に次の画像をドラドロすればカスタムパレットが適用されるので、随時違う名前でエクスポートしていくと作業効率がいいですね。ちなみに、先ほどの工程でどぎつい色にしましたが、オリジナルのままパレットを適用した場合と見比べてみましょう。

f:id:Red-Comet:20160115212608p:plain

こんな感じで淡い色になり、画面上でもぼんやりとしてしまいます。

ウォッチフェイスに組み込む

これを読む人はキホンのウォッチフェイスは作れる人だと思うので、以下はざっくりと。時間を表示する部分は通常、以下のように書いてあります。

static void update_time(){
  //tm構造をいただく
  time_t now = time(NULL);
  struct tm *tick_time = localtime(&now);
	
  //バッファを作っておく
  static char buffer[] = "00:00";
  
  //バッファの中に時間と分を書き出す
  if(clock_is_24h_style() == true){
    strftime(buffer, sizeof("00:00"), "%H:%M", tick_time);
  } else {
    strftime(buffer, sizeof("00:00"), "%I:%M", tick_time);
  }
  //テキストレイヤに時間を表示する
  //テキストレイヤがふたつあるのは、重ね合わせで表示することで浮き上がっている効果を狙ったもの
  text_layer_set_text(s_time_layer, buffer);
  text_layer_set_text(s_time1_layer, buffer);
}

これの最初のあたりに、以下の部分を付け加えます。

	//先にビットマップをデストロイしないと新しい画像をクリエイトできない
	gbitmap_destroy( s_background_bitmap );
	//寝てる間は見ないので、7時～23時までケースして0時以降はデフォルトで取る
	switch(tick_time -> tm_hour){
		case 7:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_07 );
		break;
		case 8:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_08 );
		break;
		case 9:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_09 );
		break;
		case 10:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_10 );
		break;
		case 11:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_11 );
		break;
		case 12:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_12 );
		break;
		case 13:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_13 );
		break;
		case 14:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_14 );
		break;
		case 15:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_15 );
		break;
		case 16:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_16 );
		break;
		case 17:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_17 );
		break;
		case 18:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_18 );
		break;
		case 19:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_19 );
		break;
		case 20:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_20 );
		break;
		case 21:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_21 );
		break;
		case 22:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_22 );
		break;
		case 23:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_23 );
		break;
		default:
			s_background_bitmap = gbitmap_create_with_resource( RESOURCE_ID_IMAGE_00 );
		break;
	}
	//最後にビットマップをレイヤにセットする
		bitmap_layer_set_bitmap( s_background_layer, s_background_bitmap);