Tweaking Explorable and Packaging for Master Scene

One of the less sexy, but incredibly important parts of this whole process has been the pipeline between each of us as a team. From the beginning, we sat down and had a conversation about folder structure, file organisation, naming conventions and how to pass assets on to each other.

With the explorable, I have been working with the scene as a whole, so we decided instead of passing on many assets separately, that I would work independently on it until it was where it needed to be, and then package the whole project to be placed into the master scene.

Before passing over these assets, I took time to understand Nicole’s scene set ups in Unity, an then mimicked them for each part of my set up. I created new materials for each and named them appropriately, as well as creating folders for every section.

This slideshow requires JavaScript.

Clarity is so important when we have complex systems, and numerous files. While this isn’t the most exciting of jobs, taking the time as an artist before passing the work over, saves time tenfold at the other side in the master scene. 

 

Navigation in the Explorable

While we were happy with how the Explorable was shaping up, from some user testing we discovered that people did not quite know where to go once they passed the first two panels in the space. There was quite an empty space.

Screen Shot 2016-04-19 at 12.45.31.png

Designing Navigation

With this in mind, I began to think about how to make this navigation easier. I started by creating a few arrows in the style of the strokes in the panels, labelling the directions of the sub-exhibitions. I wanted these arrows to feature on the ground plane in the space, so they do not affect the participants immediate field of view, but have enough of a presence for the participant to notice them if they are needed.

Screen Shot 2016-04-19 at 18.49.39

Screen Shot 2016-04-19 at 16.57.11.png

Screen Shot 2016-04-19 at 16.57.27.png

Upon placing these in the space, they were really bright and too intrusive. As the participant approached the arrows, they had to walk all the way to the end of them to read to writing. However, I did feel that they helped guide the walking direction.

Edits after Testing

Screen Shot 2016-04-19 at 17.03.19.png

I changed the colour to a darker grey so make the navigation more subtle. I also moved the positioning of the text to the base of the arrows as it is in the direction that the participant will be moving in. After testing with a few people in the VR space, these changes made a big difference to the navigation and helped give an idea of what was coming before they reach the sub-galleries.

Exit

Navigating to an exit was also something we wanted to be able to do in the explorable. From my research into gallery spaces and development from that, I created a linear space that does not take long to walk from one end to the other. We wanted the participant to have enough information to enjoy as long as they wanted in the space, but if they only had a short time, it’s important that they feel they can exit quickly within the space.

In the same style as the designs, I created a little exit sign, where the participant to walk through to return to the home screen. Screen Shot 2016-04-19 at 12.42.38.png

After testing it in Unity, we felt that an archway would be clearing and more inviting to walk through.

INSERT SCREEN SHOT

From here, I’ll package these assets and pass on the the Master Scene, where we will add the logic to make the interaction happen.

Menu Design

It’s pretty easy to neglect the little things and our poor menu design had been sitting gathering dust on our doom list for weeks. After doing the explorable typography development, I used those influences to create the menu.

From our VR research and from inspiration from pieces like the VR experience, Clouds, our piece has taken on a black background throughout, with floating particle effect to maintain presence. We wanted this research to take effect in every touchpoint of our experience, even in the menu.

Design

We learnt from our numerous tests and research into how to create great experiences in VR, that the first 30 seconds or so in the virtual space can be disorientating and that it is important to give the viewer time to acclimatize to the space. For this reason we have decided to keep the menu very simple, with light particles to create presence and only a few menu buttons.

For the design of the menu, I maintained the same title and typeface as the explorable to maintain consistency. I then create a colourful painty stroke to mimic the strokes of paint through the piece, and the explorable design.

For the button click interactions, I had thought that it would be a nice touch for the paint stroke to appear upon hovering the button; to give the viewer a visual reaction to their interaction with the piece. While this would be a nice touch, we are not sure if it’s possible in our time limit with a number of other things on our to do lists. I saved out each of the buttons, including the stroke, to give us the option anyway.

Screen Shot 2016-04-27 at 12.17.15 PM.png

We had decided to place an image of Colin in the menu to give the participant an idea of what to expect. For this, I took a screenshot from Visualise, tidied up the edges in Photoshop and added a spotlight and some shadowing. This will then be placed in the center of the menu.

We then added these elements into the master scene to see how they feel in VR. We may need a slight bit of repositioning, but they work well so far.

ice_screenshot_20160427-153635.png

Frame Animations

One of the elements of our animatic features a number of frames surrounding the viewer in a circle. These frames have a slight animation on them, where they chase their tails. Fiona had done a little testing with this, but we decided that the corners should be slightly more rounded, and the lines more paint-like, rather than having a hard edge.

screen-shot-2016-04-04-at-12-28-31.png

Painting in Photoshop

Some of my early research on painting helped inform my development of the painty frames. As these frames won’t be close to the viewer, they did not need a huge level of detail, but it was still important to reflect the oil paint style that the interview is referencing. I was aiming to create a stroke that was one singular colour with a hint of white, with a shape that mimicked the linear brush lines.

