Cross Gate Pet Viewer

Cross Gate (魔力宝贝) was one of the most influential MMORPGs in Taiwan and China during the early 2000s. As someone who spent countless hours collecting pets in this game during my childhood, I recently embarked on a nostalgia-driven project: extracting all the pet sprites from the game files and building a modern web viewer to browse them.

The Challenge

Game resources from the early 2000s are notoriously difficult to work with. Cross Gate uses proprietary binary formats for its graphics and animation data:

  • GraphicInfo_*.bin (40 bytes per entry) - Metadata for each graphic including dimensions, offsets, and addresses
  • Graphic_*.bin - RLE-compressed 8-bit indexed images with transparency
  • AnimeInfo_*.bin (12 bytes per entry) - Animation metadata linking pet IDs to frame sequences
  • Anime_*.bin - Animation frame data with actions and directions
  • Palette files (.cgp) - 224-color palettes mapping indices 16-239

The compression format is a custom RLE implementation with multiple encoding modes (literal, repeat, transparent) and variable-length counters.

The Solution

Using AI-assisted development (Claude Code and Antigravity), I built a Python extraction pipeline:

  1. Parse the binary formats - Read the structured binary files, extracting metadata and addresses
  2. Decompress RLE graphics - Implement the full RLE decompression algorithm with all encoding modes
  3. Apply palettes - Map 8-bit indexed pixels to RGB colors using the game’s palette files
  4. Generate animated GIFs - Combine frames into animated GIFs for each pet’s actions and directions

Each pet has up to 10 actions (Idle, Walk, Attack, Defend, Cast, etc.) and 8 directions, resulting in potentially 80 GIF animations per pet.

The Frontend

I built a Next.js web application to browse the extracted pets:

  • Grid view displaying all available pets
  • Detail view with interactive controls for actions and directions
  • Drag-to-rotate functionality for intuitive direction changes
  • Pixel-perfect rendering with image-rendering: pixelated to preserve the retro aesthetic

Lessons Learned

  1. Binary format reverse engineering is time-consuming - Even with AI assistance, understanding undocumented binary formats requires careful experimentation and validation
  2. Progress persistence is essential - With 1000+ pets to process, the batch generator needed to skip already-processed pets and handle timeouts gracefully
  3. Test with edge cases early - Some pets had unusual frame counts or missing animations that caused the initial implementation to fail

References

This project was made possible by the cgg-viewer project, which provided the foundational understanding of Cross Gate’s binary file formats and RLE decompression algorithm. The original Python implementation by the cgg-viewer author was invaluable for understanding how to correctly parse GraphicInfo, AnimeInfo, and palette files.

What’s Next

You can try it out at https://1203906e.cross-gate-pets.pages.dev/.