Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/petarov/craftymouseface
Crafty component that helps adjusting sprite facing.
https://github.com/petarov/craftymouseface
crafty-js craftyjs mouse-position
Last synced: 29 days ago
JSON representation
Crafty component that helps adjusting sprite facing.
- Host: GitHub
- URL: https://github.com/petarov/craftymouseface
- Owner: petarov
- Created: 2012-12-03T01:22:10.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-07-13T12:54:03.000Z (over 10 years ago)
- Last Synced: 2024-04-15T00:41:38.875Z (7 months ago)
- Topics: crafty-js, craftyjs, mouse-position
- Language: JavaScript
- Size: 194 KB
- Stars: 2
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CraftyMouseFace
===============
[Crafty](http://craftyjs.com/) 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](http://craftyjs.com/api/Crafty-trigger.html) which holds information about current mouse position and calculated angle in radians and degrees.
2. Determines sprite facing direction.
3. Triggers Crafty [events](http://craftyjs.com/api/Crafty-trigger.html) 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](demos) folder. There are currently 2 demos:
* [Demo1](demos/demo1.js): Move sprite around the screen and shoot. Sprite faces mouse cursor position when moving.
* [Demo2](demos/demo2.js): 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](https://github.com/towbi/CraftyEntityBoxOverlays) to display entity collision and rotation boxes.
## Examples
Create 2D Sprite entity with the *MouseFace* component enabled.
```javascript
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.
```javascript
.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.
```javascript
.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.
```javascript
.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](demos/) folder.