BLUE HACKS: Game development document

Page 1

1 BLUE HACKS GAME DEVELOPMENT DOCUMENT RWRY9 blue_hacks

ACNOWLEDGEMENTS

In the creation of Blue Hacks, I would like to thank Ludovica Fales and Ewan Cass-Kavangh for their dedication and support of the project, as well as my ANTH0083 group.

I would also like to thank YouTube for its plentiful Unity tutorials. A final thanks extends to the existing blue plaque scheme. I have always been fascinated by the blue circles peppered across London’s walls, and it has been a joy exploring how they can be brought to life.

1 BLUE HACKS
2 BLUE HACKS Executive overview 00 Project Design 01 - 04 Concept of blue hacks 01 Genre, scope & audience 03 Expanding the existing system 05 - 08 A portrait of the existing scheme 05 Blue Hacks aims and objectives 07 Game Play 09 - 12 Experience flow 09 The Blue Hacks cycle 11 Graphics 13 - 16 Logo development 13 ‘Hacker’ theme 15 Technicals 17 - 20 User controls 17 Mechanics 19 Assets 21 - 22 Prototype 28 - 35 App interface 25 Physical plaque interaction 29 Virtual plaque interaction 33 Closing summary 37 - 38 Bibliography 39 CONTENTS

EXECUTIVE SUMMARY

Blue Hacks is an AR project that activates the blue plaques in London as portals to the city’s past.

However, it leverages the existing blue plaque system by harnessing digital technologies to allow local London communities to design, create and erect virtual plaques.

4
00

PROJECT DESIGN

CONCEPT OF BLUE HACKS

Blue Hacks is made up of three core components:

The interaction with the plaques

The app interface to host the inter action and pro vide a tour of the plaques

The community to generate new plaques

Blue Hacks will use Augmented Reality (AR) to bring the blue plaques to life. After scanning a plaque, a ghostly figure of the notable person on the plaque will appear on a user’s phone screen for 15-30 seconds. The figure will depict how the person and the building looked at the time they were there. This is to allow the user to feel connected to the person at that time and place.

There are two types of plaques that will involve slightly different interactions:

THE PHYSICAL PLAQUES

When a person is in physical proximity to a blue plaque, they can scan it to trigger the AR interaction involving the ghostly animation.

THE VIRTUAL PLAQUES

As some of the plaques will be wholly virtual, the way to trigger the interaction will be quite different. Instead, when a person is within range of a particu lar location, they will be able to ‘place’ the virtual plaque on any surface and trigger the ghostly animation.

6 BLUE HACKS
0201

GENRE, SCOPE & AUDIENCE

GENRE, SCOPE & AUDIENCE

GENRE

Blue Hacks can be considered as an AR project that facili tates non-linear explorations of the city. The AR technol ogy itself is akin to the notable Pokemon Go app, however, it will not have the same game functionality.

Instead, Blue Hacks will allow for the expansion of knowl edge. Whilst the tour function is a strong component of the project app, the ‘exploration mode’ of the Blue Hacks projects aims to inspire a sense of wanderlust within the user.

SCOPE

Besides the project’s user testing which showed a fierce appetite to experience more of London’s history, we are witnessing an active participation of the public in how history is portrayed in the urban environment.

Consider how controversial monuments are vandalised dur ing protests and graffiti art. The streets of London and not neutral; they are politically charged and embedded in the social fabric of power. This relates to the Blue Hacks project, because whilst it is not a protest against the existing blue plaques schemes, it does intend to mobilise individuals to meaningfully partake in this dialogue.

AUDIENCE

Blue Hacks is designed for a wide range of age groups (16-60 years). As long as individuals have a smart phone that can conduct AR technologies and are confident using map technologies, individuals are able to partake in the project. Perhaps then, it is more useful to clarify who the Blue Hacks project is not for.

Blue Hacks is not just for tourists,

despite its overt function to explore the city. In fact, Blue Hacks strives for its predominant audience to be London community groups. This audience plays an essen tial role in the continuation of the project because they will design and develop more virtual plaques. Thus, we see how the audience is a vital tool to carry these present discussions of the past into the future.

Wordle from user testing, showing 60 people’s responses when asked ‘what they woould like to experience more of in the city?’. The dominant an swer was history.

