Website as a Video Game

June 2020



Abstract

Should web and game development mingle more often?

Here’s a thought: websites that people browse to ‘pass-the-time’ could have interactions optimized for entertainment, rather than speed or usability. To show that’s not the worst idea one could have, a ‘news website’ was refactored as a ‘digital houseplant simulation game’.



Website as a Video Game (WaaVG) Overview


Turns out, website interface elements can be abstracted using video game mechanics.

Additionally, these mechanics can be setup to make consumption of website content (for extended periods of time) feel like play.

An anecdotally observed benefit of this design approach is the decrease in ‘internet fatigue’ - as a result of making more actions available beyond scroll, read, refresh.

To get a bit esoteric, maybe this design approach can even help overcome the ‘1-9-90' online community participation phenomenon.¹

This might be interesting because multiplayer games seem to have figured out 10x better engagement relative to social apps.²

--

¹By rewarding user participation with access to content; locking content behind engagement-walls until a website visitor engages sufficiently to ‘level up’.

²Effectively creating the same volume of community participation content with a magnitude less of users.

This work summarizes a curiosity journey into gamification.

Specifically

  • The practical implementation of amateur game design theory to enhance website / web application user interface and user experience.

  • A functional proof-of-concept accompanies this study, with a shout out to its technology stack.

  • A quick-start design guide is also made available, for anyone looking to attempt their own website conversion while ignoring all the principles outlined.

  • Thanks are given to a few special people met throughout this exploration – which started as a startup idea and failed into a case study.

User Interface Theory


Conveniently enough, a video game is basically an interface to navigate content (story, abilities, creatures, items, world); game mechanics map nicely to a website’s methods of navigation - buttons, scrolling, and clicking.

Button as a 3D Game Asset

model object with texture

A neat benefit within games is that interactive elements can mimic objects and behavior from the real world, effectively decreasing the amount of text on screen.¹

To get even more wild, assets can be made non-stationary.²

And to complete the trifecta, ‘Call To Actions’ can be enhanced through aesthetic mechanics which deliberately focus a player’s attention.³

As an alternative to a ‘message inbox listing messages’, ‘fluttering butterflies’ can represent unread messages.

--

¹A 'door asset' might be intuitively understood to perform a similar function to a ‘hyperlink’ in moving a user to a different website section.

²Allowing buttons to move around three-dimensions creates a ‘mini game’ to interact with the correct screen pixel, providing respite from the monotony of 'scrolling down a list'.

³For example: pillar of light, animation, particles, contrasting texture, treasure chest asset.

Horizontal / Vertical Scrolling as a Camera System That Dollies

in three-dimensions

When it comes to moving the visual portions of a window to see additional information, games employ a camera system controllable by the player.¹

With access to three-dimensions, interactive objects can be placed behind non-interactive objects, encouraging players to adjust the camera.²

Even the simple act of moving a character through the game provides a satisfying sense of progression.³

As an alternative to ‘scrolling down a page’, all content can be made visibly available in a zoomed out view, with controls given to the player to manipulate camera and adjust the view to interact with specific content.

--

¹For example: moving the character through the area, panning / zooming the map to see what’s beyond.

²Why the heck introduce such an obstacle to usability? Artificially slowing down the intake of information might help balance mental fatigue during extended periods of usage.

³The absence of which is vilified by critics of infinite scroll designs.

Click / Tap Gesture as a Combination Of Gestures

tap, swipe, press, pinch, drag

Thanks to hypercasual games, gesture-combo-interactions have been made ubiquitous among mainstream demographics.

One appeal might be the addition of a ‘wrong’ way to perform the interaction.¹

I’d argue that another appeal could be the potential for gestures that resemble actions found in the real world.²

As an alternative to ‘tap on buy-button to add item to your cart’, the ‘press-on-asset-and-drag’ mechanics can sort of simulate the process of pulling a vegetable from the ground and in doing so demonstrate the same intent of marking an item for purchase.

--

