aframe-state component to attach/detach components
I am trying to attach/detach components to entity based on certain conditions.
For example, I want to be able to track two conditions -
- A player has clicked on play button and
- The time count down is not yet zero
before I attach a component to an entity.
I looked at the following component from Kevin - https://github.com/ngokevin/kframe/tree/master/components/state/
where there is an example on attaching/detaching components based on boolean value. Here is an extract from his documentation
There's a bind-toggle component which will attach and detach a
component entirely based on a boolean value.
<a-entity bind-toggle__raycastable="isRaycastable"></a-entity>
But, it's not clear where that boolean value is being set before the raycastable component gets attached to the entity.
I am looking for a solution where I can write the entity as follows
<a-entity bind-toggle__move="condition1 && condition2"></a-entity>
where the component "move" gets attached to the entity when condition 1 (play button is clicked) and condition 2( time count down is not zero) are satisfied. I need to know where to set the values for condition1 and condition2.
If you could please provide a working example for this then that would be great.
I can attach a codepen if that would make it easier to understand.
three.js aframe
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
add a comment |
I am trying to attach/detach components to entity based on certain conditions.
For example, I want to be able to track two conditions -
- A player has clicked on play button and
- The time count down is not yet zero
before I attach a component to an entity.
I looked at the following component from Kevin - https://github.com/ngokevin/kframe/tree/master/components/state/
where there is an example on attaching/detaching components based on boolean value. Here is an extract from his documentation
There's a bind-toggle component which will attach and detach a
component entirely based on a boolean value.
<a-entity bind-toggle__raycastable="isRaycastable"></a-entity>
But, it's not clear where that boolean value is being set before the raycastable component gets attached to the entity.
I am looking for a solution where I can write the entity as follows
<a-entity bind-toggle__move="condition1 && condition2"></a-entity>
where the component "move" gets attached to the entity when condition 1 (play button is clicked) and condition 2( time count down is not zero) are satisfied. I need to know where to set the values for condition1 and condition2.
If you could please provide a working example for this then that would be great.
I can attach a codepen if that would make it easier to understand.
three.js aframe
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
add a comment |
I am trying to attach/detach components to entity based on certain conditions.
For example, I want to be able to track two conditions -
- A player has clicked on play button and
- The time count down is not yet zero
before I attach a component to an entity.
I looked at the following component from Kevin - https://github.com/ngokevin/kframe/tree/master/components/state/
where there is an example on attaching/detaching components based on boolean value. Here is an extract from his documentation
There's a bind-toggle component which will attach and detach a
component entirely based on a boolean value.
<a-entity bind-toggle__raycastable="isRaycastable"></a-entity>
But, it's not clear where that boolean value is being set before the raycastable component gets attached to the entity.
I am looking for a solution where I can write the entity as follows
<a-entity bind-toggle__move="condition1 && condition2"></a-entity>
where the component "move" gets attached to the entity when condition 1 (play button is clicked) and condition 2( time count down is not zero) are satisfied. I need to know where to set the values for condition1 and condition2.
If you could please provide a working example for this then that would be great.
I can attach a codepen if that would make it easier to understand.
three.js aframe
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
I am trying to attach/detach components to entity based on certain conditions.
For example, I want to be able to track two conditions -
- A player has clicked on play button and
- The time count down is not yet zero
before I attach a component to an entity.
I looked at the following component from Kevin - https://github.com/ngokevin/kframe/tree/master/components/state/
where there is an example on attaching/detaching components based on boolean value. Here is an extract from his documentation
There's a bind-toggle component which will attach and detach a
component entirely based on a boolean value.
<a-entity bind-toggle__raycastable="isRaycastable"></a-entity>
But, it's not clear where that boolean value is being set before the raycastable component gets attached to the entity.
I am looking for a solution where I can write the entity as follows
<a-entity bind-toggle__move="condition1 && condition2"></a-entity>
where the component "move" gets attached to the entity when condition 1 (play button is clicked) and condition 2( time count down is not zero) are satisfied. I need to know where to set the values for condition1 and condition2.
If you could please provide a working example for this then that would be great.
I can attach a codepen if that would make it easier to understand.
three.js aframe
three.js aframe
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
edited Nov 19 '18 at 16:50
Niraj
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
asked Nov 19 '18 at 14:55
Niraj Niraj
8718
8718
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Have two events: buttonclicked, and countdownzero emitted to the scene in the respective components.
Then in the state:
buttonclicked: function (state) {
state.buttonClicked = true;
},
countdownzero: function (state) {
state.countdownFinished = true;
}
Then can do bind-toggle__move="buttonClicked && countdownFinished. Let me know if you want clarification!
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.
– ngokevin
Nov 20 '18 at 13:28
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377222%2faframe-state-component-to-attach-detach-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Have two events: buttonclicked, and countdownzero emitted to the scene in the respective components.
Then in the state:
buttonclicked: function (state) {
state.buttonClicked = true;
},
countdownzero: function (state) {
state.countdownFinished = true;
}
Then can do bind-toggle__move="buttonClicked && countdownFinished. Let me know if you want clarification!
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.
– ngokevin
Nov 20 '18 at 13:28
add a comment |
Have two events: buttonclicked, and countdownzero emitted to the scene in the respective components.
Then in the state:
buttonclicked: function (state) {
state.buttonClicked = true;
},
countdownzero: function (state) {
state.countdownFinished = true;
}
Then can do bind-toggle__move="buttonClicked && countdownFinished. Let me know if you want clarification!
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.
– ngokevin
Nov 20 '18 at 13:28
add a comment |
Have two events: buttonclicked, and countdownzero emitted to the scene in the respective components.
Then in the state:
buttonclicked: function (state) {
state.buttonClicked = true;
},
countdownzero: function (state) {
state.countdownFinished = true;
}
Then can do bind-toggle__move="buttonClicked && countdownFinished. Let me know if you want clarification!
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
Have two events: buttonclicked, and countdownzero emitted to the scene in the respective components.
Then in the state:
buttonclicked: function (state) {
state.buttonClicked = true;
},
countdownzero: function (state) {
state.countdownFinished = true;
}
Then can do bind-toggle__move="buttonClicked && countdownFinished. Let me know if you want clarification!
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
answered Nov 20 '18 at 6:28
ngokevinngokevin
9,15611558
9,15611558
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.
– ngokevin
Nov 20 '18 at 13:28
add a comment |
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.
– ngokevin
Nov 20 '18 at 13:28
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
Awesome Kevin. Thanks. It worked
– Niraj
Nov 20 '18 at 12:44
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
One question though Kevin, how do I declare a value for state.buttonClicked as false in the state and only switch it to true when buttonClicked event gets fired? Do I need to write another event handler such as buttonNotClicked which will have state.buttonClicked = false;?
– Niraj
Nov 20 '18 at 13:12
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.– ngokevin
Nov 20 '18 at 13:28
initialState: {buttonClicked: false}. If you want to unset it then yeah, another listener.– ngokevin
Nov 20 '18 at 13:28
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53377222%2faframe-state-component-to-attach-detach-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
