Creating randomized eye movement in ImpactJS

Last night I built randomized eye movement for the cat face in my March One Game a Month project (Promiscuous Flea). In the final version the eye movements won’t beĀ 100% random, but this gives me something to build on. As usual, I am using the ImpactJS engine for this game. The final result looks kind of like this:

Got randomized eye movements working on my #1GAM cat! vine.co/v/bHiHIqthajm

– Liza Shulyayeva (@Lazer) March 5, 2013

I ended up doing this with three simple entities:

  1. EntityCat

  2. EntityCateye

  3. EntityEyeguide

All three of these are in one file - cat.js.

EntityCat is spawned on level start. It then spawns the primary eye on init:

ig.game.spawnEntity(EntityCateye, 127, 161, {primaryEye: true});

When this instance of **EntityCateye **is spawned, it then spawns the secondary eye and the eye guide from its own init, declaring itself as both of those entities’ parentEye:

     if (this.primaryEye) {
            ig.game.spawnEntity(EntityCateye, 314, 161, {parentEye: this});
            ig.game.spawnEntity(EntityEyeguide, 0, 0, {parentEye: this});
        }

**EntityEyeguide **then picks random positions around the primary eye (within some constraints to keep it in the socket). It does this on a timer - the eye guide moves every x seconds when the primary eye is within minDistance of the guide.

     update: function() {
        if (this.lookTimer.delta() > 0) {
            this.pickGazeTarget();
            this.lookTimer.reset();
            this.lookTimer.pause();
            this.timerPaused = true;
        }
        if (this.distanceTo(this.parentEye) <= this.minDistance) {
            if (this.timerPaused) {
                this.timerPaused = false;
                this.lookTimer.unpause();
                console.log('unpaused');
            }
        }
        this.parent();
    },

    pickGazeTarget: function() {
        this.pos.x = ig.game.controller.randomFromTo(75 + 25, 181 - 25);
        this.pos.y = ig.game.controller.randomFromTo(110 + 25, 216 - 25);
        console.log('x: ' + this.pos.x + ' y: ' + this.pos.y);
    },

And we’re back to EntityCateye. The primary eye is told to slowly move toward the position of the eye guide entity. The secondary eye simply mirrors the primary eye’s position (with an offset on the x axis to put it into the other socket):

     update: function() {
        if (this.primaryEye) {
            if (this.distanceTo(ig.game.eyeGuide) > ig.game.eyeGuide.minDistance) {
                var r = Math.atan2(ig.game.eyeGuide.pos.y-this.pos.y, ig.game.eyeGuide.pos.x-this.pos.x);
                var vely = Math.sin(r) * this.speed;
                var velx =  Math.cos(r) * this.speed;
                this.vel.x = velx;
                this.vel.y = vely;
            }

            else {
                this.vel.x = 0;
                this.vel.y = 0;
            }
        }
        else {
            this.pos.x = this.parentEye.pos.x + 185;
            this.pos.y = this.parentEye.pos.y;
        }
        this.parent();
    },

You can see the current code in its entirety on GitHub.

comments powered by Disqus