Display object container to an image/sprite

[hubert]

hi!

 

I have a PIXI.DisplayObjectContainer() in my game that I use for maps. It is filled with tiles that the player walks on!

 

Is it possible to transform the DisplayoObjectContainer to a sprite ???

 

as a one image instead of drawing them all over again. All i need is a simpe sprite to move around the playable area.

 

 

 

 

container = new PIXI.DisplayObjectContainer();

 

and than to a PIXI.sprite or any other form of image???

[d13]

Perhaps you can use cacheAsBitmap()?

 

You can learn about it here:

http://www.goodboydigital.com/pixi-1-5-2-webgl-canvas-renderer/ 

[dirkk0]

Yes, you can do that with RenderTexture:
http://jsfiddle.net/dirkk0/6KVj4/

(via http://www.html5gamedevs.com/topic/1706-basic-tiled-game-performance-enhancement/ )

[xerver]

cacheAsBitmap if you just want to optimize a DoC to not have to update the nested children each frame; RenderTexture if you want to use that DoC's rendered view as a texture elsewhere.

[hubert]

It works!

 

But for some reason the sprite is cut into a small tiny element!

 

Any ideas why is this happening? Previously the tileset generated was full and big, now it is small...

_world.map = data.map;                        var ll = 0, rr = 0;                var r = 0;                                var myContainer = new PIXI.DisplayObjectContainer();                                                    for(var row in _world.map){                    var c = 0;                    for(var col in  _world.map[row]){                        var tileTexture = new PIXI.Texture.fromImage('assets/images/world/map/'+_world.map[row][col]+'.png');                        var tile = new PIXI.Sprite(tileTexture);                        tile.position.x = c*64 + ll;                        tile.position.y = r*64 + rr;                        var da = String(r) + String(c);                        _world.entities[da] = tile;                        myContainer.addChild(tile);                        c++;                    }                                        r++;                }                                var texture = new PIXI.RenderTexture();                texture.render(myContainer);                var background = new PIXI.Sprite(texture);                _camera[data.sector].addChild(background);            map = data.map;

This is how the map looked and looks right now..

 

 

[dirkk0]

I think it is because you need to give the RenderTexture a width and a height, like so:

var texture = new PIXI.RenderTexture(500,500)

[d13]

Can anyone explain the difference between `generateTexture` and `RenderTexture`?

They seem to do the same thing.. ?

[hubert]

From my understanding

 

generate texture -  accepts only a sprite created from image.

 

render texture - can be generated from any pixi object, display container etc. not only a sprite

[mrBRC]

umm... DisplayObject.generateTexture returns a RenderTexture instance that used the DisplayObject instance and boundbox property to generate the PIXI.Texture base of the PIXI.RenderTexture instance. That is, PIXI.RenderTexture inherits PIXI.Texture.. and essentially creates the baseTexture of itself using a referenced DisplayObject instance.

So there is really no difference between the two.



On top of that... it really doesn't have anything to do with Sprites. It's really all about the DisplayObjectContainer..

Sprites inherit DisplayObjectContainer, which in turn inherit DisplayObject. 

DisplayObjectContainer overloads both DisplayObject methods: _renderWebGL and _renderCanvas. which are essentially stubs for js hinting (as stated in the dev.pixi.js file).. they have no actual functionality, though declared in DisplayObject...


Those methods are called by CanvasRender.renderDisplayObject or WebGLRender.renderDisplayObject, respectfully, depending on which is being used.. a runtime factor... that why you see this.renderer.renderDisplayObject in the RenderTexture.render method.. renderer is assigned the rendering instance at runtime..


thus (kind of reiterating here), RenderTexture uses an instance of 'DisplayObject', assumes it has children, and than calls on renderer.renderDisplayObject(WebGLRender.renderDisplayObject|CanvasRender.renderDisplayObject).. which in turn calls on __renderWebGL or _renderCanvas.. 

so It would seem, just about every texture parameter is really being passed a RenderTexture instance, and every DisplayObject reference is really assuming the object has children and/or has overloaded the _renderWebGL and _renderCanvas methods.. and is thus assuming it is a DisplayObjectContainer..


 

Edited July 3, 2014 by mrBRC