Search the Community
Showing results for tags 'Interaction'.
Found 24 results
-
I'm trying to se my interaction mode to true so I can set my sprite to follow my cursor. I've managed to do this before i Added ES6 and webpack. Here is a code example: import * as PIXI from 'pixi.js'; // App with width and height of the page const app = new PIXI.Application({ width: 500, height: 500, resolution: 1, backgroundColor: 0xAAAAAA, }); document.body.appendChild(app.view); let player = new PIXI.Sprite.from('assets/dirt.png'); player.anchor.set(0.5); player.x = app.view.width / 2; player.y = app.view.height / 2; app.stage.addChild(player); const movePlayer = function (e) { let pos = e.data.global; player.x = pos.x; player.y = pos.y; } app.stage.interactive = true; app.stage.on("pointermove", movePlayer); Console screenshot: https://i.imgur.com/w4fAcb9.png I think that the problem may be related to webpack somehow ;(
-
(I've seen many threads about PIXI in MV before, but not about this subject, so I make a new one. If someone already made one, I would be grateful if you link it below) A group of people I'm collaborating with is using RPG Maker MV. I don't have much experience with this engine before, but IMHO, the engine performance is ... erm, not very good, and it also lacks many pointer/touch related events that I need. I managed to convert the bitmap system to pure PIXI sprites. But, sprite.interactive = true; sprite.on('pointerdown', foo) is still not working. I thought that maybe MV overrided PIXI somehow, so I take out all input classes of MV, TouchInput.init(); Input.init(); TouchInput.update(); Input.update(); still failed. Also tried manually updating plugins.interaction in the game loop. Same result. So what is it that I am missing? Did MV override PIXI interaction with something else that I hadn't taken out, or do I need to update other certain PIXI classes in order to solve this problem?
-
Hello guys, i am currently building a simple 2D platformer and want to create a simple interaction between my main character and a NPC. Im trying to figure out which functions i should use for this scenario: What i want to achieve: Main character walks until it reaches the sprite of the NPC. Soundeffect plays only one time and speechbubble (i will use a simple image) appears. Speechbubble can only be confirmed by pressing Enter. While speechbubble is not confirmed character cant move. When player hits enter, speechbubble disappears and character can pass the NPC without anymore interaction.
-
Hey everyone, this is my first post, so I hope I do this right. Let me explain, what I wanted to do: I created a GameObject class so that all my objects inherit from this class. The GameObject is interactive and I was thinking about to give it some default methods, that can be used for: this.on('pointerdown', <__put_default_function_here__>); If an object that inherit from GameObject needs a different action as you click on it, you can simply switch the callback function to another default method or you could create a new method inside the new object. So one of this default methods looks like this: //ECMA6 shot_this(from=this.parent.player) { console.log('POP!'); console.log(from); console.log('shot something:'); console.log(this); } As you can see, I thought that if i do this: "this.on('pointerdown', this.shot_this)" the from-variable would be undefinded and than would be set to my player object. But as it turns out, this is wrong. The first parameter of the callback function of .on() is the InteractionEvent. Now lets go to my Problem: My Problem is definitely not that the first parameter of the callback-function is the InteractionEvent, my problem is, that I can't check for it. The default method shot_this will be also used by an NPC AI to shot at things, so I must check if the first parameter is an InteractionEvent. Something like this isn't working: //ECMA6 shot_this(from) { if (from instanceof PIXI.interaction.InteractionEvent) { console.log('yeah it is an InteractionEvent'); } else { ... } } PIXI.interaction.InteractionEvent is always undefined. So my question is: How do i check if the first parameter is an InteractionEvent? And why is PIXI.interaction.InteractionEvent undefined, even if i try to access this by Chrome Developer Tools? I hope you understand my problem and can help me. Have a great day everyone!
-
First of all, let me say that I love the apparent philosophy of PixiJS: do rendering well, and let userland be userland. Awesome. I'm playing with different ways of handling interactions that originate within the scene graph. I'm not a fan of declaring interaction logic on sprites themselves (e.g., using the '.on' method and callbacks). Instead, I'd prefer something that functions more like event delegation: a single listener on my scene that pipes out all relevant events for me to slice and dice later. Currently, I'm experimenting with using the Sprite prototype to feed all events into an RxJS observable. More concretely: // Create a new observable var pixiEventStream = new Rx.Subject(); // Hack into Sprite's prototype, redirecting all 'mousedown' and 'mouseup' events into the observable var toStream = (e) => pixiEventStream.onNext(e); PIXI.Sprite.prototype = Object.assign(PIXI.Sprite.prototype, { mousedown: toStream, mouseup: toStream, // etc for all events PIXI detects }); // ... // Later, I create a bunch of sprites, some with {interactive: true} // But I *don't* specify any .on callbacks // ... // Later, I can deal with the events // Here, I'm filtering out only the mousedown events for further processing var mouseDownEvents = pixiEventStream.filter(e => e.type === "mousedown"); mouseDownEvents.subscribe((e) => { var sprite = e.target; // do something with a sprite on mousedown }); Is there a less hacky way of doing this? Has anyone tried something similar? Cheers!
- 17 replies
-
- 1
-
-
- interaction
- events
- (and 2 more)
-
Hello. I am very new to PIXI, so please bare with me. I have been in search of good API for my game. The game uses a map which contains tiled images as well as a bunch of path on the screen. Think Google Map, except a lot simpler. I was able to use PIXI to implement the map background where it scrolls and loads tiled map images as needed. I was also able to draw paths onto the map. Now the problem is that I cannot figure out how to interact with those paths. I used PIXI.Graphics to create and draw a path. I applied mouse events to it. But no event is fired. I was able to get the even to fire if I made the graphic into closed path will fill. But unfortunately that will not work for my purpose. Is there any way to accomplish this? Any way to interact with just a path (could be complex paths with multiple segments and/or curves) rather than enclosing shape? Thanks in advance!
-
I have pixijs webgl app with some inputs. I have an input which uses native html input which placed out of scene and dispatches some events to my input and so on (like old pixi.input project) Yesterday I've update pixijs from 4.3.5 to 4.4.1, and input has broken. When hidden input is focused and I've move mouse (like usual text selection) native unfocus event has been emmited on my hidden input without stack trace (by browser as I think). Keydown events also doesn't work on hidden input (maybe it previously unfocused by mouse up or mouseclick event after it has been focused). Pixi 4.4.1 Chrome - bug Mobile chrome - bug Mozilla - ok Desktop Chrome with mobile emulation - looks OK, but didn't test it enough Downgrade to Pixi 4.3.5 - all browsers works OK
-
Here's the thing: If I create a sprite or graphics, and add a mousemove handler for it, then what I expected to happen was that whenever I move my mouse over that element, that handler gets fired, but that's not what's happening, and that handler gets fired when you move the mouse over the entire canvas, why is that? var el = new PIXI.Graphics(); el.interactive = true; el.buttonMode = true; el.beginFill(0x00FFFF, 1); el.lineStyle(4, 0xFF0000, 1); el.drawRect(0, 0, 100, 100); el.endFill(); el .on('mousemove', move) .on('touchmove', move); stage.addChild(el) function move() { console.log('mousemove on this element?'); } -
Hi, my project with BabylonJS is growing day to day. Now, I am going to introduce interaction to my scene. I dont know how can I get this. I would like click to some object and see on screen show information of it. To do this I need to know differents way to interact with objects of scene. Also using a gui, I am interested to hide or show differents elements of my world. Could you show me similar examples? Thanks.
-
processInteractive() being invoked without interactions enabled
timetocode posted a topic in Pixi.js
When profiling my game in chrome, 8-20% of the time is spent in processInteractive(), but to my knowledge I haven't enabled interactions. Is there a way to turn them off? Is there a way to turn them on *accidentally* ? Perhaps by adding a function to a pixi object like sprite.onmousemove = fn; or something like that? The game is live (works best in Chrome, not sure about the others) http://sharkz.io/ . If you play it and run the profiler you can see what I mean. I've also attached a screen shot of the profile. The source code is http://sharkz.io/js/app.js which I've searched for the strings 'interactive', 'interaction', 'interact' which do not appear as far as I can tell. Thank you! -
How can we define a hitArea for a quadraticCurve line? is that even possible?Afaik, you got:PIXI.RectanglePIXI.CirclePIXI.Polygonfor defining hitArea,It seems that it's not possible, right? from https://github.com/pixijs/pixi.js/issues/3296 http://codepen.io/mohammad-ahmadi/pen/pNKOZQ?editors=0010
-
Setup: There are multiple display objects which are at the same level on the scene hierarchy graph. These display objects have overlapping hit areas (e.g. they are near each other and/or the hit areas are large) The user touches the area where the hit areas intersect It seems that pixi will trigger the touchstart event on only one of these display objects. How do I get the event to fire on both? My Goal: I have multiple objects which the user can drag around the scene. However, I want to allow the user to be quite inaccurate with their finger, so that if they attempt to drag an object which is near, AND there is no object directly underneath their finger, that object will be picked up successfully. If there are multiple object near the event, then the closest one should be picked up. This is the motivation for the above question. -
Let's say I click on a sprite, which might be nested in other containers and so on, each with their own onclick event listeners. Each of those objects will fire an onclick event, with the most nested object firing first. What's the best way to go about passing information about the inner nested click events to the outer objects? To put it more specifically, how can I let my outer objects know if their click event originated as a direct click to them, or as a click to another object that bubbled through? I attempted to attach a property to the nested onclick event like so: var button = new PIXI.Sprite(); button.interactive = true; button.on("mousedown", function(e) { e.originatedFromButton = true; }); This works to an extent (the outermost handler can read for the property) however it appears that the interaction manager uses a common object for event data, which means that this property hangs around on all future events. I could delete the property at the top level event handler but that is a very inelegant solution which I'd like to avoid if possible. Anyone have any suggestions as to a better way to accomplish what I need?
-
I've been trying to implement drag and drop for some of the sprites in my project. I've managed to get it working to some extent using code that I found in a tutorial/example somewhere - the exact source escapes me, apologies. (It's in typescript but should be pretty much recognisable as js) constructor() { this.on("mousedown", this.startDrag); this.on("mouseup", this.endDrag); this.on("mouseupoutside", this.endDrag); this.on("mousemove", this.onDrag); } private startDrag(e: PIXI.interaction.InteractionEvent) { this.dragging = true; e.data.getLocalPosition(this.parent, this.lastDragPos); } private endDrag() { this.dragging = false; } private onDrag(e: PIXI.interaction.InteractionEvent) { if (this.dragging) { e.data.getLocalPosition(this.parent, this.dragPos); this.position.x += (this.dragPos.x - this.lastDragPos.x); this.position.y += (this.dragPos.y - this.lastDragPos.y); e.data.getLocalPosition(this.parent, this.lastDragPos); } } However this approach seems to have a number of problems. The deal breaker here is that the object is always one (or maybe even more??) frames behind the mouse. To me this is unacceptable and leads to all kinds of nonsense like needing the mouseupoutside event to work properly. There are a whole lot of edge cases, like letting go of the dragged object when it's over another draggable object causes problems, etc, etc... I'm guessing that the first problem is caused because this is using the event system and isn't coupled to the render loop. Is there a better way to do drag and drop in PIXI? Also open to any hints on mouse interaction in general, the documentation hasn't been hugely helpful to me (i.e. what's the purpose of the interactionManager?) Thanks!
-
That's mah fork: https://github.com/gameofbombs/ This branch is also known as dev-experimental-geometry and pixi v4.1. It is the bleeding edge, and only about 5% of it was discussed as PRs in main pixi.js (like https://github.com/pixijs/pixi.js/pull/2465 ) Demos: http://gameofbombs.github.io/pixi-bin/ Best demo is outdated, though it will be converted to pixiv4 soon: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (use mouse and QE) Changes: 1. 3d Transforms. We have them now. 2. Static transforms: enabled by default, new Transform2d(true), dont have to recalculate whats already calculated, increases performance for most-static 2d and 3d scenes. 3. Camera: lookPosition, lookRotation and lookEuler - camera looks at specific point 4. Camera: zIndex, zOrder - YES, THE PAIN IS GONE! Regardless of how will you group your sprite into containers, they will be sorted for rendering and interaction 5. Proxies - experimental, special for gameofbombs.com, I dont guarantee their work in other projects yet. Contributions: 1. This fork will have fast iterations, the only relatively stable thing will be API that specified in demos 2. Binaries are stored in pixi-bin and not pixi.js sources3. PR's should be made into 'master' and not some 'dev' nonsence Current projects: 1. gameofbombs.com conversion to pixi 2. Poker game with 3d cards. UPD. Babylon goes 2D according to this: Well, now PIXI strikes back!
-
Hello, I'm working on a close source project so the amount of example code I can supply is relatively limited, so let me see if just simply describing my problem will help. We have three containers, linePoints and lineSegments, these containers are children of the line container. They are all interactive and in buttonMode We have two types of sprites, the points, and segments, these are children within their respective containers. These sprites are created also interactive and in buttonmode with events tied to them. Points get all of the drag related events (mosedown, mouseup etc) and Segments get just the click event. The structure : line(container, interactive) -linePoints(container, interactive) -points(sprite, interactive, draggable) -lineSegments(container, interactive) -segments(sprite, interactive, clickable) The problem : My points are drawn on top of the line segments, yet when I click on them to drag them around, this fires the click event on the lines lying beneath them (which actually creates a new point, so things get a bit messy) So my question is, are click events supposed to fall through sprites and activate on sprites underneath them in the draw order? If so then is there a way to properly block this from happening ? What I've tried : binding null to the click event on the points: point.on("click", null) debinding the click event on the points : point.off("click") - thought I couldnt actually find documentation on .off() so I'm not sure this even does anything changing the size of my points to be absolutely sure they are covering the lines - the clicks are definitely "falling through" and not just sneaking around, I'm clearly getting two interaction events at the same time here, one on the point when I mousedown to drag, and one on the line underneath it. So there's my issue, if this really isn't enough to explain or illustrate the problem, I can make a fiddle on request, but I'd like to avoid doing the extra work if it's not required. It's efficiency not laziness! Thanks all in advance
-
Hello, I've got a problem that is starting to impact the performance of my game and I found through profiling that the MouseMove & ProcessMouseMove, are binded to the window "mousemove" event. They do fire correctly, but I simply need them to fire once per frame. ( They fire 5 - 10 times per frame which is normal ) Is there a way to do this in pixi with interactionFrequency, or do I need to do some hack ? Thanks in advance
-
In many forums and blogs pixi seems to have interactive sprites http://www.goodboydigital.com/pixi-js-now-even-better-at-being-interactive/ http://www.goodboydigital.com/pixi-js-gets-interactive/ mySprite.mouseupoutside = function(mouseData){ console.log("MOUSE UP OUTSIDE!");}mySprite.mousemove = function(mouseData){ console.log("MOUSE MOVE!");}mySprite.touchendoutside = function(touchData){ console.log("TOUCH END OUTSIDE");}mySprite.touchmove = function(touchData){ console.log("TOUCH MOVE");}yet i see nothing about it in the documentation: https://pixijs.github.io/docs/PIXI.Sprite.html And going over sprites in debugger return undefined for setInteractive, mouseDown, etc.. was this feature removed from PIXI ? How should interactivity be implemented instead ? I tried also setting event handler in renderer.plugins.interaction.onMouseDown interaction manager but my handler was never called. Should i create a new instance of InteractionManager ?
-
I am testing gameplay mechanics with Phaser and I am trying to have one character communicate a simple message to another when they are facing each other. Is there a way I can mimick this dialogue box using Phaser? So basically, when one sprite collides with another, I want to show this box with a message in it possible give the user input choices. Ex: "What is your name?" User choices would be: "x", "y", "z" and an "Answer" button.
-
I am having a problem getting Phaser to use Buttons and implement their click features when I include my CSS style sheet. I am guessing that it has to do with containers and positioning but would like some help as I have been stuck on this for several hours. The code for my php index page is below: <html> <head> <title>Border Test</title> <script type="text/javascript" src="globals.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="phaser.min.js"></script> <?php if(!isset($_SESSION['player'])) { echo "<script type='text/javascript' src='prompt.js'></script>\n"; } ?> </head> <body> <div id="border"> <canvas id="surround" width="1350" height="600"></canvas> </div> <script type="text/javascript" src="borderHandle.js"></script> <div id="game"> </div> </body> </html> The code for the globals is: var WIDTH = 1200;var HEIGHT = 530; The code for the CSS is: #border { position: absolute; top: 0; left: 0; z-index: 1000;} #game { position: absolute; top: 30; left: 75; z-index: 0;} and finally the code for BorderHandle is: var canvas = document.getElementById('surround'), context = canvas.getContext('2d'); draw_back(); function draw_back() { back_image = new Image(); back_image.src = 'imgs/border.png'; back_image.onload = function(){ context.drawImage(back_image, 0, 0); } } The code works perfectly fine for the button clicks when i remove the style sheet, but when I include the style sheet, the buttons appear and the actionOnClick function does nothing and the image will not change. Any advice or help would be greatly appreciated and thank you all in advance!
-
Hi all, Im trying to get my Twistfilter offset to follow my mouseposition across the screen on mouseDown... been at this all day, poured over the documentation and tried multiple ways... no luck.. any help would be greatly appreciated. So far I have this: // sets up the screen/stage var viewWidth = 1000; var viewHeight = 500; var renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";document.body.appendChild(renderer.view);var stage = new PIXI.Stage(0xffffff, interactive);var interactive = true;//adds the flag as a spritevar flagTexture = PIXI.Texture.fromImage("img/flag3.jpg");var flagSprite = new PIXI.Sprite(flagTexture);stage.addChild(flagSprite);// creates a wavy texture over the flagvar waveDisplacementTexture = PIXI.Texture.fromImage("img/displacementMap.jpg");var displacementFilter = new PIXI.DisplacementFilter(waveDisplacementTexture);var DotScreenFilter = new PIXI.DotScreenFilter();// configures the filters..displacementFilter.scale.x = 30;displacementFilter.scale.y = 20;// apply the filters to the stagestage.filters = [displacementFilter, DotScreenFilter];var tick = 0;requestAnimationFrame(animate);function animate(){tick += 0.4;displacementFilter.offset.x = displacementFilter.offset.y =tick*10;renderer.render(stage);requestAnimationFrame( animate );} // Mouse interactionstage.mousemove = function(mouseData){ //console.log("MOUSE MOVE!");var localCoordsPosition = mouseData.getLocalPosition(stage);console.log(localCoordsPosition);}stage.mousedown = function(mouseData){ console.log("down");displacementFilter.scale.x = 50;displacementFilter.scale.y = 50;var twister = new PIXI.TwistFilter ();var localCoordsPosition = mouseData.getLocalPosition(stage);twister.offset.x = localCoordsPosition.x;twister.offset.y = localCoordsPosition.y;stage.filters = [twister, displacementFilter];}
-
Hello guys, Just recently encountered a problem when using onMouseMove on a Samsung Tablet. I had to add prevent default to my onMouseMove handler function to fix the problem. I took a look in the PIXI docs, and saw that: if (PIXI.AUTO_PREVENT_DEFAULT) { this.mouse.originalEvent.preventDefault() }isn't included in the onMouseMove function. Is there a reason for this?
-
Hi I am trying to get the id of the shape my mouse is currently hovering over. my shapes are in a container // creating the layers gridLayer = new PIXI.DisplayObjectContainer (); gridLayer.setInteractive(true); stage.addChild(gridLayer); and i am creating each shape like this; function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) { var shape = new PIXI.Graphics(); // set a fill and line style shape.beginFill(color); shape.lineStyle(1, 0xa0a0a0, 1); size = size-gap; for (i = 0; i < 7; i++) { angle = 2 * Math.PI / 6 * (i + 0.5); var x_i = x + size * Math.cos(angle); var y_i = y + size * Math.sin(angle); if (i === 0) { shape.moveTo(x_i, scale *y_i) } else { shape.lineTo(x_i, scale * y_i) } }; shape.endFill(); // calculate and save the axial coordinates var cX = iterJ - (iterI - (iterI&1)) / 2; var cZ = iterI; var cY = -1*(cX+cZ); shape.hexId = cX + "x" + cY + "y" + cZ + "z"; shape.hexPosX = x; shape.hexPosY = y; shape.setInteractive(true); shape.mouseover = function(mouseData){ console.log("MOUSE OVER " + shape.hexId); } shape.click = function(mouseData){ console.log("MOUSE CLICK " + shape.hexId); } gridLayer.addChild(shape);}However, clicking on any shape or hovering over it is not showing me anything in the console. what am i doing wrong? i have tried both shape.setInteractive(true) and shape.interactive = truebut neither seems to work for me.
-
Hi guys, We have been building a framework called UniWand that enables controlling online 3D content using smartphones as wand controllers with latency < 20ms. It can be used to control WebGL models based on the how you hold the phone in your hand. Here is a one minute video showing some of the demos: http://www.youtube.com/watch_popup?v=XFcH1Rm8Doc&vq=large You can try out the beta version from this location : http://app.uniwand.info The other useful features that it can enable are: Second screen for online videos (similar to that of YouTube) Tablet companion apps for e-learning content. We’re curious to know your opinions and queries. Hope you’d like it! Thanks!
