Search the Community

Showing results for tags 'events'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

  1. 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?
  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. 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:)
  4. 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,
  5. 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 = game.add.group(); this.middleColumn = game.add.group(); this.rightColumn = game.add.group(); 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 https://github.com/trueicecold/phaser-scrollable . 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?
  6. 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); left.press = 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..
  7. 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?
  8. 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 this.game.add.group(ourGroup) 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.
  9. Spawning enemies at random period

    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: game.time.events.loop(Math.floor((Math.random() * 10)*1000), this.createCustomer, this);
  10. 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!
  11. 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: mySprite.events.onInputOver.add(() => touchMouse = true); mySprite.events.onInputOut.add(() => 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; } }
  12. Events / Signals

    Hey guys, Phaser newbie here, need some help with events. How are people dispatching custom events throughout their games. Let's say for example you have 2 classes. Main and Car. Main adds the Car class. The Main class needs to know when the car is low on petrol to update the UI. So would you use Phaser.Signals to handle this communication, or would you just call a function in the Main class directly from the Car class? Are there plans to improve events in Phaser? I understand events can't be global to the Phaser namespace because we need to support multiple Phaser instances, but couldn't events exist globally inside each World instance? All display objects within the World could dispatch and listen for events. Events could bubble up the display list. Does this sound feasible? Thanks! Matt.
  13. I'm trying to draw a graph incrementally, one line segment every second. I start with this: graphics = game.add.graphics(50, 50); window.graphics = 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]); game.time.events.repeat(1000, 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 game.time.events.repeat like this: game.time.events.repeat(1, 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! https://github.com/GoodBoyDigital/mini-runner/ 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: sprite.click = function(e) { console.log("click!!"); } So I have to work it correctly to dublicate it in this manner: sprite.click = 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. 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 event.target 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.
  17. 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 `event.data.originalEvent.preventDefault();` first?
  18. 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; } }
  19. 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 = this.game.add.sprite(pos.x, pos.y, 'tile', 1); var thisSprite = thisTile.addChild(this.game.make.sprite(0,0, 'tile', 4)); thisTile.inputEnabled = true; thisTile.events.onInputDown.add(this.onDown, 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; this.game.add.tween(sprite.children[0].scale).to({ x: 0, y: 0}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(sprite.children[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?
  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. 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.
  22. Here is the JSFiddle. I have two events. game.input.onDown which does some logic (generates particles in my example) textButton.events.onInputDown, 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(game.world.width - 5, 5, "CLICK ME", fontStyle); textButton.anchor.setTo(1, 0); textButton.inputEnabled = true; //This event is fired on click on text event # 2 textButton.events.onInputDown.add(function () { console.log("button is Clicked"); }, this, 2); ...Any help is appreciated. How can I stop event propagation?
  23. Hi I have game.input.onDown and mySprite.events.onInputDown 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.target 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?
  24. 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.
  25. 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?