Forums » Help » drawing to ig.system.context works when ig.Class.extend({}) not when ig.Entity.extend({})

So i have an entity with objects/entities being spawned when the first is created and successfully drawn to the canvas in a draw method of the second inner object that is of class `ig.Class`, when I call the draw method manually in the outer entity. However when i change the inner object from `ig.Class` to `ig.Entity` making appropriate structural changes the draw method doesn't draw to the canvas. here is my code:

Outer Entity - setup for inner entity not class:

    EntityBlob = ig.Entity.extend({
		centerMass: null,
		innerPoints: [],
		outerPoints: [],
		joints: [],
		radius: null,
		numPoints: null,
		halfNumPoints: null,
		init: function (x, y, settings) {
			this.parent(x, y, settings);
			this.centerMass = ig.game.spawnEntity('EntityPoint', ig.system.width / 2, ig.system.height / 2, {});
			this.radius = settings.radius;
			this.numPoints = settings.numPoints;
			this.halfNumPoints = this.numPoints / 2;
			this.initPoints(this.numPoints, this.radius, this.centerMass);
		},
		update: function () {
			this.parent();
		},
		draw: function () {
			this.parent();
		},
		initPoints: function (numPoints, radius, centerMass) {
			for (var i = 0; i < numPoints; i++) {
				var point = null;
				if (i < this.halfNumPoints) {
					point = ig.game.spawnEntity('EntityPoint', centerMass.pos.x, centerMass.pos.y - radius, {});
					this.outerPoints.push(point);
				} else {
					point = ig.game.spawnEntity('EntityPoint', centerMass.pos.x, centerMass.pos.y - radius * .6, {});
					this.innerPoints.push(point);
				}
			}

			var spacing = 2 * Math.PI / this.halfNumPoints;
			for (var i = 0, x = 0; x < this.halfNumPoints; i += spacing, x++) {
				this.outerPoints[x].pos.x = radius * Math.cos(i) + ig.system.width / 2;
				this.outerPoints[x].pos.y = radius * Math.sin(i) + ig.system.height / 2;
				this.innerPoints[x].pos.x = radius * .6 * Math.cos(i) + ig.system.width / 2;
				this.innerPoints[x].pos.y = radius * .6 * Math.sin(i) + ig.system.height / 2;
			}
		}
	});

Class w/ Drawing Working:

    Point = ig.Class.extend({
		size: {
			x: 5,
			y: 5
		},
		init: function () {
		},
		update: function () {
			this.parent();
		},
		draw: function () {
			ig.system.context.strokeWidth = 1;
			ig.system.context.strokeStyle = "#000000";
			ig.system.context.fillStyle = "#FFFFFF";
			ig.system.context.beginPath();
			ig.system.context.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
			ig.system.context.fill();
			ig.system.context.stroke();
		}
	});

Entity w/o Drawing Working:

    EntityPoint = ig.Entity.extend({
		size: {
			x: 5,
			y: 5
		},
		init: function (x, y, settings) {
			this.parent(x, y, settings);
		},
		update: function () {
			this.parent();
		},
		draw: function () {
			ig.system.context.strokeWidth = 1;
			ig.system.context.strokeStyle = "#000000";
			ig.system.context.fillStyle = "#FFFFFF";
			ig.system.context.beginPath();
			ig.system.context.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI);
			ig.system.context.fill();
			ig.system.context.stroke();
		}
	});

I'm instantiating the first case correctly and calling the draw method in the draw method of the outer entity, and am spawning the inner entities correctly so im not sure whats going wrong, can anyone see anything that i can't?


UPDATE: I have confirmed that the inner entities are being created though they do not show up in debug mode with collision boxes turned on, except for the `centerMass` object that one does show up.

I'm sick with a cold tonight so this is my wild-ass guess: when they're entities, they're getting affected by gravity and aren't getting drawn where you think they're getting drawn. Entities have a default gravityFactor of 1.

Add a console.log(this.pos); statement to the draw method when they're entities to see where they are in relation to your EntityBlob.

All that said: do they need to be entities?

@drhayes: I tried logging the positions of all the entities and they are spawning where they should, i set gravity to 0 in my main.js and just for safe measure gave the blob and point entities a gravityFactor of 0 and still nothing is showing, and with debug on on the collision box for the EntityBlob.centerMass is the only one that shows up.

UPDATE:
before i tried calling the draw methods of the inner entities in the outer entity's draw method and nothing happened, but just now i tried moving the actual drawing code (see below) up to the outer entity's draw method and everything works. not sure why any ideas i'd like to know why the inner entity's draw method either isn't being called or the code is wrong.

this.centerMass.draw();
			for (var i = 0; i < this.halfNumPoints; i++) {
				ig.system.context.strokeWidth = 1;
				ig.system.context.strokeStyle = "#000000";
				ig.system.context.fillStyle = "#FFFFFF";
				ig.system.context.beginPath();
				ig.system.context.arc(this.innerPoints[i].pos.x, this.innerPoints[i].pos.y, 5, 0, 2 * Math.PI);
				ig.system.context.fill();
				ig.system.context.stroke();

				ig.system.context.strokeWidth = 1;
				ig.system.context.strokeStyle = "#000000";
				ig.system.context.fillStyle = "#FFFFFF";
				ig.system.context.beginPath();
				ig.system.context.arc(this.outerPoints[i].pos.x, this.outerPoints[i].pos.y, 5, 0, 2 * Math.PI);
				ig.system.context.fill();
				ig.system.context.stroke();
			}

UPDATE 2:
as for being entities wanted to use the built in collision detection and everything you get with entities. mostly the collision detection. i'm trying to do blob physics and wanted to do it natively in impact.

Shoot. I was hoping for the easy, clever answer. ( ;

I don't know why the bounding boxes aren't showing up in debug. That's definitely a clue. I'm proceeding like they're in the right spot anyway.

Is your game running with the viewport at (0,0)? If not, you probably don't want to use this.pos.x and this.pos.y directly but instead run'em through ig.system.getDrawPos. That way you're adjusted for your camera position.

Um... yeah?