Hello,
I've been fiddling with the new camera and tilemaps and I've encountered a problem. I have created a tile layer much like in this example for a level editor I'm working on.
var controlConfig = {
camera: this.cameras.main,
left: cursors.left,
right: cursors.right,
up: cursors.up,
down: cursors.down,
speed: 0.5,
disableCull: true,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
};
controls = new Phaser.Cameras.Controls.Fixed(controlConfig);
The problem with this way to handle the zoom is that it produces this kind of effect, The camera zooms out of the whole scene, including things that are fixed to it but leaves the rest of the tiles unrendered and culled.
As you can see here, zooming should show more of the green tiles; but zooming out only made the tilemap layer and the contents of the scene smaller, when I'd like it to render more of the tilemap's tiles.
I've tried updating with .setBounds, .setSize and .setViewport with a key call after zooming out but I may have missed something obvious...
Any help greatly appreciated.
EDIT: To clarify further; the camera has no trouble moving around inside the tilemap layer using the arrow keys but it shows black bars around on zooming out.

Hi guys,
I'm new to this and I have an issue in my current working project(it's first in phaser). I want to know how can I zoom in the game when it's opened in a mobile browser? The game is too small and I want to zoom and slide the whole canvas in the browser window. I can do this from outside the canvas but I cannot drag then from the canvas itself.
Please help!
Thank you.

