Sandt 2022

This project has taught me different ways to add multimedia files to a webpage, and how to use a video as a background image. I've also learnt how to create an external button to play an audio file with JavaScript, though I'm still working on figuring out how to make a toggle / pause button for looping audio. I've also had the opportunity to become more familiar with jquery, which quite a lot of tutorials out there have mentioned, though it still feels like a big can of worms.

For this project, I have been working in Visual Studio Code and CodePen instead of Atom, to allow for real-time collaboration, because Atom's servers are down and so the necessary extensions for this could not be downloaded.

I decided to try working in Visual Studio Code, in preparation for upcoming group work where collaboration extensions are needed, because Atom's servers were down.

Recommended extensions

Some extensions I've discovered, and which might be helpful for others:

Live Server will automatically refresh the previewed webpage, once either the html, css or js files are saved.

Live Share allows you and a collaborator to work simultaneously on the same code folder, editing the same document in real time like in Google Docs. Though there's some aspects that could be improved, but it'll do for now.

Icons will add a icon next to the files in the vscode explorer panel, according to the filetype. This makes it easier to differentiate all the files in the list, as the project grows larger and more complex.

Pigments will preview the colors used inside the editor, and adding a color picker next to it, which makes it easier to choose the desired color combinations.

CSS peek creates a pop-up of the css class in the html editor, if you hold ctrl and hover over the class.

Title

We decided on the name "Dès Vu" for the game, as borrowed from French. It's related to dejavu, but means "The Awareness That This Will Become A Memory" according to the Dictionary of Obscure Sorrows.

As group 4, we've had to work with the assigned theme of "time travel," thus we thought this title was fitting. In John Koenig's words:

"One day you’ll remember this moment, and it’ll mean something very different. (…) So you try to sense it ahead of time, looking for clues, as if you're walking through the memory while it's still happening, feeling for all the world like a time traveler.

The thought behind this title is that throughout the game, you accumulate an amount of selfies. Once the game has ended, the feed you and your friends have collectively created will serve as a time capsule of that place and event in that moment in time, which you can look back upon. As Koenig says, you become "two people, still seperated by an ocean of time. Part of you bursting to talk about what you saw, part of you longing to tell you what it all means."

Narrative

As group 4, we were assigned the theme time travel. This is something we've tried to incorporate that by basing our story on the 2011 sci-fi action film In Time, were the currency is literally time and thus if you run out of money you actually die, which enables some people to live forever if only they're rich enough. I have attached the trailer below, if you're interesting in having a closer look at this sci-fi story's gimmick.

We borrowed this gimmick in our narrative, and added our own plot to give the players a motivation. Our premise is that the player are time thieves, who wander the halls earning or borrowing time from the different stalls around you, while trying to sabotage other players by stealing their time.

I'm a little bit concerned about whether or not the player will experience a cognitive dissonance between the mechanics and narrative, i.e. between what they do and the motivation they're given, but I hope they have fun regardless.

Visual identity

As for our visual identity, we've decided to go for a warm hand-made accent in line with Koenig: "Some details are charming and dated," which underlies the mundane point of the game and shift the focus a bit away from the assassination mechanic a bit.

Affiliates

Group 4: @paweetida @evahoybakk @designavva

Affiliates

Game mechanics

We've tried to keep the game mechanics fairly simple throughout the project. But the main idea from the beginning has been to use the smartphone's camera function, either to complete photo challenges or to "hunt" each other in an elaborate game of tag.

Our pervasive game primarily has two layers: First, the players walk around Mathallen searching for the image clues, and take a picture of the clue once discovered.

It's been challenging to playtest since we're unable to make a real working app to make the gameplay flow more easily, and had to rely on messaging apps like Messenger.

This is in attempt to shift the focus a little bit away from the PVP aspect, and onto the more mundane aspect of collecting images, which the majority of life in the film is about: Working. This shift will also hopefully help with the general issue with assassination games like Killer, which is that the best strategy to win the game is to simply hide. The collecting task also encourages players to not hide, which will increase player interactions and duels.

We've also decided that the gameplay should focus around taking selfies, in order to make sniping more challenging. Furthermore we're a bit on the fence about zooming, though we think that a little zooming is allowed.

When it comes to PVP faceoffs, any selfie with the target counts, as long as the target is recognizable in the image.

The score is settled once the game ends, when all the players gather to judge which images count as a point. Each image task should count as 1 point, while each snipe should count as -1 point to the target.

Because we wanted to host the game in a crowded space, we wanted to use something less tangible than a toy weapon which is common in campus' assassin's guilds, and we settled on the smartphone camera. We wanted to do this, in order to not disturb strangers who are not aware of the game taking place, which could in the worst case lead to the players accidentally damaging property or being thrown out of the building. The idea of the camera as a weapon was inspired by the video game Fatal Frame.

