Forums » Help » Entity Draw Issues

Hey guys, I'm having a lot of problems with drawing entities and need a bit of help. First, Chat entity draws if I spawn it from within main.js, but not if I spawn it in my Lobby entity, and Blinker entity won't draw even if I spawn it in main.js

Any help is greatly appreciated!

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.font',
	'game.entities.character',
	'game.entities.arrows',
	'game.entities.startbutton',
	'game.entities.activePanel',
	'game.entities.selectedPanel',
	'game.entities.lobby',
	'game.entities.chat',
	'game.entities.blinker',
	'game.entities.background',
	'game.igStorage.impact-storage'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	font: new ig.Font( 'media/04b03.font.png' ),
	
	grid: [],

	gamestate: {lobby: false, roster: false, placement: false, play: false, turn1: false, turn2: false},

	Socket: 0,
	Lobby: 0,
	Chat: 0,
	Blinker: 0,

	username: 'User',
	UserList: [],

	init: function() {
		// Initialize your game here; bind keys etc.
		ig.input.bind(ig.KEY.MOUSE1, 'lmb');

		this.socketController();
		this.lobbyInit();		

		console.log(this.entities);
	},

	socketController: function() {
		// I intend to move this to its own file as an entity that will be created in this.init.

		var Socket = io.connect("http://localhost:1337");

		this.Socket = Socket;

		Socket.on('connect', function () 
		{
			var sessionid = Socket.io.engine.id;

			var username = ig.game.username,
				UserList = ig.game.UserList;

			Socket.emit('addUser', sessionid, username);

			ig.game.UserList.push({id: sessionid, username: username});
		});

		Socket.on('newUser', function (UserList, info)
		{
			ig.game.UserList = UserList;

			console.log(info.username + ' has connected!');
		});

		Socket.on('userDisconnect', function (UserList, info) 
		{
			ig.game.UserList = UserList;

			console.log(info.username + ' has disconnected.');
		});
	},

	lobbyInit: function() {
		this.gamestate.lobby = true;

		this.Lobby = this.spawnEntity(EntityLobby, 230, 80, this.Socket);
		//this.Chat = this.spawnEntity(EntityChat, 850, 200);
		//this.Blinker = this.spawnEntity(EntityBlinker, 850, 200);

		//this.Chat.UserList = this.UserList;
	},
	
	update: function() {

		this.parent();
		
		var mx = ig.input.mouse.x,
			my = ig.input.mouse.y;

		var gx = Math.floor((mx - 160)/60),
			gy = Math.floor((my - 60)/60);

		if (ig.input.pressed('lmb')) 
		{
			console.log(Math.floor(mx),Math.floor(my));
		};
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		var x = ig.system.width/2,
			y = ig.system.height/2;	

		this.parent();

	    this.font.draw('Entities: ' + this.entities.length, 10, 10);

	    
	}
});



