Search the Community

Showing results for tags 'drag'.

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 65 results

  1. Greetings, When adding CSS border-style or padding to the canvas element, I found that the hit zones of dragged objects shift off the sprite, presumably in proportion to the CSS values. Below code shows this error (FF & Chrome). For test.png I used a 100x100 square. If you try to drag the sprite while the mouse pointer is directly over it, it won't move. Move the pointer outside & to the left of the sprite & you'll be dragging it. Even with setting: this.scale.scaleMode = Phaser.ScaleManager.NO_SCALE; this.scale.pageAlignHorizontally = false; this issue still occurs. I came to this, because I wanted a border or side alley to the left & right of the game canvas in a different color. It seems Phaser hijacks the entire width & adding padding to wrapper divs showed up outside the entire width, not next to the canvas element. Anyone know a way to control the padding outside & to the left/right of the canvas element that Phaser creates? Thank You! <html> <head> <script src="assets/js/lib/phaser.js" type="text/javascript"></script> <script> window.onload = function () { var game = new Phaser.Game(768, 1024, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update }); function preload() { console.log('Hey World');'test', 'assets/img/test.png'); } function create() { this.test =,, 'test'); this.test.anchor.setTo(0.5, 0.5); this.test.inputEnabled = true; this.test.input.enableDrag(); } function update() { } }; </script> <style> canvas { border-color: #ffffff; border-width: 3em; border-left-style: solid; border-right-style: solid; border-top-style: none; border-bottom-style: none; padding-left: 3em; padding-right: 3em; } </style> </head> <body> <div id='game-wrapper'><div id='game'></div></div> </body> </html>
  2. Hi guys, Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle PD: I want to simulate Fabric.js with pivots, check my example => Can somebody help me? Thanks in advance, Nicholls
  3. Hi guys, Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle PD: I want to simulate Fabric.js in Phaser, check my example => Can somebody help me? This is a plugin for Phaser Thanks in advance, Nicholls
  4. eduar.londono

    How Drag sprite around circle

    How drag sprite around circle? Thanks!
  5. In version 2.4.4, when dragging an sprite with the mouse if we moved outside the game area, when the mouse got back in, the sprite continued being dragged. This was not desired in certain situations (people asked here on "how to prevent sticky drags") but continue dragging is desirable in many other situations. However, in versions >2.4.5, the dragging stops when the mouse gets out. In some games, this is very nasty for a player that lose control of the sprite being dragged. You can check this in the example: Note that: Phaser version can be changed below the code and when run icon is pressed you can test it. Line 36 needs to be commented to test with version 2.4.4. Is there any way to set up the old behaviour in the newer versions?
  6. I am kind of lost in this events system. I have a button which when i press it creates new graphics object. I want to be able to drag this object while the mouse button is down and when I release it this object should be destroyed. Tried several things but I am lost in sending context objects. How this functionality should be done correctly? ( I remember in Flash was easy, just use startDrag() and the newly created object start to follow the mouse as you move it) Here is my sample code which works partially: var horizontalBaffleBtn = null, horzBaffle = null; horizontalBaffleBtn = gameObject.add.button(10, 10, frnConstr.ImageAssetKeys.HORIZONTAL_BAFFLE); horizontalBaffleBtn .events .onInputDown .add(function () { this.frnPart = this .grUtils .drawRect(this.context, gameObject.input.x, gameObject.input.y, 50, thickness, constGr.DEFAULT_GRAPHICS_BORDER_SIZE, constGr.Colors.BLACK, 1, utils.getHexColor(shelveCssColor), 1); this.frnPart.inputEnabled = true; this.frnPart.input.enableDrag(false); this.frnPart.input.start(0, true); }, {context: grContext, grUtils: this, frnPart: horzBaffle}); console.log(horzBaffle);// prints null () { this.destroy(); // breaks here, horzBaffle is null }, horzBaffle);
  7. In many strategy games it's common that the world is larger than what you see on the screen, and the user will "drag" themself around the level to move around the world. How can I implement this in Phaser? I've seen examples to drag sprites within a level, but not to drag basically the camera view itself. Something like this example: but where you are moving by dragging with either the mouse or the touch instead of the arrow keys
  8. mohammed alsaqqal

    shoot moving object

    i want a way to make the pointer or input catch a moving object and shoot or throw it to a any direction that user want >> like i want to catch a moving balls .. and shoot or throw it to it home ..
  9. Hi everybody, Here's my problem. I have a group, which I scale or rotate. Now if I drag a sprite in it, the sprite moves totally wrong. Its shift is scaled and rotated too! var gr = ;var sp = gr.create( 100, 100, 'face' ) ;gr.scale.x = -2 ;sp.enableInput = true ;sp.input.enableDrag( true ) ; Say, if the group is flipped by group.scale.x = -1, the sprite motion will be mirrored: the sprite and the cursor go different directions. Looks more like a bug of dragging. I'd appreciate any practical advice or workarounds. I have a big tree of nested groups, do I need to implement a multistage cast of the input coordinates? Thank you.
  10. dawe484

    Drag/drop in fix window/area

    Hi, I'm developing my first web game and I have small problem. Uncaught TypeError: this.constrainBackground is not a function .... on line 50 I dont know what I'm doing wrong. Any ideas? Thx (This is about that the user can drag/drop background image only from left to right in the window (fix size window).
  11. Hi, it is possible to drag and offset the texture in Phaser.Rope along points?
  12. MDP Monkey

    Drag drop game

    Right, I'm new. Hello! This might help someone. It's an example of drag and drop, collision detection and physics (a drag puzzle game). I sketched it pretty quickly, and I'm sorry it's not commented. Bit messy but you should be able to grab the helpful bits. I had a nightmare putting this together to be honest, but on the 5th evening this is the result, so I'm pleased. I'll update it soon to make things clearer. SHARE YOURS! <html xmlns=""><head> <script src="hand.js"></script> <script type="text/javascript" src="cannon.js"></script> <script src="babylon.js"></script> <script src="jquery.min.js"></script> <script type="text/javascript" src="oimo.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } .debugDiv{ display:nones; } </style> </head> <body> <div class="debugDiv"></div> <canvas id="renderCanvas"></canvas> <script> var boxes = new Array(); var materials = new Array(); var box1, box2, blueBox, camera, scene, ground; var canvas = document.querySelector("#renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var mazeSize = 3; var createScene = function(){ scene = new BABYLON.Scene(engine); var canvas = engine.getRenderingCanvas(); var startingPoint; var currentMesh; var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 5, 0), scene); camera.setPosition(new BABYLON.Vector3(200,150, 10)); scene.clearColor = new BABYLON.Color3(0, 0, 0); camera.attachControl(canvas, true); scene.enablePhysics(new BABYLON.Vector3(0, -500, 0), new BABYLON.OimoJSPlugin()); ground = BABYLON.Mesh.CreateGround("ground", 1000, 1000, 1, scene, false); ground.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:0, friction:0.5, restitution: 1}); ground.visibility = 0; createWalls(); createBoxes(); var getGroundPosition = function(){ var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh){return mesh == ground;}); if(pickinfo.hit){return pickinfo.pickedPoint;} return null; } var onPointerDown = function (evt) { if (evt.button !== 0){return;} var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function(mesh){ return mesh !== ground;}); if(pickInfo.hit){ currentMesh = pickInfo.pickedMesh; startingPoint = getGroundPosition(evt); if(startingPoint){setTimeout(function(){camera.detachControl(canvas);}, 0);} } } var onPointerUp = function(){if(startingPoint){camera.attachControl(canvas, true); startingPoint = null; return;}} var onPointerMove = function(evt){ if(!startingPoint){return;} var current = getGroundPosition(evt); if(!current){return;} var diff = current.subtract(startingPoint); if(currentMesh.draggable){return;} currentMesh.moveWithCollisions(diff); startingPoint = current; currentMesh.updatePhysicsBodyPosition(); } $(canvas).bind("pointerdown", onPointerDown).bind("pointerup", onPointerUp).bind("pointermove", onPointerMove); scene.onDispose = function(){$(canvas).unbind("pointerdown", onPointerDown).bind("pointerup", onPointerUp).bind("pointermove", onPointerMove);} return scene; }; function createBoxes(){ matUnit = (1/mazeSize); blocks = new Array(); for(x=0;x<mazeSize;x++){ for(y=0;y<3;y++){ //materials materialsIndex = materials.length; materials[materialsIndex] = new BABYLON.StandardMaterial("texture1", scene); var m = materials[materialsIndex]; = materialsIndex; m.diffuseTexture = new BABYLON.Texture("profilePic.jpg", scene); m.diffuseTexture.uScale = 1/mazeSize; m.diffuseTexture.vScale = 1/mazeSize; m.diffuseTexture.uOffset = matUnit*(-(x+1)); m.diffuseTexture.vOffset = matUnit*(0+y); boxIndex = boxes.length; boxes.push(BABYLON.Mesh.CreateBox("red", 49.9, scene)); var b = boxes[boxIndex]; = materialsIndex; b.position.y = 25.1; b.position.x = 50-(50*y); b.position.z = 50-(50*x); b.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:0.1, friction:0.1, restitution:0.1}); b.checkCollisions = true; b.ellipsoid = new BABYLON.Vector3(24, 24, 24); coords = [Math.round(b.position.x),Math.round(b.position.z)]; m.coords = coords; b.coords = coords; if(x == mazeSize-1 && y == mazeSize-2){ coords = [Math.round(b.position.x),Math.round(b.position.z)]; m.coords = coords; b.coords = coords; break; } } } swapArrayElements(boxes, 5, 7); swapArrayElements(boxes, 4, 7); //swapArrayElements(boxes, 3, 7); //shuffle(boxes); for(x=0;x<materials.length;x++){boxes[x].material = materials[x];} } function createWalls(){ wallScaleAxis = new Array("x","z","x","z"); wallDimsArr = new Array([25*mazeSize, 25, 0],[0,25,25*mazeSize],[0-(25*mazeSize),25,0],[0,25,0-(25*mazeSize)]); wallsArr = new Array(); lightsArr = new Array(); for(x=0;x<4;x++){ lightsArr[x] = new BABYLON.PointLight("omni", new BABYLON.Vector3(wallDimsArr[x][0]*2, 150, wallDimsArr[x][2]*2), scene); lightsArr[x].intensity = 0.3; wallsArr[x] = BABYLON.Mesh.CreateBox("ground", 50*mazeSize, scene); var w = wallsArr[x]; w.scaling[wallScaleAxis[x]] = 0.001; w.scaling.y = 0.5; w.position = new BABYLON.Vector3(wallDimsArr[x][0], wallDimsArr[x][1], wallDimsArr[x][2]); w.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:0}); w.checkCollisions = true; w.draggable = true; w.ellipsoid = new BABYLON.Vector3(25*mazeSize, 25, 0.01); w.showBoundingBox = false; w.visibility = 0; } } var scene = createScene(); engine.runRenderLoop(function(){scene.render();}); $(window).bind("resize", function(){engine.resize();}); function swapArrayElements(arr, indexA, indexB){ var temp = arr[indexA]; arr[indexA] = arr[indexB]; arr[indexB] = temp; return arr; }; function shuffle(array) { var currentIndex = array.length, temporaryValue, randomIndex; // While there remain elements to shuffle... while (0 !== currentIndex) { // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; // And swap it with the current element. temporaryValue = array[currentIndex]; array[currentIndex] = array[randomIndex]; array[randomIndex] = temporaryValue; } return array; } doer = 0; function showBoxPos(){ doer++; $(".debugDiv").html(doer) correct = 1; for(x=0;x<boxes.length;x++){ boxes[x].coords = [Math.round(boxes[x].position.x),Math.round(boxes[x].position.z)]; if(!(boxes[x].coords.toString() == materials[x].coords.toString())){correct++; break;}; } for(x=0;x<4;x++){ if(correct <= 1){ for(y=0;y<boxes.length;y++){ boxes[y].setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:-10}); boxes[y].updatePhysicsBodyPosition(); boxes[y].draggable = true; } clearTimeout(boxTimer); ground.setPhysicsState(BABYLON.PhysicsEngine.BoxImpostor, {mass:1, friction:0.5, restitution: 1}); break; } } } var boxTimer = setInterval(showBoxPos, 1) </script> </body> </html>
  13. SteppingRazor

    Chess game prototype

    Hello, I just discovered phaser. For my first test project I wanted to create some kind of 2d chess game. To make it simple, for my first task i decided to display board and a pawn. And assign to this pawn moving rules. As you all probably know pawns move forward by 1 tile and on their first move they may advance by 2 squares. I managed to display sprites representing board and a pawn. I've enabled dragging to pawn sprite and I'm stuck. Now in my application you can drag the pawn and drop it anywhere, even outside the board. I need any advice/hint how can I force the pawn to go back to previous position if the user drop it on wrong square. I didn't found any examples on this forum or on the front page, how can I achieve that. Can you help a little?
  14. Note: I'm using lodash utility library together with Phaser I wanted to trigger the dragging event of a sprite after a "long press" event from an onInputDown event which is determined on the update function via a delta property. The problem is, the dragging event is not triggered after enabling it using card.input.enableDrag(). I've also used the dispatch() function that looks like this:, the dragging will start but it will not update the position of the sprite. I also wanted to disable the dragging after onDragStop, so that I can "long press" it again and enable dragging. var card;create: function() { // Initialize card sprite card = this.add.sprite(x, y, 'card'); card.inputEnabled = true; // Add Event Handlers;;; // Set delta for long press to null card.delta_long_press = null;},update: function() { // Check if card is not yet draggable and delta_long_press is not null if(card.input.draggable == false && !_.isNull(card.delta_long_press)) { var timesince = - card.delta_long_press; // Check if timesince is greater than or equal to a second // Then enable dragging of the card if(timesince >= 1000) { card.input.enableDrag(); } }},eventCardInputDown: function() { // Set delta_long_press to now card.delta_long_press =;},eventCardDragStart: function() { console.log('DRAG START'); // Some code},eventCardDragStop; function() { console.log('DRAG STOP'); // Some code}
  15. Sakuk3

    Dragging Buttons

    I´m trying to add a button to a draggable sprite but as soon as i do that i´m not able anymore to click the button. Is there any solution to this problem?
  16. Nicholls

    DragStart With Box2D plugin?

    Hi guys! How you can drag with Box2d plugin on mobile? In the examples I only see the following function it only works with the mouse Thanks in advance
  17. Hello, I am familiar with JS, and new to Phaser. I am seeing if Phaser will be the framework for me, and something I am having issue with is getting a tilemap to pan when a pointer is dragged across it. All of the docs I am seeing on the drag input is connecting those events to a sprite, which isn't what I want. Am I missing something, is there an example showing this off? Also, in general with developing in Phaser.. Is it generally one "correct way" to create and style UI elements? Can you create standard HTML buttons outside of a game window and still connect events to those buttons to trigger things in game? Thanks in advance!
  18. I have a group of tiles that I want to drag around. This is the behavior I want: Clicking a tile in the group should trigger a click event on it. Dragging anywhere should drag the group. If you released from a drag, it shouldn't trigger a click event on any sprite. Right now I'm using `` on my tiles, so when I finish dragging it still triggers a click event.
  19. niallos

    Drag camera with easing

    How would I go about adding easing when the camera is dragged on my phaser example At the moment the movement ends straight away as soon as the drag is finished. I'd like it to carry on for a moment and decelerate ( similar to when you scroll through a list on a smartphone ). Thanks very much
  20. Hi all! I'm currently working on an activity for children. - They have a set of puzzle pieces (more a Tangram really). One of those pieces is fixed, the other they can drag around. Each piece will feature an image, randomly selected, that is a pair with another image placed on a fixed piece; So far I have the image sorting done (it's an array of words, that correspond to an image and sound that have the exact same naming convention. Whenever you pick an even number, you'll get the even number plus one - pairs ) I have the general event.onInputDown sorted from a previous activity I tackled (just needs a few tweaks). My issue at the moment is with the puzzle pieces + image: I think I should make them as groups: one for the fixed pieces, one for the moving pieces; I will create a new element/child(?) of each group, at position x, y). Issue: scale the puzzle pieces... I tried setAll(0.5, 0.5); tried anchor... then read groups don't really have anchors so ... Whatever I tried I only got, as a result, that the puzzle pieces seemed to stretch and move outside the game area... I need to add the randomly selected images on top of the moving pieces of puzzle and be able to drag the entire thing on one go... I have established on my script the variables for the groups and image. I tried the code below (trying/testing with just one element each at the time): fixedGrp =;puzzleGrp =; for(var i = 0; i < 3; i++){ if(i == 0){ fixedGrp.create(68, 68, 'piece1'); }else if(i == 1){ fixedGrp.create(68, 318, 'piece1'); }else if(i == 2){ fixedGrp.create(68, 568, 'piece1'); } } // should use a for as above puzzleGrp.enableBody = true; puzzleGrp.physicsBodyType = Phaser.Physics.ARCADE; puzzleGrp.create(900, 68, 'piece2'); //puzzleGrp.scale.setTo(0.5, 0.5); image =, 170, 'randomImg', puzzleGrp); image.width = puzzleGrp.width; image.height = puzzleGrp.height; image.inputEnabled = true; image.input.enableDrag(false, true);My idea is that the image will be part of the group and when I drag it, it will bring the group over with it. However... again my scaling attempts fail and I can only drag the image. Any pointers would be appreciated. Cheers! edit: Mistake on post name
  21. lighterletter

    Dragging horizontally locked platform.

    I'm trying to do this using p2 physics in phaser. Essentially dragging a platform that can only be moved horizontally by the mouse which will interact with other elements in the game. Any help is appreciated.
  22. Hey there. I'm stuck with the following problem: I have a game board and some tiles on it. I want to constrain the tiles' movement to a certain paths only. That path is in this case drawn by the red rectangles in the example (which are each a separate sprite), but the problem is that I can only assign one sprite to sprite.input.boundsSprite. I tried adding the other sprites to the first one as children (and adjusting their position accordingly), but that didn't change anything. If I draw all the rectangles to a single sprite, it won't work either as it will only get its outer bounds (and won't take into account the "holes" in this cage). Here's the example. There's only one tile for the sake of the example and it is constrained only to the first rectangle. Any help is greatly appreciated. I might also consider another approach that I may be able to implement. I've also tried other stuff like not using Phaser's InputHandler and implementing drag input myself, but that didn't work reliably. I feel that this example is the closest thing to what I expect to happen, I think that I'm just missing something very obvious. Thanks.
  23. 1ipt0n

    phaser onDragStart not working

    Hi, I'm trying to make simple joystick (yes i know there is a plugin ) for my game. the problem is onDragStart is not working and even if I dont use this event I get error every time I'm starting dragging. everything else is working fine. Even onDragStop is ok. error: Uncaught TypeError: undefined is not a function phaser.js:31216Phaser.InputHandler.startDrag phaser.js:31216Phaser.InputHandler._touchedHandler phaser.js:30885Phaser.Pointer.start phaser.js:29001Phaser.Input.startPointer phaser.js:27272Phaser.Touch.onTouchStart phaser.js:29757_onTouchStart phaser.js:29677// the last line in phaser.js is: if ( { this._onTouchStart = function (event) { return _this.onTouchStart(event); };//the first one: if (this.sprite.fixedToCamera) { if (this.dragFromCenter) { this.sprite.centerOn(pointer.x, pointer.y); this._dragPoint.setTo(this.sprite.cameraOffset.x - pointer.x, this.sprite.cameraOffset.y - pointer.y); } else { this._dragPoint.setTo(this.sprite.cameraOffset.x - pointer.x, this.sprite.cameraOffset.y - pointer.y); } }and there is my code: addJoystick = function(x,y,r, show_level){ var boundries = new Phaser.Rectangle(x-(r/2),y-(r/2),r,r); var bottom =,y); bottom.beginFill(0xFF3300,0.3); bottom.lineStyle(2, 0xffd900, 1); bottom.drawCircle(0,0, r); bottom.fixedToCamera = true; var stick_r = r/2.5; var stick =,y); stick.base_r = r; stick.beginFill(0xFFcc00,0.3); stick.lineStyle(2, 0xffd900, 1); stick.drawCircle(0,0, stick_r); stick.base_cameraOffset = [stick.cameraOffset.x,stick.cameraOffset.y] ; stick.inputEnabled = true; stick.level =0; stick.level_start=false; if(typeof(show_level)!='undefined'){ var level_bar =,y); level_bar.beginFill(0xFF0000,0.8); level_bar.lineStyle(2, 0xffcccc, 1); level_bar.drawCircle(0,0, 1); level_bar.max_r = r; level_bar.fixedToCamera = true; stick.level_bar = level_bar; stick.update = function(){ if(this.level_start){ console.log(this.level_bar); } } } // enableDrag parameters = (lockCenter, bringToTop, pixelPerfect, alphaThreshold, boundsRect, boundsSprite) stick.input.enableDrag(true, true, false, 255, boundries ); stick.fixedToCamera = true; stick.get_x = function(){ var offset = this.base_cameraOffset[0] - this.cameraOffset.x; return (offset/this.base_r)*200; }; stick.get_y = function(){ var offset = this.base_cameraOffset[1] - this.cameraOffset.y; return (offset/this.base_r)*200; };{ item.level_start=true; item.level =0; }, this);{ item.cameraOffset.x = item.base_cameraOffset[0]; item.cameraOffset.y = item.base_cameraOffset[1]; item.level =0; item.level_start=false; }, this); return stick;};
  24. Hello, Is there any way to get the original position of the sprite in the onDragStart event when the lockCenter is activated? I would like to restore the position of the sprite if the user try to drop it in a wrong place, but the position of the sprite has already changed to be centered with the cursor when the onDragStart event is triggered, so in my opinion it's impossible to get the original position? (Except if I backup myself the position in my sprite object) Maybe we should add a new param to the onDragStart event with the position of the sprite before the centering, or call the onDragStart event before the centering, but in this case we can create issues with existing codes. What do you think? Vulvulune
  25. Hi guys! In Phaser Can I create targets for draggable objects? For example: PD: that drop the item if it is above the other object or otherwise return Thanks in advance, Nicholls