Interactive Picture

INTERACTIVE PICTURE

When I was conceptualising the interactive picture project, I was very much set on interpreting the mini brief in a novel way. I decided to collaborate on the project with Sophia, and after some discussion we came up with the idea of an art gallery style experience, where players would be able to approach and interact with the displayed pictures. Players would move around the gallery in a first-person perspective.

This would allow us to showcase a range of interactions and meant that we could create shorter experiences that would be standalone. Having several smaller elements meant that we would also be able to scale the project based on the time allocated.

I knew early on that I wanted one of the pieces to have players control a cloud that could rain and grow plants. This would provide the template for the other interactive elements going forward.

BLOCKOUT

Before I began blocking out the scene in Unity, I decided to look at galleries and spaces that are used to display art. Looking at examples,

I decided to create a single spacious room with an interactive picture framed on each wall that players would then be able to focus on, much like how observers would be able to do in an actual gallery.

When I created the basic layout, it felt incredibly box-like and unnatural. I wanted to give the space a more open feel so added a skylight in the ceiling to allow a directional light to cast shadow. This made the area feel significantly more open and helped with the lighting of the scene.

I then placed a frame on each wall that would contain the interactive pictures. My original aim was that these frames would be different sizes, but I ended up keeping them uniform due to time constraints.

In front of each picture, I also added a plinth type object that it would be something that the player would approach due to their familiarity with how information is displayed in galleries and museums. These would have scripts attached to allow the player to focus on the relevant picture and activate the input for that picture.

CREATING THE INTERACTIVE PICTURES

The interactive pictures themselves provided some interesting challenges. When conceptualising how to integrate them with their frames, I considered having the elements physically exist within the space of the frame itself. This would however present problems with clipping and hiding the workings of each interaction.

The solution to resolve this issue was to use a render texture and set up the individual picture mechanics elsewhere within the scene. Doing this allowed me to have gameplay elements hidden out of camera, while outputting a flat image that could then be displayed within the frame.

The cloud scene took several days to complete. I started out creating the cloud and scripting it to move left and right dependent on button presses.  Though it has the appearance of a 2D image, I ended up having to use 3D colliders to for the rain. Each raindrop is a sphere collider that drops from emitters behind the cloud. These then fall onto box colliders behind each plant and once collision is detected the flowering animation for the plant is triggered.

For the jellyfish picture, Sophia and I decided to create some procedural art that would be different every time the player would un-focus the picture. To accomplish this, animated jellyfish were created off screen that would float up at random speeds. Leaving the picture pauses the jellyfish creating a new image each time.

The dinosaur picture was to demonstrate a game within a game. Based on the game in chrome browser that appears when you have no connection to the internet, we tried to replicate the basic gameplay loop that would be playable when a player focuses on the picture.

The final picture was a placeholder that was adapted to be interactable due to time constraints. We had wanted to do a scene with cave paintings, however we needed to move on to other projects and it was much too complex to achieve. I instead decided to have it rotate on a button press, as I had already set up the render texture.

TESTING

Initial tests raised a lot of points that needed improving on. Key among them was that players did not know how to interact with pictures. This was solved by providing a UI instruction that appears when players move next to a plinth. Instructions on the controls for individual pictures were placed on the plinths like placards found in museums. This provided an in-world and in-theme solution to explaining controls.

One thing that was also brought up was lack of audio. I went in and added audio to key things like the rain from the clouds. I also added an ambient track to give the space room tone like a London street which added a layer of life to the prototype.

THOUGHTS & CONCLUSIONS

This project turned out to a reasonable extent how we invisaged it. The interactive picture elements worked well, and we could definitely expand on the concept with some more involved interactions.

Leave a comment

Your email address will not be published. Required fields are marked *