Music Video: The Frog, the Tadpole and the Wardrobe #4

Tadpole

I modelled my tadpole in Maya fairly quickly and after watching a GDC talk on Creating the Art of ABZU I followed part of a Fish Shader Graph Tutorial to create its movement with Time and Sine node and using that to manipulate the vertex. the main issue I ran into was that the tadpoles texture UV’s weren’t aligned or cut down the right axis so as half the model would go right while the other would separate and go the opposite direction because the shader projected onto the model wasn’t uniform. easily fixed by going back into Maya and sewing and creating a couple seams along with a quick UV unwrap. then added a gradient that I could control with a vector to mask and ramp the “vertex wiggle” of the head.

Now that I had a tadpole I created an empty game object “Carousel” (that clearly I didn’t know the spelling for*) with a tadpole in positions like on a compass then duplicating and rotating 45 degrees. to give the impression that the tadpoles were under the water without actually being under the opaque plane I made there scale on the Y-axis 0 to flatten them down to silhouettes. Then in the in a similar way to the door, I used a timeline to record the parent “Carousel” rotating 360 degrees and then converted the keyframes into a clip track to have it loop indefinitely. I then repeated this for a clockwise rotation.

Magic Door

I spent quite a lot of time thinking about the magic door in the centre of my app. Inspired by The Doctors Tardis, Monsters.INC and “The Lion Witch and the Wardrobe”. I went looking on the unity asset store and created a new project to experiment in. I First looked at Pocket Portal VR that works by having the two worlds ontop of one another however this seemed quite advance and although It is relatively user friendly, I was unsure how I could shift the girl from one side of the portal while in the prosses of her animations. So I decided to look elsewhere. However, I did use the wood texture in the pocket portal package to texture the Door I made with simply scaled Unity cube primitives grouping them as a prefab.

I was confused about why the doorknob was flat to the door but this was because the doorknob was scaled in relation to the parent door that I had previously scaled on that axis to 0. this was a lesson in having simple and straight forward transforms placed on parent objects as to not complicate things when those traits are passed down. So after rebuilding the door with a stronger foundation, I added an empty game object where the hinge should be setting the transform to pivot and parented the door and knob to it. I then used the timeline to record keyframes of the door in an open and closed position using the graph editor to smoothen the motion toward the end.

Eventually, I Ran into this Portal stencil shader tutorial, this was exactly what I was looking for however the tutorial used custom textures and didn’t seem to work as expected with universal render pipeline and shader graph. leading me to find this AR stencil and shader with shader graph tutorial that I found far easier to follow taught me how to convert shader graph scripts to custom shader scrips. So I used the Clear “Portal” Stencil shader that renders materials with Stencil Ref 0. By placing a plane with the Portal material in the doorway and replacing all the room and girl materials with custom shader graphs with “Stencil { Ref 0 Comp NotEqual Pass keep}”. This worked a treat, however, I needed to switch the Cull of the Portals Back as the back of the portal would render the room even when the room is in front of the portal.

I will need to look into how to switch the girls shaders mid-game so that she will render when she steps through the door otherwise I will have to have her spawn front of the door or have her stay inside the room.

Edit: In hindsight having the door stay open thought the music video would put it to better use as I feel like having the door sink away after 10 seconds is a shame and as would have looked cleaner considering I didn’t manage to find a way to change the girl’s shaders as she walked through the door before my presentation. Where having the door stay would have created an opportunity for the girl to move about her room possibly give the frog man a show and tell or create a line between the characters too for some interesting back and forth mimicry/dance.

Leave a Reply

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