vCQmbHxB.jpg

Image source: https://twitter.com/colin_davidson

After looking into Colin’s work up close, I began playing with a couple of Photoshop brushes to create my strokes. I created the illusion of a thicker paint in the center by using a build up of white to fill in the lines. I made the stroke more opaque in the middle, and let the lines disperse a little more to the outside as a real paint stroke would often do.

Animating in AE

I took to After Effects to do the animation and took a look at a few tutorials to see the best methods to animate the frames. Focus 8 gave the option of downloading a plugin to animate a flat layer along a path. While this is an interesting approach, I felt that it may distort the texture, so I decided to try something different.

In the end I chose to animate a stroke along a path, revealing the texture below. The Tron lines video below was the closest video that describes the process. This method allowed me to create the whole texture of the frame in Photoshop, and then draw a path to match the frames. I then added a stroke, set it to reveal what was below, feathered the stroke, separately feathered the mask and then animated it.

Transition Challenges

One thing that the animation does in the animatic is fade in for the transition, however, at the time of creating the frames I wasn’t sure if a fade in was possible in Unity. If it was not possible, I would have to animate the transition in this process (ie. snaking in from nothing), but if it did work, I would be able to just loop the animation.

In After Effects I created both animations to have options to work with. I did this by first animating the stroke growing. I then created another mask to be animated as the stroke completes it’s full rotation, which gives the impression that the frame is chasing its tail.

Saving out Sprite Sheets

After animation, I exported the files as a transparent png sequence which I then added into Photoshop to create my sprite sheets. I decided at this stage to create a loop (instead of the paint stroke growing from nothing) for the sprite sheet animation, as it is easier to add to a loop than remove from it, if required.

As I knew the textures were to be animated on sprite sheets, I had created my paintings on large 2K files so that I could maintain optimization in the space.

This slideshow requires JavaScript.

I began matching all of the pngs to a grid, making sure each lined up perfectly together, with no overlaps and no gaps between the images. This was a long and tedious process which took a couple of attempts to get right. Below is an example of the pink frames sprite sheet once complete.

Screen Shot 2016-04-17 at 7.25.49 PM.png

Testing in Unity

With the sprite sheets complete and the frames made, all that was left was testing in Unity. I set up the scene that Fiona had previously made the frames for, to try my new textures. I added a script to each model and edited the values, to match the size of my textures.

Editing the animation in Unity

After getting the sheets working I was not a fan of the total uniformity of the set up. Each frame animated at exactly the same time in exactly the same way which didn’t feel natural and was too far from the original animatic. After a bit of tweaking and testing, I discovered that I could edit the frame rates to stagger and slow down the animations. After doing this, it felt much more fluid and as I had imagined.

I finally packaged up these elements for Nicole to add into our master scene in Unity.

 

Typography Pairings and Panel Development

Testing Pairings

After developing the titles, my next steps involved pairing them with our chosen fonts for the text on the panels.

Screen Shot 2016-04-15 at 11.26.44 AM.png

I found that for the main title, the hand drawn type was the most appropriate. The title was to feature as an introduction to the explorable gallery, so I wanted to hint at what was to come through the styling of the type. I do feel that the colour in the above instance is too intense so I may change it to a more sophisticated monochrome style, but for now, the hand drawn style works for us as a team.

Layouts

I began testing a few layouts to see how to best position our text in the space.

This slideshow requires JavaScript.

After sharing with the team and having a chat about the work, we found that the layout below was the most impactful. By having a long title sweeping left to right with the lower hierarchy text on the right hand side, the eye is drawn from the left to right and down to the text.

Screen Shot 2016-04-27 at 10.36.59 AM.png

From previous research into Game Design, Virtual Reality spaces and Physical Architecture, I learnt the importance of testing in Unity and VR as I went through each element of the space. I tested it in Unity on the gallery, and found that the text wasn’t as high quality as I’d like on the geometry’s UVs. I tried the textures out on 4K panels, and changed around the shaders in Unity to get a sharp image of the text.

I’m aware that the typography arrangement is not perfect in this title yet, but in general I’m pleased with what it’s doing as an arrangement. It’s exciting to replace placeholders with real text, and I can’t wait to keep developing the other elements and see the whole space come together.

Screen Shot 2016-04-18 at 16.09.12.png

Developing Sub-Exhibition Panels

The next stage of the gallery I had to work on was the exhibition panels. From looking at galleries in the real world and then testing the text in the space, I learnt the importance of the “less is more” rule when it comes to text in VR. It’s difficult to read, or pay attention to text for too long while in the Oculus, so I was mindful to only create space for a limited amount of words.

I began by testing how each panel could look with the same sort of hand drawn type as the main title. I felt that the readability was not great, but also that the hand drawn look did not feel very professional.

Screen Shot 2016-04-18 at 9.57.55 AM.png