Spatial design

In terms of spatial design, we always knew we wanted to host the game in a crowded environment. A crowd will allow the players to blend in with the environments easier, and move around incognito. This mechanic is inspired by the Ubisoft video game Assassin's Creed (AC2), which in turn may be inspired by real psychology or illusions where pickpockets and magician's tricks use sleight-of-hand to steal an item without the target noticing through the art of misdirection, or what spies do when tailing or being tailed by somebody by using disguises.

We also considered staging our predefined game in Karl Johan, because this street is infamously crowded most of the time, but had to abandon the idea because the site was a little further than a 10 min walk away from the university building. We settled for the next best spot, Mathallen, which is probably the most crowded spot within a 10 min radius of AHO. Ideally, we would host the game at IKEA however, where players can hide in the different furniture exhibitions and blend in with the crowd. What these different sites have in common is their floor plan's maze like layout or structure, with plenty of distractions at every corner whether that'd be signs or mundane activities, with small pockets of space to hide in, whether that'd be shops or exhibitions.

From the beginning we also decided that the playground should not be too big, so that the players simply hide throughout the entire game, but not so small that the players cannot slip away without being noticed all the time.

Sound design

Because this is an assassination-style game, we've wanted to keep the sounds coming from the app to a minimum, to allow the player to blend into their surroundings more naturally and allow them to avoid detection. Instead the focus of the sounds comes from the actual real life environments, such as the bustling of the crowd, clinging and clanging of cooking utensils, and strangers dining and wandering.

If we could make an actual app, we considered adding an alarm sound warning the player that he is leaving the defined playground.

Adaptability

For this prototype, the image targets are pre-defined by us (the game designers), but an idea has also been to allow the players to collectively decide the size of the playground and image targets themselves. For instance, before the game begins, the players could each be tasked to photograph around 3-5 images, which will be sent to the other players. They would also be able to define the size of the playground by discussing amongst themselves, in the same manner that kids design their own child-initiated "games" in the playground or when they play around in general.

Individual player's journey

We begin the game by explaining the rules to the players, before letting them loose for up to 15 minutes, collecting and assassinating each other.

Multiplayer interactions

Linear progression

Affiliates

Internal Playtest

Challenging to aim at the item while taking a selfie

Fun to look at the selfies afterwards

Competitive focus

Difficult to grab a photo of seating spots when occupied by strangers. Fun, easy and respectful to photograph signs and decorations instead. Maybe also photograph signs outside, so that the players can get some fresh air?

Useful to look at other player's images during the game, since you can guess where they're located, and use this information to sneak up on them. Or bait players out to snipe them instead, like Eva did.

Blurry images are fine as long as the target is identifiable.

Good that the players didn't run out of missions during the game.

Sounds: narrative adapted to the situation ("3D sound"). The app will make minimal amount of sound, because the game has a hide and seek aspect to it.

Should be at least 4 players at a time.

Some ideas

Make a map showing where the different missions are located?

Make missions easily accessible, so that the player doesn't have to scroll to the top of or otherwise scour the chat everytime they're about to decide on the next mission. Perhaps Snapchat's swipe function?

Maybe create some criterias for assassinations: Face, Selfie is extra point, no zooming, blurry is ok as long as the subject is identifiable.

External playtest

No puzzles please. Be transparent about what we're looking for. Let's test this by actually showing an image of what the player is looking for.

Ideas for further development

Let's test with a GM next time (Game Master)

Let's test without taking a selfie, where the player can instead just make a gesture with their hand or finger.

Different levels: Let the player toggle the selfie rule on or off

Create a longer list of items for the player to find

Beginner or not?

Experience points

The players can decide the items themselves, by starting the game by photographing these items.

Group 9's game

Surprisingly, both our groups were among the few in class who had actually chosen the assassination genre, whereas the majority in class had chosen to go with an adventure-like game. So our rivals took us to Birkelunden where we got to experience a fun round of games. They used Snapchat instead of Facebook, which we used to snipe each other, hide. All the while looking for the clue which the GM had hidden before the start of the game.

Affiliates

Idea #1: Assassination genre

First, an elaborate game of tag with campus students as the target demographic. In our incarnation of the assassination genre, players either play as a part of a faction or in a free-for-all (battle royale style) where they go around the site hunting down designated items as ordered by the GM (Game Master); Simultaneously the players hunt down their target, while trying to avoid being detected and assassinated themselves. The assassination targets circulate in a food chain pattern, as seen in the diagram below. Because of the assassination aspect, the game would inherently be a multiplayer experience requiring around 3-5 players.