8 BLUE HACKS PROJECT DESIGN
PROJECT DESIGN
0403

EXPANDING THE EXISTING SCHEME

A PORTRAIT OF THE EXISTING SCHEME

OVERVIEW OF EXISTING SCHEME

The blue plaques scheme is a celebration between people and place (English Heritage, n.d.). The idea behind the scheme is to identify notable figures from the past on the buildings where they lived and worked with the large blue plaques. The scheme was founded in 1866 and has inspired many similar projects nationwide. However, for the pur poses of this project, Blue Hacks will focus on London alone – which itself has over 900 plaques!

LIMIATIONS OF EXISTING SCHEME

The blue plaques are an iconic part of London’s archi tecture, however, there have been concerns raised about scheme in recent years (English Heritage, n.d.; Camp bell, 2018; The Guardian, 2018; Thomas et al., 2021). Some include:

however, thelack of engagement sheer volume

In order to acquire a plaque, a person must have been dead 20 years before they can be nominated by the public for a plaque. However, it is the coordinator of the pro ject, English Heritage, who selects the persons to get a plaque. English Heritage has a rich website offering information about the plaques and the scheme and a sup porting app.

issues of diversity centralised selection process

Only 2% of the plaques represent black people and 14% represent women

Screenshots of the existing blue plaques app: showing its homepage, map, search function and plaque information pages.

10 BLUE HACKS
0605

EXPANDING THE EXISTING SCHEME BLUE HACKS AIMS & OBJECTIVES

For these reasons, Blue Hacks intends to leverage the existing blue plaques scheme, still echoing its ethos as it attempts to overcome its current shortcomings. As depicted in the table, it is made clear how Blue Hacks has addressed the limitations of the blue plaques scheme in its aims and objectives.

LIMITATIONS OF EXISTING SCHEME

BLUE HACKS MOTIVATIONS

AIMS

Make plaques more interactiveE

Filter the plaques to make them easier to navigate

OBJECTIVES

Use AR technology to bring plaques to life

Expand the number of people who can nominate and select plaques

Develop an app to host the AR interaction and provide more map functionality Forge community partner ships and host workshops to design virtual plaques that will be added to the project E

Table to show how Blue Hacks is directly addressing shortcomings of the exisitng scheme, in a way that takes a step towards equal access to culture and provides an exciting AR experience.

12 BLUE HACKS
%
0807

a chosen day,

When user comes across a physical

can scan the plaque

an animation on their phone.

will last between 15-30 seconds.

the range of this lcoation, a user

‘place’ the virtual plaque on the wall and watch it come to life with the animation.

the tour is complete, users

placing the plaque, the user can learn about the com munity that nominated and designed the virtual plaque.

their

on another

they can partake

an other

design

point being

Hacks

14 BLUE HACKS XX XX XX XX 2 4 5 GAME PLAY EXPERIENCE FLOW Depicted below is a typical user flow of the Blue Hacks project, starting from the moment they hear about the project to their engagements thereafter... 1 2 3 4 5 User learns about Blue Hacks via social media or posters on TFL services. User downloads free Blue Hacks app. On
they select a theme and enrol on a tour in the city. As user continues on their tour, they will be notified when they are in the prox imity of a virutal plaque. Within
can
7 After
When
can enrol
tour on
day. Also,
in a community workshop to
a virtual plaque. The
that
Blue
adventure has just begun!
plaque, they
to trigger
This
10 6 09

THE BLUE HACKS CYCLE

Whilst the experience flow previously depicted shows a typical experience of a user, there are alternative ways of getting involved in the Blue Hacks project, as shown by the Blue Hacks cycle. Whilst someone could hear about it through social media and advertising, they equally could hear about the project after partaking in a commu nity workshop or seeing someone scanning the plaque on the street.

In any case, once a user has learnt of the Blue Hacks project and gotten involved, the experience flow is very similar. A user can repeatedly enrol on tours to explore the plaques and optionally partake in virtual plaque development groups. Within this experience, a user will have different mindsets during these different phases.

→ CURIOUS as users will be searching for plaques and learning about figure.

→ INCREASINGLY CONSCIOUS as users read about why a virtual plaque was erected by a community group, subsequently raising their awareness about what stories are included in the physical scheme. . . and what are not.

