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
    • Facebook Instant Games
    • 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 68 results

  1. Hi all. I am trying to make a simple top-down, asteroids-like game, where movement is done through Phaser's arcade physics system. I find quite puzzling how angular movement works for it. I've followed a few tutorials, where I find the same issue. What is happening is, when my ship has an angle, thrusting or reversing is quite inconsistent. The ship appears to be "slipping" a bit in random directions, and does not always follow exactly the direction it's facing. The relevant create code is: player.body.maxVelocity.setTo(MAX_SPEED, MAX_SPEED); player.body.drag.setTo(DRAG, DRAG); whereas the relevant update code is: if (cursors.left.isDown) { player.body.angularVelocity = -ROTATION_SPEED; } else if (cursors.right.isDown) { player.body.angularVelocity = ROTATION_SPEED; } else { player.body.angularVelocity = 0; } if (cursors.up.isDown) { player.body.acceleration.x = Math.cos(player.rotation) * ACCELERATION; player.body.acceleration.y = Math.sin(player.rotation) * ACCELERATION; } else if (cursors.down.isDown) { player.body.acceleration.x = -Math.cos(player.rotation) * ACCELERATION; player.body.acceleration.y = -Math.sin(player.rotation) * ACCELERATION; } else { player.body.acceleration.setTo(0, 0); } I don't understand what could be causing this. Is the code just wrong (although I've seen this happening in all the tutorials)? Is it some rounding error? Am I just being crazy seeing this as wrong behavior? Is there any way to achieve the effect I am looking for (moving diagonally back and forth, on a straight line)? You can play around with this here as well.
  2. Hi Is there any sample for dragging and collision detection implemented by actions (new features in v2.4) . my scenario : i have 3 ball(mesh) and 6 placeholder(mesh) on a board(mesh) . i want to drag balls via touch or multi touch to any placeholder on board . i read and implement , its good but i want to use actions and triggers (ActionManager) for pick up/down/move and collision detection. Thanks .
  3. Hello everyone, Is there any way to adjust the drag of a sprite in the air (I know you can do it on the ground)? Right now, when the character in my game jumps into the air off of the ground, it can move horizontally very easily. In other words, the horizontal movement sensitivity is extremely high. Is there any way to reduce this sensitivity and add some sort of drag to the sprite's body when it is in NO contact with any obstacles (i.e. no collisions)? Thanks in advance, srig99
  4. Hello, guys! I have a mail interface in my game, where I need to drag/drop some items to send to another player. Due to the difficulty of the mail interface I decided to develop it vis pure js, html and css and I did it ok. I also made my items' sprites draggable and that's fine too But I faced with such a problem: my draggable item can't hover html ui at all ! I tried to change z-index of html elements and etc, but that didn't help I'd like to find the solution because it's a waste of time to develop this interface from the beggining via Phaser only Thank you very much for your answers!!
  5. 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>
  6. 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
  7. 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
  8. How drag sprite around circle? Thanks!
  9. 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?
  10. 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);
  11. 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 ..
  12. 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.
  13. 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).
  14. Hi, it is possible to drag and offset the texture in Phaser.Rope along points?
  15. 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>
  16. 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?
  17. 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}
  18. 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?
  19. 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
  20. 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!
  21. 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.
  22. 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
  23. 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
  24. 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.
  25. 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.