Forums » Help » NPC Chat Entity

Wondering if anyone else had any success with this? I want to show an overlay for NPC dialogue which lets the player step through the npc chat with the space bar. Two main problems are:

1. Extending the game class or creating an entity to do it still has a huge draw overhead.

2. The npc mission text updates too quickly.

Director.js

mission: {id: 0, stage: 0, complete: false},
init: function(theGame){
      this.game = theGame;
      this.game.ranks = this.rankNames;
      this.game.mission = this.mission;
},

Main.js:

startChat: function(){
		//If starting tutorial
		var npc = ig.game.getEntitiesByType( EntityReceptionist )[0];
		var player = this.getEntityByName( 'player' );
		if(this.mission.stage < 10 && this.showdialogue){
			//save the player pos
			player.startPosition.x = player.pos.x;
			player.startPosition.y = player.pos.x;
			
			//Chat Screen
			//ig.system.setGame(ChatScreen);
			ig.game.spawnEntity(EntityChatscreen, 0, 0);
		}
	},

chatscreen.js

ig.module(
	  'game.entities.chatscreen'
)
.requires(
	  'impact.entity'
)
.defines(function(){
EntityChatscreen = ig.Entity.extend({
	_wmDrawBox: true,
	tutorial: [],
	bg: new ig.Image('media/Reception.jpg'),
	npc: new ig.Image('media/Receptionist-bg.png'),
	
	init: function(x, y, settings) {
	    this.parent( x, y, settings );
	    
	    this.tutorial[0] = 'Hello Agent, What can I do for you?';
	    this.tutorial[1] = 'test1';
	    this.tutorial[2] = 'test2';
	    this.tutorial[3] = 'test3';
	    //console.log(this.tutorial);
	    this.response = this.tutorial[0];
	    
	    this.timer = new ig.Timer(2);
	    
	},
	
	update: function() {
	    
	    if(ig.input.pressed ('ok') && this.timer.delta() == 0){
		    this.nextStage();
		    this.timer = new ig.Timer(2);
	    }
	    
	    this.parent();
	},
	
	nextStage: function(){
		ig.game.mission.stage += 10;
		console.log(ig.game.mission.stage);
		
		if(ig.game.mission.stage == 10){
		    this.response = this.tutorial[1];
		}
		else if(ig.game.mission.stage == 20){
		    this.response = this.tutorial[2];
		}
		else if(ig.game.mission.stage == 30){
		    this.response = this.tutorial[3];
		}
		else{
		    this.kill();
		}
	},
	
	draw: function() {
	    this.parent();
	    var x = ig.system.width/2;
	    var y = ig.system.height/2;
	    this.bg.draw(0,0);
	    this.npc.draw(x + 100, y - 100);
	    
	    ig.game.font.draw( this.response, x, y-50, ig.Font.ALIGN.CENTER );
	    ig.game.font.draw( 'press SPACE to continue', x, y-10, ig.Font.ALIGN.CENTER );
	}
	
});
});

Well in the end the solution I found was using jQuery from a startChat function to display a modal conversation screen like this. There's no real need to use setGame just to display a screen I reckon.

startChat: function(){
		this.state = 'chat';
		var player = this.getEntityByName( 'player' );
		//save the player pos
		player.startPosition.x = player.pos.x;
		player.startPosition.y = player.pos.x;
		
		//If starting tutorial
		if(this.mission.id == 0 && this.mission.stage == 0){
			
			//Save game data
			this.saveGameData();
			
			//Chat Screen
			$('.tutorial').fadeIn();
			this.mission.stage+=10;
		}
	},