Jump to content

Pixel perfect hover and click for Hidden Objects Game


Recommended Posts


I'm currently involved in the making of a simple hidden objects game. I have around 100 objects overlapping one another and, because of that, I need it to be pixel perfect on hover and click events. 

When I place every object on game stage, I set its properties using this function:

function placeObject(posX, posY, key, flag) {

    var obj = game.add.sprite(posX, posY, key);
    obj.name = key;
    obj.answer = false;
    obj.clicked = false;
    obj.inputEnabled = true;
    obj.input.useHandCursor = true;
    obj.input.pixelPerfectOver = true;
    obj.input.pixelPerfectClick = true;
    obj.events.onInputDown.add(checkClick, this);
    obj.anchor.setTo(0.5, 0.5);
    obj.events.onInputOver.add(selectObject, this); // sets alpha property down as feedback to the user
    obj.events.onInputOut.add(deselectObject, this); // sets alpha property back to 1


It works just fine except that the feedback I defined on hover takes almost 2 seconds to happen. I've read that pixelPerfectOver and pixelPerfectClick properties are very expensive and I imagine that is the reason why the response is slow with so many objects on screen checking pixels everytime mouse moves. So, my question is: Is there a way of optimising that so it responds more quickly?

Here is what I have so far: http://intercement.clientesdream.com.br/portal/Content/jogos/aedes/index.html

Thank you very much.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...