Clean + Repaint Face

Cleaning the Face

For this part, we want the player to first use the cloth to wipe the doll’s face clean, and then, much like with the eye glue task, they will need to go to the cabinet to collect the paint and return to the doll to apply it.

For cleaning the face, we want to try and create the effect that the player clicking and dragging actually removes the image layer containing the dirt on the doll’s face. I thought that something similar to a scratch card effect would work perfectly for this, so I found and followed a tutorial that seemed to have the effect we want.

Unity Scratch Card Tutorial: https://www.youtube.com/watch?v=o-QoM0r6l_E

The way this works is by using sprite masks and sprite mask interactions. We already have all the layers for our doll separated into different sprites, which makes this work perfectly. We have the old chipped make-up as a separate game object, and set its mask interaction to “visible outside mask”, meaning that the image will be rendered everywhere except for wherever objects set as its sprite mask are.

We then have a mask prefab (the sprite mask for the chipped makeup), which is instantiated every frame that the mouse is held/dragged across the face. Our sprite mask is just a basic circle sprite in shape, but spawns close enough together that it creates the effect of solid lines when the player drags. We are essentially drawing over the doll’s face with something invisible that actually hides the top layer, making it look like we are wiping it away.

Because I couldn’t think of an easy way of checking if all the sprite has now been hidden by the mask, I decided to just use the same timer system I set up for removing the old eye goop. Once the player has dragged the mouse around for a set period of time (which I have determined to be approximately how long it might take on average to swipe over the whole face), the game object is set to be inactive and the task complete.

I did also have to add the following bits of code to my ItemClick script:

if (globalVariables.selectedItem == "Cloth")
                {
                    CursorManager.Instance.SetActiveCursorType(CursorManager.CursorType.Cloth);
                    Cursor.visible = true;
                    gameObject.GetComponentInChildren<SpriteRenderer>().enabled = false;
                    gameObject.GetComponent<Collider>().enabled = false;
                    resetCursor = true;
                    print("cloth held");
                }
if (resetCursor)
                {
                    CursorManager.Instance.SetActiveCursorType(CursorManager.CursorType.Point);
                    resetCursor = false;
                }

This is because I decided to set the held version of the cloth to use a custom cursor even when zoomed out, rather than have the actual game object (with a different sprite) following the mouse around. I did this because I thought it would be quick and simple, allow for greater mouse accuracy than our current item hold method, and will ensure the game object doesn’t get in the way of interacting with the doll face collider.


Painting the Face

For painting the face we use the same technique, except we set the mask interaction to “visible inside mask”, so this time we are basically painting areas on which the new makeup can be rendered/seen.

Like with the eye glue, the player first has to collect to paints from the cabinet to ensure they are in their inventory before they can click on the doll.

We then have a paintbrush custom cursor, that appears once close up.

Ideally, we would have made this more like the eye glue task where the player has to click the paint jar first to put paint on their brush, however, due to time constraints we had to skip this part.

I use the same timer method as before, and once time is up instead of disabling the game object, I switch the makeup objects mask interaction to “none” so that it now appears as an ordinary full layer.

**else
            {
                timeRemaining = 0;
                timerIsRunning = false;
                gm.levelTasks[10].isComplete = true;
                //fill rest of makeup
                makeup.maskInteraction = SpriteMaskInteraction.None;
                CursorManager.Instance.SetActiveCursorType(CursorManager.CursorType.Point);
                globalVariables.selectedItem = "";
            }**

It would have also been nice to have the player actually draw lines on the face for the paint, with the player needing to stay within certain boundaries to progress. This would make it feel a lot more like actually needing to have a steady hand to paint a doll’s face, however this would have been more complex to set up and we are currently under a lot of time pressure.

I do think this final task of the level could be improved and feels as if it has less clear guidance than some others, so we will have to see when we playtest the rest of the level if that causes issues for players or detracts from the experience. I do still think what we have here is a fun feature and I am proud to have got it working as intended.

Laura Alford

Leave a Comment

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