Search the Community
Showing results for tags 'drag'.
-
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: http://examples.phaser.io/_site/view_full.html?d=world&f=fixed+to+camera.js&t=fixed%20to%20camera but where you are moving by dragging with either the mouse or the touch instead of the arrow keys
-
So, I'm having trouble understanding how to do something when clicking on a specific object. I'm creating game objects with this function: createBurger(){ this.newBurger = new Burger(this,this.input.mousePointer.x+cam.scrollx,this.input.mousePointer.y,'11'); this.newBurger.setScale(1.2); cant_burgers++; ctnr_burgers.push(this.newBurger); this.newBurger.setInteractive(); this.newBurger.setData({sideA: 1, sideB: 1, cooked:0, flip: 0, celda: undefined}); this.input.on("pointermove", this.follow, this); this.input.on("pointerup", this.drop, this); this.input.on("drag", this.drag, this); F_burgerPicked = 1; } When the pointer is up, I want to add data to the specific object that's being clicked, not the last one created. I tried adding another event listener in the update function, to no avail. Is there a better way of doing this?
-
Hi all, i would to drag with mouse the red circle inside the gray "tube", constraining it position so it will be inside the tube and not overlaps the purple circles. Can someone help me? Thanks
-
How to drag sprite on a path like there https://cdn-factory.marketjs.com/en/mcdonalds-playable-ad/index.html ? Thanks a lot!
-
Hi, I am starting my first little game with Phaser and it's not going entirely smooth :D. I need to display a button with a word (dynamic text and size) , center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible. These three problems took most of my time. Center the text in a button ( which is a graphic ) Putting these in a container and centering the container. Dragging the container. I would love to solve the first two simply by using setOrigin, or Phaser.Display.Align. But that wasn't so simple, it didn't work or I did not understand it enough. So I manually calculated those now. I was hoping someone could explain why the other attempts didn't work. But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong. I made a fiddle with all my attempts. I commented the failed attempts. https://jsfiddle.net/mrklein/5verkbfg/52/ I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this. kind regards.
-
Hi, I would like to have two cards that when they collide with each other they would rotate in an analog way of the ones you can see in the attached video. This is the first part of the code: var config = { type: Phaser.AUTO, width: 800, height: 600, backgroundColor: '#1b1464', parent: 'phaser-example', physics: { default: "matter", matter: { gravity: { y: 0}, debug: true } }; scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); function preload () { this.load.spritesheet("controllers", "assets/sprites/controllersSheet.png", { frameWidth: 100, frameHeight: 100 }); } var controller = []; function create () { this.matter.world.setBounds(); controller[1] = this.matter.add.sprite( 400, 100, 'controllers', 0, null, { restitution: 0, friction: 1}); controller[2] = this.matter.add.sprite( 400, 400, 'controllers', 1, null, { restitution: 0, friction: 1}); Then I am having some issues because with this next code they move as I'd like, but they don't rotate: controller[1].setInteractive(); controller[2].setInteractive(); this.input.setDraggable(controller[1]); this.input.setDraggable(controller[2]); this.input.on("drag", (pointer, gameObject, x, y) => {gameObject.setPosition(x, y); checkPosition();} ); this.input.on("dragstart", (pointer, gameObject) => { } ); this.input.on("dragend", (pointer, gameObject) => { } ); And with this other next code, they bounce all around and I can't find a way to make them stay fixed. this.matter.add.mouseSpring({ length: 0, stiffness: 0 }); If someone knows how to help me, I would be very thankful. mm.mp4
-
How is it possible to drag an elf around a point rotate? Can I drag and drop the entire group?
-
Hello, I am working on a project where i can drag an object in X-direction only(like in a abacus). Is it possible to drag objects in one direction only? I created a simple task where i can move two objects with mouse (link here). The issue is that objects are pushing inside each other if i drag one object to another. I need them to be hard like diamond. Can i achieve that with p2 js or i have to use box2d plugin (like here). Also is box2d will be availabe in phaser v3. Thanks
-
Is there anyway to detect where is the player dragging? I want to give the player a warning sound once they drag the object to the limit.
-
Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help
-
I need to create a project based on a flash project, however, I can't think of a way to replicate this: I was thinking about using graphics but I do not know how to update it when dragging. Is there anyway to create this? -
Hi there, I want to implement a car which can be dragged and is able to turn around corners while being draged so far I only found a posibility to turn in direction of the pointer (eg mouse) but than the car turns before it is even (pixelperfect)clicked too any sugguesstions or helpfull links? thanks:)
-
Hi, Is is possible to drag many objects at once? Together? I would think that putting all sprites into one group and adding drag to the group would work, but drag doen't work on groups... Any ideas? Thanks.
-
hi everyone, Here is the problem I meet, I have a sprite and I can drag it in the right way when game has normal scale but when I change scale by game.world.scale.setTo(2); things become different. the sprite moving distance become twice as my cursor moving distance, when the scale becomes 3 the distance also become triple as well. so do you gays have any good ideas for sync cursor and sprite position, many thx.
-
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.
-
Hi folks, I've made a little playground here http://www.babylonjs-playground.com/#5QBZT0, which is based on the drag&drop example. I changed the camera behavior a little bit: when dragging the ground, the camera is actually the one that moves along the XZ plane. The problem is that the movement is not smooth, it stumbles. Does anyone know how to fix it? Also, how could I add some inertia to the dragging movement? Thanks a lot!
-
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!
-
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 = event.data.global.x - container.width / 2; container.y = event.data.global.y - container.height / 2; this.app.stage.addChild(container); } 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 = event.data.global; 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?
-
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.
-
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: https://phaser.io/examples/v2/p2-physics/contact-events 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!
-
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.
-
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!
-
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'; car.name = '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. https://jsfiddle.net/espace3d/cmd0158g/ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create }); function preload() { game.load.image('circle', 'https://s13.postimg.org/xjhlzmiev/disc_png.png'); } function create() { this.projectile=game.add.sprite(200,200,'circle') this.projectile.number=1 this.projectile.name="weapon" this.projectile.inputEnabled=true this.projectile.input.enableDrag(true) this.projectile.events.onDragStop.add(reveal_param,this) } var reveal_param=function(sprite){ localStorage.setItem('_projectile', JSON.stringify(sprite)); var _projectile_var= JSON.parse( localStorage.getItem( '_projectile' ) ) ; alert(_projectile_var.name) }
-
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 = game.add.graphics(0, 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.add.graphics(0, 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) { game.camera.y += 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?
-
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?
