PixelCast is a community-based pixel game inside a Farcaster Frame that lets you collaboratively create visuals with your friends.
The idea of this project was to create a social game experience inside Warpcast, making use of Farcaster as a social network protocol. It utilises Farcaster Frames through which users can navigate within a pixel grid by clicking direction buttons (i.e. Up, Left, Right) and ultimately select a color and place a pixel in an open grid.
Other users can jump in and collaboratively paint and create designs within one space. Once a user places a color, a cooldown of 5 minutes will be activated that limits the player to take over the pixel space on its own. This puts an emphasis on cooperation between communities to jointly create and contribute.
To create PixelCast, we focused on 3 separate parts of the project:
For the front-end, we leveraged React and Next.js, a React framework that enables functionality such as server-side rendering and static site generation.
Specifically, our project features include:
The user interface is wrapped inside a StarknetProvider
, embedding the Starknet connection logic into the React component tree. This provider is configured with various Starknet connectors, facilitating connections to different wallets.
Integrating with the Farcaster social network protocol required managing a set of server-side API handlers. We used Farcaster's technology to map user identities within the social protocol to actions in the grid. Our middleware processes POST and GET requests, connected to the Farcaster network, to handle everything from user mapping to pulling profile data for display.
We implemented a Wallet Connect
feature, allowing users to link their Starknet ID with their Farcaster ID, associating blockchain accounts with in-game activity.
The on-chain functionality is not yet fully realized but is set up through the useSignTypedData
hook, which we use to sign verification messages within the ConnectWallet component.
For data persistence and backend services we used the following:
One of the main challenges we were facing was to build within the constraints given by Farcaster to handle static response frames and using buttons as the only user interactions. We had to think through the game design on how to have a somewhat acceptable player experience within those constraints. One of the solutions was the generation of SVG files of the state.
Moving forward, we would love to make PixelCast fully on-chain, maintaining game persistence and allowing farcaster and Starknet users to directly interact with the blockchain.