lincore Posted August 24, 2016 Share Posted August 24, 2016 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! Link to comment Share on other sites More sharing options...
rich Posted August 24, 2016 Share Posted August 24, 2016 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. Link to comment Share on other sites More sharing options...
lincore Posted August 24, 2016 Author Share Posted August 24, 2016 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. Link to comment Share on other sites More sharing options...
symof Posted August 25, 2016 Share Posted August 25, 2016 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. lincore 1 Link to comment Share on other sites More sharing options...
rich Posted August 25, 2016 Share Posted August 25, 2016 Yeah you could do it from a Texture, it's a bit more convoluted though. Let me make an example to show you. lincore 1 Link to comment Share on other sites More sharing options...
lincore Posted August 25, 2016 Author Share Posted August 25, 2016 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 :~) Link to comment Share on other sites More sharing options...
rich Posted August 25, 2016 Share Posted August 25, 2016 Here you go - this is how to do it from a Texture: http://phaser.io/examples/v2/display/spritesheet-from-graphics JmCriat, lincore, Tilde and 1 other 4 Link to comment Share on other sites More sharing options...
Recommended Posts