WEARLAB

use ⬅️⬇️⬆️➡️ keyborad to move.

IMAGE PNG:


View Image

Select your json Files
No file selected!



🎩 How to Create Cool Accessories for WormWorld

A fun and easy 5-step guide to help you bring your custom hats, glasses, and gear to life.

🧠

1. Plan Your Design

Before opening your graphics editor, take a moment to analyze WormWorld's visual style. It’s all about bold outlines, simple forms, and vibrant colors. Sketch your accessory idea—whether it’s a wizard hat, futuristic visor, or pixelated crown—and gather visual references to inspire your creation.

🖌️

2. Design Your Accessory (PNG Format)

Using a tool like Photoshop, GIMP, or Photopea, create your design on a 512x256 px transparent canvas. Make sure your accessory is centered and clean. Export it as a .png to preserve the transparency and crisp detail needed for the game overlay.

🎯

3. Position It Perfectly

Upload your PNG into tools like WearLab. Use the guide lines and alignment circles to adjust the accessory’s exact position on the worm. You can use arrow keys or buttons like "Move Circle Up" to get that perfect fit. A well-positioned item makes all the difference!

⚙️

4. Configure It with JSON

Create or modify a .json file to tell the game how to handle your accessory. Set its type (e.g., "HAT"), scale, and offset. If you're using WearLab, it may help generate these values for you. Otherwise, a simple text editor is enough to define these key values manually.

🚀

5. Test, Polish, and Share!

Now test your accessory in the game or via a visual previewer. If it looks good and behaves properly, you’re ready to share! Post it on Discord, forums, or your own portfolio to inspire other creators. The more creative, the better!

How to Create Wearables for WormWorld Using PixiJS

The WearLab allows community members to design and test custom accessories like hats, glasses, or trails for their characters. These assets are rendered using PixiJS, a high-performance 2D engine built on WebGL.

Step-by-Step Overview

  1. Create a transparent PNG of the wearable item.
  2. Position the image centered, facing right (head toward the right).
  3. Use a JSON file to define offset, scale, and rotation.
  4. Load both PNG and JSON into the visualizer.
  5. Adjust values until perfectly aligned with the worm body.

📄 JSON Configuration Example

Each accessory requires a JSON file describing how it should be displayed:

{
  "type": "HAT",
  "scale": 1.0,
  "offset": { "x": 0, "y": -50 },
  "rotation": 0
}
  • type: the category (HAT, GLASSES, etc.)
  • scale: adjusts the size multiplier
  • offset: pixel position relative to the worm's head center
  • rotation: degrees of rotation (0–360)

🧠 Applying JSON with PixiJS

You can use PixiJS to dynamically load and apply your custom accessory like this:

fetch('wearable.json')
  .then(res => res.json())
  .then(cfg => {
    const texture = PIXI.Texture.from('wearable.png');
    const sprite = new PIXI.Sprite(texture);
    sprite.scale.set(cfg.scale);
    sprite.position.set(cfg.offset.x, cfg.offset.y);
    sprite.rotation = cfg.rotation * Math.PI / 180;
    app.stage.addChild(sprite);
  });

🎯 Rendering With Containers

For proper alignment, accessories should be grouped in a container with the worm's body: 

const wormContainer = new PIXI.Container();
wormContainer.addChild(wormBody);
wormContainer.addChild(accessorySprite);
app.stage.addChild(wormContainer);

📦 File Format Tips

  • Use PNG with transparency for clean rendering.
  • Keep dimensions proportional to the worm head.
  • Avoid oversized files — aim for under 200 KB.
  • Use spritesheets if planning animated wearables (optional).
Want to contribute? Visit our GitHub or contact the team to submit your creations or ideas!