Craft Design App built with Phaser

I just wanted to share my work with other Phaser users out there. I think my use of Phaser may be unusual because it’s not strictly speaking a game.

Beadographer is a “freemium” web app I wrote for creating designs using seed beads. This is a popular crafting activity all over the world. People use beads to make bracelets, trinkets, and even tapestries. The free version does everything except save projects and export PDFs.

I launched the app back in July and it is now in its second version. This is my first attempt at creating my own web-app, and Phaser has been a key part of the process. Although Phaser is intended for games, I found its features are ideally suited to my project, which is essentially an image manipulation app.

Notable things about the project:

  • RenderTextures are absolutely integral to allowing a good performance. They let me create bead styles and then apply them to the canvas. This reduces the number of game objects I create considerably.
  • I save state locally with Dexie.js
  • The game canvas is entirely hidden when entering the menu, so I can make use of standard HTML5 rather than creating a UI within the canvas.
  • Phaser.Display.Color contains a lot of useful color manipulation functions.
  • Pretty much all the app logic is external to the Phaser.Game object. Phaser is only responsible for rendering to the canvas.

Many thanks to PhotonStorm for the ongoing development of Phaser. It is truly a fantastic project.

If anyone has questions about how I created this project, or indeed comments or suggestions for me, please reply below. I’m happy to chat!


Anyway we can try this out? :star_struck:

Yes! Sorry–forgot to include link.

Launch at!

(Free-no login)

1 Like

super cool! Love it :100:

1 Like