Create pixel-perfect maps for Worms: Armageddon with the game's terrain textures

A lightweight web program for making maps that seem like they were created in W:A, in the original terrain style but with precise pixel placement. This ensures that your board/trick/race maps maintain their intended functionality after applying textures, since transparent pixels will always remain translucent. In addition, the app can automatically convert the output file to make it straight-forward compatible with the game, by encoding the PNG file with an 8-bit indexed color palette and writing the game's special PNG chunk.

The application design is meant to follow W:A's graphical interfaces style :))

How to use

1. Create a map with the image-editing software of your choice.
   Use a single color for all the land that you want the textures to be applied - this will be your mask color.
   TIP: Disable Anti-aliasing on the tool you use to trace these shapes.
   

2. Open the app and upload your map.
   

3. Set the mask color to the one you used when creating your map.
   

4. Voila! You have your map with the textures of the terrain selected applied :))
   You can change the terrain texture and play with the options to modify the output.
   

5. If you check the "Convert output for W:A compatibility" you can now download the PNG file and load it directly into W:A :D
   

Useful resources

This is a list of sites where I found useful information when working on this project:

• @vivaxy/png - npm module
• Comprehensive Image Processing on Browsers - vivaxy's Blog
• Decoding A PNG Image with JavaScript - vivaxy's Blog
• Colour map - Worms Knowledge Base
• Monochrome map - Worms Knowledge Base
• png-chunks - npm module
• PNG file chunk inspector

---

Next.js project info

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev
# or
yarn dev

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.