Ed Carrotta

The international Foundations of Digital Games (FDG) conference series, operated annually by the Society for the Advancement of the Science of Digital Games (SASDG), is a nexus for critical discussion and exploration in the academic space of game design/immersive play.

I could not be prouder to have served as the Web Chair and website developer for its 19th consecutive conference session, FDG 2024, hosted at my own home institution of WPI for the first time.

As I coordinated with both academic stakeholders and sponsor representatives from Studios Quality - Xbox Game Studios , I took pride in ensuring our central conference motif of inclusivity and community remained at the forefront. Color was crucial: the site is introduced with the warm hues of our campus in the spring, and the color-spectrum theme that follows evokes unity and builds a visual brand familiar to attendees of the conference in the last few years (e.g. 2021, 2023).

Our wonderful logo by '22 alum Hannah Belan was my core reference; I was beyond pleased that many attendees thought the site and logo were created by the same person due to their consistency.

Writing the HTML and stylesheet from scratch, I sought animations that felt lively yet avoided superfluous Javascript or problems with accessibility. To this end I harnessed CSS flex transitions, noticeable in the tactile "file cabinet rifling" metaphor of the site navigation tabs. It's always far preferable to use the constraints of CSS to guide me rather than fighting against it in the creative process.

I also found this a delightful way to connect with our audience via an interactive reference. Harnessing something familiar in our professional world, and transforming it into both a signifier and an engaging toy at once – does that not capture the core magic of games academia?

Note that the web application is intended for desktop devices.

My first project with the Intentional Design Studio (IDeaS) saw me collaborating closely with the Center for Project Based Learning at WPI as part of a talented team of three. We were tasked with translating the Center's guide to capacity building and institutional change, a rich document compiled over the course of previous research projects, into an interactive format. My personal role was as a co-designer as well as the sole developer for our React webapp.

Given how uniquely the material applies depending on the reader, we felt that an expressive digital notebook was a perfect model: by focusing on the pace of information, and creating ample opportunities for learners to record their own ideas, we aimed to help our audience contextualize the guide into their own professional world. Thus the reader would come away from the material with a reflective handbook authored by them, tailored to address their team's needs, and formatted to be printed and shared.

In my design work, I reinforced getting readers to tap into and focus the intuition that they already had – after all, we weren't in their heads! Who were we, to pretend to know their circumstances better than they do? Capacity building fails when treated as a "one-size-fits-all" process, so all we could do was give our audience gentle guidance; forcing their hand or condescending them would undermine our goal.

As such, one of my feature contributions was the presentation of optional text and hint buttons throughout many sections, facilitated by the "little annotation guy" who ties them to an approachable face. Not every reader makes use of his help or external resources in their journey, but for those who do, I aimed to not only destigmatize the learning process, but to make it rewarding to view the endearing expressions and plain-english insights of a tiny mascot character.

Our experimental "mind map" directory, which serves as the homepage, was built to encourage readers to explore and approach our content nonlinearly. In anticipation of future additions to this handbook, my modular content system automatically creates URL routes for new section objects and populates them in both this map and the chapter sidebar.

The iOS-published Free-Body Diagram application is a multi-year collaboration between IDeaS and the Mechanical & Materials Engineering department at WPI. the app itself is a gamification proof-of-concept in teaching introductory physics concepts implemented in Unity. However, keeping the app's public trial online has warranted a much richer ecosystem of frameworks and moving parts.

Thanks to the hard work of many student specialists, this necessary infrastructure developed piece-by-piece over time. The downside was that, without executive oversight, some of these pieces meshed unevenly with one another, hampering the accessibility of the app. Students were required to individually add themselves to a class, with no security to ensure correct registrants. An exposed one-time code was used to connect each student to their class, adding inconvenient steps. Direct intervention by programmers was required to add new instructors, and each instructor could host only one class.

My task was to unify all of these parts into a smooth, easy workflow for students and instructors. This saw me wearing many hats at once – all told, I wrote markup and scripts in seven languages as I bounced between Svelte, CSS, pure HTML/JS, backend Python + MongoDB commands, Unity UI behaviors, and Docker configuration content. I'm pleased to have addressed all of the listed issues, plus many other bugs.

I overhauled the FBD join flow to be as one-click as possible. Building a class-management interface and API from the ground up, I introduced classes of two kinds: "academic" classes requiring direct verification of emails against a roster, and – inspired by the Kahoot! gamified-quiz platform – "trial" classes allowing any visitor to join with an invite code. Both of these are facilitated by a robust SMTP-based invitation mailer, as well as Unity's deep linking functionality to skip the need for copy-pasted login tokens and instead quietly utilize them without the user's help. On average this reduces the join process to simply installing an app, tapping a link, and entering your name.

View the 2024 MQP paper here!

My Major Qualifying Project (MQP) at WPI, Comroddity, the Alternate Reality Game Show, saw myself and five creative peers testing the waters for alternate reality games as an accessible long-form campus activity and community-building medium. I was our team's resident full-stack web engineer, in charge of our game's progress database and cloud hosting of three "story sites". I was also the React developer for our game's central hub, the Comroddity web application.

This project was one of my most schedule intensive, as is the nature of a "living" public game. The central app went through several iterations as our design team refined their mockups; these changes helped us find the "core" of the game's artistic vision, a prevailing sense of coziness intentionally undercut by cryptic and eerie elements. Especially of note is the animated "ransom note" menu font which I scripted to this end.

Our team was proud to receive IMGD's own MQP award in innovation. Though our scope had to be adjusted on many occasions and not every idea was fully realized, we are happy to have cut much of the red tape facing academic ARGs, and thoroughly enjoyed engaging with our small community of dedicated players.

<MORE INFO SOON>

The accompanying graphic was created using my solo toy project, Wackelzeug .
The actual engine visuals may vary slightly depending on your browser.

Some of my earliest experimentation with front-end frameworks came about from unexpected, even artistic sources and wildly open-ended design challenges. The Perlenspiel 3 engine by Brian Moriarty, an austere sandbox of constraints designed to focus the developer's vision, is a toolkit that still sticks with me for how approachable – and even formative – it was in my early studies of client-side webware.

All listed projects, save for A05, were a collaboration between myself and designer Griffin Bowers. As our team programmer I was responsible for writing the actual JS of each piece, pulling from my design discussions with Griffin alongside his provided sketches and palettes to bring our designs to life.

I found Perlenspiel a remarkably engaging (and inspiring!) toy in and of itself, and spent a wealth of time tinkering with its affordances. This included everything from testing the limits of its CSS-based graphics with ~30fps procedural animations to, in our final work, building a lightweight framework for top-down worlds to supplement the base engine.

Note that all our team creations went through at least two submitted iterations; all such in-progress versions remain on the site for completeness. This feels only appropriate, as perhaps the most valuable takeaway to come of my and Griffin's work was the importance of these incremental builds as feedback-eliciting tools.