Search the Community

Hello ?! I am experimenting with making a split screen multiplayer game, using a game engine backed by PIXI, GDevelop. To do so, I'm moving the "camera" (the root Container's position) to center each player and render the root container into a sprite, each sprite being a player's screen. To do the rendering, I've used code that looks like this (simplified for readability and to contain only the PIXI code, not the engine specific one) that runs every frame of the game: const source = the root PIXI Container; const width, height = the viewport width & height; const renderTarget = a PIXI sprite; global.rt = (global.rt || RenderTexture.create({ width, height })); global.sprite = (global.sprite || Sprite.from(global.rt)); if(!renderTaget.texture instanceof RenderTexture) renderTarget.texture = RenderTexture.create({ width, height }); renderer.render(source, { renderTexture: global.rt }); renderer.render(global.sprite, { renderTexture: renderTarget.texture });  The texture of the render target seems to be replaced, but it seems to be transparent (or the background color), no messages in the console, but after a few dozens of seconds the webgl context is lost. The more renders the quicker, so i am guessing it has something to do with the amount of times i do the rendering. Does anyone have some pointers about what i may have done wrong? Thanks

Hi, We're fairly new to pixi.js and so far everything worked great, but we've now run into our first problem we couldn't figure out browsing the forum and the web. We are currently creating a diagram consisting of lots of elements (about 12.000 elements, could get even more later on). That's going fine so far, but we now added an option for the user to filter the elements on display. So, every time the user changes the filter options, we remove all elements and add the new amount of filtered elements. That still works fine for a couple of times, but after about 9 changes Chrome loses the WebGL context, which leads to nothing being displayed. A short summary of what we're doing: 1. Initializing the stage a) Create a new Viewport using pixi-viewport b) Create all the objects c) Add our function doing visibility checks to shared ticker 2. When the data changes: a) Remove function from ticker b) Remove all children (iterating backwards, so we don't miss any) c) Destroy every child after removing it d) Start over at 1. b) keeping the current stage/viewport From my understanding, there should only be one WebGL context the way we are handling this. Can it be that pixi-viewport does something under the hood we are not aware of? Currently the objects are all sprites, except one container, that we empty as well before removing it from the stage. Before that, some of the objects were Pixi-Graphics, so I thought that maybe these are using up contexts as well, but changing them to sprites did not help. And the problem only occurs in Chrome & Edge (in Edge even sooner), Firefox seems to do fine. At least I did not get to the point, where the problem occurs. We did not test other browsers since Windows is out target platform, but here the three major browsers should work. Thanks for any hints what to check.

Good morning guys! I've created a class to manage my sliders in Phaser 2.6.2 with Typescript. I create an object slider like this in file a.ts: let slider = new Slider(game, x, y, width, height, mycallback); mycallback is like that: export function mycallback(value: number): void { usedvalue = value; } My slider class is like that: export class Slider extends Phaser.Group { protected value : number; constructor ( game : Phaser.Game, x : number, y : number, width : number, height : number, onClickCallback : Function ) { super(game); console.log(this); } setParameter(sender) { this.value = sender.width - sender.x; console.log(sender); console.log(this); this.onClickCallback(this.value); sender.onClickCallback(this.value); } } Ok, now both this.onClickCallback(this.value); and sender.onClickCallback(this.value); return an error "onClickCallback is not a function". The first console.log(this), the one inside the constructror, give me the right log writing Slider and all his values. The second console.log(this) and console.log(sender), the ones in setParameter, return me game. What is my error? How can I resolve this?

Hi, friends, what is context in this code "game.add.button(x, y, name, callback, context) " and why this is used in place of context in this code "this.muteButton = game.add.button(20, 20, 'mute', this.toggleSound, this);

When I change tab in chrome browser on PC and visit again after like 30 minutes the game screen is blank with this warning message: WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost On one of my android tabs that happens when I press home button and open android browser again. I tried the search function of this forum but could not find anything relevant. What is happening and how to prevent it? If anyone knows how to handle the context_lost situation or redirect me to the helpful resource. Thanks

