"tilemapper" tool for tile-mapped anti-aliased graphics

Hey folks,

Here's my command line tool that helps developers build tile-mapped anti-aliased graphics for Garmin wearables;
github.com/.../garmin-tilemapper

Way back in 2017, I showcased a tile-map sprite technique to compress graphics;
forums.garmin.com/.../my-technique-for-anti-aliased-animation-and-bitmaps

You've probably seen my anti-aliased watchfaces in the app store. 
https://apps.garmin.com/en-US/developer/e43b20dc-99b5-4906-ae38-65b36a68b208/apps

This is one of the tools I have been using to develop them.

As a handy extra, I've also included two sample watchfaces, and their artwork. This includes a new "steamboat willie" watchface.

The great thing about this approach, is that you can scale your designs seamlessly across many different devices and resolutions.

Please be mindful that this is the first release, so your milage may vary with bugs, and platform support. Happy to hear your feedback.

Can't wait to see what you all create!! Slight smile

  • It displays like a charm, It’s a good looking watchface. It’s in my GitHub as a zip file  called watchface stuff. The “stuff” consists of the connect eclipse project and an exported prg you can test on you watch straight away.

    To download it from the GitHub you don’t have to download the whole repository just click on the zip file and it will take you through to the zip files page and it will have a little download button in a grey box.

  • thank you so much Scarecrow, i am working on it right now, it is going well.  I am still trying to find out some things....like placing an image in front of the hands....but i guess i'll find out.  I want to add a little pin, in the middle of the hands to make them seem as they rotate from there but the pin always disapear behind the hands  Thinking

  • Remember as I said, if you want things to display above the hands you have to put the code after the code where the hands are drawn. It’s like layers.

    Here’s an example:

    onUpdate() {

    code to draw background (see how the background is drawn before everything else? That’s because you want it to be behind everything)

    code to draw hands (the code to draw the hands comes next, it’s in the middle as you want them to appear above the background but below the pin.

    code to draw pin above the hands. (Finally you have this code, it’s on the bottom to be the thing drawn above everything else.)

    }

  • Hi Mate, I have the same problem "No Module named PIL", could you help me please.

  • Have you installed pillow? I’ve uninstalled python now so your best bet is to follow the instructions I wrote for Jay

  • Forget it, I already solved it, reinstalling pillow. Thanks so much.

  • Any way to reproduce this for normal fonts?

  • I would like to thank you first for this great script that helped me a lot. Thank you!

    But I am working on my own solution in PHP and I would like to ask. why, or is there a reason why the character size in your script is set to 24px (TILE_SIZE)? Is the number of characters 576 (MAX_CHARS) the final number that the watch can process, or can it be more? Do you know, please, what is the maximum size of a character bitmap which can be used safely for devices? Your script generates a size of 576x576. Thank you.

  • No problems!

    The TILE_SIZE is a configurable option (see -t or --tilesize in the code). Setting this to 10% of the screen width is a good starting point, so a tilesize of 24px for a 240x240 MIP screen, and 42px would correspond to a 416x416 OLED screen.

    The MAX_CHARS value of 576 was for two reasons;

    1. Restricted resource memory on older devices with very large bitmaps.
    2. Older devices have issues rendering characters greater than 576 (fenix5, va3, etc) even though they might actually work in the simulator.

    While I love my tool and it's been very useful over the years, I'm excited that the new System 6 features (transparency, bitmap transformations, text rotations, anti-alaising) will finally render this code obsolete!