我是Phaser的新手,想知道我是否在正确的轨道上。目标是从其他图像中拖动连接有多条线的图像,并在拖动图像时使这些线随图像一起移动。我认为帖子底部的示例是一个很好的起点。我基于此的代码如下。任何帮助,如果这是可能的,以及在正确方向上的任何指针,将不胜感激。谢谢
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: {
preload: preload,
create: create,
update: update
}
};
var path;
var curve;
var graphics;
var game = new Phaser.Game(config);
function preload ()
{
this.load.spritesheet('dragcircle', 'assets/sprites/dragcircle.png', { frameWidth: 16 });
}
function create ()
{
graphics = this.add.graphics();
path = { t: 0, vec: new Phaser.Math.Vector2() };
curve = new Phaser.Curves.Line([ 100, 100, 600, 400 ]);
curve2 = new Phaser.Curves.Line([ 100, 100, 300, 100 ]);
var point0 = this.add.image(curve.p0.x, curve.p0.y, 'dragcircle', 0).setInteractive();
var point1 = this.add.image(curve.p1.x, curve.p1.y, 'dragcircle', 0).setInteractive();
var point3 = this.add.image(curve2.p0.x, curve2.p0.y, 'dragcircle', 0).setInteractive();
var point4 = this.add.image(curve2.p1.x, curve2.p1.y, 'dragcircle', 0).setInteractive();
point0.setData('vector', curve.p0);
point1.setData('vector', curve.p1);
point3.setData('vector', curve2.p0);
point4.setData('vector', curve2.p1);
this.input.setDraggable([ point0, point1,point3,point4]);
this.input.on('dragstart', function (pointer, gameObject) {
gameObject.setFrame(1);
});
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
gameObject.x = dragX;
gameObject.y = dragY;
gameObject.data.get('vector').set(dragX, dragY);
});
this.input.on('dragend', function (pointer, gameObject) {
gameObject.setFrame(0);
});
}
function update ()
{
graphics.clear();
graphics.lineStyle(2, 0xffffff, 1);
curve.draw(graphics);
curve2.draw(graphics);
}