Forums » Code » Old style message box

Hello !

I searched a long time for an old style message box ( like in castlevania for example ). So i've used the trigger entity to create one.

I've used ig.system.context to draw a rectangle around my text and made it dynamic with the height and width of the string your using ( if your using the default font of impact )

ig.module(
    
    'game.entities.textbox'
    
)

.requires(
    
    'impact.entity',
    'impact.font'
    
)

.defines(function() {
	
	EntityTextbox = ig.Entity.extend ({
		
	_wmDrawBox: true,
	_wmBoxColor: 'rgba(200, 0, 0, 0.7)',
	size: {x: 24, y: 32},
	
	type: ig.Entity.TYPE.B,
    checkAgainst: ig.Entity.TYPE.A,
    collides: ig.Entity.COLLIDES.PASSIVE,
    health: 50,
    zIndex: -10,
    gravityFactor: 0,
    
    textfont: new ig.Font( 'media/04b03.font.png'),
    text:'', // set in Weltmeister
    print: [],
    realprint: '',
    printc: 0,
    linec: 0,
    	
    duration: 5,
    durationTimer: null,
	nextEmit: null,
	
	
	init: function( x, y, settings ) {
	
		this.parent( x, y, settings );
		this.durationTimer = new ig.Timer();
		this.nextEmit = new ig.Timer();
		
		
	},
	
	triggeredBy: function( entity, trigger ) {
		this.durationTimer.set( this.duration );
		this.nextEmit.set( 0 );
	},
	
	writetext: function() {
		
	var x = ig.system.width/2,
    y = ig.system.height/2 - 40;
	
	var canx = ig.system.getDrawPos( x ),
	cany = ig.system.getDrawPos( y ),
	rectw = this.textfont.widthForString( this.realprint ) * 2,
	recth = this.textfont.heightForString( this.realprint ) * 2;
	
		
	if( this.durationTimer.delta() < 0 && this.nextEmit.delta() >= 0 ) {
		
		ig.system.context.fillRect( canx, cany, rectw + 2, recth + 2 );
		
		var text = this.text;
				
		this.print = text.split("");
		
		var i = 0;
			
		while ( i < 1 ) {
			if ( this.printc <= this.print.length && this.realprint.length <= this.print.length ) {
		
				this.realprint = this.realprint + this.print[this.printc];
				this.printc = this.printc + 1;
				this.linec = this.linec + 1;
				i = i + 1;
				
				if ( this.linec >= this.size.x && this.realprint.charAt(this.realprint.length-1) == " " ) { // line break problem manually solved.
					
					this.realprint = this.realprint + '\n';
					this.linec = 0;
				}
			
			} else {
				this.printc = 0;
				this.linec = 0;
				break;
			}
		} 
			
		this.textfont.draw ( this.realprint, x + 2, y + 2, ig.Font.ALIGN.LEFT );
				
	} else {
			
			this.realprint = '';
	
		}
		
		
	},
	
	draw: function (){
		
		this.writetext();
		
		this.parent();
		
	},
	
	
	
	update: function(){
		
	
		  
	 this.parent();
	 
	 
	},
	
	
	
	
	});
	

});

Create a new entity called textbox, and link it with a trigger like you would normally do in Weltmeister !


Feel free to use it for your project, and if you have any improvements i'll be glad to know them so i can improve the code ! ^^

Nice work! I really like the look of this. One suggestion, I would change the rectw and recth lines to this:

rectw = this.textfont.widthForString( this.realprint ) * ig.system.scale,
recth = this.textfont.heightForString( this.realprint ) * ig.system.scale;

Your code caused some issues with the background sizing when using a scale of 3 or greater, but this seems to take care of that.

Also, one question. Anytime I use text that displays on only one line (i.e., less than 24 characters), it will display the text and add 'undefined' to the end of it. What change would I have to make to fix this (besides just using longer text)?

Edit: It's not only when the message is under 24 characters, but when the final word goes over the 24 character mark as well.

Hello !

Thanks for the feedback !

I have two solutions for you ! ( as i'm not home, i can't really give some code directly sorry )

First : you can add spaces at the end of the text in Weltmeister ( if you don't want to struggle with the code ^^)

Second: You can try to add a conditional statement to the function to make it scale the rectangle and jump a line ONLY if the length of the text is superior to 24 ( or whatever you want ). I think that can work...

I'll try to give you a solution when i have the time to work on it !
( if you didn't find it by yourself by then :) )

Nice one. Thank you for this Entity.
Can you tell me, how can i add some background Image on it, that scales with the Text ?.
Because, iam pretty new to Impact Js and Javascript ^^'.

And how to fix the undefined bug ? I used spaces, but dont it looks not nice =/.