zoom i/o
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.2.2/phaser.min.js"></script>
JavaScript
var oldcamera;
var worldScale = 1;
var currentBounds;
var mapSizeMax;
var worldwidth = 600;
var worldheight = 600;
var mapSizeX = 8000;
var mapSizeY = 8000;
var prevScale = {};
var nextScale = {};
var zoompoint = {};
var mapSizeCurrent;
var distance = 0;
var olddistance = 0;
var distancedelta = 0;
var easing = 0.1;
var Menu = {
preload: function () {
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.scale.setScreenSize(true);
game.load.image('clouds', 'http://bgfons.com/upload/tile_texture3063.jpg');
game.load.image('coin', 'http://png-3.findicons.com/files/icons/1588/farm_fresh_web/32/box.png');
},
create: function () {
worldScale = 1;
stageGroup = game.add.group(); // this group will contain everything except the UI for scaling
backgroundobjects = game.add.group();
groundobjects = game.add.group();
mapSizeMax = mapSizeX;
mapSizeCurrent = mapSizeMax;
coin = game.add.sprite(4000, 4000, 'coin');
coin.scale.setTo(4, 4);
coin.anchor.setTo(0.5, 0.5);
background1 = game.add.tileSprite(0, 0, mapSizeX, mapSizeY, 'clouds');
backgroundobjects.add(background1);
backgroundobjects.add(coin);
stageGroup.add(backgroundobjects);
stageGroup.add(groundobjects);
currentBounds = new Phaser.Rectangle(-mapSizeX, -mapSizeY, mapSizeX * 2, mapSizeY * 2);
game.camera.bounds = currentBounds;
game.camera.focusOnXY(4000, 4000);
game.input.mouse.mouseWheelCallback = function (event) {
var wheelDelt = game.input.mouse.wheelDelta;
if (wheelDelt < 0) {
mapSizeCurrent -= 400;
// mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth , mapSizeMax);
} else {
mapSizeCurrent += 400;
// mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth , mapSizeMax);
...