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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 68 results

  1. Third time from me today :D, So I want to spawn these customers at random millisecs every loop... The problem is that when the first number is generated it uses it(this specific number) for every loop after that? Any ideas? this is how I'm trying to do it, but I guess there is a better solution... I can't create a variable, since the same thing is going to happen: * 10)*1000), this.createCustomer, this);
  2. 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 =; // do something with a sprite on mousedown }); Is there a less hacky way of doing this? Has anyone tried something similar? Cheers!
  3. 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; } }
  4. 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?
  5. 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!
  6. 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?
  7. I'm learning Pixi.js with the goal of creating a game with a lot of UI complexity (imagine something like FreeCiv). I'm starting with small projects and trying to learn good fundamentals. However, I'm struggling to handle interactions in an elegant and flexible way. (cc @PixelPicoSean) I'm creating a Checkers game. Something like this: Here is the basic setup: var gameState = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2]; // Create some textures var boardTexture = PIXI.Texture.fromImage(/*...*/); var pieceSprites = new PIXI.Texture.fromImage(/*...*/); /*...*/ // Create and append our renderer /*...*/ // Create the scene graph var stage = new PIXI.Container(); var board = new PIXI.Sprite(boardTexture); stage.addChild(board); // Add some pieces var pieces = new PIXI.Container(); gameState.forEach(square => { /*...*/ var piece = new PIXI.Sprite(/*...*/); piece.interactive = true; board.pieces(piece); }); stage.addChild(pieces); // Render with requestAnimationFrame /*...*/ So far, so good! Now, I'd like for each of the 24 pieces to be draggable by the user. No problem: dragging is just a function of user events. But here's where I stumble. I could attach callbacks to each of the piece Sprites (this seems to be the idiomatic Pixi.js way). However, my instinct is want to listen to the pieces Container instead. In the DOM Event world, events firing on a piece would bubble up to pieces, and the resulting would point to a piece. In short: Is there any way to emulate "event delegation" here? EDIT: The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.
  8. 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?
  9. phaser

    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; } }
  10. 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?
  11. 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.
  12. 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.
  13. Here is the JSFiddle. I have two events. game.input.onDown which does some logic (generates particles in my example), where textButton is a Phaser.Text object instance, which does another logic.The problem is: when I click on my textButton both event are fired 1 and 2. The question is, how to prevent event 1 from firing when I click on the textButton? And why is it happen? Part of code: ... //This event is fired on click anywhere event # 1 game.input.onDown.add(particleBurst, this); //This is Clickable text textButton = game.add.text( - 5, 5, "CLICK ME", fontStyle); textButton.anchor.setTo(1, 0); textButton.inputEnabled = true; //This event is fired on click on text event # 2 () { console.log("button is Clicked"); }, this, 2); ...Any help is appreciated. How can I stop event propagation?
  14. Hi I have game.input.onDown and listeners in game. I add listener for on game later than on sprite but listener for game triggers before event on sprite. Is there any way i can manipulate event flow. Similar to what we have in DOM events ( event.currentTarget event.preventDefault() event.stopPropagation() ) Can i stop event in game listener (if sprite was clicked too) or force event to trigger on sprite first under some condition?
  15. 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.
  16. 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?
  17. well.. this works.. but it is insufficient... if (game.input.mouse.button==2){ shootSensor();}if (game.input.mouse.button==0){shootFireball()}i need to set onDown events or ask for button.isDown ? i also need to find out when the button is NOT pressed anymore and i need to be able to press both buttons together and do 2 things at the same time... thx in advance!
  18. 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!
  19. When I try to use pointer events in my own code they don't work. The events are undefined. But somehow they work in a Babylon.js environment. I'm testing with this code: if (window.PointerEvent) { alert("pointer events DEFINED"); } else { alert("pointer events UNDEFINED"); } Its undefined in my environment, but in this playground its defined. Is there something really basic that I'm missing to be able to use those events?
  20. 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:)
  21. 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.
  22. 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?
  23. Hi, I'm new to Phaser and relatively new to JavaScript. I was wondering if there is there some documentation about what parameters each different event provides? For example the onDragStart event, what parameters are available for the function someFunction shown bellow? The examples I've tried (for example: drag example1 & drag example2) give me a different set of parameters without much explanation. var sprite = game.add.sprite(x, y, imageName);; function someFunction(...) {}
  24. 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)
  25. In Phaser 2.4.8 mouse events onInputOver and onInputOut are working only when you press and hold the mouse button and drug it over a sprite and out. Is it normal behaviour?