Copy

[Blintux]

hello!

 

I want to make minimap in my game.

I found one working method.

 

 

Code parts from my game:

this.stage = new PIXI.Stage(0x005e79);// Game rendererthis.renderer = new PIXI.autoDetectRenderer(1000, 800, {antialias: true});document.getElementById("gamearea").appendChild(this.renderer.view);// Renderer: Minimapthis.minimapRenderer = new PIXI.RenderTexture(1000, 800);// Display object: Game graphicsthis.sceneSurface = new PIXI.DisplayObjectContainer();this.stage.addChild(this.sceneSurface);// Game loop:this.minimapRenderer.render(this.sceneSurface);this.renderer.render(this.stage);// Minimap code:mapContainer = new PIXI.Graphics();mapContainer.beginFill(0xdb5e5e, 0.5);mapContainer.lineStyle(2, 0xdb5e5e);      mapContainer.drawRect(0, 0, 170, 130);this.stage.addChild(mapContainer);minimap = new PIXI.Sprite(this.minimapRenderer);minimap.position.x = 1;minimap.position.y = 1;minimap.scale.x = 0.15;minimap.scale.y = 0.15; mapContainer.addChild(minimap);

 

This method works great, I have a minimap in main stage.

But I want to move minimap to another stage. (another canvas)

I created new stage, new renderer:

 

this.stage2 = new PIXI.Stage(0x005e79);this.mmaprenderer = new PIXI.autoDetectRenderer(200, 160);document.getElementById("minimap").appendChild(this.mmaprenderer.view);// In loop:this.mmaprenderer.render(this.stage2);// Minimap code:mapContainer = new PIXI.Graphics();mapContainer.beginFill(0xdb5e5e, 0.5);mapContainer.lineStyle(2, 0xdb5e5e);      mapContainer.drawRect(0, 0, 170, 130);this.stage2.addChild(mapContainer);minimap = new PIXI.Sprite(this.minimapRenderer);minimap.position.x = 1;minimap.position.y = 1;minimap.scale.x = 0.15;minimap.scale.y = 0.15; mapContainer.addChild(minimap);

First part is works grat, i see a red rectangle in stage 2, but the sceneSurface no.

And I get this error: Error: WebGL: texImage2D: null ImageData

 

What is wrong?

Thx!

(and sorry for my bad english )

[msha]

You can't share textures between renderers in PIXI v2...

 

BTW this - 

this.minimapRenderer = new PIXI.RenderTexture(1000, 800);...this.minimapRenderer.render(this.sceneSurface);....minimap.scale.x = 0.15;minimap.scale.y = 0.15;

is a bad idea.

 

Do it like this:

this.minimapRenderer = new PIXI.RenderTexture(1000 * 0.15, 800 * 0.15);...this.sceneSurface.scale.x = this.sceneSurface.scale.y = 0.15;this.minimapRenderer.render(this.sceneSurface);this.sceneSurface.scale.x =  this.sceneSurface.scale.y = 1;

 

[caymanbruce]

On 3/15/2015 at 1:25 AM, msha said:

You can't share textures between renderers in PIXI v2...

 

BTW this - 

this.minimapRenderer = new PIXI.RenderTexture(1000, 800);...this.minimapRenderer.render(this.sceneSurface);....minimap.scale.x = 0.15;minimap.scale.y = 0.15;

is a bad idea.

 

Do it like this:

this.minimapRenderer = new PIXI.RenderTexture(1000 * 0.15, 800 * 0.15);...this.sceneSurface.scale.x = this.sceneSurface.scale.y = 0.15;this.minimapRenderer.render(this.sceneSurface);this.sceneSurface.scale.x =  this.sceneSurface.scale.y = 1;

 

How to do this in PIXI v4? What is the correct way to update minimap in game loop?

[xerver]

You cannot share textures between renderers, just have the minimap use the same renderer as the main game.

See: RenderTexture

[caymanbruce]

16 minutes ago, xerver said:

You cannot share textures between renderers, just have the minimap use the same renderer as the main game.

See: RenderTexture

I can't see my minimap, here is my code:

createMiniMap() {
	const width = 60;
	const height = 60;
	const texture = RenderTexture.create(width, height);
	this.gameScene.scale.x = this.gameScene.scale.y = 0.15;
	this.renderer.render(this.gameScene, texture);
	this.gameScene.scale.x = this.gameScene.scale.y = 1;

	this.miniMap = Sprite.from(texture);
	this.miniMap.position.set(280, 200);
	console.log('created mini map at ' + this.miniMap.x, this.miniMap.y);

    this.gameScene.addChild(this.miniMap);
}

createMiniMap();

No error is shown. and I can see my miniMap object is not null or undefined. Everything else on this.gameScene is showing. What could have gone wrong?

[xerver]

Do you render after creating the minimap? Can you show a running example?

[caymanbruce]

2 hours ago, xerver said:

Do you render after creating the minimap? Can you show a running example?

I have fixed my problem . Thanks. I need to put the renderer.render method in animation loop not in the create method. So in v4 textures can be rendered by different renderers so that I always need to render it manually not like other components in the stage which are rendered automatically when I write renderer.render(stage);

[xerver]

Thats not just v4, that is just how RenderTextures work. Generally they are used as a method of caching a render into a texture so you don't have to render it every frame (because it doesn't change). However, for your case you just want to update the texture each frame with a smaller scale. That's fine too.