Comments (7)
It works well until I change the rotation origin (this.origin("center")) and rotate the this object. The erroneous behavior can be easily shown by adding the SolidHitBox component to the respective entity.
Thanks for the bug report! Could you describe the error in a bit more detail? (Or provide a self-contained example?)
from crafty.
Hi, sure the subset of my code which displays the reported behaviour follows:
`
<div id="game"></div>
<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js">
</script>
<script>
Crafty.init(500,500, document.getElementById('game'));
Crafty.c("Rocket", {
init: function() {
this.addComponent("2D, DOM, Color, Motion, Collision, SolidHitBox");
this.rotating = 0;
this.rotation = Crafty.math.randomNumber(0, 359);
this.x = Crafty.math.randomNumber(50, 450);
this.y = Crafty.math.randomNumber(50, 450);
this.w = 30;
this.h = 30;
this.origin("center");
},
moveOneStep: function(evt) {
//rotation
this.rotation += this.rotating;
//check for collision after rotation
var hitDatas, hitData;
if ((hitDatas = this.hit('Wall'))) { // check for collision with walls
hitData = hitDatas[0]; // resolving collision for just one collider
this.rotation -= this.rotating;
return this;
}
//move
diff_x = Math.cos(this.rotation/180*Math.PI);
this.x += diff_x;
diff_y = Math.sin(this.rotation/180*Math.PI);
this.y += diff_y;
//check for collision after move
if ((hitDatas = this.hit('Wall'))) { // check for collision with walls
hitData = hitDatas[0]; // resolving collision for just one collider
if (hitData.type === 'SAT') { // SAT, advanced collision resolution
// move player back by amount of overlap
this.x -= diff_x;
this.y -= diff_y;
} else { // MBR, simple collision resolution
// move player to previous position
this.x = evt._x;
this.y = evt._y;
}
}
return this;
}
});
Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 0, y: 0, w: 20, h: 500}).color('black');
Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 0, y: 0, w: 500, h: 20}).color('black');
Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 480, y: 0, w: 20, h: 500}).color('black');
Crafty.e('Collision, Wall, 2D, DOM, Color').attr({x: 0, y: 480, w: 500, h: 20}).color('black');
//--- rocket1 ---
var rocket = Crafty.e('Rocket, Keyboard')
.color('blue');
rocket.bind("KeyDown", function(e) {
if(e.key == Crafty.keys.LEFT_ARROW) {
rocket.rotating = +5;
}
if(e.key == Crafty.keys.RIGHT_ARROW) {
rocket.rotating = -5;
}
});
rocket.bind("KeyUp", function(e) {
if(e.key == Crafty.keys.RIGHT_ARROW || e.key == Crafty.keys.LEFT_ARROW) {
rocket.rotating = 0;
}
});
rocket.bind("UpdateFrame", rocket.moveOneStep);
</script>
</body>
`
from crafty.
my previous comment does not contain the inital lines, but they are quite obvious:
< html >
<head >
</head >
<body >
from crafty.
If I skip the line this.origin("center");
in my code, the SolidHitBox overlaps well with my square. Once this line is included, the SolidHitBox and my square divide.
from crafty.
Looks like something is going wrong when you set the width, origin, rotation, and hitbox in a specific order.
I'll look into this further, but setting the origin after the dimensions, but before the other properties works around the bug:
this.addComponent("2D, DOM, Color, Motion, Collision, SolidHitBox");
this.rotating = 0;
this.w = 30;
this.h = 30;
this.origin("center");
this.rotation = Crafty.math.randomNumber(0, 359);
this.x = Crafty.math.randomNumber(50, 450);
this.y = Crafty.math.randomNumber(50, 450);
e: originally suggested setting the origin first, but that produces a slightly different bug. I think the root issue is that the collision hitbox isn't recalculated correctly when the origin is applied, and it's manifesting in a couple of different ways.
from crafty.
thanks a lot. the workaround works fine :)
from crafty.
With the fix in #1202, your original example now works, so I'm going to close.
(You can find the most recent build of the develop branch here)
Thanks for the report!
from crafty.
Related Issues (20)
- Update documentation for using Crafty as a module HOT 10
- [NodeJS] `Crafty.init is not a function.` HOT 5
- Random tile of tilemap not rendering with canvas/WebGL when rotated HOT 4
- Player Entity gets Stuck on Walls, Walls have slight gap on one side HOT 2
- Crafty wont display in Electron HOT 6
- [Enhancement] Crafty.attr({}) function? HOT 3
- Change 'each' function scope to first argument HOT 4
- [Electron] Violations of non-passive listener HOT 1
- Maximum call stack exceeded
- How to import CraftyJS to js file HOT 1
- CraftyJS in TypeScript HOT 1
- When using canvas to display pictures, the edges of pictures are blurred HOT 1
- Scaled viewport is not centered correctly
- Newlines don't work with Canvas rendering HOT 5
- movements on keys events aren't smooth
- What is the state of Crafty in 2021? (Is it abandoned?) HOT 3
- player.x.toFixed(0);
- Crafty
- CraftJS source with Web dependencies
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from crafty.