Search the Community

Showing results for tags 'zoom'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 43 results

  1. GUI suggestion for desktop version

    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?
  2. 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 * ( / 2)) - ( / 2)); this.y = - (amount.x * ( * 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.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?
  3. 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 : which use the 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 : Do someone has an idea to fix this? Thanks for you futur help
  4. Zooming a graphic/container/element on click

    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?
  5. 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
  6. Camera and Sprite

    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: 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!
  7. 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?
  8. 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 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 ...
  9. Pixi.JS / Pan & Zoom Canvas

    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.
  10. I'm trying to get my tilemap to scale and I'm basically following the example here: 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:
  11. 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: 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.
  12. Hi, What's the best approach to avoid anti-alias (blurred pixels) when i scale my game? Thanks.
  13. 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
  14. 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 :)!
  15. Hi, I implemented a two finger zoom using the propierty to zoom the game. I also implemented a drag functionality using and 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 the size of the floating sprites also increases. Is there any way I could add sprites that are not dependent on the camera? Thanks!
  16. Hey guys, I'm playing around with Babylon a little bit and the posibilities are amazing! Maybe a little to much at the beginning. This question maybe sounds silly for you but I still hope you can and will help me. I tried to stop the camera zoom by mouseWheel but I want to keep the rotation but nothing I'm doing is working. When I do this:, false, true) I can zoom with the wheel and rotate with the keyboard and the wheel. If I don't have this line I can't zoom but of course don't rotate either. Is there a line I have to add or a parameter I need to set to false? I'm thankful for every suggestion. Google wasn't much of a help. Thanks. Jay
  17. How to zoom linearly ?

    Hi, Adding the possibility of zooming in my game when scrolling the mouse, how to repeatedly zoom in the same amount of "space" ? I mean, I want that the camera move linearly. I tried to modify the stage.scale by 0.1, but the sequence of zoom is not uniform. Next, I tried add +- 500 to stage.width (resp. stage.height) but it has the same result: zoom in becomes too weak and zoom out becomes too strong. Idem by doing it on the renderer. How would you handle it ?
  18. I work on a simple game prototype which uses the tilemap I have a scene which extends PIXI.Container and has a map made out of individual pats of a texture atlas. At the end I have simple piece of code for zooming my scene by mousewheel, when I scale the scene the tiles sprites will have a small gap between them or they may overlay each other at certain points. I tried to solve my problem the following ways: 1) I've tried to use this settings PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; 2) I've tried to set up my canvas like this: canvas { image-rendering: pixelated; } 3) I've tried to set up antialias property to true and vice versa 4) I've tried to use Math.round to the position of each tile as well as to the position of whole scene 5) I've tried to set up cacheAsBitmap = true to the whole scene 6) I've try to use pixi-tilemap from there, I made there small changes in the basic example, but I've got the same result Nothing was helpful This is my code which I use for zooming: var self = stage; rendererviewaddEventListener('mousewheel'function(event) { var factor = delta = eventwheelDelta || -eventdetailpoint = new PIXIPoint(eventpageX / 1 eventpageY /1); // на сколько минимально можно отдалить объект var MIN_SCALE = 0.25; // максимально можно приблизить объект var MAX_SCALE = 1; var local_pt = selftoLocal(point); var curScale = selfscaley; if ( delta > 0) { // Zoom in factor = 0.1; } else{ // Zoom out factor = -0.1; } if(factor > 0 && curScale >= MAX_SCALE) { //; } else if(factor < 0 && curScale <= MIN_SCALE) { //; } else { var parentLocal = point; selfpivotx = Mathround(local_ptx); selfpivoty = Mathround(local_pty); selfpositionx = Mathround(parentLocalx); selfpositiony = Mathround(parentLocaly); selfscaleset(selfscalex + factor); } }); Does anyone know how to solve it?
  19. Tilemap zoom in and out

    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 =[4].x, map.objects.storelayer[4].y); graphics.alpha = 0.2; graphics.beginFill(0xFF33ff); graphics.drawPolygon(poly.points); graphics.endFill(); } function update() { if( { if ( { // move the camera by the amount the mouse has moved since last update += -; += -; } // set new drag origin to current position =; } else { = null; } //, 0.5); // zoom if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) {, 1); } else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {, 0.5); } if(cursors.up.isDown){ -= 4; } else if(cursors.down.isDown){ += 4; } if(cursors.left.isDown){ -= 4; } else if(cursors.right.isDown){ += 4; } } function render() { game.debug.cameraInfo(, 32, 32); } Regards, entiendoNull
  20. I am back with another crazy thingy! I have here for your pleasure, a playground! I have some notes at the top of the playground but let me break this shiz down for you. I am trying to modify the arcRotateCamera's beta based on mouse wheel scroll. I have this sort of working.. well, it does work... BUT, I am having trouble with it; it's choppy and just not right. I'm trying to get it smooth like butter (have easing). The idea is the closer you get to the target, the beta changes so you go from a top(ish) view to more of a 45-40 degree angle looking at the target. Make sense? I just made a hand motion explaining but you can't see it.. trust me.. I did it. I added some textures to help you see the choppiness. My guess, is I need to maybe use a percentage of a range for the scroll/angle, but I have no clue; math and I do not get along. I could be wrong on that.. not about math and I not agreeing, that I am sure of. I tried calling the angle/scroll event in various places (registerBeforeRender/AfterRender) to try and determine why it's choppy but there was no change. I was hoping someone smarter than I am could take a look and provide some feedback. tldr; I suck and need help. thanks.
  21. So, when i tried to remove from my my group "groundobjects" works fine only the first time. I will use a database to conect and get coordinates, there's no problem in that. I add the object to the group and with a timer i remove and add other. The first time works fine, then, when i add other sprite in this case with random positions the other are not removed. What im doing wrong? Ah im using a zoom function that i find in this forum Let my code... <script type="text/javascript"> var x = "<?php echo $_SESSION['coord_x']; ?>"; sessionStorage.setItem("c_x", x); var y = "<?php echo $_SESSION['coord_y']; ?>"; sessionStorage.setItem("c_y", y); alert(" " + x + "," + y + " "); function getWidthAndHeight() { var w = (this.width) / 2; var h = (this.height) / 2; sessionStorage.setItem("Ancho", w); sessionStorage.setItem("Alto", h); return true; } function loadFailure() { alert("'" + + "' failed to load."); return true; } var myImage = new Image(); = "assets/gray.jpg"; myImage.onload = getWidthAndHeight; myImage.onerror = loadFailure; myImage.src = "assets/gray.jpg"; var oldcamera; var worldScale = 1; var currentBounds; var mapSizeMax; var worldwidth = 1024; var worldheight = 720; var mapSizeX = 8000; var mapSizeY = 4000; var prevScale = {}; var nextScale = {}; var zoompoint = {}; var mapSizeCurrent; var distance = 0; var olddistance = 0; var distancedelta = 0; var easing = 0.1; var game = new Phaser.Game(worldwidth, worldheight, Phaser.AUTO, '', {preload: preload, create: create, update: update}); function preload() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setScreenSize(true); game.load.image('clouds', 'assets/gray.jpg'); game.load.image('dude', 'assets/body.png'); game.load.image('diamond', 'assets/diamond.png'); } function create() { timer = game.time.create(false); timer.loop(5000, updateStars, this); timer.start(); worldScale = 1; stageGroup =; // this group will contain everything except the UI for scaling backgroundobjects =; groundobjects =; mapSizeMax = mapSizeX; mapSizeCurrent = mapSizeMax; background1 = game.add.sprite(0, 0, 'clouds'); backgroundobjects.add(background1); stageGroup.add(backgroundobjects); sprite = game.add.sprite(sessionStorage.getItem("c_x"), sessionStorage.getItem("c_y"), 'dude'); groundobjects.add(sprite); stageGroup.add(groundobjects); currentBounds = new Phaser.Rectangle(-mapSizeX, -mapSizeY, mapSizeX * 2, mapSizeY * 2); = currentBounds;"Ancho"), sessionStorage.getItem("Alto")); game.input.mouse.mouseWheelCallback = function (event) { var wheelDelt = game.input.mouse.wheelDelta; if (wheelDelt < 0) { mapSizeCurrent -= 150; mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); } else { mapSizeCurrent += 150; mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); } worldScale = (mapSizeCurrent / mapSizeMax); }; } function update() { //touch zoom if (game.input.pointer1.isDown && game.input.pointer2.isDown) { olddistance = distance; distance = Phaser.Math.distance(game.input.pointer1.x, game.input.pointer1.y, game.input.pointer2.x, game.input.pointer2.y); distancedelta = Math.abs(olddistance - distance); if (olddistance > distance && distancedelta > 4) { mapSizeCurrent -= 150; } else if (olddistance < distance && distancedelta > 4) { mapSizeCurrent += 150; } mapSizeCurrent = Phaser.Math.clamp(mapSizeCurrent, worldwidth, mapSizeMax); //prevent odd scalefactors - set a minimum and maximum scale value worldScale = (mapSizeCurrent / mapSizeMax); //calculate point between fingers (zoompoint.x and zoompoint.y) if (game.input.pointer1.x < game.input.pointer2.x) { zoompoint.x = game.input.pointer1.worldX + (Math.abs(game.input.pointer1.worldX - game.input.pointer2.worldX) / 2); } else { zoompoint.x = game.input.pointer2.worldX + (Math.abs(game.input.pointer1.worldX - game.input.pointer2.worldX) / 2); } if (game.input.pointer1.y < game.input.pointer2.y) { zoompoint.y = game.input.pointer1.worldY + (Math.abs(game.input.pointer1.worldY - game.input.pointer2.worldY) / 2); } else { zoompoint.y = game.input.pointer2.worldY + (Math.abs(game.input.pointer1.worldY - game.input.pointer2.worldY) / 2); } } else { // wheelzoom zoompoint.x = game.input.mousePointer.worldX; zoompoint.y = game.input.mousePointer.worldY; } // move camera / pan if (game.input.activePointer.isDown && !game.input.pointer2.isDown) { if (oldcamera) { // if moving the world always continue from the last position += oldcamera.x - game.input.activePointer.position.x; += oldcamera.y - game.input.activePointer.position.y; } oldcamera = game.input.activePointer.position.clone(); } // adjust camera center and zoom here else { oldcamera = null; rescalefactorx = mapSizeX / (mapSizeX * stageGroup.scale.x); // multiply by rescalefactor to get original world value rescalefactory = mapSizeY / (mapSizeY * stageGroup.scale.y); prevScale.x = stageGroup.scale.x; prevScale.y = stageGroup.scale.y; nextScale.x = prevScale.x + (worldScale - stageGroup.scale.x) * easing; nextScale.y = prevScale.y + (worldScale - stageGroup.scale.y) * easing; var xAdjust = (zoompoint.x - * (nextScale.x - prevScale.x); var yAdjust = (zoompoint.y - * (nextScale.y - prevScale.y); //Only move screen if we're not the same scale if (prevScale.x != nextScale.x || prevScale.y != nextScale.y) { var scaleAdjustX = nextScale.x / prevScale.x; var scaleAdjustY = nextScale.y / prevScale.y; var focusX = ( * scaleAdjustX) + xAdjust * (rescalefactorx); var focusY = ( * scaleAdjustY) + yAdjust * (rescalefactory);, focusY); } //now actually scale the stage stageGroup.scale.x += (worldScale - stageGroup.scale.x) * easing; //easing stageGroup.scale.y += (worldScale - stageGroup.scale.y) * easing; } } function updateA() { groundobjects.destroy(); stageGroup.remove(groundobjects); } function updateStars() { updateA(); sprite = game.add.sprite(100+Math.random() * 900, 100+Math.random() * 900, 'dude'); groundobjects.add(sprite); stageGroup.add(groundobjects); } </script>
  22. Zoom

    Hi everyone! I think I placed my last post accidentally in the wrong forum So I am running into a little problem and I was searching through several posts without any luck. I used Phaser 2.3 for the game I have been working on for a couple of months now and recently switched to 2.5. The Zoom functionality I was/am using, broke as a result of my update. I have been using valueerrors' zoom code (as a reference And it works greatly with Phaser 2.3, but unfortunately breaks using 2.5 I made a fiddler adopting his code and added some debugging logs trying to figure out why it breaks. I hope somebody knows what is going on or can push me into the right direction. One weird thing I noticed is that after zooming and trying to move around, it snaps back to to the top left position, unless you wait till the Focus value 'stabilized'. I looked at the Phaser example for zooming and also I found this code But I really liked the zooming functionality I had been using, that's why I am rather looking for a fix. If valueerror is reading this, thank you for sharing your beautiful code!
  23. Zoom

    Hi everyone! So I am running into a little problem and I was searching through several posts without any luck. I used Phaser 2.3 for the game I have been working on for a couple of months now and recently switched to 2.5. The Zoom functionality I was/am using, broke as a result of my update. I have been using valueerrors' zoom code (as a reference And it works greatly with Phaser 2.3, but unfortunately breaks using 2.5 I made a fiddler adopting his code and added some debugging logs trying to figure out why it breaks. I hope somebody knows what is going on or can push me into the right direction. One weird thing I noticed is that after zooming and trying to move around, it snaps back to to the top left position, unless you wait till the Focus value 'stabilized'. I looked at the Phaser example for zooming and also I found this code But I really liked the zooming functionality I had been using, that's why I am rather looking for a fix. If valueerror is reading this, thank you for sharing your beautiful code!
  24. Hi, I am trying to implement a feature where in, the meshes need to be fit to say 80% of the canvas size. Created a playground in order to try this, when I double click, I try to zoom all. I require help in finding a relation between bounding info of mesh, with the width and height of canvas so that 1. the mesh should be centered in the canvas 2. the mesh should fit 80% area of the canvas. I am not sure if this was asked in older posts, please help. Regards Rajkumar