Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug?] Component onUpdate methods not always being fired. #478

Open
trusktr opened this issue Aug 23, 2015 · 6 comments
Open

[bug?] Component onUpdate methods not always being fired. #478

trusktr opened this issue Aug 23, 2015 · 6 comments

Comments

@trusktr
Copy link
Contributor

trusktr commented Aug 23, 2015

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.

@trusktr
Copy link
Contributor Author

trusktr commented Aug 23, 2015

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:

screenshot from 2015-08-22 21-37-32

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):

screenshot from 2015-08-22 21-41-47

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).

@trusktr
Copy link
Contributor Author

trusktr commented Aug 23, 2015

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.

@trusktr
Copy link
Contributor Author

trusktr commented Aug 23, 2015

#390 is the same bug.

@trusktr
Copy link
Contributor Author

trusktr commented Aug 26, 2015

I'm getting this bug all over the place. You guys haven't encountered this yet?

@trusktr
Copy link
Contributor Author

trusktr commented Aug 26, 2015

This has been happening to me in different scenarios, with versions of Famous Engine ranging from 0.5 to 0.7.2.

@trusktr
Copy link
Contributor Author

trusktr commented Aug 26, 2015

@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:

out

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant