top of page

Week 3: Concepts & Mock-Ups

Saturday 19th February 2022

WEEK 3 -

TO DO: CONCEPTS & MOCK-UPS OF ENVIRONMENT IN THE SPACE​

 

PURPOSE FOR CONCEPTS & MOCK-UPS

Today I will be focusing on creating concepts for the games environment and creating a series of mockups to demonstrate how this might appear in the space. This is to visualise how the game should appear and how we might go about getting this set up in a physical space. I have the responsibility of Art Lead, so I must eventually put together an 'Art Bible' to define the look of the game, and creating concepts beforehand will help me immensely with this.

​

WHAT WILL I BE DOING?

This week I researched into the theme of our game, focusing a lot of my research around a particular location, being Hallstatt Austria. Using what I have learned, today I will be creating quick mockups and concept sketches of the environment and the space to get an idea of how it might look inside the space. As we have an established art style, I can do this quite easily with room for improvement when it comes to focusing on exactly what materials we will use and how. For now, I will be drawing up quick sketches of a mountain environment and combine this with mock-ups of the physical space.

​

GOALS FOR THE DAY​

Create a series of environment concepts and space mockups. Evaluate what is most effective when it comes to the final deliverable.

​

QUICK PLAN FOR THE DAY​

  1. Outline requirements - what needs to be made

  2. Create a series of environment concept sketches - different styles

  3. Create mockups of the space and combine with environment concepts - how will the environment look in the space?

TASK 1

​

REQUIREMENTS: What is required?​

THE ENVIRONMENT DESIGN

The game environment will be a hand-drawn mountain environment, inspired by the town Hallstatt in Austria. This environment will then be projected onto the four walls of the space, with interactions on each screen. Each wall must consist of a different variation of the environment, consisting of different assets to keep players interested and to not make it too repetitive.

​

THE SPACE

Similar to the requirements of the environment design, the space must consist of four interactive walls with a variation of the mountain environment projected onto each one. Players will interact with each screen by walking around the space and using gesture/hand-tracking to do so.

TASK 2

​

ENVIRONMENT CONCEPTS: What might the environment look like?​

I plan to begin by creating a series of environment concepts inspired by my research into the theme and the inspiration mood-boards I documented here: Theme Research.

MOOD-BOARD INSPIRATION: Game Environment

Screenshot 2022-03-24 at 13.17.18.png

Concepts should be refined and finalised once I have tested with different materials and created the Art Bible document. For now, I can create basic concepts to have an idea of how the space might look to players.

Screenshot 2022-03-24 at 13.11.57.png

PROCESS

​

Materials used: B, 4B Pencils and Paper

Software used: Adobe Illustrator

I began by sketching different mountain concepts consisting of different sizes, formations and tree variants/species on paper using pencils in the shade B and 4B. 4B allowed me to add shading which provided depth and made it appear more three-dimensional than as if it was drawn on a flat surface. I drew these concepts in different styles, experimenting with both tone/shading and more distinct crosshatches, etchings and markings.

IMG_1993.heic
IMG_1829.jpg

SCANNING & EDITING

I then photographed the sketches using my iPhone XR nad adjusted the values of the image in Adobe Illustrator. I opened Adobe Illustrator > Effects > Sketch.

​

This provided me with a selection of editing options, to which I chose 'Cont^e Crayon'. After playing around with the values, I found one that fit perfectly, which disregared the warmth or markings in the background and made it appear as though I painted digitally, on a plain white plane. I was also able to adjust the texture of the surface - I chose sandstone to give it a more natural 'canvas' appearance.

EDITING IN ADOBE ILLUSTRATOR

Screenshot 2022-04-17 at 19.55.27.png

​

  1. Adobe Illustrator

  2. Effects

  3. Sketch

  4. Cont^e Crayon

  5. Adjust settings

  6. Texture: Sandstone

  7. Export as PNG.

​

As we intend to project our hand-drawn environment, the drawing must be clean and of a good quality, so this step was extremely necessary to get rid of any imperfections or rough edges. It has a much cleaner appearance and I'll be sure to inform Kiera how to do this when it comes to asset creation between us.

I then drew up ideas for the different scenes in the environment, for the other three walls. I also experimented with concepts for trees and basic mountain formations to see which style worked best! Personally, I love the more detailed style of drawing and I think this will work best in terms of creating an engaging and captivating virtual world for players to get lost in.

BEFORE EDITING

SCENE 1 CONCEPT

Using some of my ideas, I spent the majority of the day drawing up a concept for one of the four walls. This included little details such as trees and a house to make it more homely and welcoming. I love the outcome of this piece and definitely prefer this style to the more rough looking drawings, consisting of more distinct markings and etchings. It looks much softer and more appealing on the page. I am happy I made this scene because it will be useful for testing with projections in the next few weeks as well as today, creating mock ups for the physical space.

BEFORE & AFTER EDITING:

You can see the difference in the image before and after editing. I had to adjust the values a few times to achieve the effect I wanted, as you can see Edit 1 came out slightly warmer than Edit 2, but it was a great way to experiment with the settings and I feel comfortable knowing there is a way to do this, to clean up my drawings for the final deliverable. I'll definitely be referring back to this process during asset creation.

IMG_1992.jpg

EDIT 1

IMG_1992 2.heic

EDIT 2 - FINAL

REFLECTION

From experimenting with a range of basic drawing styles, I definitely feel as though this style is best. I love the appearance of subtle tone/shading and use of negative space on a blank page. It almost makes you imagine the rest of the environment, which I think is fascinating in itself. When it comes to experimentation and asset creation, I will definitely be working more towards this kind of style as I believe it's perfect for Getaway. It didn't require too much time, but I put a good level of effort into it, and it showcases my best skills.

mountains copy.png

TASK 3

​

SPACE MOCK-UPS: Implementing the Environment into the Space​

Now I have a brief idea of how the environment might look, I plan to create a series of space mock-ups by implementing my edited concepts into the space. This will give us an idea of how the space might appear to players and further visualise our idea so we are prepared for development.

SPACE MOCK-UP 1

​

To begin, I have drawn up the first screen in the space, consisting of a webcam and red dots to represent the collectible musical items. As you can see, the player uses their hand to perform gestures, to direct the movement of the bird across walls. The second drawing demonstrates how players will be in the physical box/space, each wall consisting of interactive musical items.

mockup1.png

NOTES FOR SET-UP

​

  • We must remember that each wall requires its own webcam.

  • Each wall requires its own projector.

  • How do we combine walls/gameplay? - This may require 4 different versions of the game and therefore, 4 different set-ups.

  • Movement of the player is translated into the digital environment/projection.

  • First layer of music should play after interacting with first three or four elements.

SPACE MOCK-UP 2

​

This second mock-up demonstrates how the bird will be presented on each screen. The players hand will be recognised by the webcam parallel to the user and will move the player on screen. There should be no specific gesture to perform, except from an open palm to direct the bird across the screen! The bird should appear as if it is flying throughout. The trail between the red musical dots represents the ideal path the player should take, but there is also opportunity to explore the environment however they wish.  The third mock-up presents how the screen should look with an idea of what the environment will look like with our chosen 'main character' being the Snow Bunting bird!

mockup2.png

NOTES FOR SET-UP

​

  • Four separate game versions means the bird will have to be hidden between walls, to make it appear like a smooth transition.

  • Bird cannot fly between screens smoothly as the versions will not be connected.

  • Each wall should have a different iteration/variation of the environment, consisting of a range of intricate details within them. (To avoid repetition)

SPACE MOCK-UP 3

​

I have demonstrated the journey of the bird on one main screen. As you can see from the four stages below, the bird begins at the first dot and hovers across each one. In order to do this, the player gently moves their palm across the screen, moving from the left to the right. When the player first begins, there should be one layer of music playing, to ease players into the experience and make them feel comfortable. As they progress and hover over more musical objects, the layers will develop overtime and create a beautiful soundtrack, put together by the players themselves.

NOTES FOR SET-UP

​

  • Each screen to consist of around 3 or 4 interactive elements - the content of these are to be discovered. Maybe something relevant to the environment?

  • Must encourage slow movement and controlled body motion.

mockup3.png

SPACE MOCK-UP 4 & 5

​

