Search the Community

Showing results for tags 'events'.

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 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

Found 79 results

  1. FollowCamera events

    Yo dudes In my continuing quest to work with Babs for my client project, I'm exploring how to control cameras in response to user actions such as clicking. As usual I have more questions than answers... The idea is to move the camera to a position in front of a chosen mesh within the scene. I've got a very simple scene going where, upon detecting a click, I create a follow camera, set its position and rotation to the active arc camera, then define the camera target and let it animate to it. Some questions on this approach: 1) There's a shift in position when switching active cameras from arc to follow. Any reason for this? I set position and rotation to match, but I must be missing something else from the arc camera when switching to the follow camera. Lets face it, I usual am. 2) Detecting a click is a bit of a pain. Not in itself, but when it comes to determining if the user was rotating the scene with the mouse button, or actually clicking a mesh in the scene, when releasing the mouse button it's less than clear. Are there any recommended strategies to follow for this? I looked at the ActionManager example PG ( but it has the same issue; if you click down over one of the shapes, move the scene around a bit with the mouse button still down, then move the scene so the original clicked object is under the mouse when you release the button, it's considered a click. Seems obvious to me there should be some clear method to distinguish the two actions, but don't ask me what the solution is because i don't have a scooby. 3) Is there a way to detect when the follow camera finishes animating to the target? Looks like there isn't but I'd have thought this would be useful to someone (me) at some point (now). 4) Is there a way to reverse the animation of the camera. For example once the camera reaches its target, can we make the camera reverse back to where it started with a click of a button? Probably I'm expecting far too much and I'll have to consider other options (maybe create paths to clickable objects and animate the arc camera along them) but would be great to know for sure. Cheers!
  2. I've been working with Pixi for quite sometime with V3 up until now. Recently decided it was time to move some code over to version 4 but have been experiencing some issues with interaction events. I have a button class that originally used both listeners for touch and mouse events to a.) change the visual state of the button on up/down etc b.) perform an action on click/tap. This had been working perfectly fine in version 3 and I could have multiple buttons in a class/container. Switching to version 4 this caused issues with click/tap area where only the last button to be added to a particular class/container will fire this event. All buttons will fire the up/dwn start/end events still though. On upon researching I tried converting them all pointer events and still experience the issue. I'm currently using V4.7.0. I've been trying to pick my way through the PIXI source trying to figure out why the event doesn't fire but it's not clear to me. All I can see is that it doesn't seem to have 'trackingData' when processing the up portion when it does on the one that does fire the tap/click. I've being using Chrome only at this point for Dev tools and tried but desktop and mobile/tablet emulator, both having the same result. I know interaction was reworked for v4 but can anyone give me any pointers as to why those changes have affected my code thus. I don't understand well enough the changes to be able to find the right place to look for a solution. I can't provide the exact code at the moment as it's not a personal project and corporate rules prevent me from doing so. But can give an overview. The class is structured with a parent container (essentially a stage) to add class container to and a class container to display the current button state (current button state can be a graphic, sprite, animation). The current button state container has all the interaction events attached to it. These call binded functions within the class which either change the current state sprite or call a function on click/tap that has been passed in the settings on instantiation (event data is sent to this function). As stated if the event is fired, which it is on the last button added, the function is fired but event doesn't trigger for click/tap on the others. All other events fire normally on each button. I've possibly just overlooked something simple as you get to that 'wood for the trees' state. Any thoughts, suggestions would be grateful.
  3. Hi everyone, I just wanted to share a new Phaser Plugin called phaser-tilemap-plus, that extends the tilemap loader and factory to support tile animations defined in the Tiled editor. It also allows you to implement collision detection against the map using polygons and rectangles within an object layer, enabling the use of sloped and curved surfaces. It will eventually also support custom properties and region-based events via the object layer. You can access and build the library from GitHub or install it directly as a Node package via NPM. Please note that it is still a work in progress, with features that are yet to be added and kinks to iron out. Anyhow, let me know what you think!
  4. Hi there, everytime I have to make a game that pauses when the canvas loses the focus (jquery blur()) I struggle with lines and lines of stupid lines of javascript and I´m pretty sure there´s something simpler than my way to do that. I have a normal sprite on the game that pauses/unpauses the game, and I would like to do exactly the same when the canvas focus/blur... how do you guys handle this?
  5. Multiple Hit Targets?

    I want the User to be able to connect two Objects with a Line. Therefore I need the hit target on pointerup. I display the virtual line which changes position with moving the cursor (the end of the line is always below the cursor). Thus when the user clicks the hit target is always the virtual line object. Is it possible to get all hit targets (also the ones below) and not just the first one? Or something like a blacklist/whitelist to ignore some interactive elements on the hit test or only test specific objects?
  6. Docs Missing Events

    The docs used to show members, methods, and events, but now the events aren't showing up. Were they dropped by accident maybe? -Because the reference for them was pretty handy:)
  7. Camera Events

    Hi, I'm trying to detect when a Camera (ArcRotateCamera) is changing. Is there any event like OnChange,...? I was trying to find it in the documentation without success. Thanks,
  8. Hello, everyone. I am using Phaser 2.8.3 Basically I want to add a sprite to two groups. In my game I want three columns so I have three column groups. this.leftColumn =; this.middleColumn =; this.rightColumn =; Later I add buttons into these groups this.spawnRateButton = []; this.spawnRateButton.push(this.leftColumn.create(0,0,"custom-left-button")); this.spawnRateButton.push(this.middleColumn.create(0,0,"custom-middle-button")); this.spawnRateButton.push(this.rightColumn.create(0,0,"custom-right-button")); for(var i=0;i<3;i++){ this.spawnRateButton[i].inputEnabled = true; this.spawnRateButton[i].events.onInputDown.add(this.buttonPress,this); } However here comes my problem. I want these columns to be scrollable, so I have to utilize this . this.scroller = game.add.existing(new ScrollableArea(x, y, width, height, {horizontalScroll: false})); //... this.scroller.addChild(this.leftColumn); this.scroller.addChild(this.middleColumn); this.scroller.addChild(this.rightColumn); this.scroller.start(); The scrolling works, however, the events.onInputDown of the spawnRateButtons do not. I click the buttons and nothing happens. When I take away the scroller everything works fine except for the scrolling, of course. When I add the sprites individually to the scroller it doesn't work either. I am guessing this is because I am trying to add the sprites to two groups? Is there a correct way to do this?
  9. My code has a setup function that runs at the start. Within that setup function I have the left and right arrow keys setting up movement like so: left = keyboard(37); = function(){ moveCharacterLeft(); }; It works fine. But then when I get a gameover my game runs a reset code and all variables are reset back to their former states and the setup function runs again. Well this means that the above function runs again as well, and this makes it so that each time I get a gameover and reset the game, the above function will run multiple times for each button press. So after one game over, if I hit the left key, the moveCharacterLeft() function will fire twice, and my character moves twice as far.. Three times for the next gameover.. ect.. Does anyone know how I can prevent this from happening? Admittedly I don't quite understand what's happening here..
  10. I am working on a project that switches between a handful of scenes. To do this I load all of my scenes at the start so you can switch between them quickly. You start out in an overall view of the area and you can click markers to go into rooms. In the rooms are more makers that are hooked up to click events. However If one of the markers in the scene is in the bottom left of the screen per say and I move to a different scene, If I would click in the bottom left of the screen the click event of the previous room triggers. How do I make sure that click events are only active for the currently active scene?
  11. Just noticed an issue. Lets say we have a group named OurGroup with three buttons (represents settings window with buttons 'soundOn', 'pause', 'close'). Each button have its own inputDown listener (or any else like inputOver, inputOut etc.). Then we add this group to the game via It works perfect, all the buttons are clickable and so on. Some time later, we want to remove the group from the game (i.e. user clicked the close button on our window) by itself: /*somewhere in the OurGroup class*/ if(this.parent) { this.parent.removeChild(this); } OK, the OurGroup has succesfully removed from the game, it's invisible. But! The listeners attached to the group's buttons are still active and react the input events! Could someone explain me is it a bug or I'm doing something wrong? I migrated to Phaser from flash, and there after have removed a DisplayObject from a stage, all listeners attached to it were removed as well.
  12. Hi everyone, I'm trying to make a sprite moving when the mouse is over it and I'd like it to stop when the mouse is not over it anymore. Here is my code: => touchMouse = true); => touchMouse = false); and update() { if (touchMouse) { mySprite.x += 5; } } My sprite is correctly moving but the onInputOut signal is not dispatched if I don't move the pointer out of the initial position of the sprite !! This result in my sprite moving out of my pointer and continuing its journey until I move my mouse... Is it a phaser bug? Has anyone a solution to make this work? Thank you very much and have a good day, Simon Edit: I just tried to use the Phaser.InputHandler object instead but I got the same kind of bug. Here is the code: update() { if (mySprite.input.pointerOver()) { mySprite.x += 5; } }
  13. I'm trying to draw a graph incrementally, one line segment every second. I start with this: graphics =, 50); = graphics; ...and draw up the graph axes etc - all works fine. Then I set the line style, plot the first data point and then create a series of calls to nextData() - one per second: graphics.lineStyle(5, 0xff0000, 1); graphics.moveTo(xData[0], yData[0]);, 159, nextData, this); The nextData() function takes x and y coordinates from arrays according to a step variable that increments each time the function is called: function nextData() { graphics.lineTo(xData[step], yData[step]); step++; } However, nothing gets drawn. The data is all fine - all the values are correct and the function is called once a second and the step function increments as it should. The only thing I have noticed is that if I put in a REALLY small value for the time interval in like this:, 159, nextData, this); e.g. 1 instead of 1000, the first data point is drawn but nothing else - no lines, nothing. I tried this with Javascript setInterval() as well and it didn't work then either so I'm thinking it has something to do with the graphics?
  14. mini-runner

    Hey All! Thought you guys might like too check out mini-runner a simple alternative to events and signals with an emphasis on performance. It currently forms the backbone of the messaging system in our game engine. Its working out great for things like update events, collision events etc. Great to use if you are say looping through and array and calling the same function on each object. The resulting code is cleaner than a loop whilst still keeping the performance as fast as possible. So yeah, if you are dispatching signals/events to a lot of listeners often (like everyframe often), then I would considor using this alternative. For most cases, this performace boost is not really important enough to switch from your current fave. Think of this as a nice alternative for when speed really counts! Cheers!
  15. Touch and click events on mobile

    Tested my project on android device and found that my application don't react on any touches. Started to debug and found that function written in this way never fires: = function(e) { console.log("click!!"); } So I have to work it correctly to dublicate it in this manner: = function(e) { console.log("click!!"); } sprite.on('touchend', function(e) { console.log("touch!!"); }); So I wonder is there any way to avoid code dublication?
  16. Because the event object passed in these input events are different from the events in dom, I am not sure if they use preventDefault() by default. Or do I have to get the original event object and do a `;` first?
  17. using game.paused

    So I have been looking at different solutions to pausing a game. And I wanted others opinions on how you guys go about doing this. As I found that when you pause it using default key input from phaser it locks up the ui and you cant unpause the game. I then ran across a solution such as the one below. But another way I have heard is just pausing the specific things that are relevant to being paused. Such as enemies and player ect. What do you guys find is the best method and do you guys have any examples that you might be able to point me to. Thank you. window.onkeydown = function(event) { if (event.keyCode == Phaser.Keyboard.P){ game.paused = !game.paused; } }
  18. Hi all, I'm having a problem with input events on my sprites. I have a grid of tiles, with an added child sprite. I've added an onInputDown event handler onto each tile. All works well, mostly... but then after a few clicks it seems that the sprite passed to my handler doesn't change - it remains the last sprite clicked. Here's some code: var pos = { x: 0, y: 0 }; var cols = 10; var rows = 10; var numberOfTiles = cols * rows; var tileWidth = 65; var tileHeight = 65; // Place tiles for (var i = 1; i <= numberOfTiles; i++) { var thisTile =, pos.y, 'tile', 1); var thisSprite = thisTile.addChild(,0, 'tile', 4)); thisTile.inputEnabled = true;, this); pos.x += tileWidth; // New column if (i % cols === 0) { pos.y += tileHeight; pos.x = 0; } } This sets out the tiles with no problems. Frame 1 for my background and frame 4 for the foreground. In my onDown function I tween the child sprite down to scale: 0 and alpha: 0. I also do a bit of calculation to work out which tile is clicked. onDown: function(sprite) { var thisRow = (sprite.position.y / tileHeight); var thisCol = (sprite.position.x / tileWidth); var thisTile = ((thisRow * rows) + thisCol) + 1;[0].scale).to({ x: 0, y: 0}, 500, Phaser.Easing.Linear.None, true);[0]).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true); } It seems this works a few times, but then seemingly at random the sprite being passed to the onDown function remains stuck regardless of which sprite I click. I can't be 100% sure, but I think this problem only occurs when I have a child sprite - does that sound right? I've no clue what's going on. Can anyone help?
  19. Hi, I have an animated ArcRotateCamera who's animation should pause quietly on user input (through PointersInput). At the moment the input components do not announce state changes. I think at the very least, input types should have a `get state` & an `on state change`. IMO the input system could use a rewrite.
  20. Hi everyone, the interaction in Pixi confuses me. I have the following simple structure: <div> <canvas id='pixi-container'></canvas> <div id='event-catcher'></div> </div> Both the canvas and the event-catcher have the same width/height and are positionned on top of each other: event-catcher on top of pixi-container. I then use the setTargetElement to tell pixi that I want event-catcher to catch the events. myRenderer.plugins.interaction.setTargetElement(document.getElementById('event-catcher')); However in my stage I have some sprites and DisplayObjectContainers that have onclick events that are not being fired. If I remove the event-catcher div it will work properly and click events are fired. Do I misunderstand the use of setTargetElement in Pixi? Thank you for any help.
  21. 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.
  22. Call input events explicitly?

    I have this color picker component which I created on my own. The structure of it is as follows: colorPicker is container graphics object which holds one color swatch graphics object(in this case the dark blue) and a button graphics object which has input handler. When i press the button, 13 other color swatch objects are added to colorPicker graphics object. Also when I press the arrow button again it destroys the below color swatch objects. However, it would be good if I can issue a command to remove other color swatches from outside of the colorPicker object, maybe when I press on the other area of the stage. How can I call existing event in graphics object from outside world? Is there some utility function in Phaser, like call() or?
  23. Hey guys! I'm working on adding a new ability to a game I'm working on. And I want to be able to activate it on mobile by double tapping the screen and hold to keep it active, then de-activate it when finger is released. Has anyone else solved this problem or have any suggestions on the best approach? Thanks!
  24. Gamescom 2016

    Hey - who's going to Gamescom in August? We'll be there - if you would like to meet for a coffee/beer and talk about Html5 games - ping me:)
  25. So scene setting.... I'm relatively new to Pixi JS but am an experienced developer (although be it in Flash not JS). I've managed pretty well so far and am in the process of converting another very basic game from Flash to JS as I have before. I've created a button class that aside from a few data options like colour etc, passes 2 functions in the constructor. 1) bindFunction and 2) clickFunction. The button has a usual 3 state system of Up, Over and Down; which each have their own image. The bind function is used to respond to all the following events : mousedown, touchstart, mouseover, mouseup, mouseout, mouseupoutside in the format : this.on('eventType', this.bindFunction.bind({dataobject})); In the bind function it reads the event type and then sets the appropriate image for the state. The dataobject passed to the bind function contains the other mentioned function clickFunction. In the bind function the appropriate click events then call the clickFunction. All make sense? Then stay with me. So I wished to have these buttons changeable on the fly i.e. the clickFunction and label could be changed, but I seem to be having issues unbinding the clickFunction part. I've created 2 functions to add and remove the event listeners and numerous functions to do the inbetween parts like update the label and clickFunction. When I run this, I can see it disable the buttons, see the new stored function and labels (via log), but when I then click it with the new label/function applied, it still calls the original function as well. I'm removing the function with the following format :'evenType', this.bindFunction); this.clickFunction = null; this.bindFunction = null; I've tried multiple ways of writing this and am still unable to remove the data passed from the original binding. Any thoughts? Can provide more details if necessary but hope this is detailed enough. Essentially the steps currently are: 1) Button bound with bindFunction1 and passed clickFunction1 2) Button clicked and bindFunction1 is called and it calls clickFunction1 3) Then clickFunction1 removes bindFunction1 from button and then nulls bindFunction1 and clickFunction1 on button 4) Button updated with bindFunction2 (which is actually bindFunction1 - only doing as having issues and thought removal and reset might help) and clickFunction2 5) Button bound with bindFunction2 and passed clickFunction2 6) Button clicked and bindFunction2 is called and it calls clickFunction2 but also clickFunction1 which it should not. I presume that there is some sort of ordering or way I'm doing this (context) that is obviously not removing clickFunction1 from the instance. I have checked it with just remove and no reassign, it does remove the listener but I don't think it's removing the object passed bind correctly. I've googled a lot for this and not found anything conclusive, hence posting this. I'm sure it's something glaringly obvious too hehe. Any assistance would be greatly appreciated. I'd really rather not have to clear and recreate the buttons, when it's only a label and click function that need changing. UPDATE: Yes I know I can solve this by separating the click function onto a separate event handler (I know this works), but this it more being interested how binding can work (or be troublesome) and reducing the number of handlers to deal with.