→ CREATIVE as users need to think about people that may deserve a plaque and how they could visually represent this as a virtual plaque.

THE APP INTERFACE (MAIN PLATFORM OF INTERACTION)

THE PLAQUES

(PHYSICAL & VIRTUAL)

The Blue Hacks cycle to de pict the cyclical relation ship between the plaques, the app and the communityshowing how they each feed one another.

THE COMMUNITY (GENERATION OF NEW PLAQUES)

16 BLUE HACKSGAME PLAY
1211

LOGO DEVELOPMENT

When designing the aesthetics of Blue Hacks, the aim was to be similar to the existing blue plaque scheme but different enough that it was markedly an independ ent project. To begin to do so, the name ‘Blue Hacks’ was derived from its colour association to the plaques. However, ‘plaques’ was replaced with the rhyme ‘hacks’ to playfully allude to how technology will be engaging with the blue plaques. This theme is continued into the development of the project logo. The red # has been re placed with a pixelated blue one.

This was not only to set the feel of the project as tech nology-based, but because the pixels look similar to a QR code. This is important as we have recognised a potential obstacle within the project to be when scanning physical plaques. Maybe they will be too far away for the AR cam era to detect the plaque, maybe for ethical reasons that residents do not want their house to be scanned. In either case, Blue Hacks can overcome these issues by placing a QR code nearby to surrogate the scanning interaction.

blue hacks

Image to depict how a QR code has been alluded to in the aesthetics of the project through the logo. Not only does the exisitng logo already look like a QR code (ish!), in the event where a plaque could not be scanned for logistical or ethical reasons, a QR code could surrogate this trigger interaction.

18 BLUE HACKSGRAPHICS
Previous Blue Hack logos.
1413

‘HACKER’ THEME

Beyond being a play on words by replacing ‘plaques’ with ‘hacks’, there is a sincere undertone. Blue Hacks engages with dialogues surrounding collective memory, exploring ideas of who writes the history books? What narratives are told and what narratives are not? As we know, typically the winners write the history books, and the current blue plaque scheme is not dissimilar. English Heritage ultimately curates and selects who gets a plaque. On the contrary, Blue Hacks wants to allow more people to co-author London’s collective memory. Therefore, ‘hacks’ was specifically chosen because it summons the allusion of unauthorised access to writing the history books.

Colour scheme for Blue Hacks, hex number and suggested gradient listed

This ‘unauthorised’ access will be reinforced in the aes thetics of the Blue Hacks app, which will be the main interface for the project. Using the stereotypical hack er colours and typeface of a coding terminal (dark back ground, electric and glaring blues and greens). To balance the bright colours out, the feel of the app will be simple and slick.

Icons to represent Blue Hacks themes for the tours.

Suggested vectors for app navigation, menu icons and buttons.

20 BLUE HACKSGRAPHICS
Typeface for Blue Hacks project - Andale Mono.
1615

USER CONTROLS

Whilst there are three core components, the app will be the predominant interface for the interaction and host the user controls.

Within the app, the user will be able to:

→ USE MAPS to zoom in and out of places to explore plaques in the nearby area. Users can click on the plaques icon to learn more.

→ ENROL ON A TOUR by selecting a category button.

→ SCAN AND PLACE PLAQUES by enabling their smartphone camera.

→ OFFLINE LEARNING for when users are not near a plaque. They can access more information about their viewed historical figures through their ‘personal collection’ page.

→ CONFIGURE SETTINGS to enable sound queues. This can be for notifications just for virtual plaques (when they are in the location), or whenever they are within close range to a plaque.

22 BLUE HACKSTECHNICALS
1817

MECHANICS

AUGMENTED REALITY

The AR technology will be the driving mecha nism for this project and discussed in more depth in the prototype section. Blue Hacks has chosen AR technology as the storytelling device for this project be cause it offers a com pelling degree of im mersion to engage the viewer (through the ghostly animations) whilst simultaneously allowing the user to experience a sense of place. This is important as blue plaques are a celebration be tween people and place.

COMMUNITY CO-CREATION

Beyond the digital experience of Blue Hacks, the community is an es sential driving mech anism. The communi ty collaborations with Blue Hacks will allow for the addition of new virtual plaques, thus ensuring the longev ity of the project. A demonstration of how these community engage ments could be enact ed has been depicted in the image on the right.

24 TECHNICALS
2019

ASSETS

All the assets required in the production of the Blue Hacks project have been listed. They have been categorised by which component of the project they fall under: the plaques, the app or the community. app and uses the three circles on the homepage to direct the user controls.

PHYSICAL PLAQUES

• Image trigger software

• Image archive of plaques,

Text data and GPS location of plaques

Associated animation for the plaque

VIRTUAL PLAQUES

• Plane detection software

Image archive of virtual plaques

Virtual plaque assets

GPS ranges for each of the plaques

Associated animation

App logo

Homepage with buttons

Information page for plaque

Community in more information page

Map technologies with GPS location

Permissons to use AR camera

User to create an account

Sound queues settings

Upload app to the app store

Digital marketing strategies

• Partnership and affiliations with community groups

• Workshop facilitators

Independnt program packages to be sent to schools and community groups as part of outreach and widening particpation schemes

Apparatus to upload the design of a virtual plaque onto the map

Advertising to attract more users

26 BLUE HACKS Top-down, Bottom-up diagram.
2221

PROTOTYPE

Certain components of Blue Hacks have been selected to be prototyped: notably, the app interface (as it is the main, most tangible platform for the project) and the AR interactions (and how this will vary between physical and virtual plaques).

Their decision-making processes during the experiemnts will be discussed as well as suggested approaches for future production.

28 BLUE HACKS
--> link to prototype video password: anth0117 2423

APP INTERFACE

The Blue Hacks app has been modelled off the existing blue plaques app and uses the three circles on the homepage to di rect the user controls.

Mockup of map, showing virtual and physical plaques as well as user location and history.

A major choice that was made in the develop ment of the app proto type was the presentation of the plaques. Initially, I queried how to differenti ate the physical from the virtual plaques, if at all. However, seeing that the ethos of the project is to democratise the authorship and curation of collective memory, I chose to present both plaques equally on the map but distinguish them by colour (as explained by the key).

The various icons to present the plaques. Blue is for a physcial plaque, black for a virtual plaque. The yellow circle will be added to the icon after a user has visited that plaque.Blue Hacks homepage and logo.

30 BLUE HACKSPROTOTYPE
2625

APP INTERFACE

This app prototype was made using Adobe XD, which was very useful to map the different pages and how the transtitions would work. Here, you see a flow chart of the 3 main paths the user can take stemming from the main menu page. This includes general map access, going on a tour or accessing their per sonal collection.

32 BLUE HACKSPROTOTYPE
TOUR CONTINUES Blue Hacks ‘tour’ path. Blue Hacks ‘map’. Blue Hacks ‘personal collection’ path.
2827

PHYSICAL PLAQUE INTERACTION

To prototype the AR interaction with the physical plaques, the first step was to check if the plaques worked as a trigger image. It worked, and I achieved so by experimenting with the Unity AR Core Foundations and Vuforia AR plugin.

Vuforia was particularly useful because it was able to eval uate the blue plaques for their AR features (i.e. what makes the image recognisable). It concluded that the blue plaques were 5* as a trigger image, meaning that they are strong images that can be easily detected by an AR camera and are distinguishable from other plaques.

However, further prototyping needs to be done to test at what distance a plaque can be scanned and still trigger an interaction. There could be scope to fortify this image trigger through GPS location to confirm which plaque is being scanned or using text recognition of the plaque to read the name of the plaque being scanned.

A picture of the physical Charles Darwin plaque viewed in Vuforia ‘image feature’ viewer. The yel low crosses show identificable marks in the plaque. In other words, what the AR camera sees.

The large volume of the yel low crosses signfies that the blue plaques are very strong AR trigger images. Also, very dis tinguishable for other plaques which themselves have a wealth of unique features.

34 BLUE HACKSPROTOTYPE
3029

PHYSICAL PLAQUE INTERACTION

At first when prototyping scanning a plaque, I simply had a video pop up to model the interaction. Whilst this was successful as a trigger image, it failed as an engaging AR ex perience. It was just a video clip being played on a wall. Therefore, I needed think about what a person would want to see to allow them to experience the link between the person and the place.

I chose to show what the person and the building looked like at the time they were there. So often, we hear the names of these people but seldom see a face. Therefore, a ghostly animation of how the person looked at the time can almost humanise the historical figure, and allow a user to feel an emotional connection to them and the place.