¹Which isn't too far removed from the concept of 'win / loss states' - an ancient mechanic for fun.
²For example, detecting two fingers moving in a rotational pattern - as a way to turn a dial within a game - adds sophistication that sparks joy.

User Experience Theory


Deconstructing some video game titles¹ concluded that gamification could be simplified into three ingredients – progression loops, choices with consequences, and aesthetic feedback – all of which need to be present in some cohesive capacity throughout every gameplay session

--

¹Assessed games included Animal Crossing, Stardew Valley, Warcraft, Pokemon, Final Fantasy, Diablo, Ridiculous Fishing, Tamagotchi (chosen willy-nilly ie. personal familiarity from casually playing over the years).

Progression loops

Play sessions can be made enjoyable through opportunities to increment (at least one) system.¹

These systems often exist as virtuous loops.²

This means that for a system to be an effective progression loop, it needs:

  1. Some kind of ‘point value’ to keep track of progression.

  2. Some way for a player to earn those ‘points’.

  3. Something previously unavailable to the player being available after accumulating enough ‘points’.

  4. Some way for a player to spend ‘points’ to acquire that thing.

  5. After acquistion player is able to better earn ‘points’.

A player earns currency when they open an unread message. That is, they’re incentivized to write high quality comments deserving of a response, in order to increment their currency system sufficiently to buy access into additional topics of conversation (multiplying their earning potential).

--

¹Common systems include character stats, currency, story, map, player skill.

²For example: accumulating 'currency points' is used to buy a new item that slightly increases the amount of currency earned in future play sessions.

Choices with consequences

Choices, in general, give a player pause and agency.¹

But choices become fun when they result in good (or bad) consequences; consequences can be technically represented through ‘flags’ and ‘variable values’.²

To participate in a topic of conversation, a player has to buy access using in-game currency. Because a player has finite currency, they have finite choices; the consequence of which is a gamble for more favorable message exchanges.

--

¹Slowing down the intake speed of content and somewhat personalizing the gameplay experience.

²Such as nonplayable character relationship status, player’s disposition towards an archetype, or class of equipment being made available/unavailable. In fact, having several ways to accumulate points also creates a ‘choices with consequences’ dynamic, letting a player do their own optimization as a 'mini game'.

Visual / audio / tactile feedback

A noticeable trait across published games is the inclusion of aesthetic events that get triggered in response to player input.¹

Better people should explain game feel², but its role within gamification should not be underestimated.

When a player selects a flower, the camera system adjusts as a visual cue that something important was selected.

--

¹For example, moving a character triggers a movement animation and adjustment of the camera system. Maybe it adds immersion and a hit of dopamine, but it certainly introduces an intentional pause between ‘current player state’ and ‘desired player state’, which I’d argue has a positive effect on a player’s mental fatigue – providing a moment of reprieve before the next chunk of content.

²Also known as game juice / crunch / polish; this is some serious black magic high elven stuff.

A note on points, badges, and leaderboards (PBL): I believe it’s misleading to expect any software or event to feel like 'play' solely through the injection of PBL ¹

--

¹Although important, they are more fitting as a mechanism for tracking a play session. That is, players that provide engagement can be compensated with PBL as a visual reward for their effort. But a gamification design missing progression, choices, or feedback is liable to feel hollow.

Technology Stack


JavaScript was the language of choice for this WaaVG prototype. Development utilized a low code WebGL game engine and a no-code web application builder; a cross-document messaging method was used to exchange data payloads between the two environments. The prototype was tested across various¹ desktop and mobile web browsers.

--

¹Prototype was confirmed to work on Chrome, Firefox, Android, and iOS browers.

Vanilla JavaScript

JS was chosen without significant contemplation.¹

--

