Forums » Help » Using image.resize(scale) method

I am trying to use the image.resize method to scale a hud graphic.

I have a background image that I use behind my text for pop up messages to the player.

I tried something like this:

 	reSizeIfNecessary: function() {
		var image = this.animSheet.image;
		if (image == null) {
			return;
		}
		
		if (image.width < ig.system.width) {
			return;
		}
		var scale = Math.floor(ig.system.width/image.width);
		image.resize(scale);
	},

In the image.js file comments lead me to hope this might work:
// The original image is drawn into an offscreen canvas of the same size
// and copied into another offscreen canvas with the new size.
// The scaled offscreen canvas becomes the image (data) of this object.

This gives me the following error:
Error: uncaught exception: [Exception... "Index or size is negative or greater than the allowed amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)" location: "impact/image.js Line: 165"]

I'm probably doing something totally out to lunch. Was hoping to find some code samples of a working example.

Has anyone worked with the image.resize successfully?

Thanks,

Yea, hmm.. not sure how viable it would be to use it through an animation sheet like that. You could do it with just an ig.Image...

var image = new ig.Image('media/hud.jpg');
var scale = Math.floor(ig.system.width/image.width);
image.resize(scale);
image.width *= scale;
image.height *= scale;

image.draw(0,0);

(untested)

I guess the animationSheet does use a ig.Image but there are probably other things you'd have to tweak to get it to use the right frame size and stuff after scale.

I don't think you can use the resize method. Look at iOSImpact's resize method - it's nulled out.

@Graphikos your suggestion got me on the right track.

I was using animSheet because I extended the class from ig.Entity (needed the checking routines).

Dumping the animSheet and working directly with an image seems to have done the trick.

At first I tried to avoid the use of:

image.width *= scale;
image.height *= scale;

Seemed logical to me that if the image was resized that the new image.width and image.height should be set in the resize method. But, that was not the case. Or, at least the draw persisted in blowing up until I followed your advice and set those after the resize.

Any clue why the width and height should not be set in resize?

Anyway it's working and that's what I was after.

@Arantor, I hear what you are saying about the iOSImpact not having this method. I will be careful when I target Android and iPhone to make sure that the code is updated to work around this.

The width and height appear to be tied to ig.system.scale so globally everything is the same scale. However when you are working with just one image you must manually make the adjustment.

You might find it's worth your time using the AppMobi XDK which I'm fairly sure will offer resizing.

I haven't made the purchase yet. However, I'm decided that I want to try AppMobi XDK as my deployment into the mobile area.

You can use the free one... it's confusing that they have 3 products all with XDK suffixes and it's very hard to tell them apart.