Monster eyes follow mouse cursor

Favourite 17 favourites
Tutorial written by Dan72Originally published on 4th, October 2013 - 1 revision

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! ;-)

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

0
Lordshiva1948 44.3k rep

Very good I like it. Wonderful thanks for sharing

Friday, October 04, 2013 at 8:28:28 PM
0
sosensible 10.3k rep

good to see your learning and showing what you want others to see

Saturday, October 05, 2013 at 1:54:29 AM
0
Naji 11.8k rep

Great! that just what i was looking for my game

Saturday, October 05, 2013 at 5:31:03 PM
0
AbelaNET 14.9k rep

thanks for sharing. Very cool. I enjoyed it.

Monday, October 07, 2013 at 2:06:13 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.