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 38 results

  1. 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!
  2. 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?
  3. 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 ...
  4. 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.
  5. 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
  6. 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.
  7. 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:
  8. Hi, What's the best approach to avoid anti-alias (blurred pixels) when i scale my game? Thanks.
  9. 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
  10. 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
  11. 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 :)!
  12. 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!
  13. 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
  14. 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 ?
  15. 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?
  16. 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.
  17. 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>
  18. 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!
  19. 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!
  20. 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
  21. 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?
  22. Pinch to zoom

    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?
  23. 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?
  24. zoom image in fix box

    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.