The prototype to demonstrate this ghostly animation was done as a stop-frame animation (as shown in the stills above), which is a time-consuming process. In produc tion, digital animation software would be used to animate the character. Likewise, there interaction could be extended to incoproate other responses to the Blue Plaques, such as the BBC’s World Service podcast series (BBC, n.d.).

Painting of Darwin working in Euston, which was used as inspiration for the protoype animation.

36 BLUE HACKSPROTOTYPE
3231
Contact sheet of Charles Darwin animation for physcical plaque AR interaction, made using Proreate.

VIRTUAL PLAQUE INTERACTION

PLANE DETECTION to find flat sur faces in the nearby environ ment. Once detected, the area is shaded in blue. An object is now able to be placed on this area using vector mapping.

Phone mock up to show AR mechanisms dur ing a virtual plaque interaction.

OBJECT PLACEMENT

to place a virtual plaques on to the wall.

This was demonstrated using a blue circle, but in the project this will be the black virtual plaque.

The virtual plaque interaction will be quite different to the physical plaque, as there is nothing to scan. Instead, a plaque to place. To prototype this function, I used Unity AR core foundations again to conduct plane detection (to find a flat surface) and object placement (to place the virtual plaque).

Initially, I considered having a virtual plaque on a wall that a person would find. However, it could be very challenging to find a 50cm2 plaque on a wall on a busy street in London! Instead, the user will place the virtual plaque within a certain area to overcome this issue. It also heightens the agency of the user as, it can be fun to place plaques where they wish.

38 BLUE HACKSPROTOTYPE
3433

VIRTUAL PLAQUE INTERACTION

In the virtual plaque prototype, you can see how the placed virtual plaque too will have a ghostly anima tion that will showcase the community collaboration. The scientist Mary Leakey has been used in this example, an acclaimed scientist for her contribution to fossil discoveries. To demonstrate how a community workshop could be presented in the plaque, drawings from a local school workshop responding to the plaque could appear in the AR interaction. More information about the community group that made the plaque could be found in the plaque’s information page.

Phone mock up to show virtual plaque interaction and communtiy responses to the plaque.

Phone mock up to show more information page about the community group that nomi nated the plaque and responded to it.

40 BLUE HACKSPROTOTYPE
3635

CLOSING SUMMARY

The development and prototyping of the Blue Hack project has been a joy. Having got this far, I hope this is not the end for Blue Hacks...

Aspirationally, the next steps involve fine tuning the protoype and project alike, before taking it to production - making it another step closer to bringing the city’s plaques to life.

42 BLUE HACKS
3837

BIBLIOGRAPHY

BBC, n.d. BBC World Service | Learning English | The Blue Plaques [WWW]. URL https://www.bbc.co.uk/worldservice/learningenglish/radio/specials/1758_ blue_plaque/ (accessed 4.6.22).

Campbell, S., 2018. The missing blue plaques for London’s women – and what to do about it. The Telegraph.

English Heritage, n.d. Blue Plaques | English Heritage [WWW Document]. URL https://www.english-heritage.org.uk/visit/blue-plaques/ (accessed 4.5.22).

English Heritage, n.d. Pioneering Women [WWW Document]. English Heritage. URL https://www.english-heritage.org.uk/visit/blue-plaques/blue-plaque-stories/ women-pioneers/ (accessed 4.5.22).

Peters, M.A., Besley, T., 2019. Digital archives in the cloud: Collective memory, institutional histories and the politics of information. Educational Philosophy and Theory 51, 1020–1029. https://doi.org/10.1080/00131857.2018. 1526669

Pokémon GO, n.d. Pokémon GO [WWW Document]. URL https://pokemongolive.com/ en/ (accessed 10.23.20).

Simko, C., 2020. Collective Memory. Oxford Bibliographies.

The Guardian, 2018. Feeling blue over lack of plaques for women. The Guard ian.

Thomas, T., Mohdin, A., Duncan, P., 2021. Only 2% of blue plaques in London commemorate black people. The Guardian.

of users journey with the scanning of Charles Darwin plaque in Map showing distribution of blue plaques across London (ReedDesign website, London Blue

44
4039
RWRY9 RWRY9

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.