Images - 画像

画像は、プロジェクトリソースとして追加することで、Pebble アプリに表示できます。アプリの実行中は GBitmap としてメモリに保存され、BitmapLayer を使用するか、graphics_draw_bitmap_in_rect() を使用して表示できます。

画像の作成

Pebble に対応した画像とするためには、画像を PNG ファイルとして保存し、理想的には適切な色数のパレット化形式（パレット ファイルについては以下を参照）で保存する必要があります。各プラットフォームで使用可能な色数を以下に示します：

カラーパレット

64 個のサポートされている色を含む、一般的なグラフィックス パッケージ用のパレット ファイルを以下に示します。カラー画像リソースを作成する際に使用してください：

• Photoshop .act

• Illustrator .ai

• GIMP .pal

• ImageMagick .gif

画像のインポート

画像をプロジェクトの resources ディレクトリに配置したら、package.json の resources 項目にエントリを追加します。type を bitmap として指定し、name（コードで使用される）を選択し、プロジェクトの resources ディレクトリからの相対パスを指定します。以下は例です：

"resources": {
  "media": [
    {
      "type": "bitmap",
      "name": "EXAMPLE_IMAGE",
      "file": "background.png"
    }
  ]
},

画像リソースの指定

画像リソースは、bitmap リソースタイプを使用してリストされている場合に Pebble プロジェクトで使用されます。

このタイプのリソースは、追加の属性を使用して最適化できます：

package.json でのこれらの属性を使用した設定例を以下に示します：

{
  "type": "bitmap",
  "name": "IMAGE_EXAMPLE",
  "file": "images/example_image.png"
  "memoryFormat": "Smallest",
  "spaceOptimization": "memory"
}

すべてのプラットフォームで memoryFormat はデフォルトで Smallest になります。Aplite では spaceOptimization は、デフォルトで memory になり、他のすべてのプラットフォームでは storage になります。

サポートされていない属性の組み合わせ（1Bit のパレット化されていない PNG など）を指定すると、ビルドは失敗します。パレット化された 1 ビット PNG はサポートされています。

以前の SDK バージョンでの画像リソースの使用と比較すると：

• png は、追加の指定子なしの bitmap と同等です。

• pbi は、"memoryFormat": "1Bit" を持つ bitmap と同等です。

• pbi8 は、"memoryFormat": "8Bit" および "storageFormat": "pbi" を持つ bitmap と同等です。

png リソース タイプを引き続き使用すると、"storageFormat": "png" を持つ bitmap リソースになりますが、これは利用可能なメモリが全体的に少ないため Aplite プラットフォームでのメモリ使用に最適化されておらず、推奨されません。

プラットフォームごとのリソースの指定

リソース スペースを節約するために、特定のプラットフォーム用にアプリをビルドするときに、特定の画像リソースのみを含めることができます。たとえば、これは Aplite プラットフォームに役立ちます。Aplite プラットフォームでは、画像の白黒バージョンのみが必要で、サイズが大幅に小さくなる可能性があります。リソースは、プラットフォームとディスプレイの形状に応じて選択することもできます。

これを行う方法の詳細については、Platform-specific Resources - 特定のプラットフォーム向けリソースの設定 をお読みください。

画像の表示

GBitmap ポインターを宣言します。これは、アプリの実行中に画像データが保存されるオブジェクトタイプです：

static GBitmap *s_bitmap;

先に選択した name の前に RESOURCE_ID_ を付けて GBitmap を作成します。これにより、画像データが管理されます：

s_bitmap = gbitmap_create_with_resource(RESOURCE_ID_EXAMPLE_IMAGE);

BitmapLayer ポインターを宣言します：

static BitmapLayer *s_bitmap_layer;

BitmapLayer を作成し、GBitmap を表示するように設定します。GRect で画像の正しい幅と高さを指定し、GCompOpSet を使用して色の透明度が正しく適用されるようにしてください：

s_bitmap_layer = bitmap_layer_create(GRect(5, 5, 48, 48));
bitmap_layer_set_compositing_mode(s_bitmap_layer, GCompOpSet);
bitmap_layer_set_bitmap(s_bitmap_layer, s_bitmap);

BitmapLayer を Window の子レイヤーとして追加します：

layer_add_child(window_get_root_layer(window),
                                      bitmap_layer_get_layer(s_bitmap_layer));

アプリが終了するときに、GBitmap と BitmapLayer の両方を破棄します：

gbitmap_destroy(s_bitmap);
bitmap_layer_destroy(s_bitmap_layer);

ランチャーのメニュー アイコン

ファームウェア 4.0 以降の新しいランチャーでは、開発者がウォッチアプリとウォッチフェイス用のカスタム アイコンを提供できます。

25x25 の png を package.json ファイルの resources.media セクションに追加し、"menuIcon": true を設定できます。SDK では、より大きいアイコンは拒否されますのでご注意ください。

"resources": {
  "media": [
    {
      "type": "bitmap",
      "name": "MENU_ICON",
      "file": "images/icon.png",
      "menuIcon": true
    }
  ]
}

png ファイルがカラーの場合、ランチャーでレンダリングする際に、画像の輝度を使用して、白黒だけでなく、わずかなグレーを追加します。透明度は保持されます。

アプリストアへの送信時に指定されるアプリ アイコンは、この画像リソース（モバイル アプリやアプリストアなどの他の場所で使用される）とは独立しています。指定された menuIcon は、常に Watch ランチャーリストで使用されます。