"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!!

Top Replies

All Replies

HermoT over 4 years ago

Nicely done mate!

ftrimboli over 4 years ago

Thanks to peterdedecker for the first PR to make the samples work in eclipse!

vald70 over 4 years ago

Interesting tool, even if I've not yet a use case !

Shent-Aurkhan (SHN) over 4 years ago in reply to ftrimboli

Great work !!!!!

How to use it ? In Éclipse ?

peterdedecker over 4 years ago in reply to Shent-Aurkhan (SHN)

Get the latest version to pull in my changes, then you should be able to open the sample projects from within eclipse.

The tool itself is command line so you need to operate that one from in a command shell window.

ftrimboli over 4 years ago

Yes, thanks Peter — 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.

kashortie over 4 years ago in reply to ftrimboli

Awesome work Franco THANK YOU

For some reason the fonts output png are counter clockwise for me so 3 and 9 sides rotate inversed.

what am I doing wrong

ftrimboli over 4 years ago in reply to kashortie

Thanks kashortie

This works the same way as photoshop or illustrator — Enter a negative angle to rotate clockwise; enter a positive angle to rotate counterclockwise.

See the examples of this in the sample folder;

github.com/.../process_baseball.sh

ftrimboli over 4 years ago

Please note, a few people have found bugs which I have recently addressed. Thanks for your help!

I have now updated the tilemapper to v0.9.2 — this is a breaking change, so you will need to re-process your images, and update your drawTiles() function in your Monkey C code. Apologies, but this is expected as it's not quite a v1.0 release yet.

This fixes a bug when tilemaps are greater than 500 tiles. This also streamlines the drawTiles() function to make it perform faster, and run universally on any resolution device.

HermoT over 4 years ago

Here are some of my attempts:

Just very basic and minimalistic as I am not interested in developing full scale watch faces, but merely having fun and exploring new things: