Source: https://github.com/chuanqisun/pixel-pusher-online

Widget: https://www.figma.com/community/widget/1142531655223087736

Figma already comes with a best-in-class multiplayer system that synchronizes object locations and states. It also comes with affine transformation that makes spritesheet easy to work with. I just need to style the nodes and build a UI to make it feel more like a game.

Facts:

- The game is built with Figma's Plugin and Widget API.

- The avatar animation is achieved with PNG sprite.

- The chat system stores messages inside each page and polls for update.

- The maps are built from existing tilesets and assembled using Figma

- In the process, I built another plugin to split single png into tiles, using affine transform API.

- The control UI is a web app that sends commands to the Figma main app, built in Preact.

What's missing:

- Collision detection is hard. Currently avatars can walk into each other, off the map, or over the obstacles.

- Map is just a flat image. I wish there are layers so we can get z-index working

- The map itself is not interactive. Figma API requires the widget UI to be active when any logic is running on the canvas, making it difficult to add "autonomous" NPC nodes