xxxxxxxxxx
function preload ()
{
this.load.image('sao', 'assets/pics/sword-art-online.jpg');
}
function create ()
{
this.add.sprite(400, 300, 'sao');
var graphics = this.add.graphics();
graphics.fillStyle(0x000000, 0.5);
graphics.fillRect(0, 0, 800, 600);
graphics.setVisible(false);
var text = this.add.text(0, 0, 'Move the mouse out and over the game canvas');
this.input.on('gameout', function () {
graphics.setVisible(true);
});
this.input.on('gameover', function () {
graphics.setVisible(false);
});
xxxxxxxxxx
function preload ()
{
this.load.atlas('cards', 'assets/atlas/cards.png', 'assets/atlas/cards.json');
}
function create ()
{
// Create a stack of random cards
var frames = this.textures.get('cards').getFrameNames();
var x = 100;
var y = 100;
for (var i = 0; i < 64; i++)
{
var image = this.add.image(x, y, 'cards', Phaser.Math.RND.pick(frames)).setInteractive();
this.input.setDraggable(image);
y += 6;
}
// A drop zone positioned at 600x300 with a circular drop zone 128px in radius
var zone = this.add.zone(600, 300).setCircleDropZone(128);
// Just a visual display of the drop zone
var graphics = this.add.graphics();
graphics.lineStyle(2, 0xffff00);
graphics.strokeCircle(zone.x, zone.y, zone.input.hitArea.radius);
this.input.on('dragstart', function (pointer, gameObject) {
this.children.bringToTop(gameObject);
}, this);
this.input.on('drag', function (pointer, gameObject, dragX, dragY) {
gameObject.x = dragX;
gameObject.y = dragY;
});
this.input.on('dragenter', function (pointer, gameObject, dropZone) {
graphics.clear();
graphics.lineStyle(2, 0x00ffff);
graphics.strokeCircle(zone.x, zone.y, zone.input.hitArea.radius);
});
this.input.on('dragleave', function (pointer, gameObject, dropZone) {
graphics.clear();
graphics.lineStyle(2, 0xffff00);
graphics.strokeCircle(zone.x, zone.y, zone.input.hitArea.radius);
});
this.input.on('drop', function (pointer, gameObject, dropZone) {
gameObject.x = dropZone.x;
gameObject.y = dropZone.y;
gameObject.input.enabled = false;
});
this.input.on('dragend', function (pointer, gameObject, dropped) {
if (!dropped)
{
gameObject.x = gameObject.input.dragStartX;
gameObject.y = gameObject.input.dragStartY;
}
});
---------------------------------------------------------------------------------------
xxxxxxxxxx
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
pixelArt: true,
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.path = 'assets/animations/aseprite/';
this.load.aseprite('paladin', 'paladin.png', 'paladin.json');
}
function create ()
{
var tags = this.anims.createFromAseprite('paladin');
var sprite = this.add.sprite(500, 300).play({ key: 'Magnum Break', repeat: -1 }).setScale(6);
for (var i = 0; i < tags.length; i++)
{
var label = this.add.text(32, 32 + (i * 16), tags[i].key, { color: '#00ff00' });
label.setInteractive();
}
this.input.on('gameobjectdown', function (pointer, obj) {
sprite.play({
key: obj.text,
repeat: -1
});
});
this.input.on('gameobjectover', function (pointer, obj) {
obj.setColor('#ff00ff');
});
this.input.on('gameobjectout', function (pointer, obj) {
obj.setColor('#00ff00');
});
}
xxxxxxxxxx
function preload ()
{
this.load.image('eye', 'assets/pics/lance-overdose-loader-eye.png');
}
function create ()
{
for (var i = 0; i < 14; i++)
{
this.add.sprite(100 + i * 30, 100 + i * 30, 'eye').setInteractive();
}
// If you disable topOnly it will fire events for all objects the pointer is over
// regardless of their place on the display list
this.input.setTopOnly(false);
// Events
this.input.on('gameobjectdown', function (pointer, gameObject) {
gameObject.setTint(0x00ff00);
});
this.input.on('gameobjectout', function (pointer, gameObject) {
gameObject.clearTint();
});
this.input.on('gameobjectup', function (pointer, gameObject) {
gameObject.clearTint();
});