petarov / craftymouseface

Crafty component that helps adjusting sprite facing.

CraftyMouseFace

Crafty component that monitors mouse movement and calculates angular position relative to entity position.

Description

This component does the following:

1. It finds the angle between given Sprite and mouse position and triggers a Crafty event which holds information about current mouse position and calculated angle in radians and degrees.
2. Determines sprite facing direction.
3. Triggers Crafty events when a mouse buttons is pressed down or released up anywhere on the game screen.

How To Use

Demos

Demos are located in the demos folder. There are currently 2 demos:

• Demo1: Move sprite around the screen and shoot. Sprite faces mouse cursor position when moving.
• Demo2: Move sprite around the screen and shoot. Sprite rotates to face the mouse cursor.

To run the demos first install the required bower dependencies via:

bower install

You may use Python3 to start an http web server on http://localhost:8000 and test the demos:

python -m http.server
Serving HTTP on 0.0.0.0 port 8000 ...

Demo2 is using a handy component called CraftyEntityBoxOverlays to display entity collision and rotation boxes.

Examples

Create 2D Sprite entity with the MouseFace component enabled.

    var entity = Crafty.e("2D, DOM, player, CharAnims, Multiway, MouseFace")
    .attr({
        x: 400, y: 256, z: zbase + 1,
        moving: false
    })

Set a boolean flag when player is moving the sprite.

    .CharAnims()
    .bind("Moved", function(from) {
        this.moving = true;
    })

Now, adjust the animation depending on the position of player's sprite relative to the mouse position.

    .bind("EnterFrame", function() {
            // Display animation in the direction of moving
        if (this.moving) {
            var anim = null;
            switch(this.getDirection()) {
            case this._directions.left:
                anim = 'walk_left';
                break;
            case this._directions.right:
                anim = 'walk_right';
                break;
            case this._directions.up:
                anim = 'walk_up';
                break;
            case this._directions.down:
                anim = 'walk_down';
                break;              
            }
                
            if (anim) {
                if (!this.isPlaying(anim))
                this.animate(anim, -1); 
            }    
            
            this.moving = false;
        } else {
            this.pauseAnimation();
        } 
    })
      

Spawn a bullet when left mouse button is released. We're using the getAngle() call which will fetch the already calculated direction angle. We can then use the direction angle to adjust the vector of entity movement.

    .bind("MouseUp", function(data) {
        if (data.mouseButton == Crafty.mouseButtons.LEFT) {
            // shoot - create bullet
            Crafty.e("2D, DOM, Color")
            .attr({
                x: this.x + 16, y: this.y + 24, z: zbase + 1,
                w: 3, h: 3,
                speed: 5,
                angle: this.getAngle()
            })
            .color("#FA5656")
            .bind("EnterFrame", function(frame) {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed;
              // destroy ...
            });
        }
    });

For more examples please check the demos folder.

craftymouseface's Issues

calculations are coming out incorrect.

data.rad goes from ~1 to ~2
and data.grad ~51 10 ~103

code:

  var queen = Crafty.e('2D, Canvas, Color, Image, Fourway, MouseFace')
    .attr({x: $nw/2, y: $nh/2, w: 50, h: 50})
    .color("#00a5e2")
    .image("assets/queen.png", "no-repeat")
    .fourway(200)
    .bind("MouseMoved", function(data) {
      console.log(data)
      this.rotation = data.rad
 });

They're like that but once I resize the window it works fine.