Demo game breaks with WebGL renderer, worked fine in older version of PIXI

[J4G]

I'm trying to develop a basic game using Pixi.js. It recently came to my attention that I was using an older version of Pixi and so was lacking the new filter features. I upgraded quickly. Unfortunately, it partially broke my game.

 

While clicking to place the rectangle still worked, using the arrow keys to move the tile background did not. After an hour of debugging, on a whim I changed to the CanvasRenderer from the WebGLRenderer. 'Lo and behold, that fixed my problem.There are the two versions of my game, the one working correctly with canvas and the one working incorrectly with WebGL.

 

Unfortunately, WebGL is essential to my project so I can't just make Canvas work. I've narrowed down the issue to my use of RenderTextures to optimize the tile drawing. Can I get help from a dev or someone with a similar problem?

[xerver]

Did you try the latest dev version of pixi? A bug in RenderTextures updating in WebGL was fixed recently.

[J4G]

I thought that was it, but no, it hasn't fixed my problem.

 

Cloud9 was giving me problems, so here's just the WebGL version:

[xerver]

I get this on any of your URLS:

 

Oops!
No application seems to be running here !!

[J4G]

Sorry- Cloud9 turns off the servers after a certain period of inactivity. What's the best way for me to show you my demo?

 

var renderer = new PIXI.WebGLRenderer(window.innerWidth - 5, window.innerHeight - 5, null, false, true);document.body.appendChild(renderer.view);var Game = function (){var self = this;self.map = new Tilemap('test', function (){self.map.draw();Game.animate(); //Start drawing the game});}var Tilemap = function (name,callback) //Creates the map{var self = this;$.get('/tilemaps/'+name+'.json', function (data,err) //Loads Tiled file{self.data = data;var image = new PIXI.ImageLoader("/tilemaps/"+name+".png"); //Gets the tilemap image fileself.texture = image.texture.baseTexture; //Creates baseTextureself.tiles = []; //Array of each tile with same baseTexturevar imageWidth = self.data.tilesets[0].imagewidth; //Number of tiles horizontallyvar imageHeight = self.data.tilesets[0].imageheight;var tileWidth = self.data.tilewidth; //Width of tiles in pixelsvar tileHeight = self.data.tileheight;image.addEventListener("loaded", function () //When the tilemap image file is loaded{for (var i=0; i < (imageWidth / tileWidth); i++) //For each tile in image{PIXI.TextureCache[name+'-'+i] = new PIXI.Texture(self.texture, { //Add each tile to cachex: i*tileWidth,y: 0,width: tileWidth,height: tileHeight});self.tiles.push(PIXI.TextureCache[name+'-'+i]); //Adds each tile to "tiles" array}callback(); //Allows game to proceed});image.load();});}Tilemap.prototype.draw = function () //Rendering tilemap and caching it{var self = this;var width = self.data.width; //Number of tiles horizontallyvar height = self.data.height;var tileWidth = self.data.tilewidth; //Width of tile in pixelsvar tileHeight = self.data.tileheight;self.background = new PIXI.DisplayObjectContainer(); //Contains each tile spriteself.mapTexture = new PIXI.RenderTexture(width*tileWidth,height*tileHeight); //Final textureself.tileData = self.data.layers[0].data;for (y=0; y < height; y++){for (x=0; x < width; x++){var tileType = self.tileData[y*width+x];var sprite = new PIXI.Sprite(self.tiles[tileType-1]); //Sprite based on cached texturesprite.position.x = x*tileWidth;sprite.position.y = y*tileHeight;self.background.addChild(sprite);}}self.mapTexture.render(self.background); //Render to final textureself.sprite = new PIXI.Sprite(self.mapTexture); //Map sprite based on final textureGame.stage.addChild(self.sprite); //Add map to stage}Game.prototype.animate = function () //Main drawing loop{var self = this;requestAnimationFrame(animate);function animate(){renderer.render(Game.stage); //Render the stagerequestAnimationFrame(animate);}}var Game = new Game();

This is a simplification of the code, but it contains all the essential parts. The most important (and the source of the bug, I believe), is Tilemap.prototype.draw.

 

[J4G]

I figured out how to fix it. Using

this.stage = new PIXI.Stage(null,true);

resolves the issue. I still think this is a bug!

[Mat Groves]

I figured out how to fix it. Using

this.stage = new PIXI.Stage(null,true);

resolves the issue. I still think this is a bug!

 

Agreed! thanks for sharing your fix - will make sure to verify and test the dev branch.

Cheers!

[J4G]

I think this bug has been fixed in the latest dev builds. Thank you!

[J4G]

Now I'm encountering a different issue, though it's possible it's just a result of my lack of understanding.

 

 

The hill-looking image is a sprite that is supposed to be below the tiles. The tiles are a single sprite made up of a render texture of a display object. When the display object is added to the stage instead of the render-textured sprite, I get typical behavior:

 

What's up here?

[Mat Groves]

Ah this looks like a alpha masking issue! will take a look into this for ya - is your renderer transparent?

thanks!

[J4G]

Stage background is black, render texture is not transparent, hills-thing has an alpha of about 0.7. Thank you!

[J4G]

Latest commit fixed the problem. You guys work quick!

[Mat Groves]

Latest commit fixed the problem. You guys work quick!

 

Pixi is my favourite thing to work on