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
    • 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 58 results

  1. Drag and Drop

    Hi, Is possible make drag and drop using panda.js? So I have did it on pixi.js, but testing panda.js I love it, so get many good things, but now the only thing that I haven't did it is make drag and drop, I have tested events like mousedown, mouseover, but mousemove doesn't exist, but I don't know if I can add event listener to a sprite o or how can I solve this situation. Thanks.
  2. I'm using physics in one of my games, but I'm having trouble getting things to move realistically. I have the player (a bird), and I have objects in a group (trash). The trash I want to be very lightweight, so that it can be knocked around by the bird. Setting mass on both the player and the objects sometimes results in some weird visual stuff, so for now I have taken those lines out. What I really want to solve is the issue of friction. Right now, my code looks like this: this.trash.forEach(function (piece) { piece.anchor.setTo(0.5, 1); piece.body.gravity.y = 5; piece.body.moves = true; piece.body.velocity.setTo(100, 100); piece.body.collideWorldBounds = true; piece.body.bounce.set(0.8); piece.body.friction.x = 1; piece.body.drag.x = 1; }); The trash is gliding around on the floor of the game like wet ice cubes. I thought perhaps introducing another sprite to interact with would help: this.platforms = this.add.physicsGroup(); // Create the ground and set properties. this.platforms.create(0, game.height - 5, 'ground'); this.platforms.setAll('body.allowGravity', false); this.platforms.setAll('body.immovable', true); this.platforms.setAll('body.moves', false); this.platforms.setAll('body.velocity.x', 100); this.platforms.setAll('body.friction.x', 1); this.platforms.setAll('body.drag.x', 1); I'm still watching ice-cube trash. What I'm aiming for is something that can tumble (is there a way to get corresponding rotation on collision to happen?), so I want moving the trash to be more of a shove to move a distance rather than a tap from the player. Thank you for your help!
  3. Hi, I'm new to Pixi.js and the forums. I'm trying to figure out how to drag complex shapes made of polygons. I used PhysicsEditor to create the Polygons. I know a hitbox can be assigned to a sprite, but this seems to only work for a single simple polygon? So my next approach was to create a bunch of graphics shapes from the polygons and add them to a container. This works, but I don't know if it's the proper way to do it. Here is the code below. let polygons = new Polygons().getPolygons(); let container = new PIXI.Container(); polygons.forEach((data: any) => { var graphic = new PIXI.Graphics(); graphic.beginFill(0x00dd00, 1); graphic.drawPolygon(data.shape); graphic.endFill(); graphic.scale.x = scale; graphic.scale.y = scale; graphic.interactive = true; graphic.buttonMode = true; graphic.alpha = 0; container.addChild(graphic); graphic .on('pointerdown', this.onDragStart) .on('pointerup', this.onDragEnd) .on('pointerupoutside', this.onDragEnd) .on('pointermove', this.onDragMove); }); container.addChild(sprite); container.x = - container.width / 2; container.y = - container.height / 2;; } My mouse up creates the sprite by clicking on the screen. This is my Drag function. onDragMove = (event: any): void => { if (this.dragging) { console.log(event.currentTarget) event.currentTarget.parent.alpha = .5; let newPosition =; let parent = event.currentTarget.parent; parent.x = newPosition.x - parent.width / 2; parent.y = newPosition.y - parent.height / 2; this.wasDragging = true; } } The weird thing with this code is that all my sprites jump on top of each other while dragging. If I use this exact same code for my onDragEnd function and comment out the onDragMove it works as expected, but obviously I can't see the drag happening. So my question is, is this the proper way to do this? If it is, why is the drag function not working? Is there a better way to do this?
  4. Conditional dragging

    I am trying to build a game where you are limited to a certain number of items in a stack, instead of generating the number of items, I track how many are present, and I use a spawner object that generates clones on dragStart to simulate dragging from a pile. what I want to do is if the player attempts to drag from the pile when there are no more items, then the item will tint to be darker and drag will be prevented. but I want to re-enable dragging if we drop an item into the area, thus adding to the stack. I was wondering if there was a way to prevent a drag conditionally onDragStart, or do I have to toggle drag on/off with conditionals outside of the onDragStart and onDragEnd events.
  5. Hello all and thanks ahead of time for any help. This example has a block you move around with the arrow keys and it bumps into other objects: I am trying to make the block draggable by a mouse (or touch). I added this code to create() to create a transparent copy of the box (for visualization/testing purposes, this sprite would eventually be invisible) input_body = game.add.sprite(500, 200, 'block'); game.physics.p2.enable(input_body, false); input_body.body.setCollisionGroup( game.physics.p2.createCollisionGroup() ); input_body.alpha = 0.5; And then I added this code to update() to make my transparent box follow the mouse point, or last touch point input_body.body.x = game.input.x; input_body.body.y = game.input.y; And then I added this code to update() to make the block follow my mouse on drag. if (game.input.activePointer.isDown) { if (constraint_count == 0) { input_constraint = game.physics.p2.createLockConstraint(input_body, block.body); constraint_count = 1; } else if (constraint_count == 1) { game.physics.p2.removeConstraint(input_constraint); constraint_count = 0; } } else { if (constraint_count == 1) { game.physics.p2.removeConstraint(input_constraint); } constraint_count = 0; } And it works!!...but what happens is my mouse pointer and my transparent block (input_body) get out of sync. And the input_body ends up sort of halfway between the block and the mouse pointer. Letting go of the mouse (which removes the constraint) leaves the input_body at the same offset from the mouse pointer. Once I click, it never lines up again. I'm guessing I'm missing something with the LockConstraint, and the block is acting like an achor weighing down my drag. But I'm not sure how to fix it. Thanks for any and all help!
  6. Hi everyone. I'm attempting to make a train simulator which includes working controls (brake lever, throttle leaver, switches, horn controls....I'm sure you get the idea). With switches I decided I could just toggle them on picking with the actions manager. The levers, however, provide me with more of a challenge. As they revolve on a pivot I thought of using an (invisible) imposter mesh for the user input and setting the rotation of the lever meshes to correspond with the imposters x, y or z position, meaning the user's input will "move" the lever, so added the drag and drop code from the playground demo. It works in principle. A bit messy maybe - especially as I also need to figure out how best to accurately 'reset' the imposter to the levers handle position on the pick up event to be best placed for the next use. My question (finally) is, "is there a way to apply drag drop input to only the imposter mesh(es), rather than having desks, windows, instuments etc etc moving around the scene (as highly amusing as that is)?" Thanks everyone. I'll include a couple of screenshots to give a little context. In short, I want the levers to be movable (rotatable) by the 'driver'. Mark.
  7. Just a quick and small project, hopefully enjoyable. MTS Dunker - Take the Basketballs and slam them into the net. Click or tap on the ball, and drag it into the net. Simple as that. Had some feedback for the tutorial to show it in full, rather than use the arrow, so will eventually put that in. And to add some special dunking patterns etc. Didn't plan to give it an update but will do if it's loved enough just like every other project... Play it here (Mobile Friendly) - Umz Games Play it here (Mouse Only) - Kongregate All feedback is appreciated, and suggestions are usually written down and filed so when an update does eventually happen, your suggestion is put to use. Thank You. If you don't have time, or can't be bothered to leave a comment, hit the like button (if you like it), Thanks!
  8. local storage with JSON error

    hi, i would use the local storage to store value of my object. i set the object draggable and when the drag stop i would reveal parameter of this object. the problem is that i have this error : Uncaught TypeError: Converting circular structure to JSON i follow this part of tutorial : var car = {}; car.wheels = 4; car.doors = 2; car.sound = 'vroom'; = 'Lightning McQueen'; console.log( car ); localStorage.setItem( 'car', JSON.stringify(car) ); console.log( JSON.parse( localStorage.getItem( 'car' ) ) ); But in my case that don't work. Why ? Thanks for your help. var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create }); function preload() { game.load.image('circle', ''); } function create() { this.projectile=game.add.sprite(200,200,'circle') this.projectile.number=1"weapon" this.projectile.inputEnabled=true this.projectile.input.enableDrag(true),this) } var reveal_param=function(sprite){ localStorage.setItem('_projectile', JSON.stringify(sprite)); var _projectile_var= JSON.parse( localStorage.getItem( '_projectile' ) ) ; alert( }
  9. Hello, I'm creating a game composed by a map (created with Tiled) and, at the bottom, a menu with a list of building. The list of building is draggable horizontaly (to see all buildings). To drag all buildings at the same time I add all the buiding's sprite in a graphics component. I also put a black background with alpha to 0.25. Every component has a fixedOnCamera to true. Here is my BuildingMenu class TypeScript code: public static create(game: Phaser.Game) { let background =, 0); background.beginFill(0x000000, 0.25); background.drawRect(0, game.height - 64, game.width , 64); background.endFill(); background.fixedToCamera = true; let buildings = ["building1", "building1"....]; let bounds = new Phaser.Rectangle(-game.width / 2, game.height - 64, game.width, 64); this.buildingsGroup =, game.height - 64); buildings.forEach((building, index) => { let spriteBuilding = game.add.sprite(index * (64 + 2), 0, building.getName()); spriteBuilding.width = 64; spriteBuilding.height = 64; spriteBuilding.fixedToCamera = true; //this.buildingsGroup.addChild(spriteBuilding); }); this.buildingsGroup.width = game.width; this.buildingsGroup.height = 64; this.buildingsGroup.inputEnabled = true; this.buildingsGroup.input.allowHorizontalDrag = true; this.buildingsGroup.input.allowVerticalDrag = false; this.buildingsGroup.input.enableDrag(false, false, false, 100, bounds); this.buildingsGroup.fixedToCamera = true; } public static update(game: Phaser.Game) { += 1 } My problem is when I uncomment the line "this.buildingsGroup.addChild(spriteBuilding)" item are affected by the camera but can be dragged of course. The background is not affected.... I can't figure out why... Can anybody help?
  10. I have some sprites that are set to horizontal drag only. What I want to do is, if someone drags vertically up from one of those sprites, when they leave the bounds of that sprite (top edge), spawn a new sprite and be actively dragging that new sprite. The user should not have to release the mouse button, they should just instantly be dragging the new sprite. I can successfully calculate when the pointer is leaving the first sprite, and spawn a new sprite at that location, but I can't seem to transfer the drag control. I tried Pointer.swapTarget, but that doesn't seem to work - the new sprite is spawned, but just sits there and I have to release the mouse button and re-click on the new sprite in order to drag it. How can I make the transfer seamless?
  11. Hello all I am pretty new to Phaser. Now I am testing to create drag and drop shape game. I use this code : var background = game.add.sprite(0, 0, 'atlas', 'background.png'); var shape = game.add.sprite(0, 0, 'atlas_test'); shape.frameName = 'ellipse.png' ; shape.inputEnabled = true; shape.input.enableDrag(); In short, this works fine, I drag with my mouse, and it follows my mouse pointer location. But problem happens when I add this : background.addChild(shape); When I add the draggable shape into background, somehow the draggable shape is several x and y away from the actual mouse pointer. Like, the shape is 'late'. I wonder if the shape is following the background viewport since background is the parent. Initially, my pointer on the center of this ellipse, then I drag to northeast, the shape follows the pointer but kind of late. I wonder if is there any lead I can look upon, I need to persist shape as child of background, with normal drag as if the shape is not a of anyone's children. Thank you.
  12. 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 :)!
  13. 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.
  14. 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 .
  15. Drag Sprite Body In Air

    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
  16. 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!!
  17. 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>
  18. 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
  19. 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
  20. How Drag sprite around circle

    How drag sprite around circle? Thanks!
  21. 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?
  22. 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);
  23. 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
  24. 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 ..