[bug?] Component onUpdate methods not always being fired.
trusktr opened this issue · comments
This has happened in several times to me already, with versions of Famous Engine ranging from 0.5 to 0.7.2, but I'm not at all sure what I have to do prior in order to experience the problem. I have some code like this:
...
this._positionTransitionable = new Transitionable(0)
this._positionTransitionable.set(200, {duration: 600, curve: 'easeOut'})
let self = this
console.log('node?', node) // node exists, and is a Node
self._goForwardAnimation = node.addComponent({
onUpdate() {
console.log('animating forward') // never fires
if (self._positionTransitionable.isActive()) {
let position = node.getPosition()
node.setPosition(position[0], position[1], self._positionTransitionable.get())
node.requestUpdateOnNextTick(self._goForwardAnimation)
}
else { // clean up.
console.log('Getting rid of the component.')
node.removeComponent(self._goForwardAnimation)
}
}
})
node.requestUpdateOnNextTick(self._goForwardAnimation)
...The expected behavior is that the _goForwardAnimation will start updating after being started with node.requestUpdateOnNextTick, but it doesn't happen. The console.log inside the component never fires.
I ran into this again. This time I can change a single number (the duration of an animation) to get different reproducible results. I have code like this:
let thisCardNode = this.getFamousNode()
let cardNodes = getAllChildCardNodes(thisCardNode)
console.log(cardNodes)
this._positionTransitionable = new Transitionable(0)
this._positionTransitionable.set(1.0, {duration: 600, curve: 'easeOut'})
let targetTransparency = 0.5
let targetPosition = 200
let self = this
for (let i=0, len=cardNodes.length; i<len; i+=1) {
console.log('Setting up forward animation.', i)
let cardNode = cardNodes[i]
cardNode._goForwardAnimation = cardNode.addComponent({
onUpdate() {
if (self._positionTransitionable.isActive()) {
let position = cardNode.getPosition()
cardNode.setPosition(position[0], position[1], self._positionTransitionable.get()*targetPosition)
//cardNode.setOpacity(1-self._positionTransitionable.get()*targetTransparency)
cardNode.requestUpdateOnNextTick(cardNode._goForwardAnimation)
}
else { // clean up
console.log('Getting rid of the component.')
cardNode.removeComponent(cardNode._goForwardAnimation)
}
}
})
cardNode.requestUpdateOnNextTick(cardNode._goForwardAnimation)
}That results (after the animation is complete) in something that looks like this:
What you see in the image is that that only the green card has moved forward in 3D space, while cards below it (blue and yellow) have not. The expected behavior is that the green card and it's blue and yellow children all move forward.
Now, if I change the duration of the animation from 75 to 600, the result is that now the green and yellow cards move forward, but not the blue cards (this behavior is consistent when the duration is 600):
You can see the yellow cards are bigger now since they are closer to the camera.
If I switch back to a duration of 75, the result is precisely the same: only the green card moves forward.
I could place all the cards in a single node, and animate just that single node, but that hasn't been working out for me either (probably the same problem, I just haven't found the magic number that makes it work).
I've also noticed, both in OS X and Linux, that when at least one window resize event happens, it triggers some of the failed updates.
I'm getting this bug all over the place. You guys haven't encountered this yet?
This has been happening to me in different scenarios, with versions of Famous Engine ranging from 0.5 to 0.7.2.
@michaelobriena @alexanderGugel I made a video. In the video, the first thing I do is drag a blue card. What's supposed to happen is that while I drag the card it becomes transparent, and when I let go it should go back. This works the first try (I got lucky!). Now, the second try, I'll drag the next blue card, and it will turn transparent, but when I let go, the onUpdate calls to make it become opaque again won't fire until I resize the window, and I repeat that a third time just for demonstration:
