"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

  • I know there is samples but i still don't understand.  I just need to know how to see my tilemapper files on the watch and use them....please  Santa

  • Have you downloaded and setup the eclipse sdk? (I say eclipse as that’s the sdk I use)

    If you’ve not done that then download and set it up, there should be instructions on how to do this.

    Once done copy these steps:

    1: Create a new connect IQ project in eclipse, you do this by going to “File” and hovering your mouse over “New”, you should then see an option called “Connect IQ Project”

    2: Call it a name in the Project name box, anything you want. Click “next”

    3: Then choose a location so save it in, I save my projects to C:\Users\Me\eclipse-workspace\MyProjects. Click “next”

    4: Choose the project type Watchface in the drop down menu and select the minimum sdk version you want, I don’t usually change this. Click “next”

    6: Select the project template “simple”. Click ”next”

    7: Choose the devices you want to support, Click “next”

    8: Optionally choose a language, as it’s a basic watchface this isn’t necessary, you can just click “Finish”

    9: You should now have a file containing a source folder and a resources folder, as well as a manifest. Open the source folder and delete the files inside it. Create two new files within it called BasicApp.mc and BasicView.mc

    10: Go to the tilemapper GitHub page https://github.com/sunpazed/garmin-tilemapper/blob/master/samples/analogue/source

    11: copy the text in the GitHub BasicApp.mc to the BasicApp.mc file in your eclipse project.

    12: copy the text in the GitHub BasicView.mc to the BasicView.mc file in your eclipse project.

    13: Close and save both those files, it will build them, wait for that to finish. Once finished delete all the files in the resources folder in your eclipse project. It should build again.

    14: Go back to GitHub and find the “garmin-tilemapper/samples/analogue/resources” page

    15: Download the launcher image and save it to your resources folder in your eclipse project.

    16: Create a new folder in resources called resources.xml

    17: Copy the text from tilemapper/samples/analogue/resources/resources.xml on the GitHub page to your eclipse projects resources.xml file. Close and save the file, it should build.

    18: Copy your watchface images and files (the json, fnt and png file) you generated with the python code to your resources folder in your eclipse project. You may have multiple versions of these, one set for the dial, one set for the minute hands, one set for the hour hands. 

    19: Go to Garmin-tilemapper/samples/analogue/resources-round-240x240/resources xml (it doesn’t have to be 240x240, it’s whatever your watches resolution  is)

    20: Copy the text in that resources.xml file to your resources xml file in your project.

    21: Now you have to fiddle around with the code in your resources xml and the view to get your resources to match what the code is looking for.  For example the filenames in the resources.xml for the hands and such need to match the ones you’ve created.

    So in the sample resources.xml one of the examples for the dial is this:

    <font id=“font_dial” filename=“dial.fnt” antialias=“true”/>

    but say your dial is called “mydial” so your filename needs to become filename=“mydial”

    I hope I’ve explained this well enough.

  • Thank you so much for the time you took to explain in more details.  I had already downloaded and installed Eclipse JDE and no problem creating a new project.  I have my tiles (created with tilemapper).  My only problem is that tilemapper could'nt created the hour and minute hand in two separate tile (0-29 and 30-59) like in the sample i had to create 4 for each hands.

    All the steps are very clear from 1 to 20 but when a get at 21, i get confused cause i have 4 tiles for each hands and also i only have one resolution (416x416).

    if you still have some time, i would need some help for the last part.  What do i need to change in the basicview..mc and also how do i modify or write in the ressources.xml files,.

    Thank you so much once again.  A lot of people will beneficiate from the disscussion we are having right now  :)

  • Ignore the fact the id in the resources says compass and jcompass, i was just thinking or a random word to make the id stand out, you don’t have to change the ids if you don’t want.Click here to play this video

  • would you mind just taking a quick look at the project on github and tell me what i have done wrong?  i honestly don't know what to do...i appreciate your help really, if you have time....i would REALY appreciate it  Slight smile

    https://github.com/JayBouch1977/tilemapper-test

    Once again, thank you VERY much!!!

  • Can you see the video I posted? Or is it not showing for you? 

    edit: sure i’ll take a look at your code.

  • Seen it but did'nt help  Flushed

  • I loaded your project into eclipse and ran it, got an array out of bounds error, did you recieve that?

    if so that was because the default view code from the samples of tilemapper had more than one array in the json for the dial.

    for example: the samples json looks like this, (i’m going to use the word numbers to replace the various numbers that actually appear in the json)

    [[numbers][numbers]]

    yours looked like this

    [[numbers]]

    you had one array object.

    Arrays are read as

    var arrobj1 = resource[0] (the first object is 0)

    var arrobj2 = resource[1] 

    etc

    so you get an array out of bounds error when the code calls for say resource[2] if your resources go up to a number less than that. 

    after fixing that i got it to work.

  • i have received so many different error codes....

    BUILD: C:\Program Files\Java\jdk-19\bin\java -Dfile.encoding=UTF-8 -Dapple.awt.UIElement=true -jar C:\Users\Jay\AppData\Roaming\Garmin\ConnectIQ\Sdks\connectiq-sdk-win-4.1.5-2022-08-03-6e17bf167\bin\monkeybrains.jar -o "C:\Users\Jay\eclipse-workspace\tiles 28-12-22\bin\tiles 28-12-22.prg" -w -y C:\Users\Jay\Desktop\developer_key -d epix2_sim -f "C:\Users\Jay\eclipse-workspace\tiles 28-12-22\monkey.jungle"
    BUILD: ERROR: A bitmap resource matching the provided launcher icon can't be found. You must provide a bitmap resource for the launcher icon.
    BUILD: com.garmin.connectiq.common.manifest.ManifestException: [102] A bitmap resource matching the provided launcher icon can't be found. You must provide a bitmap resource for the launcher icon.
    BUILD: at com.garmin.monkeybrains.Monkeybrains.runPRGCompiler(Monkeybrains.java:1813)
    BUILD: at com.garmin.monkeybrains.Monkeybrains.compileApplication(Monkeybrains.java:1335)
    BUILD: at com.garmin.monkeybrains.Monkeybrains.run(Monkeybrains.java:2774)
    BUILD: at com.garmin.monkeybrains.Monkeybrains.simpleMain(Monkeybrains.java:342)
    BUILD: at com.garmin.monkeybrains.Monkeybrains.main(Monkeybrains.java:371)
    BUILD: usage: monkeyc [-a <arg>] [-b <arg>] [-c <arg>] [-d <arg>] [-e]
    BUILD: [--Eno-invalid-symbol] [-f <arg>] [-g] [-h] [-i <arg>] [-k] [-l <arg>]
    BUILD: [-m <arg>] [-o <arg>] [-p <arg>] [-r] [-s <arg>] [-t] [-u <arg>] [-v]
    BUILD: [-w] [-x <arg>] [-y <arg>] [-z <arg>]
    BUILD: -a,--apidb <arg> API import file
    BUILD: -b,--apimir <arg> API MIR file
    BUILD: -c,--api-level <arg> API Level to target
    BUILD: -d,--device <arg> Target device
    BUILD: -e,--package-app Create an application package.
    BUILD: --Eno-invalid-symbolDo not error when a symbol is found to be invalid
    BUILD: -f,--jungles <arg> Jungle files
    BUILD: -g,--debug Print debug output
    BUILD: -h,--help Prints help information
    BUILD: -i,--import-dbg <arg> Import api.debug.xml
    BUILD: -k,--profile Enable profiling support
    BUILD: -l,--typecheck <arg> Type check [0=off, 1=gradual, 2=informative, 3=strict]
    BUILD: -m,--manifest <arg> Manifest file (deprecated)
    BUILD: -o,--output <arg> Output file to create
    BUILD: -p,--project-info <arg>projectInfo.xml file to use when compiling
    BUILD: -r,--release Strip debug information
    BUILD: -s,--sdk-version <arg> SDK version to target (deprecated, use -c
    BUILD: -t,--unit-test Enables compilation of unit tests
    BUILD: -u,--devices <arg> devices.xml file to use when compiling (deprecated)
    BUILD: -v,--version Prints the compiler version
    BUILD: -w,--warn Show compiler warnings
    BUILD: -x,--excludes <arg> Add annotations to the exclude list (deprecated)
    BUILD: -y,--private-key <arg> Private key to sign builds with
    BUILD: -z,--rez <arg> Resource files (deprecated)
    ERROR: Invalid manifest file
    BUILD: Complete
    Aborting launch due to failed build.

  • I got it working. I’ll share the code to my github, you can get it from there. You can see what the problem was (for me at least)