The inspiration for this block came from 2D games such as MapleStory and Don’t Starve Together. These games featured a 2D sprite-based world where players can interact with each other to complete missions and build towns. We thought it would be a cool idea to create a 2D world where users can interact with blocks of data by taking advantage of the Blocks SDK. Especially given the current global situation where people are working from home, we thought it would provide an interesting alternative to team collaboration that can will increase individual user involvement.

What it does

Our block is a sprite chat room that features a character selection landing screen and a large ball room for users to interact with each other. The inception of this idea took hold while we were glancing at the suggested list of use cases. We wanted a block that was going to be useful to users from multiple industries, fun and builds a collaborative environment.

How we built it

Since pixel art is popular in making sprite figures, we decided to go with it as our art style. We created the visual assets in Pisces, Tiled and Figma. To animate the walking gestures, we made 12 frames for each avatars (three for each direction).

We built the 2D sprite chat world using D3. We used svgs to handle the positioning of all the assets and used D3's zoom library functions to take care of the user navigation around the map.

Challenges we ran into

The main challenge was mitigating latency and synchronizing the movement between multiple users. We took advantage of Airtable’s real-time updates by utilizing the global config as a store for all the user sprite data. Once too many users become collaborators and enter the chat room, the user experience starts to degrade as the real-time updates cannot keep up with the volume of updates generated by each user. To work around this, we decreased the number of updates made by each user. In our first iteration, we had kept track of where each character was by storing their x and y coordinates within the global config and updated their position every time it changed. However, we realized that we can maintain only the character animation states of each sprite and keep track of the x and y coordinates of each user locally. Based on the user sprite’s animation state, the computation of where each sprite should go can be done locally and not be constantly synched with the global config. With this strategy, we are able to host a large number of users in the same chatroom with a “lag-less” user experience.

Another challenge was the scaling of images for our sprites and background images. When zooming in close to each Sprite, the image started to become blurry. However, we were able to resolve this by a pixelating the image rendering via CSS.

Accomplishments that we're proud of

We are proud of the seamless and integrated user experience that our Sprite Chat provides. We believe it is very intuitive and easy to use for new users to try out and have fun with.

We are proud of

What we learned

Airtable Blocks are extremely flexible and easy to create additional functionality for. I can see that creating integrations with different services become trivial as you can link up your APIs and services directly to your blocks and have it accessible to your collaborators.

What's next for Sprite Chat

The next step for Sprite Chat is to create “Data Blocks” that User Sprites can interact with. These “Data Blocks” can represent tables, records, or fields. When the User Sprites pick up and move around the “Data Blocks”, it will represent changes to the underlying tables, records, or fields. With this functionality in place, we can create integrations with popular productivity tools such a Kanban tables where users can move/modify records by carrying and placing “Data Blocks” into different locations representing the different columns within the Kanban Table. Games such as Scrum Poker can be made interactive as well by allowing users to “pick up” different points and having it all become revealed at the end of the round.

Share this project: