1 decade ago by riceje7
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:
Class w/ Drawing Working:
Entity w/o Drawing Working:
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.
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.