Search the Community
Showing results for tags 'zoom'.
-
Hi everybody, I'm new on this library and I landed here for the offered support on Pixi library. I'm trying to migrate a .net 2D engine to Angular project. This homemade engine only handles rectangles and allows developers to manage simply the model and return the rectangle to draw, after applying zoom and pan. You can zoom in one or two directions and drag&drop. Obviously we do not only draw rectangles, but by approximating the geometry to a rectangle we can draw any path. Up to now I have tried the viewport and cull library, to manage zoom and cull (I have a model with 200k-300k rectangles) I'm studying / experimenting with Pixi, and I'm worried about the zoom. Do you have any general suggestion? Not only for the zoom, but, for example, is it better to use graphics or sprites? -
Today I got a headache from how... why... phaser3 handles the camera.setZoom(); - First thing I learned: all bodies need to be recalculated after .setZoom. - in WebGL works as expected. - in Canvas, Tilemaps are huge, the zoom isn't on point and even by recalculating the bodies, collision is way off. This could be reproduced by using this code and setting WebGL / Canvas. The code behaves differently depending on which you choose, and neither of both has a valid result. Am I missing something? Game config: // Game config type: Phaser.WEBGL, width: WIDTH, height: HEIGHT, scene: Level, resolution: 1, pixelArt: true, antialias: false, hidePhaser: true, roundPixels: true, backgroundColor: '161C22', zoom: 1, physics: { default: 'arcade', arcade: { gravity: { x: 0, y: 250 }, debug: true } }, tilemaps and camera: // Tilemap method setMap() { // # Add Tilemap this.config.map = this.make.tilemap({ key: 'map', tileWidth: 8, tileHeight: 8 }) const tileset = this.config.map.addTilesetImage('tilemap'); // # Add Tilemap Layers this.config.layers.background = this.config.map.createDynamicLayer(0, tileset); this.config.layers.midground = this.config.map.createDynamicLayer(1, tileset) this.config.layers.ground = this.config.map.createDynamicLayer(2, tileset); this.config.layers.forground = this.config.map.createDynamicLayer(3, tileset); this.config.layers.water = this.config.map.createDynamicLayer(4, tileset); // # Configure Tilemap Layers // replace with array of actual bodies this.config.layers.ground.setCollisionBetween([]); this.config.map.objects[0].objects.forEach((obj)=>{this.setMapObject(obj)}); // # Configure z indexes this.config.layers.background.setDepth(0); this.config.layers.midground.setDepth(1); this.config.layers.ground.setDepth(2); this.config.layers.objects.setDepth(3); this.config.layers.enemies.setDepth(4); this.config.layers.player.setDepth(5); this.config.layers.effects.setDepth(6); this.config.layers.water.setDepth(7); this.config.layers.forground.setDepth(8); this.config.layers.overlays.setDepth(9); this.config.layers.ui.setDepth(10); this.setTransition(); } // # Configure main camera const m = this.config.map; this.physics.world.setBounds(0, 0, m.widthInPixels, m.heightInPixels, true, true, true, true); this.cameras.main.setBounds(0, 0, m.widthInPixels, m.heightInPixels); this.cameras.main.setZoom(8); this.cameras.main.setRoundPixels(true); this.cameras.main.useBounds = false; this.config.layers.ground.setCollisionBetween(0, 8000); // add sprites this.config.player = new Player({ scene: this, x: 20, y: 30}); this.cameras.main.startFollow(this.config.player); this.physics.add.collider(this.config.player, this.config.layers.ground); Any thoughts, on this, would be helpful.
-
Hi, i'm looking to get any solution form resizing the 'game' correctly in desktop and mobile screens but no way. I get the background image (sprite) non centralized and zoomed stage. Anyone can tell me please what's the wrong? CSS body { background-color: rgb(0, 0, 0); width: 100%; height: 100%; overflow: hidden; } #pixi-canvas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } JS const logicalWidth = 1280 // window.innerWidth; const logicalHeight = 720 // window.innerHeight; // Init Application let app: PIXI.Application = new PIXI.Application(logicalWidth, logicalHeight, { backgroundColor: 0x2c3e50, roundPixels: true, resolution: window.devicePixelRatio, autoResize: true }); app.view.id = 'pixi-canvas'; // Add canvas to DOM document.body.appendChild(app.view); { ... } let background: PIXI.Sprite = PIXI.Sprite.fromImage("bg"); rootContainer.addChild(background); app.stage.addChild(background); { ... } this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); window.addEventListener('resize', () => { this.resizeHandler(app.stage, app.renderer, logicalHeight, logicalWidth); }); private resizeHandler(stage: PIXI.Container, renderer: any, logicalHeight: number, logicalWidth: number) { const scaleFactor = Math.min( window.innerWidth / logicalWidth, window.innerHeight / logicalHeight ); let newWidth: number = Math.ceil(logicalWidth * scaleFactor); let newHeight: number = Math.ceil(logicalHeight * scaleFactor); console.log('size', {w: logicalWidth, h: logicalHeight, newW: newWidth, newH: newHeight, scaleFactor: scaleFactor}); renderer.resize(newWidth, newHeight); stage.scale.set(scaleFactor); }; RESULT
-
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.
-
How would you link a screen pinch gesture to manipulating a PhotoDome fovMultiplier property? -
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, What's the best approach to avoid anti-alias (blurred pixels) when i scale my game? Thanks.
-
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 :)!
-min(1).thumb.jpg.8044792a1aeff55b5384cab8c1abea7c.jpg)
