Create/cache spritesheet from generated texture

[lincore]

Hi, I thought it would be fun to generate the textures I need at runtime, but I can't figure out how to coerce phaser into creating and caching a sprite sheet from it. At least it can't render it, when I try I get this error:

Quote

TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap.[Learn More]

 

PIXI.Sprite.prototype._renderCanvas /js/phaser.js:15607:13
PIXI.DisplayObjectContainer.prototype._renderCanvas /js/phaser.js:15119:9
PIXI.DisplayObjectContainer.prototype._renderCanvas /js/phaser.js:15119:9
PIXI.DisplayObjectContainer.prototype._renderCanvas /js/phaser.js:15119:9
PIXI.CanvasRenderer.prototype.renderDisplayObject/js/phaser.js:20422:5
PIXI.CanvasRenderer.prototype.render /js/phaser.js:20355:5
Phaser.Game.prototype.updateRender /js/phaser.js:36223:13
Phaser.Game.prototype.update /js/phaser.js:36144:13
Phaser.RequestAnimationFrame.prototype.updateRAF /js/phaser.js:61910:13
Phaser.RequestAnimationFrame.prototype.start/this._onLoop /js/phaser.js:61893:24

Here is the generating code...

var digitsData = [
       //----|----|----|----//
        '0000    1 2222 3333',
        '0  0    1    2    3',
        '0  0    1 2222 3333',
        '0  0    1 2       3',
        '0000    1 2222 3333',
        '                   ',
        '4  4 5555 6666 7777',
        '4  4 5    6       7',
        '4444 5555 6666    7',
        '   4    5 6  6    7',
        '   4 5555 6666    7',
        '                   ',
        '8888 9999          ',
        '8  8 9  9          ',
        '8888 9999          ',
        '8  8    9          ',
        '8888 9999          '];

    var g = game.add.graphics(0, 0);
    g.beginFill('#999');
    digitsData.forEach(function(line, y) {
        line.split('').forEach(function(ch, x) {
            if (ch === ' ') return;
            g.drawRect(
                    x * pixelSize, 
                    y * pixelSize,
                    (x+1) * pixelSize, 
                    (y+1) * pixelSize);
        });
    });
    g.endFill();
    game.cache.addImage('digitsImg', null, g.generateTexture());
    game.cache.addSpriteSheet('digits', null, 'digitsImg', 
            4 * pixelSize, 5 * pixelSize, 10, pixelSize);
    g.destroy();

... and here is where I try to use it:

    var scoreboard1 = new entities.Scoreboard(
                    game.width / 4, 
                    top, 
                    game.cache.getImage('digits'),
                    game),


// ...


function Scoreboard(x, y, image, game) {
    this._image = image;
    this._init(x, y, game);
}

Scoreboard.prototype._init = function(x, y, game) {
    this._x = x;
    this._y = y;
    this._digits = game.add.group();
    this._tens = game.add.sprite(x, y, this._image, 0);
    this._ones = game.add.sprite(x + this._tens.width, y, this._image, 0);
    this._digits.add(this._tens);
    this._digits.add(this._ones);
    this.setScore(0);
};

 

Hope you can help me out, thanks!

[rich]

The problem is that generateTexture returns a PIXI.Texture object, and Cache.addImage requires an Image object, so the data-types don't match, leading to the errors you're seeing.

[lincore]

I see. Does that mean phaser offers no other way to create a spritesheet from PIXI.Textures? If not I guess I'll have to load a file instead.

Thank you for your explaination.

[symof]

13 hours ago, lincore said:

I see. Does that mean phaser offers no other way to create a spritesheet from PIXI.Textures? If not I guess I'll have to load a file instead.

Thank you for your explaination.

I don't think you can make it from textures ( I've tried) but it does work with bitmapdata.

http://phaser.io/sandbox/edit/VnurwGfq

The above example creates a dynamic sprite sheet based on an array kinda like textures.

[rich]

Yeah you could do it from a Texture, it's a bit more convoluted though. Let me make an example to show you.

[lincore]

8 hours ago, symof said:

I don't think you can make it from textures ( I've tried) but it does work with bitmapdata.

http://phaser.io/sandbox/edit/VnurwGfq

The above example creates a dynamic sprite sheet based on an array kinda like textures.

Neat, thanks a lot!

 

7 hours ago, rich said:

Yeah you could do it from a Texture, it's a bit more convoluted though. Let me make an example to show you.

Thank you very much. Actually, it doesn't really matter to me if I do it from a Texture, I asked about that specifically out of sheer ignorance. I just picked up Phaser a few days ago and haven't had the time to actually understand what I am talking about. I'll go with sumof's example, you surely have better things to do than writing code for me :~)

[rich]

Here you go - this is how to do it from a Texture:

http://phaser.io/examples/v2/display/spritesheet-from-graphics