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

  1. 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!
  2. 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?
  3. 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?
  4. 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:)
  5. 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,
  6. 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?
  7. 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..
  8. 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?
  9. 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.
  10. 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; } }
  11. 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?
  12. 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!
  13. 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?
  14. 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?
  15. 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; } }
  16. 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?
  17. 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.
  18. 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.
  19. 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.
  20. 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?
  21. 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!
  22. 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:)
  23. 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.
  24. 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?
  25. Hello, I have a larger project using P2 physics with many tweens and the game sometimes moves randomly, some objects have some delays etc, even when game runs on almost stable 60fps. I've made a simple example in Phaser 2.4.6: var level = 1; intro = function(game) {}; intro.prototype = { create: function() { this.stage.backgroundColor = "#ffffff";, this.spawnWater, this, 4); }, spawnWater: function(amount) { for (var i = 0; i < amount; i++) { var topwater = game.add.sprite(683, 150, 'graphics2', 'static/smth/line.png'); topwater.anchor.setTo(0.5); topwater.scale.setTo(0.2); topwater.scaleTween = game.add.tween(topwater.scale).to({x: 1, y: 1}, 2000, Phaser.Easing.Cubic.In, true, (i*500), -1, false); topwater.positionTween = game.add.tween(topwater.position).to({y: 670}, 2000, Phaser.Easing.Cubic.In, true, (i*500), -1, false); } }, }; What should it do : - after 2 seconds it should spawn 4 lines - each line has 2 tweens, for scale and position. - tweens starts after 0, 500, 1000 and 1500 ms and they are looped infinitely (so they start again from starting values. - there should be line moving from y = 150 to y = 670 every 500 ms How does it work: When reloading the game sometimes the lines are moving correctly (that means every 500ms there is a line), but sometimes after first 4 lines there is longer gap (longer than 500ms) and is messing the way the lines are moving.... What is wrong? EDIT: delay times in tweens were wrong, fixed it from (i+1)*500 to (i*500)