¹Initially, Unity (and C#) was briefly explored. However upon exporting an example game for browser usage, the file size was >50MB which performed poorly on mobile browsers. Coincidentally, the next game engine explored was PlayCanvas (and JS) which exported a 3MB demo - thus JS was chosen going forward.

WebGL game engine

Game layer using PlayCanvas

PlayCanvas came out-of-the-box with convenient features.¹

The completed game build was published and accessible through PlayCanvas hosted URL.

Types of scripts utilized:

  • Touch gestures: used the hammer library for tap, press, and pan logic.²

  • PostMessage: At game load, there are event listeners to receive data payloads from Bubble.³

  • Spawn object: In response to an event listener, duplicate a specific game asset and enable it to show in scene.

  • Camera lerp: When certain object selected, camera briefly moves to give aesthetic effect of 'springing'.

  • Cosmetic: When certain object selected, cosmetic effects are toggled.

--

¹In addition to manageable export file size, it had a slick drag-and-drop interface, comfortable IDE, pre-programmed physics and collision logic, $15 monthly cost, and handled hosting. Although there were great tutorials around using the PC interface, the community lacked high quality public projects, so it was a slog figure out most logic around controls, camera, and character.

²Upon tap and press events, a raycast is fired from screen to the touch's center coordinate - if it detects a rigidbody with a collision volume, there are a bunch of if loops that check for the rigidbody's name and carry out its related logic. Upon pan events (when no rigidbody detected), camera is controllable to rotate and zoom.

³Event listeners used to spawn objects after user takes specific action within Bubble that affect database.

Asset spawns randomly in XZ-plane. Also spawned asset is tagged with unique ID that matches Bubble database entry (when Bubble sends command to remove asset, findByTag is used).

Such as color and opacity change.

Web application builder

App interface layer using Bubble

Out of a few no-code web app builders explored, I found Bubble most extensive for this project (without needing additional automation services).¹

An iFrame was setup to contain the PlayCanvas game build.²

Data model overview:

  • Comment: when user creates a message, or responds to message. Represented by butterflies.

  • Topic: at game load, topics spawn. Represented by carrots (and flowers, after topic-purchase).

  • User: keeps track of topic purchased, currency-points, and comments received.

--

¹Bubble had a relatively intuitive drag-and-drop interface, database management, workflow event logic system, and plugin for handling JS logic.

²When Bubble detects a postMessage event from PC, the message payload is partitioned into individual Bubble elements. Workflow system has events that look for specific text contained in the Bubble element value, which trigger various logic (eg. toggle floating group with data that matches unique ID of element's value).

Cross-document messaging method

Bubble iFrame logic:

<script>
// Assign handler to message event
if ( window.addEventListener ) {
window.addEventListener('message', handleMessage, false);
} else if ( window.attachEvent ) { // ie8
window.attachEvent('onmessage', handleMessage);
}

// message event handler (e is event object)
function handleMessage(e) {
// Reference to element for data display
document.innerHTML = e.data;

//console.log(e.data);

bubblefn1(e.data.command);
bubblefn2(e.data.id);
bubblefn3(e.data.uniqueid);
}

</script>

<iframe id="app-frame" src="https://playcanv.as/e/p/tUdDBSB0/" width="100%" height="100%">

PlayCanvas example logic:

var PostMessage = pc.createScript('postMessage');

// initialize code called once per entity
PostMessage.prototype.initialize = function() {
//tell Bubble that playcanvas is loaded
window.parent.postMessage({
command: "pc-loaded",
id: 0
},"https://waavg-demo.vlaaaaad.com");

//listen for command from Bubble
window.addEventListener("message", function (event) {
if (event.origin = "https://waavg-demo.vlaaaaad.com") {
//reset
if (event.data.command.includes('b-reset') = true){
//reset bubble active javascript value
window.parent.postMessage({
command: "pc-reset",
id: 0
},"https://waavg-demo.vlaaaaad.com");
}

}, false);
};

By the way: Teams working on drag-and-drop application builders are the real GOATs.¹

--

¹We live in a magical time. A person – possessing an aptitude for technology, lacking any semblance of a life – can bypass months of programming education and produce something that vaguely resembles software.

Functional Proof-of-Concept


The (abridged) mental gymnastics for arriving at this prototype design:

  1. Everyone’s complaining about being lonely I’ve moved cities before, it does get lonely.

  2. So many social events open to the public but every time I go it’s a crapshoot.

  3. Why can’t I know ahead of time who I’ll get along with can I know ahead of time?

  4. Dating apps filter people before meeting, just by exchanging some messages so like a dating app, but for friends.

  5. Wow so many friend apps have been tried why do they all look the same?

  6. Let’s see what other app designs are out there seems like everyone just rearranges the same design blocks.

  7. Maybe it doesn’t have to look like an app I like playing Stardew Valley, why can’t this game take place in my city?

  8. A game could actually just replace all its text with stuff specific to a local city so like an RPG game for reading and chatting about local news and events.

  9. RPG games are way complex what simple games are fun to play on a browser?

  10. There are whole categories of casual games there’s even a game where you have a mountain as a pet.

  11. Taking care of things could be a relaxing way to browse an app, like gardening what if news categories were plants, with fruit growing out of branches representing news articles?

  12. This isn’t even remotely fun what does a fun game look like?

  13. Viridi is pretty fun, with taking care of succulents feels like there needs to be more stuff to do, and the game reviews agree.

  14. Maybe players could also earn points by writing messages, and spend those points to participate in other conversations planting a seed could represent opting into a topic, butterflies could represent a user’s message inbox.

  15. This needs one simple gesture for gameplay maybe tap+hold+drag+release on the various objects to read / buy / open / reply.

  16. Well this game isn’t particularly good, but it does show some thoughts about mixing web and game design let’s just write a paper to stifle the emotions around spending all this time.

Quick Start Design Guide


After an immersion into hobbyist game development and a local indie game dev scene, some resources have been found practical for attempting a new WaaVG project.

This guide covers:

  • Learn tools

  • Find inspiration

  • Get game assets

  • Brainstorm gameplay

  • Find alpha testers

  • Expect design challenges

Learn tools

Find inspiration

Get game assets

Brainstorm gameplay

  • Create flowchart diagram with each ‘block’ containing 1) drawn screen showing game objects with their relative positions, 2) text explaining player’s input, and 3) text explaining game’s response (example from my prototype)

