JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://examples.phaser.io/_site/js/phaser.js"></script>
JavaScript
// TODO: When mouse is going out of canvas, you need to click into canvas to get game react again
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
preload: preload,
create: create,
update: update
});
function preload() {
game.load.image('backdrop', 'http://fc04.deviantart.net/images/i/2003/39/d/c/Dirt___Ground_Cracks.jpg');
game.load.image('test', 'http://png-3.findicons.com/files/icons/1588/farm_fresh_web/32/box.png');
}
function create() {
game.world.setBounds(0, 0, 1920, 1200);
var ground = game.add.sprite(0, 0, 'backdrop');
var test = game.add.sprite(300, 300, 'test');
test.inputEnabled = true;
test.input.enableDrag(true);
}
var o_camera;
var cameraDrag = 5;
var cameraAccel = 3;
var camVelX = 0;
var camVelY = 0;
var camMaxSpeed = 80;
function update() {
drag_camera(game.input.mousePointer);
drag_camera(game.input.pointer1);
update_camera();
}
function drag_camera(o_pointer) {
if (!o_pointer.timeDown) {
return;
}
if (o_pointer.isDown && !o_pointer.targetObject) {
if (o_camera) {
camVelX = (o_camera.x - o_pointer.position.x) * cameraAccel;
camVelY = (o_camera.y - o_pointer.position.y) * cameraAccel;
}
o_camera = o_pointer.position.clone();
}
if (o_pointer.isUp) {
o_camera = null;
}
}
function update_camera() {
camVelX = clamp(camVelX, camMaxSpeed, -camMaxSpeed);
camVelY = clamp(camVelY, camMaxSpeed, -camMaxSpeed);
game.camera.x += camVelX;
game.camera.y += camVelY;
//Set Camera Velocity X Drag
if (camVelX > cameraDrag) {
camVelX -= cameraDrag;
} else if (camVelX < -cameraDrag) {
camVelX += cameraDrag;
} else {
camVelX = 0;
}
//Set Camera Velocity Y Drag
if (camVelY > cameraDrag) {
camVelY -= cameraDrag;
} else if (camVelY < -cameraDrag) {
camVelY += cameraDrag;
} else {
camVelY = 0;
...