"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

  • From what I could gather from barely using this tool, you have to make a square file, preferably 1000x1000 pixels(creator recommendation) of each character in each position, say you want to write 5 numbers at the top of your watch, all 5 positions would have different angles, so you would have to create 10 images(one for each digit) * 5 positions=50 total images. Then you would have to have a way of knowing what character in what position you want to draw to access the json array of that image(character) and it would draw that character on that position.

    As you can see this can get quite tiresome if you want to draw on more than 5 positions and letters too.

  • This is possible without having to manually create many images.

    The tool has two modes, static and rotate, toggled using the -m or --mode flag. The default mode is static.

    The examples in GitHub show how a single image (such as a Watch hand) can be rotated through 360 deg. You can do the same for text, or any other bitmap.

    Obviously, having an image or text rotate command in MonkeyC is much more efficient.

  • Hey ftrimboli, I’m struggling a bit with the setup of the tool, I paste the code into python 3.10 command line (I have pillow installed) but it returns indentation errors and does not recognise main(), have I done something wrong?

  • Are you a freshman in dealing with py. Python is sensitive to indentation!s It is better to use python3 xxxxx.py, I have to say. Hope it helps you.

  • I have no python experience whatsoever, I do however have some good news in that I fixed the indentation problem in notepad and it seems to run and output soemthing in the python console, however, I am unsure how to set any of the options like rotate mode, etc, do I just edit the py file and if so where in the file? Do I just type it in to the console? All i'm getting at the moment is a 0kb destfont.json and a 0kb destfont.fnt file without anything in them. 

  • Let me show you some bash commands for it. Actually I get all of this from the document . I think the examples speak more clear than docs. The function of each option is indicated in the doc lol

    python tilemapper.py -i /Users/kent/garmin-ziwuliuzhu/artwork/ziwu-background.png -o /Users/kent/garmin-ziwuliuzhu/resources-round-240x240/sundial -r 240
    python tilemapper.py -i /Users/kent/garmin-ziwuliuzhu/artwork/ziwu-number.png -o /Users/kent/garmin-ziwuliuzhu/resources-round-240x240/numberdial -r 240
    python tilemapper.py -i /Users/kent/garmin-ziwuliuzhu/artwork/ziwu-hour.png -o /Users/kent/garmin-ziwuliuzhu/resources-round-240x240/dialhand-0-59 -m rotate -u 0 -v -177 -s -3 -r 240
    python tilemapper.py -i /Users/kent/garmin-ziwuliuzhu/artwork/ziwu-hour.png -o /Users/kent/garmin-ziwuliuzhu/resources-round-240x240/dialhand-60-119 -m rotate -u -180 -v -357 -s -3 -r 240
    python tilemapper.py -i /Users/kent/garmin-ziwuliuzhu/artwork/ziwu-minute.png -o /Users/kent/garmin-ziwuliuzhu/resources-round-240x240/dial-minute-0-29 -m rotate -u -0 -v -174 -s -6 -r 240
    python tilemapper.py -i /Users/kent/garmin-ziwuliuzhu/artwork/ziwu-minute.png -o /Users/kent/garmin-ziwuliuzhu/resources-round-240x240/dial-minute-30-59 -m rotate -u -180 -v -354 -s -6 -r 240
    

  • so if I change the paths to where my images are and where I want them to be with the desired settings will it work?

  • it says invalid syntax when I try that

  • it also says invalid syntax in an online syntax checker with the unmodified commands from the document

  • It is a python command line tool, and the README includes steps on how to get started.

    The /samples directory also includes the original artwork and scripts to generate the tilemaps.

    Here's another example of the tool at work. Hard to believe this is all drawn by fonts.

    https://www.hydro-lazer.com/