In light of this, I decided to try out the typography hierarchy which I’d previously set up using Minion Pro and Adobe Garamond Pro. These tests had much more elegance, and I was pleased with the direction they were heading. However, with the classic typeface I felt that I was loosing some of the playfulness that I had been exploring in the previous tests. The painterly elements were important to tie the interview and the gallery together as well as adding character to the space. With this in mind, I tried to see what it would be like to add a splash of colour to the panels.

Screen Shot 2016-04-18 at 9.57.31 AM.png

I then tried a few different iterations to see if I could achieve a more interesting stroke.

The bottom right test was my favourite; the stroke’s solidity made the text pop, while still maintaining the feeling of a paint stroke. I then started to test what each panel could look and feel like with a similar approach, using colour to differentiate them.Screen Shot 2016-04-18 at 9.56.57 AM.png

I was happy with where the panels were going, so again, I tested them in Unity against their respective gallery spaces.

Feedback and Updates

I shared these spaces with the team and Fiona suggested we use the colour scheme from the interview for these panels. I changed the pallete around and the space felt much better with the continued colours which had been picked from Colin’s paintings.

This slideshow requires JavaScript.

Populating the Space

With the team happy with were things were going, I then populated the space with the high quality prints Colin had sent and the new panels. I then made the scene walkable, so we could get a feel for it all in together.

I felt a sense of achievement in seeing the thoughts, research and development all come together to make this gallery. The next steps will include packaging the whole scene to be moved into Nicole’s master scene. From there I’ll then be cutting together Colin’s audio narration and adding it into the space, adding some particles like the interview, and adding an ambient track in the background.

Gallery Typography Refinement

After my early developments with the typography for the explorable space and research into typography in galleries, I knew there was a little more work that needed done. With the explorable gallery layout finalised, I had set spaces where text was to go. My next steps as far as the text was concerned, was developing and finalising the panel design, and writing the content for the exhibition. Required pieces included:

  • One Title image
  • One Intro Panel
  • Five Sub-Exhibition Panels
  • One Exit image
  • Potential Navigation Design

Hand drawn Typography Development

After researching gallery signage, I decided that a large title image would be an effective way to enter the explorable gallery. My early experiments show a brief look into what this could be; I explored a couple of approaches using hand drawn typography and altering classic typefaces with giltchy strokes. While I was happy with the direction of these, I wanted to dive a little deeper in their visual development so that I would have a range of options when I go to the team to make our decisions together.

Hand Drawn Type

I began by drawing a few letter combinations, varying the style of my handwriting a few times to see what worked best in the context of our title image. The idea behind this was to mimic a painty artist’s signature, as well as using the stroke to tie into the visuals of the overall piece.

Screen Shot 2016-04-14 at 4.38.44 PM.png

With the variations in the writing style, I then began playing with how strokes would effect their finish. What I felt was working in the last tests, was an unfinished painterly stroke. I created a few iterations of this style, adding or subtracting detail with each one. For some iterations I layered the strokes, to see how more subtle additions would work, and for others, I kept the stroke simple with no fill colour and a plain stroke on the outside.

What seemed to work the best here were thick base strokes, and fairly long round lettering. The examples where the base strokes are extremely thin are interesting up close, but in the context of a title piece, they would not have nearly enough impact.

Classic Typeface Alterations

Building on my previous work, I wanted to explore the use of a more structured typeface as a base to build the title upon. With the hand drawn tests still in my mind as a good option, I thought I would try to combine the classic typeface with more painterly elements. I drew over Minion Pro, the typeface we had decided upon for our top hierarchy text, to achieve the general structure of the lettering, but get a more sketchy look.

Screen Shot 2016-04-14 at 12.02.35 PM.png

I felt that there was something quite impactful about having a “painty” element in the titles, so I chose to explore this in many of my tests. The different iteration purposefully ranged from subtle to extreme, to give us a good idea of what is possible.

Upon reflection on these tests, I feel that the glitchy look distorts the words too much and makes the text difficult to read. While I like how the random spikes in the lettering bridges a connection on the appearance of Colin’s interview, it is most important that it is fit for purpose and if it’s not readable, it’s not doing it’s job. To me the more subtle pieces work best in these tests, where there is a hint of paint, but it’s not so obvious that it’s cheesy.

Next Steps

I shared my work with the team and when we looked at both the hand drawn and classic type with alterations side by side, we were leaning towards the hand drawn look as a preference. They both have something interesting about them in their own right, but for a feature image, the hand drawn type has more character. There is a resemblance of an artist’s painty signature or a painty blobby stroke, without being too obvious. While it’s certainly not subtle, I think there is a nice balance of giving the viewer a hint of what to expect in the tone in the piece, without giving too much away. 

I’m getting close to the style that I set out to achieve but I need to see both the hand drawn type and the structured type paired in the context of the panel with the accompanying text before making the final call. The next steps include pairing the type, reaching out to the team for their opinions on it and developing it appropriately.