Interactive Components

The Noirscape participant collects fictional objects in the Augmented and Immersive reality parts of the experience. Beyond the fun of finding these items and seeing them appear in-situ on your living room table; they also provide important props and gameplay. The objects are associated with actions. Sometimes an object will have multiple actions, sometimes they’ll depend on other objects to work together. Here are a couple of examples of interactive fictional objects I’m currently developing.

Interactive rotary dial built using Flutter Custom Painter

A phone is discovered within the AR space and now appears in the ‘found objects’ screen. The phone has a ‘call someone’ action. A participant will need to find the right number; maybe its on a scrap of paper, hidden in a desk drawer or in the pocket of a recently murdered man. Eitherway, the participant will be able to have some fun with the interactive object.

The vintage phone founds in AR space and now listed in the user’s found objects inventory

My aim with this object is to allow the participant to operate an old fashioned rotary style dial phone. I have used Flutter’s built in painting library and decorators to build the interface for this. The interface is built up of shapes and lines which are calculated with elementary maths. For example the numbers are positioned dynamically. I references a previous project I worked on to build an art-deco style clock; as the phone dial has a similar approach. However, the numbers are not in the same order, and they are not evenly spaced around the dial face as they would be on a clock face. But, the previous project helped me get started.

example snippet of code to position the dial numbers. Among the challenged is to make the digits (text) position vertically by default.

I took a few screenshots as the painting progressed. The end result looks quite satisfactory. The next stage was work on making this interactive. I am currently able to rotate the dial at specific angles and I am also able to detect a user’s drag interaction with the screen. My next task is to combine these together so that a user can turn the dial and the dial then returns back automatically to the starting position. When a correct number (one found within the gameplay) is dialled; the user learns new narrative or clues. When they play around with random numbers; they’ll be some fun too.

stage one
stage two

stage three
stage four
stage five

Interactive Door and Keyhole

When the participant finds an old fictional wooden door in their living room they notice it has a keyhole. Clearly there will be a key to find somewhere. But, until they do find the key, they can still interact with the door by peering through the keyhole.

Interactive door found in AR

The keyhole idea came about by accident while working on the AR object scanner. As I implemented a vignette to give the AR mode a noir feel, I mistakenly set the vignette to the wrong settings and created the pin-hole type effect. Although I will improve the shape and look of the keyhole view, it does work well, I find. I have restriced the viewing angles to represent the constrains of looking through a keyhole; as clearly it wouldn’t be right if you could see a full 360 degree view! The 360 image viewer works well with animated webc files too. I also tested with a image using the new google image format (webp) which allows GIF style looping animations.

One Comment

Leave a Reply