Hi all, I'm using Phaser and I came across a glitch which is, I think, due to a bug in the PIXI.TilingSprite.protototype._renderCanvas() method. The bug might be linked to a bad restore of the context. In my game, once I introduced tiling sprites, everything started to "slide". So I assumed that adding tiling sprites to the game introduced the "sliding" effect in the context. To prove me right I logged "context.currentTransform" at the start and end of the TilingSprite._renderCanvas() method, and I came across that result : Start of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: 0, f: 0} End of method : SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -1255, f: -822} So as you can see the e and f parameters are different. If I do a context.save() at the start of the method and a context.restore() at the end, everything works perfectly. Same goes if I hardcode context.setTransform(1, 0, 0, 1, 0, 0); If it helps reproduce the bug, here are the values I have in the method : wt = {a: 1, b: 0, c: 0, d: 1, tx: -1255, ty: -822, type: 24} resolution = 1 tx = -1255 ty = -822 tilePosition = {type: 25, x: 219, y: 0} tileScale = {type: 25, x: 1, y: 1} tilePosition.x = 219 tilePosition.y = 0 this._width = 4200 this._height = 2400 I'm not a Pixi expert (first post in this section!), nor in canvas/context, so I'm sorry for any mistake. Also I hope this has not been flagged already! Thanks guys!

SUMMARY: This post: HOW TO 2nd post: Original question that originated this post 3rd post: Research log concerning some problems and workarounds pertinent to this how-to THIS HOW-TO IS IN AN UNUSABLE STATE, AND HAS BEEN NOW ABANDONED. SORRY FOR THE NOISE. Okay, so after some hours of research here's what I came up with, in case anyone's interested or as a future reference for myself. These are the configuration steps to set up a Phaser project in Eclipse Mars.2 (4.5.2). I guess these might change from version to version, but remain essentially similar. You'll need to set up a local web server, but this is beyond the scope of these instructions. In my case I installed a WAMP (Windows-Apache-MySQL-PHP). 1. Head to http://phaser.io/download/stable and click on "clone". In my case this took me to: https://github.com/photonstorm/phaser/tree/v2.4.8 2. Click on "Clone or download". A dialog unfolds with the git repository URL. Copy to clipboard. In my case it was: https://github.com/photonstorm/phaser.git 3. Go to Eclipse and: Window->Perspective->Open perspective->Other->Git->Ok 4. Select to clone a Git repository. Paste in URI field->Next 5. Select All. Theoretically IIUC you should only need the "Master" branch. But I selected all just in case.->Next 6. It will want to clone in some default directory. It's okay like that, just copy the directory path to the clipboard for later.->Finish 7. Go tease you favorite pet/mate while the repository is cloning. 8. Window->Preferences->JavaScript->Include Path->User Libraries->New->Enter "Phaser" as the library name->Add folder->Paste in the "folder" field->Ok 9. Still in Preferences->General->Web Browser->Use external web browser->Select your html5 browser. In my case I left it at "Default system web browser", which is Chrome. 10. Still in Preferences->Server->Runtime Environments->Add->Basic->HTTP Server->Next->Enter your HTTP local server's web directory in the "Publishing Directory" field. In my case this was: "C:\wamp\www"->Finish->Ok 11. Window->Perspective->Open perspective->Other->Web->Ok 12. File->New->Static Web Project->Enter your project's name in the "Project name" field->Select HTTP Server in Target runtime->Finish 13. Right click on your project->Properties->JavaScript->Include Path->Libraries->Add a JavaScript Library->User Library->Select Phaser->Finish->Ok 14. Download https://github.com/photonstorm/phaser/raw/master/resources/tutorials/01%20Getting%20Started/hellophaser.zip or head to http://phaser.io/tutorials/getting-started/part6 and look for the hello phaser example if the previous link didn't work->Unzip in a temporary folder and drag the contents to your project's "WebContent" folder in Eclipse.->Copy files->Ok 15. Right click on WebContent->Import->General->File System->Next->Browse to your git root directory\phaser\build->Select it->Ok->Check phaser.min.js->Finish->Overwrite?:Yes --- OR --- Use your system browser to open the aforementioned directory and drag phaser.min.js to your WebContent on Eclipse and overwrite. 16. Reformat your code from this: var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); function preload () { } function create () { } function update () { } function render () { } to this: var state = new Phaser.State(); state.preload=preload; state.create=create; state.update=update; state.render=render; var game = new Phaser.Game(800, 600, Phaser.AUTO, '', state); function preload () { } function create () { } function update () { } function render () { } (More info about this in 3rd post) 17. Right click on your project->Run As->1 Run on Server->Basic->HTTP Server->Next->You might need to change your HTTP Port if your server doesn't default to listening on port 80->Finish Your project should have opened in your browser. NOTE: 1. I have no idea if step 14 is correct, or whether you need to include other files in your project's web content directory. 2. If Content Assist (that's what's called the feature I was calling autocomplete) doesn't pop up, hit CTRL+Spacebar. It should work and display Phaser's API documentation. 3. For following new projects you just need to follow steps: 12 to 17, as long as you don't switch your workspace, of course. 4. I will edit this post to reflect changes if you point out any errors in the procedure, etc. Cheers, Eneko P.S.: Setting up IDEs is always a nightmare, isn't it? Unless you got some template...

