StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBest Practice for Transitioning From Nested State to Nested State (see diagram)
text
Body
copied!<p>I am trying to wrap my mind around the best way to implement nested state transitions in a single threaded programming language (Actionscript). Say I have a structure like this behavior tree: <img src="https://conkerjo.files.wordpress.com/2009/07/image2.png" alt="behavior tree"></p> <p>Now imagine that each leaf node is a destination point on a website, like an image in a gallery, or a comment nested in a post view nested in a page view... And the goal is to be able to run animated transitions from leaf node to leaf node, by animating out the previous tree (from bottom to top), and animating in the current tree (from top to bottom).</p> <p>So, if we were at the bottom-left-most leaf node, and we wanted to go to the bottom-right-most leaf node, we would have to:</p> <ul> <li>transition out bottom-left-node</li> <li>on complete (say after a second of animation), transition out it's parent,</li> <li>on complete, transition out it's parent</li> <li>on complete, transition IN the right-most parent</li> <li>on complete, transition in right most-child</li> <li>on complete, transition in leaf</li> </ul> <p>My question is:</p> <p>If you imagine each of these nodes as HTML views (where the leaves are 'partials', borrowing the term from rails), or MXML views, where you're nesting sub components, and you don't necessarily know the nest levels from the application root, what is the best way to animate the transition as described above?</p> <p>One way is to store all possible paths globally, and then to say "Application, transition out this path, transition in this path". That works if the application is very simple. That's how <a href="http://www.gaiaflashframework.com/wiki/index.php?title=Pages" rel="nofollow noreferrer">Gaia</a> does it, an Actionscript framework. But if you want it to be able to transition in/out arbitrarily nested paths, you can't store that globally because:</p> <ol> <li>Actionscript couldn't handle all that processing</li> <li>Doesn't seem like good encapsulation</li> </ol> <p>So this question can be reworded as, <em>how do you animate out the left-most-leaf node and it's parents, starting from the leaf, and animate in the right-most-leaf node, starting with the root?</em> Where is that information stored (what to transition in and out)?</p> <p>Another possible solution would be to just say "Application, transition out previous child node, and when that's complete, transition in the current child node", where the "child node" is the direct child of the application root. Then the left-most child of the application root (which has two child nodes, which each have two child nodes), would check if it's in the right state (if it's children are 'transitioned out'). If not, it would call "transitionOut()" on them... That way everything would be completely encapsulated. But it seems like that'd be pretty processor intensive.</p> <p>What do you think? Do you have any other alternatives? Or can you point me to any good resources on <a href="http://aigamedev.com/open/articles/behavior-trees-part1/" rel="nofollow noreferrer">AI Behavior Trees</a> or Hierarchical State Machines that describe how they practically implement asynchronous state transitions:</p> <ul> <li>From where do they call "transitionOut" on an object? From the root or a specific child?</li> <li>Where is the state stored? Globally, locally? What is the scope defining what calls "transitionIn()" and "transitionOut()"?</li> </ul> <p>I have seen/read many articles/books on AI and State Machines, but I have yet to find something describing how they actually implement asychronous/animated transitions in a complex MVC Object Oriented Project with 100s of Views/Graphics participating in the behavior tree.</p> <p>Should I call the transitions from the parent-most object, or from the child?</p> <p>Here are some of the things I've examined:</p> <ul> <li><a href="http://webdocs.cs.ualberta.ca/~duane/publications/pdf/2009aiideMC.pdf" rel="nofollow noreferrer">An Architecture for Game Behavior AI: Behavior Multi-Queues</a></li> <li><a href="http://bears.ece.ucsb.edu/class/ece253/samek0311.pdf" rel="nofollow noreferrer">Hierarchical State Machines — a Fundamentally Important Way of Design</a></li> <li><a href="http://rads.stackoverflow.com/amzn/click/1556220782" rel="nofollow noreferrer">Programming Game AI by Example</a></li> <li><a href="http://web.cs.wpi.edu/~rich/courses/imgd400x-b08/lectures/J-Goal.pdf" rel="nofollow noreferrer">Goal-Driven Agent Behavior</a></li> <li><a href="http://tv.adobe.com/watch/360flex-conference/advanced-state-management-by-troy-gardner" rel="nofollow noreferrer">Advanced State Management by Troy Gardner</a></li> <li><a href="http://code.google.com/p/troyworks/" rel="nofollow noreferrer">Troyworks' AS3 COGS Library</a></li> <li><a href="http://aigamedev.com/open/articles/popular-behavior-tree-design/" rel="nofollow noreferrer">Popular Approaches to Behavior-Tree Design</a></li> <li><a href="http://aigamedev.com/open/tutorials/asynchronous-event-driven-conditions/" rel="nofollow noreferrer">Building Event-Driven Conditions for an Asynchronous Sensory System</a></li> </ul> <p>While this is not necessarily an AI problem, there are no other resources describing how to apply nested state architectures to websites; these are the closest things.</p> <p>Another way to word the question: How do you broadcast state changes to the application? Where do you keep the event listeners? How do you find what view to animate when it's arbitrarily nested?</p> <p>Note: I am not trying to build a game, just trying to build animated websites.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload