Forums » Help » Ideal way to make prototypes with object.create()?

Thanks for your time! I'm working on a top down dungeon crawler. I'm still learning js and I have the 'you don't know js' book series to learn from for any ideas suggested.

Why: After watching a few youtube videos about prototypal inheritance people seem to like create.object() and I like this too. I don't like that you can't look up the prototype chain by declaring objects as functions that declare an instance of an object. I would like to understand the ideal way with impact how to make prototypal classes for entities using object.create() in impactjs.

Questions I generally have for anyone who knows about the magic of impactjs:

Is it right to say that impactjs uses javascript's more classical inheritance model and will bringing object.create() methods into impactjs bring pitfalls?

Is it a functional programming model and should I be thinking that way when using it?

Should I avoid trying to use this model inside impactjs?

I have read
http://impactjs.com/documentation/class-reference/class

And I understand the general idea for extending the entity class

ig.module(
	'game.entities.player')
.requires(
	'impact.entity'
	)
.defines( function() { EntityPlayer = ig.Entity.extend({});

Should I just make a js file and stick it in .requires and then call the specified settings from the file that I stuck in .requires or is this bad in some way?

Thanks so much for any advice.

You can create and extend objects using Object.create, or you can do the same using ig.Class, whatever you prefer.

How to do it with ig.Class:

var a = ig.Class.extend({ prop1: 'a', prop2: 'b' });
var b = a.extend({ prop3: 'c' });
console.log( b.prop1 + b.prop2 + b.prop3 ); // prints "abc"

Edit 1:

Should I just make a js file and stick it in .requires and then call the specified settings from the file that I stuck in .requires or is this bad in some way?

Sorry but can you rephrase the question? Are you trying to create a Player entity?

Edit 2:

It might be helpful to download one of the demo games on the download page, and look where the entity files are located, and the structure of code in such files.

Thanks for your reply I'm excited to talk to anyone about impact and javascript.

Quote from Joncom
You can create and extend objects using Object.create, or you can do the same using ig.Class, whatever you prefer.

How to do it with ig.Class:

var a = ig.Class.extend({ prop1: 'a', prop2: 'b' });
var b = a.extend({ prop3: 'c' });
console.log( b.prop1 + b.prop2 + b.prop3 ); // prints "abc"

"
Here is what I'm currently working with and I know I'm not fully understanding what is happening or I've had enough trial and error to feel confused about what I thought I knew.

ig.module(
	'impact.entityprotos.baseproto')
.requires(
	'impact.entity'
)	
.defines( function() {
	Entitybaseproto = ig.Entity.extend({
	init: function(x, y, settings) {

		this.gravityFactor = 2;
		this.maxVel.x = 180;
		this.maxVel.y = 180;
		this.health = null;		
	},
	//properties
	name: ""
	});
});

^^Heres base proto, all classes will likely inherit from this class. Since this uses classical inheritance by using javascript's 'new' operator when init is called (right?). It's parent although an extension of ig.Entity is a function that specifies an instance of an object, and so when I want to console.log(EntityPlayer) I get a reference to a function, and not an object. Making it difficult to visualize whats happening.

EDIT: I realize now that I must use EntityPlayer.prototype to see the object. I'm still unsure if this will carry over two parent files up, like if I clone the player to battle themselves or spawn an entity slightly more difficult from the one that just died. I've read that objects declared as functions that create the object have problems inheriting down the road. I figured if I don't have to re-write so much. I can re-use a lot of things with random inheritance to make the game feel different without procedural re-use. After I added the Object.create() code, the game took spike in performance. it's still at 60fps, pre-render cuts it in half back down to 3.5ms without other entities in the game and just the player with a minimal tileset.

Does this sound like too much for not much going on? I'm on chrome with i5-540m, 8gb ram.

Then I have a player entity that is actually an entity.

ig.module(
	'game.entities.player')
.requires(
	'impact.entityprotos.baseproto'
	)
.defines( function() {
	EntityPlayer = Entitybaseproto.extend({
	animSheet: new ig.AnimationSheet('media/icons_64/tim0.png', 32, 64),
	init: function(x, y, settings) {
		this.addAnim('idle', 1, [0]);
		this.maxVel.x = 220;
		this.maxVel.y = 220;
		this.pos.x = 588;
		this.pos.y = 472;
		ig.game.player = this;
	},

	update: function(){
        //movement logic
		this.parent();

	},
	});
});

^^ Can I do this elegantly by using objects so it's not 100% confined within a function or is this all boiling down to object creation with the 'new' operator somewhere in impact's core logic?

Heres an example of what I later succeeded with:

ig.module(
	'impact.entityprotos.baseprototwo')
.requires(
	'impact.entity'
)	
.defines( function() {
	Entitybaseprototwo = Object.create(ig.Entity);
	Entitybaseprototwo.init = function(x, y, settings) {
		this.gravityFactor = 2;
		this.maxVel.x = 180;
		this.maxVel.y = 180;
		this.health = null;
		this.pos.x = null;
		this.pos.y = null;
	};

});
	//properties;

^^ When using the baseprototwo.js from above, is this proper object.create() usage with impact ya think? Is that Entitybaseprototwo object actually created as an object and not an instance of an object thats declared with a function at the start of .defines?

I see that in #http://impactjs.com/documentation/class-reference/ig-core#

It says As soon as all required Modules are loaded, the function passed to .defines() is executed. Is the .defines() process just procedural execution of whats in the module? Thanks everyone.

Can I do this elegantly by using objects so it&039;s not 100% confined within a function or is this all boiling down to object creation with the 'new' operator somewhere in impact's core logic?

Sorry, I'm not really sure what you're trying to accomplish. You want to be able to create class instances without using the #new MyClass() syntax? Or...

Quote from Joncom
Sorry, I&039;m not really sure what you're trying to accomplish. You want to be able to create class instances without using the #new MyClass() syntax? Or...

Thank you for your help Joncom. Yes, I want to make many random enemy entities that will spawn with random properties to change what they do and properties/skills they have but I want to do this through calling up the prototype chain to inherit. When using new, this can be unpredictable.

Consider:

var car = function() {
	//do something
	wheels = 4;
	engine = "yes";
	seats = "two";

}

var mazda = function(){
	//this is a mazda
	hasMazdaLogo = "yes";
}

mazda.prototype.constructor; // ---> Mazda
mazda.prototype = new car();
mazda.protoype.constructor // ---> car
mazda.hasMazdaLogo = "yes";
var mazdaMiata = new mazda();
mazdaMiata.hasMazdaLogo; // ---> undefined
mazdaMiata.hasOwnProperty(hasMazdaLogo); // ---> false
mazdaMiata.constructor // ---> car

I want mazdaMiata to inherit what the mazda's properties/methods are and I want to inherit what the car's properties/methods are. Is there an appropriate way to do the same thing in another way?

https://www.youtube.com/watch?v=Yvf_kUBZmXg
Minutes 22:30-25:00 shows the above code with some commentary from a couple of guys drawing on a whiteboard.

I want mazdaMiata to inherit what the mazda's properties/methods are and I want to inherit what the car's properties/methods are. Is there an appropriate way to do the same thing in another way?

Something like this?

var Car = function() {};
Car.prototype.wheels = 4;
Car.prototype.engine = "yes";

var Mazda = function() {};
Mazda.prototype = Object.create( Car.prototype ); // inherit from Car
Mazda.prototype.hasMazdaLogo = "yes";

var MazdaMiata = function() {};
MazdaMiata.prototype = Object.create( Mazda.prototype ); // inherit from Mazda
MazdaMiata.prototype.isMiata = true;

var car = new MazdaMiata();
car.wheels; // 4
car.hasMazdaLogo; // "yes"
car.isMiata; // true

Excellent example. I've had other errors arise and I think I'm accidentally carrying things along I'm not meaning to. This post is complete, I will create a new thread for the specific problems. Thanks Joncom.