Layers
Preview
Properties
How Sprites Work in Wormate.io with PixiJS
The SkinLab project is a community-driven tool designed to allow visual customization of characters inspired by the game Wormate.io. We use PixiJS, one of the most popular WebGL-based 2D graphics engines, to render high-performance visuals directly in the browser.
What is a Sprite?
A sprite is a graphical element represented by an image or texture atlas. In 2D games, sprites are used to display characters, items, and visual effects. In Wormate.io, each skin consists of multiple segments (head, body, eyes, etc.) that are rendered dynamically in real time.
Rendering with PixiJS
PixiJS provides a straightforward object-based API that allows you to render, position, scale, rotate, and animate sprites efficiently. Here's a basic example:
// Initialize PixiJS
const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);
// Load texture
const texture = PIXI.Texture.from('skin-segment.png');
// Render multiple segments
for (let i = 0; i < 20; i++) {
const segment = new PIXI.Sprite(texture);
segment.x = i * 25;
segment.y = 300;
segment.scale.set(0.5);
app.stage.addChild(segment);
}Layered Sprite Composition
SkinLab supports layered sprite structures to simulate how characters are displayed in the actual game, including body parts, eyes, shadows, and optional overlays. PixiJS containers help organize these elements hierarchically:
const snakeContainer = new PIXI.Container();
snakeContainer.addChild(bodySprite);
snakeContainer.addChild(eyeSprite);
app.stage.addChild(snakeContainer);Skin Format Compatibility
The SkinLab system supports common formats used by the community, such as transparent PNGs and spritesheets. You can preview and export your design to be used in simulators or Wormate.io forks with ease.
Community Collaboration
This tool is developed and maintained by the community. Developers and designers are welcome to contribute on GitHub, suggest improvements, or help implement new features. Our goal is to make skin creation simple, educational, and accessible to everyone.