Each mission will reward the player with points, depending on how challenging it was to find the item, and the player will lose points if they're photo sniped by another player. As for sounds, we were thinking of some UI sounds like when the player gains points, or when they're about to leave the playground site. The ideal location would be a crowded place with several nooks and niches to hide in, and plenty of items to discover and browse among, like Karl Johan street. As for the assigned theme of time travel, our first thought were something along the lines of steampunk.

Keywords: Compete, Collect, Daring, Multiplayer, Campus students

Idea #2: Treasure hunt genre

Second, a treasure hunt where the players walk around the city completing photo challenges where they for instance need to copy the pose of a famous statue that they're next to, perform a certain activity or action at a specific spot, or get creative with expressing an assigned theme while interacting with their environments. These photos would then be collected like polaroids in a sort of customizable digital scrapbook which they can look back upon, and in this sense become a sort of time travel by reminiscing while looking at images of the past. In short, the collection of images becomes a digital time capsule.

An other variation on this concept would be to place different stamp stations at different destinations, which would be collected in a digital passport. This was inspired by how in Japan, it's not unusual to see stands at certain tube stations, museums and landmarks, of course protected under a roof or inside a building. Travelers can then add the site specific stamp to their notebook or passport, these stamps often being cute and reflecting the destination they're placed in. This is something we thought could be fun, since it's always a bit melancholic to look at the many blank pages in our passports despite having traveled a lot. Since we have to work with an app and a digital passport, instead of an actual stamp, we could use QR codes. The fun aspect of this is collecting stamps, the same way it's fun to collect figurines from a gachapon machine or collect Pokémon cards. Friends can also tip other players on where to find cool stamps.

Keywords: Collect, Reminisce, Friendship, Freedom, Enjoying life, Singleplayer, All ages

Idea #3: Urban adventure genre

Third, a walking tour where the players "travel back in time" by exploring historical landmarks in the city. Several different tours could be created around different themes, e.g. one about Oslo's industrial revolution where the player visits the different factories situated along the Aker river, and one about Kristianabohemen where the player might follow in the footsteps of famous Oslo dwellers like Henrik Ibsen or Edvard Munch, or be a fiction tourist where the player visits the different sites where Knut Hamsun's Sult is based in or where the TV series SKAM was filmed.

Upon reaching a destination, an audio file would begin playing prompting the player to check the app, which then could show them old photographs and films from the city's archive, and maybe a text telling them about the site. Along the way, there could also be placed NPCs with whom the player can interact with and learn how people back then lived, and in this way become a "time traveler", as inspired by open-air and city museums like Folkemuseet and Arbeidermuseet.

During the pitching session, the teacher said that we could develop this idea further by making a tour or tutorial that's incredibly boring suddenly or gradually devolve into something completely different. With this we could have a lot of fun with foreshadowing, irony, puns and other comedic means. This idea reminds me a little of the Stanley Parable.

Keywords: Relaxing, Inspiring, Wisdom, Enjoying Life, Learn, Explore, Go back in time, Singleplayer

Verdict

The jury has spoken, and they expressed the most interest for our first idea: the assassination game! Other classmates suggested having a look at shrinking the map size during the game, inspired by battle royale games like Fortnite or even films like the Hunger Games when they're chased to the center of the map by wolf-like enemies. In my opinion, the most interesting idea shared during the session, was to make the player's screen freeze for a few seconds when they've been assassinated.

Affiliates

This project is a part of the brand new module "Introduction to Playful Interaction" by Nadja Lipsyc, and is the third project called "Create & Expand". Personally, I like to dub this assignment "Urban play" for simplicity reasons. Now, the original brief does not have a list of evaluation criteria (No. vurderingskriterier), but I thought it could benefit from having one. I've also included some adjustments made to the brief during the course of the project period.

Brief

What is an urban playful experience? Other words that can be used are pervasive games, urban play or games, embodied play, etc. In Norwegian I would translate it to "lek / å leke", but unfortunately the English noun "play" is almost exclusively reserved for theatre. In this text I will be using this noun as I would use the Norwegian noun "lek".

Design an urban "play" with a screen companion designed in Figma. You will be organizing and hosting an event where you invite some classmates to test the first 15 minutes of your final iteration, and create a walkthrough video based on the event. You will then show the video to your class and present your project, without the help of presentation slides.

Use what you’ve learnt from board game design and your urban explorations. Consider both the individual player’s journey and the multiplayer interactions. Your process should be iterative, building up from internal and external playtests. The final playtest should display clear instructions for the players, a visual identity using Figma, a sense of fiction and a linear progression (one thing leads to another).

Your time should be spent on design, iteration and creating a clear experience companion using Figma. A lot of your time should be spent on site, with some minor check-ins and forums happening in the classroom.

Groups

You will be working in groups of 4-5 people, and each group will be assigned a theme:

Group 1-5: TIME TRAVEL

