Research
In short: This game ensures intergenerational and fun learning experiences about climate resilience. In its current version, it simulates four flood phases in the Downtown area of Santa Cruz, CA. The phases are long before something happens, shortly before, during, and after a flood. Each phase represents different actions that people can take, such as subscribing to the local alert system, checking on their neighbors or donating items. Players have to be smart about when to play which action to get the most points. They also have to collaborate to get the high score because every player can only play 4 cards, but needs points in 5 categories. The actions provided in this game are linked to verified local information sources and resources that can be replaced when building your own version.
|
|
The related research publication:
Linda Hirsch, James Fey, Ian Leung, Jerry Peng, Ananya Setty, and Katherine Isbister. 2026. "I have a plan to start: Empowering Awareness and Sense of Agency through a Collaborative Flood Resilience Game" in CHI'26. 10.1145/3772318.3790433 |
Blueprint: How to Replicate the Game
The game development included implementation in Pygame 2.6.1 ( for the Python, JavaScript, and HTML files) for the back- and frontend, and the hardware was coded in C++. Additionally, we created the animations in Blender, used 3D printing for the cardholders, laser-cut the boxes, and designed the cards in Adobe Illustrator.
Here, I provide step-by-step guidance on replicating the game and customizing it for your own needs. You can change the videos, the cards, the points as well as the categories to better reflect your situation and natural hazard of interest. This also means that you can turn the current "flood" resilience game into a "wildfire" resilience game or any other scenarios, as long as you follow the same structure and logic.
Here, I provide step-by-step guidance on replicating the game and customizing it for your own needs. You can change the videos, the cards, the points as well as the categories to better reflect your situation and natural hazard of interest. This also means that you can turn the current "flood" resilience game into a "wildfire" resilience game or any other scenarios, as long as you follow the same structure and logic.
Equipment
The game consists of multiple components:
The links lead to products that we have used (partially in different colors). The code hosted on git and the measurements for the hardware components are linked to these products. For an easier setup, you can just buy the same. Or you can adapt your components and code accordingly, which might make sense for, e.g., newer reader versions.
- 1 Raspberry Pi 5 as the central processing unit + external power source
- 5 Raspberry Pi Picos, one for each player station
- 20 RFID readers, 4 for each player station (equivalent to the four phases of the game)
- 40 RFID tags
- 5 bredboards, one for each player station
- 6 buttons, one for each player station + 1 for the start button
- 5x 2m USB to Mikro USB cables
- 1 USB Hub + external power source
- Potential extension cable to connect the start button with the RPi5
- Wires for soldering
- 3mm plywood for laser cutting (~2 sheets per box)
- Hot glue
- Double-sided adhesive tape
- Duct tape
- Projector screen
- 3D printing material (depending on your machine)
- 1 Portable outdoor projector, incl. HDMI and power cable + mobile projector stand (you will need about 1,90m of height)
- Multisocket extension cord
- Weights and a safety rope for stabilizing the projector
The links lead to products that we have used (partially in different colors). The code hosted on git and the measurements for the hardware components are linked to these products. For an easier setup, you can just buy the same. Or you can adapt your components and code accordingly, which might make sense for, e.g., newer reader versions.
Git Project - Backend and Frontend
To replicate the project, you can clone our git project, which includes the details on the backend and frontend implementations. By cloning, you can play with the same animations and cards as the original game. The default structure of the project separates the Raspberry Pi scripts from the hardware (Arduino), the image assets, videos, and a start script folder. See image below.
The arduino folder also comprises a file to write information on the RFID tags. It works together with a .json file in the raspberry_pi/src/ folder that entails a list of all action cards. Each card is numbered, currently from 1-40, including 20 cards in English and 20 in Spanish. When writing information on the tag, you are asked to enter a number into the Arduino Serial Monitor that links to the card.
The asset folder serves as image storage for the icons used to represent resilience categories and visualize scores.
The raspberry_pi folder stores all central background process-related scripts, including a device handler and the game.py files. The game.py sets, e.g., what videos to play when, how to update the scores in the frontend, and regulates the start button logic. Additionally, the folder hosts the json files for the cards.
The scripts folder helps to run the game after cloning. You can start it through the terminal by calling the start.sh file. You can either run the script or navigate to the script folder and start it manually.
Lastly, the videos folder contains all simulation videos used to walk players through the different flood phases. You can easily exchange the videos as long as you keep the names consistent.
The arduino folder also comprises a file to write information on the RFID tags. It works together with a .json file in the raspberry_pi/src/ folder that entails a list of all action cards. Each card is numbered, currently from 1-40, including 20 cards in English and 20 in Spanish. When writing information on the tag, you are asked to enter a number into the Arduino Serial Monitor that links to the card.
The asset folder serves as image storage for the icons used to represent resilience categories and visualize scores.
The raspberry_pi folder stores all central background process-related scripts, including a device handler and the game.py files. The game.py sets, e.g., what videos to play when, how to update the scores in the frontend, and regulates the start button logic. Additionally, the folder hosts the json files for the cards.
The scripts folder helps to run the game after cloning. You can start it through the terminal by calling the start.sh file. You can either run the script or navigate to the script folder and start it manually.
Lastly, the videos folder contains all simulation videos used to walk players through the different flood phases. You can easily exchange the videos as long as you keep the names consistent.
The frontend (see teaser image) consists of the animation videos, a text overlay for instructions, and an additional score area that displays the progress for the high score and for each individual category. The game.py file brings together the display and would need to be adapted if you want to make changes. Also, instructions are provided in English and Spanish. To alter them, you will have to change the texts in the language_text.json.
Game Logic & Categories
At the core of the game logic are the time-sensitive and resource and skill-dependent action cards. Players learn when to best take what action (long before, immediately before, during and after the natural hazard) and how to help each other to complement missing categories of actions at the right time. Additionally, the actions emphasize what each individual person can do to increase their own, family's, and community's resilience, increasing a sense of agency and empowerment. This logic can be replicated and transferred to other similar cases, in which collaboration, time sensitivity and action-taking are important to understand. In the current game, we identified 5 categories: 1) Community Engagement, 2) Family, Pets & Friends, 3) Maintenance, 4) Information Source, and 5) Neighborhood Relations. Most of these categories and actions represent intangible, human relationship-focused actions, such as "Check on your neighbors if they need help getting to safety." By this, the game focuses on actions that strengthen communities from within, which, in return, strengthen their climate resilience.
Category adaptations can be made. It is fairly easy to swap out one category for another. However, extending or reducing the number of categories will impact the level of collaboration and the maximum number of points that players can earn, and thus, requires more adaptation effort. For initial replicas, I recommend keeping five categories and rather switching individual categories without changing the number.
Category adaptations can be made. It is fairly easy to swap out one category for another. However, extending or reducing the number of categories will impact the level of collaboration and the maximum number of points that players can earn, and thus, requires more adaptation effort. For initial replicas, I recommend keeping five categories and rather switching individual categories without changing the number.
Player Stations & Start Button
The player stations are made with 3mm plywood laser-cut into custom boxes. I repurposed available box templates and customized them to have the cutouts for the cardstand, the button, and the cables. Text to describe the player station or the card slots is added later in the laser cutter software. A laser cutter will normally allow you to differentiate between cut and engrave (and more). It is important that the top layer of the player stations is cut twice, the outer layer with an engraved station no, character image, and cut-out button and card stand holes, and the second, lower layer with cut-outs for the button and engraved text in the card slots. If you want the text in the card slots, you will have to add it in the laser cutter software. You can use the boxes in the svg template for that. Feel free to use my customized templates to create your own. The character images are based on 3D character models from the animation videos.
|
| ||||
The start button consists of one of the buttons and a custom 3D print. My co-author James created the file below to use with your 3D printer. You might need to adapt the buttonhole and the back cutout for the cable.
|
| ||
Card-Related Designs
The cards incorporate various information linked to the game logic and the learning content about actions to take to increase resilience. All cards exist in English and Spanish, and in the form we needed them for the game and as take-home examples. The difference is the additional blank space at the bottom that allows snatching the card into the cardstand without covering anything up.
|
At the top left is an icon mapping the card to the category that it belongs to, similarly to the card title. You can see in the card example below that the action belongs to the "Information Source" category. The icon is the same as displayed in the score area. Right from the icon are the number of points per phase that this card gives. In the example below, the card gives three points in the long before and immediately before phases, but fewer points in the later phases. The background color also represents the category to facilitate quick understanding and gameplay. Underneath the scores is an image linked to the activity and generated with Adobe Firefly, followed by the card title. As the last but not least part, the card provides an action description. Some actions, like in the example below, relate to real-world information channels, resources, or contacts. In those cases, I generated QR codes to the respective website, so that people can easily follow up on this resource after the game.
|
The cards can easily be replicated or exchanged. You will have to update the MFRC522Handler.h and activityCards_linda file and make sure that the new total scores sum up correctly, depending on the number of players.
The Illustrator template of the cards can be printed in 2,59 x 3,5 inches each. Please have a look at the linked document for further details.
The Illustrator template of the cards can be printed in 2,59 x 3,5 inches each. Please have a look at the linked document for further details.
The cardstands are extra designed to leave space at the bottom for the RFID tags. They also have a slot for the cards to be put in and pins in the back that - when properly pushed in - keep the cards in place.
| cardstand.3mf |
Videos
All videos have been created in Blender.
The current videos differentiate between transition videos between phases and looping videos per phase. Transition phases are about 10-15 seconds long. During that time, the game cannot progress, and players have to wait until the video has finished and reached the new phase. Phase videos are looped until the system has received all new input to trigger the next transition and phase. You can see all videos in the git video folder. Please check out some of our Blender files in the Drive if you would like further details on the making.
The current videos differentiate between transition videos between phases and looping videos per phase. Transition phases are about 10-15 seconds long. During that time, the game cannot progress, and players have to wait until the video has finished and reached the new phase. Phase videos are looped until the system has received all new input to trigger the next transition and phase. You can see all videos in the git video folder. Please check out some of our Blender files in the Drive if you would like further details on the making.
Physical Setup
The game requires a longer table to have sufficient space for the projection, the stations and the cards. You will also be aware that the projection will need a certain level of darkness. It worked with the portable outdoor projector when standing in the shadow.
In the example on the left, you see my setup at one of my tests (the fifth station is missing in this picture). The projection is smaller, but it gets better the higher you can put it or the better the projector. As you can also see in the image, I always secure the projector with additional rope and weights at the bottom, as the stand gets a bit less stable the more weight and the higher up it is.
One of the first things that you will want to set up is the projector screen. I always use double-sided adhesive tape to keep them in place; the same also applies to the player stations. The player stations are kept modular, so that you easily unplug them from the RPi5, wrap the cable around the box, and transport them. I keep the start button between the boxes to the end of the table, so that it is easier to reach. It is a different story with the cards because you don't want to cover up the projection too much, so I keep them at the other end of the table.
Thanks to duct tape, all cables are attached below the table and lead directly into the RPi5.
I also hide the RPi5 and all the electronics in a box under the table so that players don't accidentally unplug anything.
When setting everything up in a new environment, make sure players have enough space to walk around the table and the projector setup. This should be mainly it! Let me know how this guide worked for you or if you have any questions.
In the example on the left, you see my setup at one of my tests (the fifth station is missing in this picture). The projection is smaller, but it gets better the higher you can put it or the better the projector. As you can also see in the image, I always secure the projector with additional rope and weights at the bottom, as the stand gets a bit less stable the more weight and the higher up it is.
One of the first things that you will want to set up is the projector screen. I always use double-sided adhesive tape to keep them in place; the same also applies to the player stations. The player stations are kept modular, so that you easily unplug them from the RPi5, wrap the cable around the box, and transport them. I keep the start button between the boxes to the end of the table, so that it is easier to reach. It is a different story with the cards because you don't want to cover up the projection too much, so I keep them at the other end of the table.
Thanks to duct tape, all cables are attached below the table and lead directly into the RPi5.
I also hide the RPi5 and all the electronics in a box under the table so that players don't accidentally unplug anything.
When setting everything up in a new environment, make sure players have enough space to walk around the table and the projector setup. This should be mainly it! Let me know how this guide worked for you or if you have any questions.