Inspiration:
Puzzled Art is a jigsaw puzzle featuring artworks.
As an artist, I think jigsaw puzzles make interactions with art memorable. Players notice tiny details and feel like they're recreating the artwork when they assemble it piece by piece. That makes it a great medium for observing art and discovering artists.
I wanted the experience to be calm, like print-era games (think: crosswords and Sudoku printed in newspapers). Those were low-pressure and played mainly for fun. So, I kept no global leaderboards/points and made the competitive mode optional. The UI is intentionally minimal with soft tones to keep the focus on the art.
What it does:
- Puzzled Art is a jigsaw puzzle on a 5x5 grid.
- Each puzzle features an original artwork, with the artist credited in the post.
- Puzzle pieces, or 'tiles', are square.
- Tapping on two tiles swaps their positions.
- Correctly placed tiles become unclickable and lose their white borders. This is done to make the painting feel continuous when done.
- By default, there are no leaderboards or points. A timed mode is available that records the fastest completion per puzzle (one record holder at a time).
How was it built:
- I had never worked with TS, Node or Phaser before. Most of my time went into getting comfortable with these (even though, I ended up not using phaser).
- Once I learned the purpose for everything that was in the devvit template, I set up a mental model for server-client interaction, in a flow chart.
- Working with TS was tricky in the beginning. I tested components in separate local files because I was too scared of breaking the main project. I used JS locally and had LLMs help me convert it to TS and fix type errors.
This project took around four months to go from an idea to a published app. Most of the first three months went by trying to make sense of things. I do understand that was a lot of time for a project of this type and scale, but I wanted to understand everything I was doing.
Challenges:
The biggest challenge was image processing.
- I started with Phaser canvas but realized cropping images during gameplay was too heavy.
- Then, I tried Sharp to preprocess the tiles on the server side. That worked locally, but I later discovered devvit doesn't support Sharp.
- I then tried a hybrid approach, to use browser/HTML canvas for image processing and server for logic. Although this wasn't the best approach, it led me in the right direction. It had me thinking a lot about handling blobs, buffers and base 64 strings. All that thinking helped me get to the current lightweight version.
Accomplishments:
I hand-drew all the SVGs and manually set up animations, which was really fun!
However, my greatest accomplishment has to be that I published my first functional web project and didn't give up midway.
What I learned:
- I learned a lot about images, how they're processed, read, stored, and transferred. I discovered it only during my project that one image pixel doesn't have to be equal to one screen pixel.
- Weirdly, I didn't know CSS grids existed until this project. Prior to that, I had been using absolute positioning. Grids showed me what clean layouts look like and why it's so neat for designing game UI.
- I learned how to handle concurrent events, like when updating records for timed mode.
- By the time I finished development, I became appreciative of TypeScript. I used to loathe it for making me write extra and believed JS was always better. I learned why I was wrong.
What's next for Puzzled Art:
I think there's always an opportunity to make the UX more intuitive, and optimize for better performance. I plan to spread the word about my puzzle and iterate based on feedback.
Log in or sign up for Devpost to join the conversation.