Jump to content

Copy


Blintux
 Share

Recommended Posts

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 :) )

post-12893-0-05797400-1426347406.jpg

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

  • 1 year later...
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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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