Forums » Help » Image scale/cut problem

I have an image, that I successfully scaled up. But only the original size worth (top left hand corner) of the image is being displayed.

It is for a speech bubble that as a player types into it, I want it to get bigger above the player's head as he writes more and more text.

It is in a class SpeechBubble that inherits from Entity and owns instances of Font and Image.

Thanks in advance! ;-)

What do you mean "original size worth"... do you mean it's being "cropped" somehow instead of showing the expanded size?

Can you post your code for the SpeechBubble?

["What do you mean "original size worth"... do you mean it's being "cropped" somehow instead of showing the expanded size?"]

Yes exactly.

Here is the code, all the logic is in the Draw function for now

var xSize = 60;
var ySize = 10;

ig.module(
	'game.entities.ChatBox'
).
requires(
	'impact.entity',
	'game.entities.Player'
).
defines(function(){
	
		EntityChatBox = ig.Entity.extend({
		
		size: {x: xSize, y: ySize},
		collides: ig.Entity.COLLIDES.NEVER,
		
		ta: $('textarea')[0],
		playerString: "",
		chatString: "",
		
		foo: false,
		
		msgTime: new ig.Timer(),
		msgShowtime: 5,
		
		msgFont: new ig.Font('media/04b03.font.png'),
		
		bubbleTexture: new ig.Image('media/bubble.png'),
		
		init: function(x,y,settings)
		{
			this.parent(x,y,settings);
			
			//this.addAnim('idle', 1, [0]);
			this.msgTime.set(0);
			//size.x = ig.System.realWidth;
			//size.Y = ig.System.realHeight/3;
		},
		
		update: function()
		{
			this.parent();
		},
		
		draw: function()
		{	
			if(this.msgFont.widthForString(this.playerString) > this.size.x && !this.foo)
			{
				//Will Calculate an appropriete scale value later, I'm just trying to have it scale properly at the moment.
				this.bubbleTexture.resize(2);
				this.size.x = this.bubbleTexture.width * 2; 
				this.size.y = this.bubbleTexture.height * 2; 
				this.foo = true;
			}
			
			//On 'enter' add the value of the textarea to playerString.
			//Then clear the text area and set the timer (for how long the speech bubble is to be displayed)
			if(ig.input.pressed('enter'))
			{
				this.playerString += $(this.ta).val(); 
				$(this.ta).val("");
				this.msgTime.set(this.msgShowtime);
			}
			
			//Draw the bubble and font
			if(this.msgTime.delta() < 0)
			{	
				var player = ig.game.getEntitiesByType(EntityPlayer)[0];
				this.pos.x = player.pos.x;
				this.pos.y = player.pos.y - this.size.y;
				this.parent();
				this.bubbleTexture.draw(this.pos.x, this.pos.y);
				this.msgFont.draw(this.playerString,
								  player.pos.x + (this.size.x/2),
								  player.pos.y - (this.size.y/1.5),
								  ig.Font.ALIGN.CENTER);
			}
			else
			{
				this.playerString = "";
			}
			
		},
		
	});
	
});

Update on this,

I have tried messing around with other draw methods drawTile() while specifying the whole image as one big tile . . . didn't work, specifying draw(target, target, source, source, height, width) seemed to throw the INDEX_SIZE_ERR :-S, nothing seems to solve the problem. Surely I am doing something really fundamentally wrong. It can't be this hard to scale an image.

Like said above, before scaling, the image draws fine. But when you scale it, the image is cropped so you can not see the whole image (although you can tell that the Image has been successfully scaled, you just cant see the whole image)

If any one can see or has any clue on the issue please, please, be in touch.

Thanks in advance.

What's "this.bubbleTexture.resize(2);"? I don't find it in the Docs.

I didn't know it was actually possible to scale with Image at all to be honest as setting width doesn't scale the image but just controls how much of it that's showing (?).

EDIT: I presume you've seen this thread btw: http://impactjs.com/forums/help/scaling-images

Yes I have. Which was what lead me to finding out about resize in the first place, since as you quite rightly said, there is no mention of it in the docs.

I have made some alterations since. Originally, I had one speech bubble that re-positioned/reset it's text each time the player entered a message.

Now for each new message, the old speech bubble is deleted and the new one created with what ever text is written

in player::update()

if(ig.input.pressed('enter'))
			{
				var settings = {vel:{x:0, y:0}};
				var bubble;
				if(ig.game.getEntitiesByType(EntityChatBox)[0])
				{
					bubble = ig.game.getEntitiesByType(EntityChatBox)[0];
					bubble.bubbleTexture.reload();
					ig.game.removeEntity(bubble);
					bubble = 0;
				}
				
				if(ig.game.getEntitiesByType(EntityChatBox)[0])
				{
					alert("still there");
				}
				
  				bubble = ig.game.spawnEntity(EntityChatBox, this.pos.x, this.pos.y, settings);
  				bubble.bubbleTexture.reload();
  				bubble.setup($(this.ta).val(),5);
  				
  				//bubble.bubbleTexture.load();
  				
				$(this.ta).val("");
				//this.msgTime.set(this.msgShowtime);
			}

And, my ChatBox (speechbubble) functions.

init: function(x,y,settings)
		{
			this.parent(x,y,settings);
		},
		
		setup: function(text, time)
		{
			this.playerString = text;
			this.msgTime.set(time);
			
			if(this.msgFont.widthForString(this.playerString) > this.size.x)
			{
				var i = this.msgFont.widthForString(this.playerString) / this.size.x;
				this.scale = Math.ceil(i);
				
				this.bubbleTexture.resize(this.scale);
				this.size.x = this.bubbleTexture.width * this.scale; 
				this.size.y = this.bubbleTexture.height * this.scale; 
				
				this.bubbleTexture.load();
			}
			
			
		},
		
		update: function()
		{
			this.parent();
		},
		
		draw: function()
		{				
				var player = ig.game.getEntitiesByType(EntityPlayer)[0];
				this.pos.x = player.pos.x;
				this.pos.y = player.pos.y - this.size.y;
				this.parent();
				this.bubbleTexture.draw(this.pos.x,
										this.pos.y);
										
				this.msgFont.draw(this.playerString,
								  player.pos.x + (this.size.x/2),
								  player.pos.y - (this.size.y/1.5),
								  ig.Font.ALIGN.CENTER);
			
			if(this.msgTime.delta() > 0)
			{	
				this.bubbleTexture.reload();
				this.kill();
			}	
		},

Doing it this way has appeared to stop the strange crop issue. However I think my maths for determining the scale is off.

Also, does anyone know a method of scaling in just one axis (x or y)? as opposed to customizing the current resize() function.

Well, I also need something like this (some sort of text-bubble) so I would like to help you find out how to do all this but I can't even get this code to run without freezing my game.

Are there other pieces to the code necessary for running what you already have or are there still bugs in this code?

Hi Sleenee, sorry for the late reply

This text bubble is indeed part of a larger project. And requires that you have a PlayerEntity for it to work (since it's position is equal to the player's position (plus some tweaking variables)

It is also written with a 'setup' function to be called from elsewhere that tells it what the text is going to be.

The class was written to be created at run time, and not in the level editor or anything.

Hope this helps :-)

Rob

Oh, and also you will need an Image to represent the speech bubble (in the code above called "bubble.png")

if scaling is not required, then why does my entities are not reproduced exactly in the weltmeister http://postimage.org/image/br0weojqn/

See the reply to your other post.