lincore

Create/cache spritesheet from generated texture

Recommended Posts

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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 :~)

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.