Jump to content

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


Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...