mirror of
https://github.com/google/pebble.git
synced 2025-03-25 04:49:06 +00:00
107 lines
3 KiB
Markdown
107 lines
3 KiB
Markdown
---
|
||
# Copyright 2025 Google LLC
|
||
#
|
||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||
# you may not use this file except in compliance with the License.
|
||
# You may obtain a copy of the License at
|
||
#
|
||
# http://www.apache.org/licenses/LICENSE-2.0
|
||
#
|
||
# Unless required by applicable law or agreed to in writing, software
|
||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
# See the License for the specific language governing permissions and
|
||
# limitations under the License.
|
||
|
||
title: Tips and Tricks - Transparent Images
|
||
author: chrislewis
|
||
tags:
|
||
- Beautiful Code
|
||
---
|
||
|
||
Ever wondered how to draw transparent images in a Pebble app? This post will
|
||
walk you through the process.
|
||
|
||
In this post, we'll be using a sample image with a transparency component, shown
|
||
below:
|
||
|
||
<a href="{{ site.asset_path }}/images/blog/tips-transparency-globe.png" download>
|
||
<img src="{{ site.asset_path }}/images/blog/tips-transparency-globe.png">
|
||
</a>
|
||
|
||
|
||
|
||
When adding your project resource, ensure you set its ‘type’ correctly. On
|
||
CloudPebble, this is done when uploading the resource and choosing the 'PNG'
|
||
type. In the SDK, this is done with the `png` `type` in the project's
|
||
`appinfo.json`.
|
||
|
||
```js
|
||
"media": [
|
||
{
|
||
"type": "png",
|
||
"name": "GLOBE",
|
||
"file": "globe.png"
|
||
}
|
||
]
|
||
```
|
||
|
||
This will create a resource ID to use in code:
|
||
|
||
```text
|
||
RESOURCE_ID_GLOBE
|
||
```
|
||
|
||
Simply create a ``GBitmap`` with this resource and draw the image with
|
||
``GCompOpSet`` as the compositing mode:
|
||
|
||
```c
|
||
static GBitmap *s_bitmap;
|
||
static Layer *s_canvas_layer;
|
||
```
|
||
|
||
```c
|
||
static void window_load(Window *window) {
|
||
Layer *window_layer = window_get_root_layer(window);
|
||
|
||
// Create GBitmap
|
||
s_bitmap = gbitmap_create_with_resource(RESOURCE_ID_GLOBE);
|
||
|
||
// Create canvas Layer
|
||
s_canvas_layer = layer_create(layer_get_bounds(window_layer));
|
||
layer_set_update_proc(s_canvas_layer, layer_update_proc);
|
||
layer_add_child(window_layer, s_canvas_layer);
|
||
}
|
||
```
|
||
|
||
```c
|
||
static void layer_update_proc(Layer *layer, GContext *ctx) {
|
||
// Draw the image with the correct compositing mode
|
||
graphics_context_set_compositing_mode(ctx, GCompOpSet);
|
||
graphics_draw_bitmap_in_rect(ctx, s_bitmap, gbitmap_get_bounds(s_bitmap));
|
||
}
|
||
```
|
||
|
||
When drawing on a ``TextLayer`` underneath `s_canvas_layer`, the result looks
|
||
like this:
|
||
|
||
|
||
|
||
|
||
See a full demo of this technique on the
|
||
[pebble-examples GitHub repo]({{site.links.examples_org}}/feature-image-transparent).
|
||
|
||
Job done! Any transparent pixels in the original image will be drawn as clear,
|
||
leaving the color beneath unaffected.
|
||
|
||
Read the [Image Resources](/guides/app-resources/) guide to learn more
|
||
about transparent PNGs.
|
||
|
||
|
||
## Conclusion
|
||
|
||
So there you have it. Using these examples you can easily implement transparency
|
||
on all Pebble platforms. To learn more, read the ``GCompOp`` documentation or
|
||
the
|
||
[`pebble-examples/feature-image-transparent`]({{site.links.examples_org}}/feature-image-transparent)
|
||
SDK example.
|