Hi,
I'm using Pixi since several days on a game prototype which consists in a map made of tiles.
The problem is that I got a big map (2000px / 2000px), so it don't fit a desktop screen, and not any mobile screen.
I am looking for a way to allow the user to
pan (i.e. navigating on the canvas with mouse drag and drops (for desktop) and with the finger (for mobile devices)
zoom in / out the canvas
Like in google maps for example
Any idea of an embedded feature I can use?
Thanks in advance for you answers.

Hello,
I'm using Phaser v3.11.0-beta1 (last commit) and I'm trying to use dynamic tilemap system. I don't know if this is the expected behavior, but I can't zoom in on the tilemap.
Check this example from labs.phaser.io, when you add that to line 51 :
this.cameras.main.setZoom(2);
Zoom seems to be inverted, and when I do a setZoom(1/2) I get a strange result too.
I also tried this other example, but nothing is displayed. Is that normal? I'm new to Phaser, so I'm still missing some things.
Someone who understood how dynamic tilemap works could explain it here? Thanks.

Hello everyone,
I'm quite a newbie in babylon and I've been reading a lot to understand how things work.
Finally, I could make a scene work with an ortho camera, including the possibility of zooming with the mouse wheel. But when I zoom out, an effect appears that I can not understand: the camera goes to the opposite side despite the frustrum is always positive. I tried many different things but I can not understand what is happening.
I created an example in babylon playground: http://www.babylonjs-playground.com/#U543PM#1
Just zoom out with the mouse wheel and see what happens.
I know that I am missing something, but I have no idea of what it is, so any idea or suggestion is welcome.
Thanks in advance.

I'm working on a project where on mobile version you can use two fingers to zoom in and out, pan and rotate a rectangle.
How would that work on a desktop or laptop computer with a mouse? Any suggestions?

Hi,
I'm currently making a litlle top-down shooter game with Phaser.
I'm using the method bellow to aim towards the mouse's position.
sprite.rotation = game.physics.arcade.angleToPointer(sprite);
This work very well, but I would like to allow the player to zoom in and out. I was following this idea : http://jsfiddle.net/NMNJ7/25/ which use the game.world.scale.set() method;
But when I change the world's scaling, the angleToPointer() method is completly lost and it's impossible to aim.
You can try this little exemple I've made to understand what goes wrong : https://jsfiddle.net/TomLeGrand/uh7d10eu/127/
Do someone has an idea to fix this?
Thanks for you futur help

I'm working on a "fake zoom" function that looks like this:
class Zoomer extends Phaser.Group {
zoom = (amount = { x: 1.5, y: 1.5 }) => {
this.x = -((amount.x * (this.game.width / 2)) - (this.game.width / 2));
this.y = this.game.camera.bounds.y - (amount.x * (this.game.height * 1.15));
this.scale.setTo(amount.x, amount.y);
}
}
The zooming itself works and goes where I want it to but all the masks in the group stay where they are and don't scale at all.
This is how I usually create masks on a Phaser.Sprite:
createMask() {
const graphics = this.game.add.graphics(this.x, this.y);
graphics.beginFill(0xFFFFFF);
graphics.drawRect(0, 0, this.width, this.height);
this.addChild(graphics);
this.mask = graphics;
}
How can I make the group scaling/repositioning include the group's sprites' masks as well?

Hey everyone!
I am trying to achieve a zoom on an element using PIXI
I have currently a graphics rectangle (see first image) It is the child of my stage which is the main container being rendered. My main container is as big as the browser screen.
On clicking the graphics element I want the stage to zoom in in a way that I get this output (see second image)
As you can see on the desired output I want the rectangle to take up the whole container. I am confused with what pivots do I choose and what new positioning do I set to achieve this and till what point do I scale this?

Is there a way to control the distance or zooming of the reflected image. Check the two screen shots... Look at the mountains and scenery reflected in the larger sphere.
The fist shot is from unity and it SHOW MORE of the reflected scenery behind... The second shot is my babylon but the reflected images are MUCH closer or ZOOMED in more
so you see LESS of the reflected scenery in sphere... How can I control the ZOOM or reflected image distances ???
First Shot (Unity Rendered):
Second Shot (Babylon Render)
And Notice the difference in the ZOOM factor of the reflected scenery
I need to ZOOM OUT a touch so it can match the WYSIWYG design time render of the unity scene
NOTE: I luv how CRISP and CLEAN the baked shadows are... SWEET
Yo @Deltakosh ... I am working on sending up the toolkit with documentation... Can you PLEASE start to work on that SHADER BUG/ISSUE where you cant have a ambient occlusion texture and a lightmapTexture (use as shadow map) at the same time... If people DONT KNOW that there is an issue and try to bake lights but wonder why they dont see the shadows... Most likely that scene (especially if you download from the asset store) will have ambient occlusion textures... So you won't see shadows in you scene. They show up in the sample screen shots I post in other thread because I went and REMOVED the ambient occlusion from the floor and walls.
I will be uploading the first part of toolkit (The Scene Manager) and that Starting Documentation Stuff I told you about...
Anyways, if you can do that so when folks get there hands on the toolkit, it will work

I have been working tirelessly with this and really struggling to get anywhere, if anyone can offer some form of assistance I would be greatly appreciative.
I have essentially set up a reel of characters (staff) as sprites organised by co'ords in three circles, 12 characters per circle, around the camera set at (0,0,0), (Radius of circles are 1.5/1.45/1.4 I have a scene built currently which is super buggy in movement as well.
I need it to when the mouse hovers on the left or right side of the screen to rotate the camera continuously scrolling through the images on loop (Cant get working past following the mouse - no loop - no smooth movement as mouse movement on y axis also rotates the camera.
This is my mouse movement code:
var mouse = {x:0,y:0};
var cameraMoves = {x:0,y:0,z:-0.1,move:false,speed:0.03};
function mouseMove(e){
mouse.x = e.clientX;
mouse.y = e.clientY;
camera.rotation.x += Math.max(Math.min((e.clientX - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
camera.rotation.y += Math.max(Math.min((e.clientY - mouse.x) * 0.01, cameraMoves.speed), -cameraMoves.speed);
The second main issue i'm having is that the sprites keep disappearing when rotating the camera, I'm trying to create a constant panable image reel from inside to view members of staff, there is an example i'm trying to follow and recreate found here: https://www.g-star.com/en_gb/raw
If anyone could tell me how to solve me mouse hover to move issue (with infinite looping) or a fix for the rendering of sprites issue it would be great!
If anyone thinks they can help and needs any more code of any kinds just let me know and i''ll sort it! Thanks!

Hi Guys there,
There is a game with multiple layers. The lowest one is the water. Camera is above. The layers are scaled differently and moving with different speed imitating that its a 3D world. I want to use only a screen size tile sprite rectangle for the water to avoid full world broad animated tile map. There is a zoom navigation tool which scales all the layers up and down based the on the centre of the screen and I want to zoom the water as well.
Question one: Can I set the "anchor" base point for the scale on a tile sprite? I couldn't find any property for it. And the base point is the top left corner by default.
Question two: Does it make sense to try saving hardware resources in this way? The water surface has to be about 20 times bigger than the screen.
Many thanks for any help.

i want to zoom to player position using pixi features.
According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center.
How about do a little more and zoom to the user position and make it look natural? I am currently using this
const scaleDelta = -0.1;
const offsetX = - (user.x * scaleDelta);
const offsetY = - (user.y * scaleDelta);
const currentScale = container.scale.x;
let nScale = currentScale + scaleDelta;
container.position.x += offsetX;
container.position.y += offsetY;
container.scale.set(nScale);
This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?

I'm invoking the camera.zoomOn function in two ways:
a) at the end of the function createScene
on mouse double-click
see the playground https://www.babylonjs-playground.com/index2_5.html#TXNNZH
My questions are:
Invoking from createScene does not zoom (check the playground). What should I do differently?
Zooming on mouse-double-click works fine. However, when doble-clicking in Microsoft Edge or Google Chrome, the mouse focus moves away from the canvas. Consequently, when I try to rotate immediately after double-clicking I'm moving the complete canvas element instead. If I just single-click immediately after the double-click, there is no problem, the mouse control is back. Thus, this is not a serious issue, however I know that it can be solved easily ... BTW, this cannot be recreated in the playground ...

Hey there,
I've ran into an issue which I really can't get my head around.
I've made a tilemap in Tiled and I've successfully rendered it with Phaser.
I can move the map around using arrow keys and mouse and the next I wanted to do is to add a zoom in and zoom out feature (and that's where I'm lost).
In the first screenshot the tilemap is shown 100%. The pink area is just a filled polygon that I mapped out in Tiled.
In other words, it doesn't fill any purpose for what I'm trying to accomplish with the zoom what so ever.
In the second screenshot I've changed the view to 50%.
My intention is to make the map zoom out, but still use the entire canvas. Right now, I see the same piece of map as in screenshot 1. Just smaller.
I wish to see more of the map.
How can this be accomplished? Any help and/or advice is much appriciated.
Here's what I've got.
var game = new Phaser.Game(800, 600, Phaser.WebGL, 'my-map', { preload: preload, create: create, update : update, render : render });
function preload() {
game.load.tilemap('mymap', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('My Map', 'assets/vala_map.jpg');
}
var map;
var layer;
var cursors;
function create() {
game.stage.backgroundColor = '#787878';
map = game.add.tilemap('mymap');
map.addTilesetImage('My Map', 'My Map');
layer = map.createLayer('mymap');
layer.resizeWorld();
cursors = game.input.keyboard.createCursorKeys();
poly = new Phaser.Polygon(map.objects.storelayer[4].polyline);
graphics = game.add.graphics(map.objects.storelayer[4].x, map.objects.storelayer[4].y);
graphics.alpha = 0.2;
graphics.beginFill(0xFF33ff);
graphics.drawPolygon(poly.points);
graphics.endFill();
}
function update() {
if(this.game.input.activePointer.isDown) {
if (this.game.origDragPoint) {
// move the camera by the amount the mouse has moved since last update
this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;
this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y;
}
// set new drag origin to current position
this.game.origDragPoint = this.game.input.activePointer.position.clone();
}
else {
this.game.origDragPoint = null;
}
//this.game.world.scale.setTo(0.5, 0.5);
// zoom
if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) {
this.game.world.scale.setTo(1, 1);
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
this.game.world.scale.setTo(0.5, 0.5);
}
if(cursors.up.isDown){
game.camera.y -= 4;
}
else if(cursors.down.isDown){
game.camera.y += 4;
}
if(cursors.left.isDown){
game.camera.x -= 4;
}
else if(cursors.right.isDown){
game.camera.x += 4;
}
}
function render() {
game.debug.cameraInfo(game.camera, 32, 32);
}
Regards,
entiendoNull

Hi Guys,
The issue I'm having at the moment is with zooming and pinching a web page (pinching on laptops) with my game in it - causes the game to zoom in and therefore change the UI of the game. A demo can be seen here of the issue, simply zoom/scroll to see various bugs appear throughout the game once a new game has started: https://jamdonut.com/prod/0.8.2/
I can't seem to find just one solution for disabling zoom and pinch altogether on all browsers - am I missing something here? Any clues or tips, the renderer is PixiJS.
Thanks, Jammy.

I'm trying to get my tilemap to scale and I'm basically following the example here: https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js#L17
However, what ends up happening is the tilemap itself will scale but the frames won't. I can't record a GIF because for some reason the screen randomly flashes white when running the PIXI app, but here are some screenshots which may be helpful:

Hi there, I'm trying to zoom out the entire game world from the center.. unfortunately I see no method for the camera for zooming out so I'm scaling the game.world directly with this.game.world.scale.setTo(0.5, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the game.world as well as the pivot to the center of the world or the center of the stage to no avail. Is it possible to achieve what I'm trying to do? Thanks for any thoughts - Nick

Hello,
Sorry if the question has already been answered.
I'm a very junior developper so go easy on me
I would like to interact within a mesh depending on the zoom of the camera
Here is the playground
Imagine when I get closer to a box, this one just explode or disappeared to show some boxes into it.
Thanx for your help
Jessica

I am trying to implement a zoom/drag functionality with some menus over the map. Think of Age o Empires 3, you basically have a map on which you can do zoom and drag, but you also have som menus that are always over the screen. Check this for clarity.
So far. I have implemented the zoom/drag by modyfing the x, y and scale attributes of game.scale. But this work pretty good when the scale is big enough to cover the whole screen. But what I need is some kind of viewport that is smaller than the screen (like in Age of Empires) where all the zoom/drag works. The remaining parts of the screen that are not part of the viewport are filled by the UI menus. So far I have put the menus outside the world like I posted here.
I attached an image with what I mean by viewport and menus in case is not clear
Thanks :)!

Hi,
I implemented a two finger zoom using the game.camera.scale propierty to zoom the game. I also implemented a drag functionality using game.camera.x and game.camera.y propierties.
But now I need to add static floating sprites, such that they are always in the same position on the screen regardless the zoom or the drag movement. But when I add them as sprites (game.add.sprite) they are affected by the camera propierties (x,y,scale). I read this and set fixedToCamera to true, it works partially, the (x,y) is static, but the when I zoom in (increase game.camera.scale) the size of the floating sprites also increases.
Is there any way I could add sprites that are not dependent on the camera?
Thanks!