Image creation and cache

[pistacchio]

Hi,

I have the following working code where I basically load an image from a file and use to create a retroFont:

this.load.image('yellowredfont', 'static/img/textfont.png');[..]var font = this.add.retroFont('yellowredfont', 6, 5, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789');font.text = 'TOP SCORE';this.add.image(20, 50, font);

What I'm trying to do is to embed that image into a larger one and create on the fly and image from a selection of that bigger one. Just to start with something easier, I try to dynamically create an image from that same "font" PNG and add it to the cache, like this:

 

 

this.load.image('yellowredfontIMAGE', 'static/img/textfont.png');[..]// create a bitmap data to store the image datavar retroFontData = self.make.bitmapData(215, 5);// copy in it the whole content of the original image. this is done when the preloader has finishedretroFontData.copyRect('yellowredfontIMAGE', new Phaser.Rectangle(0, 0, 215, 5), 0, 0);// create an image with that bitmapDataGame.assets.images.retroFontImage = self.make.image(0, 0, retroFontData);// manually add the image to the cachethis.game.cache.addImage('yellowredfont', null, Game.assets.images.retroFontImage)

I expect now to have in the cache the very same "yellowredfont" images as in the first code, but instead it gives me the error

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Can anybody help me? Thanks

[Cudabear]

Hmm, it seems to be getting tripped up on this line:

 

retroFontData.copyRect('yellowredfontIMAGE', new Phaser.Rectangle(0, 0, 215, 5), 0, 0);

but I tried it out locally and it seemed fine for me.  Are you certain the key 'yellowredfontIMAGE' is in your cache at this point?  Is the image fully loaded yet?

you could also try to change it to:

 

retroFontData.copyRect(game.cache.getImage('yellowredfontIMAGE'), new Phaser.Rectangle(0, 0, 215, 5), 0, 0);

to see if that changes anything.

[jmp909]

took me a while to work this out. 

 

i found this, and they're adding the image to the cache as a dataURL

http://codepen.io/ianmcgregor/pen/qkvcj

 

so I thought instead of trying to store a Phaser.Image to the cache (which doesn't make sense since the Image cache doesn't hold Phaser.Images, it holds image data), what if i convert it to a dataURI first?

this led me here http://phaser.io/docs/2.3/Phaser.BitmapData.html#generateTexture

 

generateTexture(key) → {PIXI.Texture}

Creates a new Image element by converting this BitmapDatas canvas into a dataURL.

The image is then stored in the image Cache using the key given.

 

 

here's my solution in TypeScript.. should be easy enough for you to convert to your version

preload() {     this.load.image('yellowredfontIMAGE', 'assets/demo/freebitmapfontsheet1.png');}create() {        // create a bitmap data to store the image data    var retroFontData:Phaser.BitmapData = this.game.make.bitmapData(483, 21);    // copy in it the whole content of the original image. this is done when the preloader has finished    retroFontData.copyRect('yellowredfontIMAGE', new Phaser.Rectangle(0, 0, 483, 21), 0, 0);    // create the data URI, which adds it to the image cache with the supplied key    retroFontData.generateTexture("yellowredfont")    // "yellowredfont" is now in our Image cache, so RetroFont can see it!    var font:Phaser.RetroFont = this.game.add.retroFont("yellowredfont",8,7, '!"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`<|>~£@',35,6,7,0,0)            font.text = 'TOP SCORE';    this.game.add.image(20, 50, font);}

J

[jmp909]

Hi Cudabear, just to clarify from what I can tell..

 

I don't think the issue was getting "yellowredfontIMAGE" out of the cache.. it was storing that "yellowredfontIMAGE" cache image as a new "yellowredfont" cache image and then pulling out "yellowredfont" into the RetroFont

 

Hmm, it seems to be getting tripped up on this line:
 

retroFontData.copyRect('yellowredfontIMAGE', new Phaser.Rectangle(0, 0, 215, 5), 0, 0);

but I tried it out locally and it seemed fine for me.  Are you certain the key 'yellowredfontIMAGE' is in your cache at this point?  Is the image fully loaded yet?