This tutorial was inspired by Alin's Eyes following mouse cursor tutorial in Flash AS3, where you see a cute three-eyed monster follow the mouse. We'll do the same with Construct 2!
Setup
Set, if you like, the layout and project properties to
- Layout size 500,500
- Margins 500,500
Load the following sprites and rename them accordingly.
Layer 0
Background:
Layer 1
Body:
Eye:
Mouth:
and build up the monster as seen above in the screenshot. For your convenience, here the positions you can set in the properties panel:
Body: 250, 291
Eyes: 215, 247 and 289, 247
Mouth: 252, 335
Finally, add a Mouse object.
Change the eyes' orientation towards the mouse position
Go to the event sheet and insert a new condition:
System -> Every tick
and its action
Eye -> set angle -> angle(Eye.X, Eye.Y, Mouse.X,mouse.y)
Awesome, that's it! I was so amazed by this function, not needing to think in trigonometric formulas like in Alin's tutorial with ActionScript 3.
When you run the program, you'll see that both eyes will individually move towards the mouse cursor.
Adding some movement
So the thing is, you have a monster made up of three different objects (body, eyes, mouth). Now, what if you have a game where the monster moves? You simply pin the eyes and mouth to the body.
In the Objects panel, click on Eye (all Eye-instances will be selected) and give it a Pin behavior. Do the same with the Mouth object.
Now we need to tell Construct 2 that these objects belong to the monster body object. In the Event sheet insert the following condition:
System -> On start of layout
with the actions
Eye -> Pin to object -> Pin to Body / Mode: Position only
Mouth -> Pin to object -> Pin to Body / Mode: Position only
In order to check if everything's working right, give the monster's body the Sine behavior.
Multiple monsters
Select all the monsters body parts and use CTRL-C and CTRL-V to copy and paste a new monster. You can adjust the monster's size and also this guy will follow the mouse cursor.
Homework for you
As seen in the original tutorial (linked at the top of this article), the mouse cursor has been replaced by a cookie. It should be no problem for you to do this in Construct 2 as well! ;-)