Phaser 事件系统中的例子
//这里的给对像添加开始拖动和停止拖动事件很有用。
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('grid', 'assets/tests/debug-grid-1920x1920.png');
game.load.image('atari', 'assets/sprites/atari800xl.png');
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
}
var result = 'Drag a sprite';
function create() {
game.add.sprite(0, 0, 'grid');
var atari = game.add.sprite(32, 100, 'atari');
// Enable input and allow for dragging
atari.inputEnabled = true;
atari.input.enableDrag();
atari.events.onDragStart.add(onDragStart, this);//开始拖动事件绑定
atari.events.onDragStop.add(onDragStop, this);//停止拖动事件绑定
var sonic = game.add.sprite(300, 200, 'sonic');
sonic.inputEnabled = true;
sonic.input.enableDrag();
sonic.events.onDragStart.add(onDragStart, this);//开始拖动事件绑定
sonic.events.onDragStop.add(onDragStop, this);//停止拖动事件绑定
}
function onDragStart(sprite, pointer) {
result = "Dragging " + sprite.key;//开始拖就显示这个sprite的名字
}
function onDragStop(sprite, pointer) {
result = sprite.key + " dropped at x:" + pointer.x + " y: " + pointer.y;//停止拖动就显示它的名字和现在的坐标
}
function render() {
game.debug.text(result, 10, 20);//调试
}//这里可以在拖动时把要拖动的对像的Z-INDEX设置在最上，放在最上层，但是停止后也是在最上层，没有设置回去原先的Z值
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
game.load.image('atari4', 'assets/sprites/atari800.png');
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
game.load.image('duck', 'assets/sprites/darkwing_crazy.png');
game.load.image('firstaid', 'assets/sprites/firstaid.png');
game.load.image('diamond', 'assets/sprites/diamond.png');
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
}
function create() {
// This returns an array of all the image keys in the cache
var images = game.cache.getKeys(Phaser.Cache.IMAGE);
var test = game.add.group();
// Now let's create some random sprites and enable them all for drag and 'bring to top'
for (var i = 0; i < 20; i++)
{
var tempSprite = test.create(game.world.randomX, game.world.randomY, game.rnd.pick(images));
tempSprite.inputEnabled = true;
tempSprite.input.enableDrag(false, true);
}
}
function render() {
game.debug.inputInfo(32, 32);
}//这个例子里又加入了在拖动过程中持续更新的事件
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('ship', 'assets/sprites/ship.png');
game.load.image('ball', 'assets/sprites/longarrow.png');
}
var angle = 0;
var dragSprite;
var copySprite;
function create() {
game.stage.backgroundColor = '#2f0f1c';
dragSprite = game.add.sprite(game.world.centerX, game.world.centerY, 'ship');
dragSprite.anchor.set(0.5);
// Input Enable the sprite
dragSprite.inputEnabled = true;
// Allow dragging
dragSprite.input.enableDrag();
// Drag events
dragSprite.events.onDragStart.add(dragStart);
dragSprite.events.onDragUpdate.add(dragUpdate);//就是这个了
dragSprite.events.onDragStop.add(dragStop);
copySprite = game.add.sprite(dragSprite.x + 220, dragSprite.y, 'ball');
copySprite.anchor.set(0, 0.5);
copySprite.alpha = 0.5;
copySprite.angle = 180;
var text = game.add.text(32, 32, "drag the ship", { font: "32px Arial", fill: "#f9b4cf" });
text.setShadow(6, 6, 'rgba(0,0,0,0.8)', 5);
}
function dragStart() {
copySprite.alpha = 1;
}
function dragUpdate(sprite, pointer, dragX, dragY, snapPoint) {
//这里
// As we drag the ship around inc the angle
angle += 0.01;
// This just circles the copySprite around the sprite being dragged
copySprite.x = dragSprite.x + 220 * Math.cos(angle);
copySprite.y = dragSprite.y + 220 * Math.sin(angle);
// And this points the copySprite at the current pointer
copySprite.rotation = game.physics.arcade.angleToPointer(copySprite);
}
function dragStop() {
copySprite.alpha = 0.5;
}效果↑：http://phaser.io/examples/v2/input/drag-update
//这个例子创建了一个鼠标跟随效果，也就是在屏幕上按下鼠标和按下鼠标移动时，对象会向鼠标所在的坐标移动
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('ball', 'assets/sprites/shinyball.png');
}
var sprite;
function create() {
sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'ball');
game.physics.enable(sprite, Phaser.Physics.ARCADE);
}
function update() {
// only move when you click
if (game.input.mousePointer.isDown)
{
// 400 is the speed it will move towards the mouse
game.physics.arcade.moveToPointer(sprite, 400);
// if it's overlapping the mouse, don't move any more
if (Phaser.Rectangle.contains(sprite.body, game.input.x, game.input.y))
{
sprite.body.velocity.setTo(0, 0);
}
}
else
{
sprite.body.velocity.setTo(0, 0);
}
}效果↗：http://phaser.io/examples/v2/input/follow-mouse
//鼠标移动到目标上面，
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('bunny', 'assets/sprites/bunny.png');
}
var bunny;
function create() {
bunny = game.add.sprite(game.world.centerX, game.world.centerY, 'bunny');
bunny.alpha = 0.5;
bunny.anchor.set(0.5);
bunny.inputEnabled = true;
game.input.addMoveCallback(p, this);
// bunny.input.pixelPerfectOver = true;
}
function p(pointer) {
// console.log(pointer.);
console.log(pointer.event);
}
function update() {
if (bunny.input.pointerOver())
{
bunny.alpha = 1;
}
else
{
bunny.alpha = 0.5;
}
}
function render() {
game.debug.text("Over: " + bunny.input.pointerOver(), 32, 32);
game.debug.text(game.input.mouse.locked, 320, 32);
}效果：↑http://phaser.io/examples/v2/input/pointer-over
//这个是拖动时的控制最小移动距离，按多少像素间隔拖动
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('grid', 'assets/tests/debug-grid-1920x1920.png');
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
}
function create() {
game.add.sprite(0, 0, 'grid');
atari1 = game.add.sprite(128, 128, 'atari1');
atari2 = game.add.sprite(256, 256, 'atari2');
// Input Enable the sprites
atari1.inputEnabled = true;
atari2.inputEnabled = true;
// Allow dragging
// enableDrag parameters = (lockCenter, bringToTop, pixelPerfect, alphaThreshold, boundsRect, boundsSprite)
atari1.input.enableDrag();
atari2.input.enableDrag();
// Enable snapping. For the atari1 sprite it will snap as its dragged around and on release.
// The snap is set to every 32x32 pixels.
atari1.input.enableSnap(32, 32, true, true);//不受大小限制 和下面的那个说反了......调过来
// For the atari2 sprite it will snap only when released, not on drag.
atari2.input.enableSnap(32, 32, false, true);//只能按32.32像素的大小进行拖动
}//终于找到要用的了：这个是鼠标点击，返回被点击对像的名字
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');
}
var chick;
var car;
var mech;
var cop;
var text;
function create() {
game.stage.backgroundColor = '#404040';
// This demonstrates pixel perfect click detection even if using sprites in a texture atlas.
chick = game.add.sprite(64, 64, 'atlas');
chick.frameName = 'budbrain_chick.png';
chick.inputEnabled = true;
chick.input.pixelPerfectClick = true;
chick.events.onInputDown.add(clicked, this);
chick.scale.set(2);
cop = game.add.sprite(650, 32, 'atlas');
cop.frameName = 'ladycop.png';
cop.inputEnabled = true;
cop.input.pixelPerfectClick = true;
cop.events.onInputDown.add(clicked, this);
cop.scale.set(1, 2.5);
car = game.add.sprite(100, 400, 'atlas');
car.frameName = 'supercars_parsec.png';
car.inputEnabled = true;
car.input.pixelPerfectClick = true;
car.events.onInputDown.add(clicked, this);
car.scale.set(0.5);
mech = game.add.sprite(240, 100, 'atlas');
mech.frameName = 'titan_mech.png';
mech.inputEnabled = true;
mech.input.pixelPerfectClick = true;
mech.events.onInputDown.add(clicked, this);
mech.scale.set(1.5, 1);
text = game.add.text(16, 16, 'Click a sprite', { fill: '#ffffff' });
}
function clicked(sprite) {
text.text = 'You clicked ' + sprite.frameName;
}效果↗：http://phaser.io/examples/v2/input/pixelpick-atlas-scaled