Search the Community

How to drag sprite on a path like there https://cdn-factory.marketjs.com/en/mcdonalds-playable-ad/index.html ? Thanks a lot!

Hi guys, I have this problem with the latest version of the library. I added an observable to scene.onPrePointerObservable to get notifications on pointer down and up on the scene and accordingly set a variable _isPointerDown to true or false, in the same way is done in FramingBehavior to detect the user is moving the scene. When I make a single click on the scene I correctly receive the two notifications for the pointer down and pointer up events. The problem occurs when I do dragging (moving the camera). I receive the notifications for pointer down and pointer move, even in the moment of button release (pointer up is missing). So the variable _isPointerDown remains true even when the pointer is not down anymore. The problem started with the latest version (3.3.0-alpha.0) Take a look at the following playground and at the console. https://playground.babylonjs.com/#VH9W33 Thanks, Matteo

i am using dragging example of pixijs and using simple 100x100 image but that is displaying very large (300x300). I used the cdn linking script to link pixi js framework. How can I make the image smaller and put bounds so that the image wont go beyond those bounds test.html

View the jsfiddle demonstrating the issue (just click and drag the circle - relevant code on line 102). When I add a circle to the stage with Pixi.Graphics and drawCircle( 150, 100, 50 ), the circle when dragged becomes offset by it's position ( +150, +100 ) in the Graphics container. (and if we request the circle.position it's also inaccurate) What's the best way to add a shape to the screen and set it's position if it's not through a Graphics container?

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 horizontalBaffleBtn.events.onInputUp.add(function () { this.destroy(); // breaks here, horzBaffle is null }, horzBaffle);

Hello again, I have followed the great advices given me here in the forum and have extended PIXI.Container to create draggable letter tiles for my word game. Here is my current implementation however I have now a problem with dragging (so I have opened a new topic) - "use strict"; function SmallTile() { PIXI.Container.call(this); this.interactive = true; this.buttonMode = true; this.dragging = false; this .on('mousedown', onDragStart) .on('touchstart', onDragStart) .on('mouseup', onDragEnd) .on('mouseupoutside', onDragEnd) .on('touchend', onDragEnd) .on('touchendoutside', onDragEnd) .on('mousemove', onDragMove) .on('touchmove', onDragMove); this.bgGraphics = new PIXI.Graphics(); this.bgGraphics.lineStyle(4, 0xFF00FF, 1); this.bgGraphics.beginFill(0xFFCC00, 1); this.bgGraphics.drawRoundedRect(0, 0, SmallTile.WIDTH, SmallTile.WIDTH, 15); this.bgGraphics.endFill(); this.addChild(this.bgGraphics); this.letterSprite = new PIXI.Sprite(); this.indexSprite = new PIXI.Sprite(); this.addChild(this.letterSprite); this.addChild(this.indexSprite); } SmallTile.prototype = Object.create(PIXI.Container.prototype); SmallTile.prototype.constructor = SmallTile; SmallTile.WIDTH = 60; SmallTile.sDarkLetters = {}; SmallTile.sWhiteLetters = {}; SmallTile.sDarkIndices = {}; SmallTile.sWhiteIndices = {}; SmallTile.SHADOW = [ new PIXI.filters.DropShadowFilter() ]; SmallTile.SHADOW[0].alpha = .2; SmallTile.init = function(darkLettersTexture, whiteLettersTexture, darkIndicesTexture, whiteIndicesTexture) { for (var i = 0; i < LETTERS.length; i++) { var letter = LETTERS[i]; var rect = new PIXI.Rectangle(i * SmallTile.WIDTH, 0, SmallTile.WIDTH, SmallTile.WIDTH); SmallTile.sDarkLetters[letter] = new PIXI.Texture(darkLettersTexture, rect); SmallTile.sWhiteLetters[letter] = new PIXI.Texture(whiteLettersTexture, rect); } for (var i = 0; i <= 15; i++) { var letter = LETTERS[i]; var rect = new PIXI.Rectangle(i * SmallTile.WIDTH, 0, SmallTile.WIDTH, SmallTile.WIDTH); SmallTile.sDarkIndices[i] = new PIXI.Texture(darkIndicesTexture, rect); SmallTile.sWhiteIndices[i] = new PIXI.Texture(whiteIndicesTexture, rect); } } SmallTile.prototype.setLetter = function(letter) { this.letterSprite.texture = SmallTile.sDarkLetters[letter]; this.indexSprite.texture = SmallTile.sDarkIndices[7]; } function onDragStart(event) { // QUESTION 1: How to save local mouse coords here? // QUESTION 2: How to put this SmallTile on top? this.data = event.data; this.dragging = true; this.filters = SmallTile.SHADOW; } function onDragEnd() { this.dragging = false; this.filters = null; this.data = null; } function onDragMove() { if (this.dragging) { var newPosition = this.data.getLocalPosition(this.parent); this.position.x = newPosition.x; this.position.y = newPosition.y; } } My problem is that when I start dragging a SmallTile, then it jumps to the origin (shown by the red arrow in the attached screenshot). I am sure this is a well-known beginner's problem and on another platforms (Android, Flash) I solved it by saving the local coordinates of mouse pointer in onDragStart and then subtracting them from mouse coordinates in onDragMove. But as JavaScript and pixi.js newbie I don't understand yet, how to fix this problem in the above code. I am confused by the "data" argument passed to the onDragStart function (for example in the pixi.js dragging example). Is this a MouseEvent instance and how to get the local mouse coordinates from it? When I look at the PIXI.interaction.InteractionManager doc, I am confused too - am I looking at the right doc and why doesn't it describe its "onMouseDown" member (like which arguments does it have)? Finally, here is my main invoking code and I would also be very glad to receive hints for another "well-known" problem: which code to add in SmallTile onDragStart function so that its "depth" is changed and it is put above all other children of its parent container? "use strict"; var LETTERS = [ '*', 'A', 'B', 'C', 'D', 'E', 'F' ]; jQuery(document).ready(function($) { var renderer = new PIXI.WebGLRenderer(600, 600); var boardDiv = document.getElementById('board'); boardDiv.appendChild(renderer.view); var stage = new PIXI.Container(); var loader = new PIXI.loaders.Loader('/drawable-mdpi/'); loader.add('board1' ,'game_board_1.png') .add('dark_small_letters', 'dark-letters-1980x60.png') .add('dark_large_letters', 'dark-letters-3564x108.png') .add('dark_small_indices', 'dark-indices-960x60.png') .add('dark_large_indices', 'dark-indices-1728x108.png') .add('white_small_indices', 'white-indices-960x60.png') .add('white_small_letters', 'white-letters-1980x60.png') .load(init); function init() { var board1 = new PIXI.Sprite(loader.resources.board1.texture); stage.addChild(board1); SmallTile.init( loader.resources.dark_small_letters.texture.baseTexture, loader.resources.white_small_letters.texture.baseTexture, loader.resources.dark_small_indices.texture.baseTexture, loader.resources.white_small_indices.texture.baseTexture ); for (var i = 0; i < 5; i++) { var tile = new SmallTile(); tile.setLetter(LETTERS[i]); tile.x = i * 60; tile.y = i * 60; stage.addChild(tile); } animate(); } function animate() { requestAnimationFrame(animate); renderer.render(stage); } }); Greetings Alex

Hi, What we would like to do in a game UI is that something like a vertical scrollable/dragging table which lists items e.g. some weapons. So we create a container, then add a large image as background. And then add some items on top of background. The background image is draggable like the dragging example http://pixijs.github.io/examples/index.html?s=demos&f=dragging.js&title=Dragging and the items are set up with click event. Thing works great except if you mouse down on a clickable item and try to drag the table. It fails since the mouse down event of the background image is not fired.

Hi All, I am trying develop a game that contains a color band of 5 different colored rectangles. So I created a group and added those rectangles to it(I have uploaded the image of the output). Now I am trying to write the code in such a way that the entire group will be moving horizontally once I drag it. But from what I found we can make the individual element in the group draggable but not the entire group. Anyways, I did write the code this way but I think its wrong as its not working. Here it is. var leftRectGroup = game.add.group(); var colorarray = ["0x607D8B", "0xFF5722", "0xFFEB3B", "0x9E9E9E", "0x795548"]; for(var i = 0; i < 5; i++){ var rectanglegraphics = game.add.graphics(0,0); rectanglegraphics.beginFill(colorarray, 1); rectanglegraphics.drawRect(0, i*256, 100, 256); leftRectGroup.add(rectanglegraphics); rectanglegraphics.endFill(); } leftRectGroup.inputEnabled = true; leftRectGroup.input.enableDrag(); leftRectGroup.input.allowHorizontalDrag = false; Can anyone please provide me the right snippet to make the entire group draggable at once. Thanks in Advance.

I'm having a strange issue, I have not encountered before. When dragging a sprite over another sprite, mouse events underneath dragged sprite are not firing. For example if I have a SpriteA, which has mouseover event. If I simply drag my mouse over it, event would work just fine. However, if i'm dragging another sprite (SpriteB) over SpriteA, mouseover event of SpriteA is not detected. I know I have done this before where it worked, but I cant figure out whats going on right now. Is there some setting that allows a sprite to be "click-through" ? Thank you! Edit: Just in case it makes a difference, some additional information: I am dragging an "item" from one item slot to another. Both item and each slot is a sprite. When dragging an item, I need to know over which slot its currently positioned to know where to move it. Similarly this could be handled on mouseup event, but strangely mouseup event is firing for ORIGINAL slot, not the slot that mouse is hovering over.

Hi, I'm relatively new to Pixi. I have a problem similar to the one mentioned in this post: http://www.html5gamedevs.com/topic/5766-bunny-drag-example-with-correct-mouse-offset/?hl=%2Bdrag+%2Bpixi I used the code from the post and it worked seamlessly. However, when i began rotating the Sprites the offset became wrong, and the sprite jumps to another location when i begin dragging it. Do i have to use some trigonometric function to reverse the rotation? How can I do this? Here is a version with rotation: http://jsfiddle.net/cXfpq/2/ Here without rotation: http://jsfiddle.net/dirkk0/cXfpq/ Thanks in advance! Felix

Hello there. Been playing with Phaser, it's pretty cool. Not sure if this has been asked before, I tried fairly hard in order to answer this on my own. I have a sprite (a space ship) that has has had input.enableDrag set for it. This works without issue. I have also enabled arcade physics. Which also work fine. The issue here is that when I drag the sprite the body associated with the sprite, the body lags behind on movement. This creates an interesting "race condition" where the body is updating to the position that the sprite actually is at, and in turn is having the wrong collision location being checked. I'm not quite sure how to fix this. Are there any suggested work arounds or ways to fix this?

Hi, I'm porting some cocoa code over to TypeScript and I'm currently working on the virtual joystick code. I noticed that if a mouse/touch is down and moving, update() will be sent twice. At least it appears that way. You can see an example of the anomaly here: http://www.sputnikgames.com/test/ If you constantly move your finger while holding the joystick thumb pad, the fish will move faster than if you hold your finger still on a direction with the thumb pad. The virtual joystick class has an update() method that's called by Phaser. If I remove it's update method and simply call a private method from the main update(), it will still show the same behavior. So this means to me that update() is getting fired off multiple times, or the pollRate changes or something. I just don't know. Thinking it was a hardware issue, I've tested this out on every system I have from Windows Phone, Android phones and tablets, iOS 6-7, iPad iPhone, desktops, etc and they all show the same behavior. I looked through all the docs and tried many different things but nothing seems to stop update() from acting strange when the mouse is down and dragging. I did find a work around by using setMoveCallback() in my class and then calling my own update method on each joystick class. Before I settle on using setMoveCallback() I just wanted to be sure I wasn't stumbling on a bug or something simple I'm missing from my code. If anyone can go to the URL above to see if they see the same thing and post what they find here I'd appreciate it. Maybe this is the correct behavior? Thanks everyone. --Mark

Hi, is it possible to check if a sprite collides with others while dragging it? I am trying to build a game where you can rearange items, but physics/collision detection seems to be deactivated for the dragged sprite. Therefore items will overlap. I need a solution to prevent overlapping. Anything included in Phaser? So far I tried this: game.physics.collide(group, group); It works as expected for falling items, but not while dragging. Thank you Mario