Hello, i was trying to attach eventListeners to sprites. I did that in the create function : this.selectorGroup = game.add.group();height = 200;// looping through json for(var key in res){ var selector = game.add.sprite(625, height - 10, "resourceSelector"); selector.inputEnabled = true; // adding some custom property selector.data = key; // attaching eventListener selector.events.onInputUp.add(this.triggerSearch); // adding the sprite to a group this.selectorGroup.add(selector); height = height+40;}// setting all elems of the group to alpha 0this.selectorGroup.alpha = 0;then in the callback function : triggerSearch = function (item, pointer) { // this is working console.log("looking for ", item.data); // hide previous selections this.selectorGroup.alpha = 0; // this isnt working item.alpha = 1;};also, i cant access the selectorGroup to apply alpha 0 to all children in order to reset previous selections. though, if i dont set alpha to 0 to sprites in create function and i put item.alpha = 0 in the callback, i can remove opacity from the sprites... Am i missing something?

hey everyone, I've been around this forum a couple of times, and have usually found what I am looking for somewhere, but I'm a bit at a loss right now. I'm using Babylon.js to visualize architectural plans. The pre-babylon.js calculations have become sufficiently fast to load a number of scenes in quick succesion after another. My problem: This does not delete the webgl / babylon context. Anytime I load a new scene, the old one does not disappear (obvious from performance). I have come up with a number of ideas, but none have helped thus far. 1) I have deleted and recreated the object responsible for anything babylon.js. This has had no effect. 2) There is only one active canvas at all times. Whenever a new scene is created, I delete the canvas, and do a parentNode.replaceChild with a new one. This has had no effect. 3) I have reset the old WebGL context to it's initial state (see https://www.khronos.org/webgl/wiki/Debugging), and created a new one. This has returned me a slew of errors WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program babylon.2.0.js:4 WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program babylon.2.0.js:4 WebGL: INVALID_OPERATION: uniform4f: location not for current program babylon.2.0.js:4 WebGL: INVALID_OPERATION: drawElements: no valid shader program in use babylon.2.0.js:4 from babylon.js and breaks performance, showing me again that babylon.js tries to perform actions on the old context. As far as I am aware, I can not actively delete WebGL contexts - I have to wait for garbage collection to do that for me - but maybe I can disable any functions on that context or something the like? I would really appreciate help on the topic. As a side note, I'd appreciate tips on performance in general. hybridius

Hi, I have been using Pixi.js for a few months now and I am wondering if it is possible to erase lines drawn on a PIXI.Graphics object. Basically I have some functionality where I am able to draw on a Graphics object on a Sprite using mouse and touch events. My issue is that the sprite has a texture which is not just 1 color. If the texture was blue I would just draw with blue color to "erase" the lines i had drawn earlier with another color. If I was not using Pixi.js I could use the functionality shown here: http://cssdeck.com/labs/jwvajze4/ This eraser functionality is excactly what I need, but I need it in Pixi.js. Is it possible to adapt this same functionality in Pixi.js? Any suggestions or tips would be great.

Hey everyone, I am a little new to phaser but I am currently having a problem that I am sure not many of you would have encountered due to its uniqueness. so right now I am creating a game that needs to be destroyed a number of times. The reason I do this is because after I destroy the game the players will view the high scores of other players (multiplayer games) and that it accomplished by routes without reloading. after a duration I will be routed back to a new instance of the game. I have pin pointed the error from logs. It comes from the this.context.createBuffer in the unlock function. For some reason after the 5th time I create a game and I do a mouse click i get an error when phaser tries to create the buffer due to context being null. TypeError: null is not an object (evaluating 'this.context.createBuffer'). Would this be some memory leaks? Every time the game finishes I call destroy on the game to clean up resources and set it to null for garbage collection, but as of now I am stumped. Can anyone help??? Thank you!

I feel like I'm just bad at Javascript to have to ask this question so please keep the disparaging remarks to a minimum. I have some game handling taking place on a server and being sent back to the game via JSON like this: Strategy.Game.prototype = { create: function() { this.greenGroup = this.add.group(); this.greenGroup.create(100,100, 'greenParticle'); this.getPath(); }, getPath: function() { $.getJSON("http://mysite.com/strategy/ajax/play.ashx", function (data) { console.log(JSON.stringify(data)); data.forEach(function(step)) { // need access to "game.greenGroup" here to create group entities and move existing ones. } }); }} There is more to the game obviously but hopefully you get the idea. I need to access game entities as I would normally have done with "this.greenGroup" but within the event handler the context has changed. I've tried pulling up the javascript console and seeing if I could track down how to reference the game object but I haven't found it. I can reference the class but it's not the actual working game object. Strangely the ways I've found to reference the game class the greenGroup is always undefined. Any idea where I've lost it?

I'm trying to make it to where the user can draw lines on the screen, with a bitmapData object. When I try to draw on the screen, I get a 404 error, and I'm not sure why. Any help is appreciated! Here's my code: var game= new Phaser.Game(720,1000,Phaser.CANVAS, 'game_div');var play={ preload: function() { this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setShowAll(); game.scale.refresh(); this.game.load.image('nope','assets/wrong.png'); }, create: function() { this.bmd=this.game.add.bitmapData(720,1000); this.ctx=this.bmd.context; this.ctx.setLineWidth(5.0); this.ctx.setFillColor(255,0,0,0); this.game.add.sprite(0,0,this.bmd); this.game.stage.backgroundColor='#ab54c1'; this.game.scale.forceOrientation(false, true, 'nope'); }, update: function() { if(this.game.input.activePointer.isDown) { this.ctx.lineTo(this.game.input.activePointer.x,this.game.input.activePointer.y); } }}game.state.add('play', play);game.state.start('play');

Hi, I have a general question. Refer to the following dummy code: var cvs, ctx;cvs = document.getElementById( "single_canvas" );ctx = cvs.getContext( "2d" );// Do some 2d drawing here.// ...// Never want to use 2d context from now on// Want to re-use canvas element but with 3d contentctx = cvs.getContext( "webgl" );// ctx is nullSo, is there a way to unlock/free a canvas context in order to re-initialize it again? Best, benny!

I *think* there may be a problem, but I'm not sure, as all this back end and iOS stuff is really not my speciality. Story time! When testing touch controls on the iPad, my callbacks that I had assigned to game.input.touch did not appear to get called. I assigned the callbacks to the Touch object like this: game.input.touch.touchStartCallback = this.onTouchDown;game.input.touch.touchEndCallback = this.onTouchUp;My functions looked like this: onTouchDown: function(event){ this.game.input.recordPointerHistory = true; this.doThings = true;},onTouchUp: function(event){ this.game.input.recordPointerHistory = false; this.doThings = false;},I had a debug line on the screen that would print out the state of the doThings variable, and it never changed. I then added a test bool to the touch class, and set it to true/false right before the callback was supposed to be called. Snippet from Touch.js: onTouchStart: function (event) { if (this.touchStartCallback) { this.down = true; //My test addition this.touchStartCallback.call(this.callbackContext, event); }My debug line would now print out "true : false" when a touch started, telling me that the Touch.js function excecuted successfully, but my onTouchDown function did not. I put a breakpoint in my onTouchDown function, and found out that is was being run. The problem was the "this" object. The callbackContext that the function was being called on was something completely unexpected: an AudioContext object. In Sound/SoundManager.js, Line 71, is this snippet where the touch callback and context are being set: if (this.game.device.iOS || (window['PhaserGlobal'] && window['PhaserGlobal'].fakeiOSTouchLock)){ this.game.input.touch.callbackContext = this; this.game.input.touch.touchStartCallback = this.unlock; this.game.input.mouse.callbackContext = this; this.game.input.mouse.mouseDownCallback = this.unlock; this.touchLocked = true;}These were never cleared before my functions were assigned to the callbacks, so the context at that point was the SoundManager. I did notice that the unlock function in SoundManager.js contained this snippet: if (this.game.device.webAudio == false || (window['PhaserGlobal'] && window['PhaserGlobal'].disableWebAudio == true)){ // Create an Audio tag? this.touchLocked = false; this._unlockSource = null; this.game.input.touch.callbackContext = null; this.game.input.touch.touchStartCallback = null; this.game.input.mouse.callbackContext = null; this.game.input.mouse.mouseDownCallback = null;}but this was never called, as evident by the callbackContext not being null when my callback was called. To solve my issue, all I did was assign my object to the game.input.touch.callbackContext via game.input.touch.callbackContext = this;All that being said, I guess that I needed to set the callbackContext from the beginning (which I didn't do), and I guess that the unlock function is supposed to be called but isn't?