ig.main( '#canvas', MyGame, 60, 1320, 720, 1 );

});

	ig.module(
		'game.entities.lobby'
	)
	.requires(
		'impact.game',
		'impact.entity'
	)
	.defines(function(){
		EntityLobby = ig.Entity.extend({
			lobby_bg: new ig.Image ('media/tbs_lobby_bg.png'),
			lobby_img: new ig.Image ('media/lobby.png'),
			lobby_scrollbar: new ig.Image ('media/lobby_scrollbar.png'),
			lobby_select: new ig.Image ('media/lobby_select.png'),

			font: new ig.Font( 'media/font.png' ),

			size: {x: 600, y: 560},

			UserList: [],
			LobbySlots: [],
			numberSlots: 25,

			selectedSlot: -1,
			lobbyScrollPosition: 0,

			init: function (x,y,Socket) {

				this.parent(x,y);

				var self = this;

				Socket.on('newUser', function (UserList,info)
				{
					self.UserList = UserList;
					self.setUserList();
				});

				Socket.on('userDisconnect', function (UserList, info) 
				{
					self.UserList = UserList;
					self.setUserList();
				});

				ig.game.spawnEntity(EntityChat, 850, 200);
			},

			update: function () {	

				var mx = ig.input.mouse.x,
					my = ig.input.mouse.y;

				if (ig.input.pressed('lmb'))
				{
					this.mouseClick(mx, my);
				};

				this.parent();
			},

			mouseClick: function (mx, my) {
				if (this.mouseOnUserList(mx, my))
				{
					var slotFocus = this.slotFocus(mx, my);

					if (this.UserList[slotFocus] != undefined)
					{
						this.selectedSlot = slotFocus;
					}
					else
					{
						this.selectedSlot = undefined;
					};
				}
				else 
				{
					var maxScroll = this.UserList.length - this.numberSlots;

					var arrowCheck = this.mouseOnLobbyArrow(mx, my);

					switch (arrowCheck)
					{
						case 'up':
							if (this.lobbyScrollPosition > 0) 
							{
								this.lobbyScrollPosition--;
							};
							this.setUserList();							
							break;
						case 'down':
							if (this.lobbyScrollPosition < maxScroll) 
							{
								this.lobbyScrollPosition++;
							};
							this.setUserList();							
							break;
					};
				};
			},

			setUserList: function () {

				//this.UserList = ig.game.UserList;
				this.LobbySlots = [];

				if (this.UserList.length > this.numberSlots)
				{
					var n = this.lobbyScrollPosition;

					for (i = n; i < n + this.numberSlots; i++)
					{
						this.LobbySlots.push(this.UserList[i]);
					}
				}
				else
				{
					this.LobbySlots = this.UserList;
				};
			},

			mouseOnLobbyArrow: function (mx, my) {
				var arrow = 0;

				if (mx >= 800 && mx <= 820) 
				{
					if (my >= 120 && my <= 135)
					{
						arrow = 'up';
					};

					if (my >= 605 && my <= 620)
					{
						arrow = 'down';
					};
				};
				
				return arrow;
			},

			mouseOnUserList: function (mx, my) {

				return (mx >= 240 && mx <= 800 && my >= 120 && my <= 620);
			},

			slotFocus: function (mx, my) {

				var x_in = false,
					y_on = -1;

				if (mx >= 240 && mx <= 820)
				{
					x_in = true;
				};

				if (my >= 120 && my <= 620 && x_in)
				{
					y_on = Math.floor((my - 120)/20);
				};

				return y_on;
			},

			draw: function () {

				this.lobby_bg.draw(0,0);
				this.lobby_img.draw(this.pos.x, this.pos.y);

				if (this.selectedSlot != -1)
				{
					this.lobby_select.draw(240, 120 + (this.selectedSlot*20));
				};

				for (i = 0; i < this.LobbySlots.length; i++) 
				{
					var name = this.LobbySlots[i].username;

					this.font.draw(name, 245, 128 + (i*20));
				};
			}
		});
	});

ig.module(
	'game.entities.chat'
)
.requires(
	'impact.game',
	'impact.entity'
)
.defines(function(){
	EntityChat = ig.Entity.extend({
		chat_img: new ig.Image ('media/chat_bg.png'),
		chat_entrybar: new ig.Image ('media/chat_entrybar.png'),

		font: new ig.Font( 'media/font.png' ),

		size: {x: 240, y: 440},

		UserList: [],

		blinkerOn: false,
		entryOn: false,

		Blinker: 0,

		init: function (x,y) {

			this.parent(x,y);

		},

		update: function () {

			this.setUserList();	

			var mx = ig.input.mouse.x,
				my = ig.input.mouse.y;

			if (ig.input.pressed('lmb'))
			{
				this.mouseClick(mx, my);
			};

			this.parent();
		},

		mouseClick: function (mx, my) {

			if (this.mouseOnEntryBar(mx, my)) {
				if (!this.blinkerOn) {
					ig.game.Blinker = ig.game.spawnEntity(EntityBlinker, this.pos.x + 5, this.pos.y + 420);
					this.blinkerOn = true;
				}
			}
			else 
			{
				this.blinkerOn = false;
				//ig.game.Blinker.kill();
			}
		},

		setUserList: function () {

			this.UserList = ig.game.UserList;
		},

		mouseOnEntryBar: function (mx, my) {

			return (mx >= 850 && mx <= 1090 && my >= 620 && my <= 640);
		},

		draw: function () {
			this.chat_img.draw(this.pos.x, this.pos.y);
			this.chat_entrybar.draw(this.pos.x, this.pos.y + 420);
		}
	});
});

Any errors in the console?

No errors in console. I've checked with console to see if entities are being spawned correctly, and they definitely are, and they have all appropriate variable values, but they just won't draw.

Perhaps they were spawned correctly, but are not at the position you think they are? Additionally, if you are using the Impact debug module, there is a "show collision boxes" option that should let you see where entities are, regardless of whether their graphics are being drawn correctly.