Pebbleアプリ開発メモ

Pebbleアプリ、Watchface開発のメモを残していきます。

【Pebble】透過pngを使用する

Pebble

Photoshop等できちんと背景を透過にして書き出しても、通常の画像と同じように読み込むと背景が黒く塗りつぶされてしまいます。

以下のようにすれば、背景が透明なBitmapLayerを作ることができます。

読み込み時にPNG with transparency形式に

f:id:shotsep:20151014145618p:plain

リソースを追加する際に、形式からPNG with transparencyを指定してやります。

この際、例えばタグを「IMAGE_TARGET」と付けると、以下のように2種のタグが自動的に付与されます。

f:id:shotsep:20151014145914p:plain

タグの後ろに_BLACKか_WHITEをつける

あとはGBitmap作ってBitmapLayerにセットするのですが、タグに注意。

白背景に載せたい時は_BLACKを、黒に乗せたい時は_WHITEを指定します。

target_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_TARGET_BLACK);
  //target_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_TARGET_WHITE);
  target_layer = bitmap_layer_create(GRect(0, 0, bounds.size.w, bounds.size.h));
  
  bitmap_layer_set_compositing_mode(target_layer, GCompOpClear);
  
  bitmap_layer_set_bitmap(target_layer, target_bitmap);
  bitmap_layer_set_background_color(target_layer, GColorClear);
  layer_add_child(window_get_root_layer(window), bitmap_layer_get_layer(target_layer));