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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 30 results

  1. 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
  2. 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 :)!
  3. 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
  4. 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!
  5. 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
  6. 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 ?
  7. 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 directly with, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the 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
  8. 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?
  9. 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.
  10. 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>
  11. 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!
  12. 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!
  13. 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
  14. As you probably know, when you are scaling the world in Phaser, the center point by default is (0,0). Been trying to zoom to a mouse pointer's coordinates but failed miserably with no luck. Anyone here managed to get this work?
  15. So I added HammerJS in my project and got it working. I am trying to zoom in/out to/from a specific point when I am pinching in/out. Basically I need to calculate the midpoint between my 2 fingers. So I did something like this var x1 = game.input.pointer1.worldX;var y1 = game.input.pointer1.worldY;var x2 = game.input.pointer2.worldX;var y2 = game.input.pointer2.worldY;var middleX = (x1+x2)/2;var middleY = (y1+y2)/2;This gives me the point I need to zoom in/out to/from. Keep in mind I using scale to do so and I am doing something like if(pinchin){scale-=0.05;}else if(pinchout){scale+=0.05;}I also have a group of sprites that I am scaling everytime pinch is executed. Here's the tricky part, that middle point (x,y) that I am getting changes on scale so I need to get the point after the scale and move the camera accordingly. If I do something like = middleX * scale; = middleY * scale;It doesn't really work well. In fact, it is not accurate at all and the camera moves in a weird way. How would you do it and what am I missing?
  16. I know this has been asked many times but I am trying to understand the maths behind this function and how it works. Basically I want to zoom in to where the mouse is pointing. Assume the scale is always changing by 0.1. And assume I have a background and a point(x,y). If my cursor is on that point and I use the mousewheel to zoom in, the camera should scale up and focus on that point until the maximum scale has been reached (i.e: scale=1 is the max). What are the things I need to take into account when doing that?
  17. hi i am trying to design a game like Close Up game( how can i zoom image in the fixed box? when i set sacle property ,it change width and Height image. i want to fix width and height when i change scale property. and show like below image. i see this link ,that code change size of image box. i need to scale my image in the fixed box . please guide me thanks.
  18. So I am having a problem whenever I am zooming out the map. The scale of all the assets are done correctly except when I zoom out, their position on the map change. I am not changing sprite.x/y, it is just that when the map is scaling things move around and I tried doing something like //pseudo-codeif(zoomOut){ sprite.x *= scale; sprite.y *= scale;}but that didn't work since that sent the sprites off the map eventually. Here's an example of what is going on. So this is the game when zoom is maxed out (scale=1) this is when the scale is 0.9 (you can see the sprites aren't where they were originally placed) At scale=0.7 (now it is even more obvious) What do you guys think?
  19. Hey guys, I know I have been posting a lot recently but you guys have been helping me out so I appreciate it so much! So I have a map and on it are several sprites. I implemented a zoom features so that whenever you scroll up/down (mouse) it will zoom in/out. The problem I am having is that when I am fully zoomed out (based on a threshold I set), a black bar at the bottom appears. The way I am zooming in/out is simply done by altering the on scroll up/down. I also implemented a mouse pointer based scroll to move around when parts of the map aren't shown. Zoom in code which is in create() = mouseWheel; var t =,200); function mouseWheel(event) { if (event.wheelDelta > 0 && worldX<=1) { worldX += 0.1; worldY += 0.1; = worldX; = worldY; myPlayer.body.setSize(50*worldX,50*worldX,20*worldX,80*worldX); myHouse.body.setSize(150*worldX,50*worldX,20*worldX,240*worldX); myCharacter.body.setSize(110*worldX, 20*worldX, 0, 120*worldX);, 0, 5263*worldX, 2636*worldX); } else if (event.wheelDelta < 0 && worldX>=0.40) { worldX -= 0.1; worldY -= 0.1; } else { t.stop(); } = worldX; = worldY; myPlayer.body.setSize(50*worldX,50*worldX,20*worldX,80*worldX); myHouse.body.setSize(150*worldX,50*worldX,20*worldX,240*worldX); myCharacter.body.setSize(110*worldX, 20*worldX, 0, 120*worldX);, 0, 5263*worldX, 2636*worldY); }and here's the mouse pointer scroll that changes the camera which is in update() if( &&>this.current X){ -= 8; this.currentX =; } if( &&<this.current X){ += 8; this.currentX =; } if( &&>this.current Y){ -= 8; this.currentY =; } if( &&<this.current Y){ += 8; this.currentY =; }Note: I am setting the world bouds based on the map's width and height like this, 0,,;and here's a screenshot of what it looks like when fully zoomed out What do you think the problem is?
  20. Hi there ! I have a small question, I am looking for the best way to make a mesh match the camera clipping plane. The only issue I am getting is that the camera is always zooming/unzooming because the mesh never perfectly fits the clipping plane... I made a simple Playground scene to show the issue : You can increase the zoomingSteps value if you can't see the issue. Thanks in advance for your help, I will keep you informed if I find a solution.
  21. Hello, I understand that we can "zoom" into a displayObjectContainer using the 'scale' property. I currently have one large such container which contains all of my graphics. However, on increasing the scale point, the screen zooms into the top left corner of the screen (presumably some kind of anchor point?). Is there any way to have the screen scale towards a specific point or anchor? i.e Zooming into the cursor position for example. At the moment, the displayObjectContainer seems to have no anchor property. ie. (Can we achieve a 'zoom' into a specific x/y point?) or even just a decimal anchor point of some sort? Much appreciated, Jordan
  22. Hi, I already created a topic for this but my idea has evolved and I think it is better to create a new topic. For the record , I have an animated plane with several "hole" (only one in the example) . Currently when we click the image that we see through the hole , it zooms to the picture.But that's not what I want . What I want is that we have the impression " to go inside " the hole, and that the image is in full page at the end of the animation , so no zoom the image, just in full screen display. I don't know if this is understandable. Maybe when you zoom, it could detect when the image is full screen, and in this case continue the zoom on the plane to be certain " to enter the hole" and put the image backward ( reduce ) in the same time to keep the image in full screen and does not zoom to it. Or maybe assign a different zoom speed between the plane and the image ? Then when the image is in full screen, I will need an html page to reduce the image and put a description (I know how to do that). I thinking of 2 solutions but I don't know how to do for the both : Solution 1 : Remove the images from the scene to put it behind the canvas with HTML. The problem is that to put the images I have to calculate the hole center, but I don't know how to transfer this coordinate on the html page to place the image. Solution 2 : Keep the images in the canvas, and at the zoom end, "switched" on the html when the image is in full screen. In both cases, I think that a kind of parallax effect will be necessary to zoom in the hole, while extending the image to put it in full screen. Thanks, Do not hesitate to ask questions , I know that what I want to do is perhaps a bit complicated to understand.
  23. Hey guys. I think I've come across a bug, hopefully someone else has encountered it and has a solution. For the game I'm currently making I need a camera that can zoom, to achieve this I decided to put everything I want to be affected by the 'zoom' into a group and scale it. This works perfectly, however, I noticed around the perimeter of TileSprites within the group a 1px grey border appears intermittently. This only seems to happen on TileSprites with transparency. I have tried using both renderers and the problem persists. I recreated the problem in isolation here: Any help would be greatly appreciated!
  24. Hey there, I'm new to Phaser development and am currently trying to build a zoomable, draggable world map. Dragging works fine, but I can't get the zooming to work correctly. The background of my world map is Sprite containing the background image. This sprite is in a Group with some other sprites (something like cities on the map). When I now scale the whole group using something like game.add.tween(mapGroup.scale).to({x: scaleX, y:scaleY}, 50, null, true);everything works fine, but the anchor for scaling is always the upper left corner. With Sprites, I can set the anchor property to define where the anchor of the scaling is located, how would I do that for a whole group? My goal is: If I point the mousecursor at let's say New York on the world map, then zoom in, the mousecursor should still be located at NY after the scaling. This is probably pretty obvious for someone experienced with 2D graphics development, any help would be greatly appreciated. Thanks a lot
  25. I'm currently trying to visualize large number of data points (around ~100k) using d3.js and SVG. An example of what I am currently using is - The problem with SVG is that the performance becomes really sluggish when trying to visualize large number of points. That is why I was wondering, if I can utilize the power of WebGL using Pixi.js to implement the same requirements. Any tips on how to go about in this direction would be helpful.