RenderTexture clipping sprites along negative axis

[crispus]

Hello!

I'm attempting to create an isometric scene, which involves rendering NxN tiles along an isometric grid.

I'm trying to implement chunking in order to handle large tile maps. I'm currently adding each tile as an individual sprite along the isometric grid to a 16x16 tile Container for each chunk. Since it's an isometric rendering, this involves rending sprites into the negative X axis. This renders well, and I can scroll horizontally across the map with no issue.

I want to use a RenderTexture as this apparently has some performance gain as the number of tiles increases. For example, I would like to render a single chunk Container to a RenderTexture, and display that as a single sprite instead of 16x16 individual sprites. The problem I'm having is that all tiles with positions x and y > 0 are rendered fine, however when I scroll horizontally across the map, all tiles positioned < 0 along the X axis are clipped. This is not an issue I have when rendering the tiles individually.

What am I doing wrong?

I've attached two screenshots demonstrating the difference between individual tile rendering and RenderTexture when scrolled into an X position along the negative axis.

[ivan.popelyshev]

Hello! There was generateTexture() somewhere, you can either find it, either do it yourself: 

Take container.getBounds(), then create renderTexture of that size, reposition container that way bounds.x==0 and render it in texture. 

You also can use https://github.com/pixijs/pixi-tilemap for pixiv3, it has better performance, you just have to clear() it and fill with rects each time scrolling happens.

My preferred method of isometry: consider rectangular tiles, tileHeight = tileWidth/2, and use only even ones (x+y)%2==0. That way your chunks will be jagged rectangles, and you wont lose space on the corners. 

[crispus]

4 hours ago, ivan.popelyshev said:

Hello! There was generateTexture() somewhere, you can either find it, either do it yourself: 

Take container.getBounds(), then create renderTexture of that size, reposition container that way bounds.x==0 and render it in texture. 

You also can use https://github.com/pixijs/pixi-tilemap for pixiv3, it has better performance, you just have to clear() it and fill with rects each time scrolling happens.

My preferred method of isometry: consider rectangular tiles, tileHeight = tileWidth/2, and use only even ones (x+y)%2==0. That way your chunks will be jagged rectangles, and you wont lose space on the corners. 

Thanks! I've had trouble getting generateTexture() to work. It doesn't seem to be rendering anything to the screen. An example of the code I have:

const stage = new PIXI.Container();
const map = new PIXI.Container();

stage.addChild(map);

const chunk = getChunkContainer();
const chunkTexture = chunk.generateTexture();

const chunkSprite = new PIXI.Sprite(chunkTexture);

map.addChild(chunkSprite);

function animate() {
  requestAnimationFrame(animate);

  renderer.render(stage);
}

When creating a RenderTexture manually, I had to call renderTexture.render(chunk). Do I have to call render on a generated texture? What do I pass as the display object?

Also, repositioning a Container doesn't have an effect on its bounds.x position, unless you mean repositioning the individual sprites within that Container such that the Container results in bound.x = 0?

[ivan.popelyshev]

I'll answer you later. I have to switch back to v3 to look at that thing. I had the code like yours and it worked before

[crispus]

So I wasn't preloading the textures each sprite was using within the container - Oops! It renders fine now. I find it odd that RenderTexture clips off sprites on the negative axis whilst generateTexture seems to handle this fine.

An unrelated question regarding PIXI.Loader - say I've loaded a texture from an image with the loader, I assume this texture is now cached? Now if I initialise a separate loader, which attempts to load the same image, does this new loader know that the assets already been loaded and cached, or does it attempt to load it again? Is this an optimisation I have to cover myself?

(Sorry for all the questions, but thanks for the help!)