What is a component?
And why would you want to make one? A component is something that even without realizing it you use every time you code in HTML. Let me give you a few examples from Aframe: id=”thisId” or location=”0 1.6 0″ or even wasd-controls. These are all components. So why would you want to make one? Because they are super easy to make and use and you can do a lot with them.
Getting started:
To get started put a script tag right before your a-scene tag and put this inside it:
AFRAME.registerComponent('nameHere',{
schema:{
//input stuff here
},
init:function(){
//single run code here
}
});
The first setting is the name of the component, the second is an object. Inside the object, we put handlers like init and schema, these two are the most common. The schema is where we put all our input stuff, so if we want to make a component that changes the color, we would put something like this in it:
schema:{
color:{type:'string',default:'red'}//we can name it anything, but since we want color we named it color.
}
Ok, now that we have out input we have to use it, we do this in our init handler:
init:function(){
this.setAttribute('color',this.data.color);
}
Now you can use it by putting it in any a-frame tag:
<a-entity nameHere="blue"></a-entity>
Congratulations! You have made an unnecessary redundant component! (since we could have just used the existing color component)
Now there are a few more handlers you should know about:
update:function(){
//this function will be called every time the a-entity is updated
}
remove:function(){
//this is called if you remove your component using javascript, this is usefull if your
//component attached an event listener to your object, this gives you a chance to remove it.
}
multiple:true; //this allows you to create multiple versions of your component in the same entity like this: component_number1="", component_number2="".
Well, I hope you found this useful and that will be all for today.
