Skip to main content
B
brainfruit
Participant
November 13, 2016
Question

Make a mask follow cursor / mouse movement

  • November 13, 2016
  • 1 reply
  • 2745 views

I'm creating a little game where the user moves their mouse to reveal a scene inside a building - they need to find an object. To do this, I'm creating a group of animated objects that comprise the contents of the house, and masking them with a circle. When the user moves their mouse, they 'reveal' the contents of the house.

The problem I am having is that I can't find a way to make the mask 'stick' to the mouse cursor. All the tutorials I find are either unsuited to the problem or aimed at edge animate or flash.

Can anyone help to solve the problem? I have a feeling it's really simple and I'm not seeing the solution

Thanks!

    This topic has been closed for replies.

    1 reply

    Colin Holgate
    Colin Holgate
    Inspiring
    November 13, 2016

    If this is AS3 you would have a line of code that sets the mask again. Here's a tutorial on how to set the mask with code:

    AS3 Masking

      B
      brainfruitAuthor
      Participant
      November 13, 2016

      Thank you for the reply. I should have specified - it's html5 canvas rather than AS3

      Colin Holgate
      Colin Holgate
      Inspiring
      November 13, 2016

      I can't find a way to do dynamic masks in html5 canvas, but you might be able to get the same effect by leaving the mask where it is and moving the masked content underneath it. Then, put all of that into another movieclip, which you move in the other direction, to keep the mask under the cursor.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices