如何在 Phaser 3 中将 Sprite 的 X 和 Y 位置用于 "Fling" 物理?
How to use X and Y positions of a Sprite for "Fling" physics in Phaser 3?
我正在使用 Phaser 3 制作游戏,特别是 Matter 物理引擎。我正在尝试按照本教程进行投掷物理 https://www.emanueleferonato.com/2019/03/08/fling-unity-game-built-in-html5-with-phaser-and-matter-js-updated-with-the-latest-constraints-tweaks-fly-through-the-screen-with-your-ninja-rope/
let game;
let gameOptions = {
gravity: 1,
constraintSpeed: 2,
hookSpeed: 20,
ropeTolerance: 6
};
const BALL = 1;
const HOOK = 2;
window.onload = function() {
let gameConfig = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
parent: "thegame",
width: 1200,
height: 750
},
scene: playGame,
physics: {
default: "matter",
matter: {
gravity: {
y: gameOptions.gravity
},
debug: true
}
}
}
game = new Phaser.Game(gameConfig);
window.focus();
};
class playGame extends Phaser.Scene{
constructor(){
super("PlayGame");
}
preload() {
//Load background image
this.load.image('background', 'images/background.png');
this.load.atlas('sheet', 'assets/spiderTP.png', 'assets/spiderTP.json');
this.load.json('shapes', 'assets/spritesPE.json');
}
create() {
//Place background image
let background = this.add.image(600, 375, 'background');
//Update the game at 30Hz
this.matter.world.update30Hz();
//Get hitboxes
var shapes = this.cache.json.get('shapes');
//Set boundaries for physics
this.matter.world.setBounds(0, 0, game.config.width, 800);
//Player
this.hero = this.matter.add.sprite(600, 500, 'sheet', '0001', {shape: shapes.s0001})
this.hero.label = BALL;
this.hook = null;
//Fire the hook
this.input.on("pointerdown", this.fireHook, this);
this.rope = null;
//Listen for collisions with the hook
this.matter.world.on("collisionstart", function(e, b1, b2){
if((b1.label == HOOK || b2.label == HOOK) && !this.rope) {
Phaser.Physics.Matter.Matter.Body.setStatic(this.hook, true);
let distance = Phaser.Math.Distance.Between(this.hero.body.position.x, this.hero.body.position.y, this.hook.position.x, this.hook.position.y);
if (distance > gameOptions.heroSize * 2) {
this.rope = this.matter.add.constraint(this.hero, this.hook, distance, 0.1);
}
}
}, this);
}
fireHook(e) {
if(this.hook) {
this.releaseHook();
}
else {
let angle = Phaser.Math.Angle.Between(this.hero.body.position.x, this.hero.body.position.y, e.position.x, e.position.y);
this.hook = this.matter.add.rectangle(this.hero.body.position.x + 40 * Math.cos(angle), this.hero.body.position.y + 40 * Math.sin(angle), 10, 10);
this.hook.label = HOOK;
Phaser.Physics.Matter.Matter.Body.setVelocity(this.hook, {
x: gameOptions.hookSpeed * Math.cos(angle),
y: gameOptions.hookSpeed * Math.sin(angle)
});
}
}
releaseHook() {
if(this.rope) {
this.matter.world.removeConstraint(this.rope);
this.rope = null;
}
if(this.hook){
this.matter.world.remove(this.hook);
this.hook = null;
};
}
update() {
// is there a constraint? Shrink it
if(this.rope){
this.rope.length -= gameOptions.constraintSpeed;
let hookPosition = this.hook.position;
let distance = Phaser.Math.Distance.Between(hookPosition.x, hookPosition.y, this.hero.body.position.x, this.hero.body.position.y);
if(distance - this.rope.length > gameOptions.ropeTolerance){
this.rope.length = distance;
}
this.rope.length = Math.max(this.rope.length, gameOptions.heroSize * 2);
}
}
}
编辑 - 我越来越近了。现在没有错误,但是,没有绳子被射
你可以像这样得到sprite
位置X和Y:
hero.body.position.x
hero.body.position.y
我们来看看this.hero.
"Cannot read property 'x' of undefined"表示this.hero.position.x[=44中x前声明的属性 =] 未找到,并且可能不存在于其父项 属性 中。在这种情况下,this.hero 不包含 position 属性.
我们在控制台输入属性可以看到this.hero的属性,代码是运行:
您可以看到位置不存在作为可访问的属性。
在你的情况下,你需要使用 body 属性.
此 属性 包含包含 x 和 y 坐标的 position 属性。
因此,作为结论,使用以下行访问 this.hook 的 x 和 y 坐标:
this.hero.body.position.x
this.hero.body.position.y
(此回答是对本题first revision的回应)
我正在使用 Phaser 3 制作游戏,特别是 Matter 物理引擎。我正在尝试按照本教程进行投掷物理 https://www.emanueleferonato.com/2019/03/08/fling-unity-game-built-in-html5-with-phaser-and-matter-js-updated-with-the-latest-constraints-tweaks-fly-through-the-screen-with-your-ninja-rope/
let game;
let gameOptions = {
gravity: 1,
constraintSpeed: 2,
hookSpeed: 20,
ropeTolerance: 6
};
const BALL = 1;
const HOOK = 2;
window.onload = function() {
let gameConfig = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
parent: "thegame",
width: 1200,
height: 750
},
scene: playGame,
physics: {
default: "matter",
matter: {
gravity: {
y: gameOptions.gravity
},
debug: true
}
}
}
game = new Phaser.Game(gameConfig);
window.focus();
};
class playGame extends Phaser.Scene{
constructor(){
super("PlayGame");
}
preload() {
//Load background image
this.load.image('background', 'images/background.png');
this.load.atlas('sheet', 'assets/spiderTP.png', 'assets/spiderTP.json');
this.load.json('shapes', 'assets/spritesPE.json');
}
create() {
//Place background image
let background = this.add.image(600, 375, 'background');
//Update the game at 30Hz
this.matter.world.update30Hz();
//Get hitboxes
var shapes = this.cache.json.get('shapes');
//Set boundaries for physics
this.matter.world.setBounds(0, 0, game.config.width, 800);
//Player
this.hero = this.matter.add.sprite(600, 500, 'sheet', '0001', {shape: shapes.s0001})
this.hero.label = BALL;
this.hook = null;
//Fire the hook
this.input.on("pointerdown", this.fireHook, this);
this.rope = null;
//Listen for collisions with the hook
this.matter.world.on("collisionstart", function(e, b1, b2){
if((b1.label == HOOK || b2.label == HOOK) && !this.rope) {
Phaser.Physics.Matter.Matter.Body.setStatic(this.hook, true);
let distance = Phaser.Math.Distance.Between(this.hero.body.position.x, this.hero.body.position.y, this.hook.position.x, this.hook.position.y);
if (distance > gameOptions.heroSize * 2) {
this.rope = this.matter.add.constraint(this.hero, this.hook, distance, 0.1);
}
}
}, this);
}
fireHook(e) {
if(this.hook) {
this.releaseHook();
}
else {
let angle = Phaser.Math.Angle.Between(this.hero.body.position.x, this.hero.body.position.y, e.position.x, e.position.y);
this.hook = this.matter.add.rectangle(this.hero.body.position.x + 40 * Math.cos(angle), this.hero.body.position.y + 40 * Math.sin(angle), 10, 10);
this.hook.label = HOOK;
Phaser.Physics.Matter.Matter.Body.setVelocity(this.hook, {
x: gameOptions.hookSpeed * Math.cos(angle),
y: gameOptions.hookSpeed * Math.sin(angle)
});
}
}
releaseHook() {
if(this.rope) {
this.matter.world.removeConstraint(this.rope);
this.rope = null;
}
if(this.hook){
this.matter.world.remove(this.hook);
this.hook = null;
};
}
update() {
// is there a constraint? Shrink it
if(this.rope){
this.rope.length -= gameOptions.constraintSpeed;
let hookPosition = this.hook.position;
let distance = Phaser.Math.Distance.Between(hookPosition.x, hookPosition.y, this.hero.body.position.x, this.hero.body.position.y);
if(distance - this.rope.length > gameOptions.ropeTolerance){
this.rope.length = distance;
}
this.rope.length = Math.max(this.rope.length, gameOptions.heroSize * 2);
}
}
}
编辑 - 我越来越近了。现在没有错误,但是,没有绳子被射
你可以像这样得到sprite
位置X和Y:
hero.body.position.x
hero.body.position.y
我们来看看this.hero.
"Cannot read property 'x' of undefined"表示this.hero.position.x[=44中x前声明的属性 =] 未找到,并且可能不存在于其父项 属性 中。在这种情况下,this.hero 不包含 position 属性.
我们在控制台输入属性可以看到this.hero的属性,代码是运行:
您可以看到位置不存在作为可访问的属性。
在你的情况下,你需要使用 body 属性.
此 属性 包含包含 x 和 y 坐标的 position 属性。
因此,作为结论,使用以下行访问 this.hook 的 x 和 y 坐标:
this.hero.body.position.x
this.hero.body.position.y
(此回答是对本题first revision的回应)