Find alpha testers

  • Participate in local city game jam event¹ (events can be consistently found through organizations like IGDA, and joining local indie community Discord channels).

--

¹Even if your game doesn’t fit the event theme (so you’re not submitting an entry), these events contain dozens of designers / developers eagerly playtesting any games to get adhoc inspiration for their own projects; game jams are just casual knowledge sharing events.

Expect design challenges

I don't have good answers for these yet, so mostly mentioning for posterity

  • Selecting a game type: There are many game types, lots of gesture mechanics, and insufficient WaaVG examples to easily fit a ‘gameplay mechanic’ to a ‘website use case’.

  • Deciding which use cases to abstract as gameplay: Is a list of information better suited as a ‘popup with a vertically scrolling repeating group’ or a ‘tree asset with branches containing clickable fruit representing individual list items’.

  • 3C (camera, control, character) programming: As a hobbyist gamer, I never paid attention to how games conveyed ‘game feel’, which manifested in my gameplay feeling clunky, unintuitive, and uninteresting.¹

--

¹I initially suspected this to be a design challenge, but now leaning towards it being a programming challenge – having observed experienced gameplay programmers intuitively building mechanics to be enjoyable (either possessing some kind of sixth sense, or having been conditioned to best-practices after years of building common mechanics).



Acknowledgements

Artists and programmers around the gaming industry are an eclectic bunch - most particular, however, is their ability to make people feel welcomed. Thank you for showing me what it takes to be creative.


To Wyatt, for powerleveling our brainstorming.
To Jamey, for building a wonderful third space.
To Taro, for personifying the indie lifestyle.
To Marwan, for agreeing that it could be better.
To Cosima, for liking the butterflies.