Search the Community

Hello, I got allot further in my goal to make a ribbon like menubar. But for some reason i had a error saying Sprite.On do not exist, so i had to edit the tsconfig file and add the line: "allowSyntheticDefaultImports": true, to the compiler options so after adding that i was able to use that methode. But here comes the problem: When i hit the Sprite Button -> it go's to the required function and print's in the console the message i provided, But when i want to acces the container from the UIMananger within the onButtonClick -> this.uiContainer i get error saying it's undifiend Anyone have a clue how to fix this? UI Manager Snippit (See: onButtonClick ) export class UiManager { private demoScene: Boolean = false; private uiContainer: Container = new Container; constructor(demo:Boolean) { this.demoScene = demo; this.uiContainer = this.GenerateMenuBar(); } public getUI(): Container{ return this.uiContainer; //Return the ui Correctly } private onButtonClick() :void { console.log("clickt on button"); let btnTest = this.createMenuButton(); // <<-- Error: this.createMenuButton is not a function console.log(this.uiContainer); // <<-- Error: Undefined this.uiContainer //Launch a event to show a sprite... } private GenerateMenuBar(): Container{ this.uiContainer.addChild( this.createMenuBackground(), this.createMenuButton(), this.createWallsnWindow(), ); return this.uiContainer; } private createMenuButton():Sprite{ console.log("Create MenuButton") var tmpSrite = Sprite.from('./src/Engine/assets/ui/btn_NewScematic.png'); tmpSrite.interactive = true; tmpSrite.buttonMode = true; tmpSrite.name = "menuButton"; tmpSrite.position.x = 10; tmpSrite.y = 59; tmpSrite.hitArea = new Polygon([40,0, 100,0, 100,40,40,40]); //Setup Hitbox tmpSrite.on('pointertap', this.onButtonClick); //Interaction... return tmpSrite; } Engine File -> Everything in here renders ok and uses the UIManager export class Engine { public renderer: Renderer; public loader: Loader; public world: Container; public graphics: Graphics; public fpsMax: number; public canvas: HTMLElement; public uiManager: UiManager; private assetsLoaded:boolean; // // constructor constructor(options: IEngineOptions) { this.loader = Loader.shared; this.renderer = new Renderer(options); this.world = new Container(); this.graphics = new Graphics(); this.fpsMax = options.fpsMax; /// * UI Manager * this.uiManager = new UiManager(true); this.canvas = options.containerId ? document.getElementById(options.containerId) || document.body : document.body; this.canvas.appendChild(this.renderer.view); /// /// Loader Setup /// this.loader.onComplete.add(() => { this.assetsLoaded = true; console.log("Assets Loader State:" + this.assetsLoaded); }) this.loader.load(); this.render(); } get view(): HTMLCanvasElement { return this.renderer.view; } public render(){ while (this.assetsLoaded = false) return; console.log(utils.TextureCache); let tmpWorld = new Container(); this.world.addChild( this.uiManager.getUI(), <<-- Render Fine and returns the Ui Container ); } } // Engine

I have this line "window.addEventListener('click', overBack);" which works perfectly. When having "window.on('click', overBack)" window is undefined, so I left the first option. But the problem is that "window.addEventListener('tap', overBack);" doesn't do the job. I've tried to replace window with page and screen and it didn't work. So I thought you might help me. How do I refer to the window/screen? Thanks in advance

Hey guys I have this input fields (they're not finished yet, I use them just for example). When I enter text the cursor goes with it and when I click outside I want to remove the cursor and keep the text obviously. Only mousemove event does the job but that's not suitable in this case. I pass a function that removes the cursor. I tried almost all the events but I don't manage to remove the cursor when I click outside of the input field.

As I understand there was an optimization to how things are erased from old scenes (not active scenes). Considering the last sentence, I have to optimize my code. But I am not really aware of how. The shutdown event has to be called manually on custom GameObjects. But I only guess that's how to do: class Parrot extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x * SCALE, config.y * SCALE, 'animals', 15); this.scene.events.on('shutdown', this.destroy(), this); //<- is it just that? } } For any explanation I would be grateful, thanks in advance!

Hi, The onReady function herited by Node in the videoDome class is never triggered. Here is the PG: https://www.babylonjs-playground.com/#SQ5UC1#7 Many thanks !!

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!

Hi, I'm looking for the same feature as I've already asked for the editor: an "onChange" event, but in DebugLayer. Here is the editor github issue for more details: https://github.com/BabylonJS/Editor/issues/48 Is it already possible to do that ? (I can't find how) And if it's not, is it possible to add it ? Thank you !!

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 (http://www.babylonjs-playground.com/?17) 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!

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.

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 http://playground.babylonjs.com/#R9Z7I its defined. Is there something really basic that I'm missing to be able to use those events?

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?

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?

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

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,

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?

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

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?

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.

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

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!

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

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.

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?

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?

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.