Group 6-10: CONSPIRACY

Group 11-15: MAGIC

Output Checklist

Host and organize your urban game / event (15 min)

A screen companion designed in Figma

Video that shows a linear walkthrough of your experience with minimum editing (max. 10 min)

Tumblr documentation of your process (paper prototype, sketches, playtests, and other process photos. To get your experience more clearly structured, spend a little time sketching a flowchart.)

You can spend up to 200kr per team for materials. Keep the receipts and the school will refund you.

Evaluation criteria

Because this is a group project, attendance is going to be very important. Make sure to communicate with your group.

Sound should be integrated either to your screen companion or the urban game itself.

Use what you have learnt from board game design (mechanics, actions, game types, pacing, board sketching, delivering instructions…) and your urban explorations.

Consider both the individual player’s journey and the multiplayer interactions.

Your process should be iterative, building up from internal and external playtests.

The game can be played within a 10 min walking distance of campus.

The final playtest should display … :

clear instructions for the players

a visual identity using Figma

a sense of fiction

a linear progression (one thing leads to another)

Make sure you stage your experience within 10 minutes walking of Aho.

The game should be playable: the players should be able to interact with the environment and the content with limited guidance from the designers.

The video should be a walkthrough, meaning that the camera should follow one player from the beginning of their experience (including receiving informations) to the end. You can either follow a player during the final play, or refilm the player’s journey during the afternoon. You will not be evaluated on your filming skills and editing should be minimal (cutting waiting or walking times for instance). You can add sound separately if the video is not understandable otherwise. (…) No preparation is expected: you should spend your time polishing your design and playtesting!

The Figma companion: This brief is not about making a digital experience to be played outside. The phone is a companion (meant to enhance, clarify or diversify the experience) that should translate the visual and narrative identity of your experience.

Don't forget to name your experience and create clear onboarding instructions. Your Figma first page should give us a little taste of your game's identity.

Program

Aim for every group member to contribute to early reflections on game mechanics, spatial design, visual design, sound design and narration. 

02.03 Briefing: Teacher briefs the students on the project

03.03 Lecture: We've invited a guest lecturer who will be talking about sound design.

03.03 Pitching session: The class is divided among the three teachers at school, and each group will be presenting three ideas, which will be given feedback and discussed in a forum setting. No slides needed.

04.03 Internal Playtest: Test the game on yourselves / Make sure you have playtested internally at least once before you test it on others.

04.03 First External Playtests: Swap groups and playtest

08.03 Second External Playtests: Swap groups and playtest

09.03 General Check-in at school

09.03 Please comment the threads below with the main area/starting point of your experience ( cemetery, cuba park, etc) so we can try to avoid spatial overlaps.

10.03 Final Play & Filming: This is the last iteration of your playtests. You should take time the same day to film and edit fragments of your game.

We will go through the final plays from 10.00 in groups of 5 teams until lunch. Some games require more than 4 players and you might be asked to join in. If not, you will observe or prep for your own final play.

Please message me ASAP if something doesn't work for your team. We expect all teams in each group to be there at 10 outside of Aho (for Einar and Nadja's groups) and at 9.30 (for Hans Gerhard group), as you will either participate in the play, help filming or observe.

11.03 Screening & Comments: Screening of the short videos for the whole class. No presentation, no slides; Only verbal explanations and comments.

About the screening: your video shouldn't be longer than 10 minutes and you can talk while showing us the images. We will then ask you simple questions, so no need to prepare for it.

Upload your films here: https://ahocloud.app.box.com/f/e20690892a994a92a323c8421e596eb5

11.03 Module Feedback. Thank you all for some creative and ingenious 3 weeks. Here is a link to an anonymous feedback form. No need to write a lot or to answer all the questions: one sentence here and there will already be useful. Enjoy Sound Design and electronics work and keep in touch! 📷

https://forms.gle/4SFgijg8U9zt9pzJ8 Due in a week.

Readings and Resources

Encyclopedia of Mechanisms. You can still refer to this tabletop game design encyclopedia to find inspiration for game mechanics.

Pervasive Games. Look up other types of spatial and embodied games in this book.

Pattern-seekers drift. … or get inspiration from these prompts.

Urban play chart. This is the digital version of today’s instructions.

Collaboration & Playtesting checklist. Teamwork and playtesting require communication and a bit of anticipation. Make sure you go through the collaboration checklist with your group and use the playtest checklist to prepare for your playtest.

Recommendations

A great series about an ARG with many good design ideas https://www.youtube.com/watch?v=mQq0WWRjL9E

ECHOES: Geolocated audio tours and experiences.

An example of simple flowchart for game design. This is meant for digital games, but the linearity of interactions still applies! https://mrstromain.wordpress.com/flowcharts/