To finalise my series of environment and space mock-ups, I have combined the two. To further visualise gameplay, I have integrated one of my environment concepts into the physical space, to showcase what it should appear like to players, and essentially how we expect the final deliverable to look and function. The idea is that the player walks around the space, starting on the left hand side, moving across screens clockwise. Each screen will have its own set up, projector and webcam - we have to remember this will limit the amount of walkable space in the physical environment.

​

Players will soar through the environment using their palm to control the direction of the bird, across the mountains! The mountains will consist of small intricate animations to bring the still image to life, which will enhance engagement and satisfy players. The environment design should also vary across screens to avoid repetition and keep players interested.

​

HOW DO I VISUALISE THE FULL EXPERIENCE?

mockup4.png

NOTES FOR SET-UP

​

  • Bird must be animated

  • Environment to consist of small animations within it - maybe clouds on loop, ski lift?

  • At least 1 or 2 tracks have to be integrated into one game version.

THE IDEAL FINAL SET-UP

​

This final mock-up teases what the full experience should look like, minus the back wall. The experience should ideally be 360 degrees, however, we are aware of technical issues that we may have to overcome by reducing the number of walls we use. But with the same set up, gameplay and focus on visual/sound design, this should not affect the effectiveness of our intended experience. The mock-up below demonstrates how players will move around the space, from screen to screen to progress with gameplay. It'll be necessary to experiment with a few different music samples to get an idea of what this might sound like too.

NOTES

​

  • Take into account the lost space for projectors/webcams, where will they be positioned?

  • Must experiment with equipment before finalising our design choices.

  • Bird to have potentially an 'idle mode' to allow players to pause.

  • May have to consider UI later into the project.

mockup5.png

REFLECTION & EVALUATION

​

FINAL REFINED SCOPE

Over the last few weeks, we have been making gradual changes to our Project Scope. Now we are aware of all the equipment, hardware, software and assets we need to fulfil the Getaway experience, we have refined the Project Scope in preparation for development. This includes a list of every feature and its expectation. We will continue to refine the 'physical space' section as we discover new options, so will be regularly updating this document:

​

https://docs.google.com/document/d/1W-KMJHg3lUJMHExcUnBn_VLCF8ivFIVOSVMcmvuEejg/edit?usp=sharing

​

​

THE ENVIRONMENT

In terms of the outcome of my concept creation process, I am happy with the ideas I have created for the environment, which I was able to combine with my mock-ups for the space, and visualise our full experience. This has made it a lot easier to think about what we are missing and what we need to progress, such as the equipment to achieve a set-up like this. Regarding its appearance, I love the style of each concept but the final design has a special place in my heart. I love the use of tone and negative space as mentioned before, and I feel this is a much more engaging and impressive style of art. The design of the space will certainly interest players if we incorporate small animations within the mountains to bring it to life, and to keep the content varied across screens. Briefly sketching ideas for the environment has inspired me to begin thinking more about the art style and how I can define exactly how the game should look. As well as this, I lightly touched on how to scan and edit these images, which was definitely the most important part of this task. This is extremely useful for the creation of the Art Bible which I am scheduled to begin in Week 5. I am happy with my progress with this for now and can't wait to get started with Asset Creation.

​

THE SPACE

I was able to visualise gameplay further by placing my concepts within the space, to demonstrate what players will see and how they'll react with it. This has helped immensely, and throughout the process I found myself coming across limitations which I took note of throughout. One of which was the need for several different versions of the game to be able to project onto 4 different surfaces. This is something we will discuss with James at our next meeting and hopefully find a solution for. This may link back to the possibility of using one global camera linked to the projectors, rather than 4 different set-ups. Overall, I am happy with how I have visualised gameplay within the space as it's certainly what I imagined and had in mind at the start of this project. I am happier knowing I have this documented, so I can refer back to this throughout the course of the project.

​

NEXT STEPS - Sunday 20th February

We have come to the end of Week 3! To finish off, I plan to document Kiera's recent work to keep up to date with her progress on the Virtual Reality prototype. I plan to briefly review this and talk to Kiera about next steps with this. Other than that, we will begin Week 4 with a Team Discussion and work together to outline our next steps for the project.

​

Prototyping

Week 4 - Team Discussion

  • Instagram
  • Twitter
  • LinkedIn
bottom of page