<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- stickman.qdoc -->
<title>Qt 4.8: Stickman Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Stickman Example</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<h1 class="title">Stickman Example</h1>
<span class="subtitle"></span>
<!-- $$$animation/stickman-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="animation-stickman-animation-cpp.html">animation/stickman/animation.cpp</a></li>
<li><a href="animation-stickman-animation-h.html">animation/stickman/animation.h</a></li>
<li><a href="animation-stickman-graphicsview-cpp.html">animation/stickman/graphicsview.cpp</a></li>
<li><a href="animation-stickman-graphicsview-h.html">animation/stickman/graphicsview.h</a></li>
<li><a href="animation-stickman-lifecycle-cpp.html">animation/stickman/lifecycle.cpp</a></li>
<li><a href="animation-stickman-lifecycle-h.html">animation/stickman/lifecycle.h</a></li>
<li><a href="animation-stickman-node-cpp.html">animation/stickman/node.cpp</a></li>
<li><a href="animation-stickman-node-h.html">animation/stickman/node.h</a></li>
<li><a href="animation-stickman-rectbutton-cpp.html">animation/stickman/rectbutton.cpp</a></li>
<li><a href="animation-stickman-rectbutton-h.html">animation/stickman/rectbutton.h</a></li>
<li><a href="animation-stickman-stickman-cpp.html">animation/stickman/stickman.cpp</a></li>
<li><a href="animation-stickman-stickman-h.html">animation/stickman/stickman.h</a></li>
<li><a href="animation-stickman-main-cpp.html">animation/stickman/main.cpp</a></li>
<li><a href="animation-stickman-stickman-pro.html">animation/stickman/stickman.pro</a></li>
<li><a href="animation-stickman-stickman-qrc.html">animation/stickman/stickman.qrc</a></li>
</ul>
<p>The Stickman example shows how to animate transitions in a state machine to implement key frame animations.<p class="centerAlign"><img src="images/stickman-example.png" alt="" /></p><p>In this example, we will write a small application which animates the joints in a skeleton and projects a stickman figure on top. The stickman can be either "alive" or "dead", and when in the "alive" state, he can be performing different actions defined by key frame animations.</p>
<p>Animations are implemented as composite states. Each child state of the animation state represents a frame in the animation by setting the position of each joint in the stickman's skeleton to the positions defined for the particular frame. The frames are then bound together with animated transitions that trigger on the source state's propertiesAssigned() signal. Thus, the machine will enter the state representing the next frame in the animation immediately after it has finished animating into the previous frame.</p>
<p class="centerAlign"><img src="images/stickman-example1.png" alt="" /></p><p>The states for an animation is constructed by reading a custom animation file format and creating states that assign values to the the "position" properties of each of the nodes in the skeleton graph.</p>
<pre class="cpp"> <span class="type"><a href="qstate.html">QState</a></span> <span class="operator">*</span>frameState <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qstate.html">QState</a></span>(topLevel);
<span class="keyword">const</span> <span class="type">int</span> nodeCount <span class="operator">=</span> animation<span class="operator">.</span>nodeCount();
<span class="keyword">for</span> (<span class="type">int</span> j<span class="operator">=</span><span class="number">0</span>; j<span class="operator"><</span>nodeCount; <span class="operator">+</span><span class="operator">+</span>j)
frameState<span class="operator">-</span><span class="operator">></span>assignProperty(m_stickMan<span class="operator">-</span><span class="operator">></span>node(j)<span class="operator">,</span> <span class="string">"pos"</span><span class="operator">,</span> animation<span class="operator">.</span>nodePos(j));</pre>
<p>The states are then bound together with signal transitions that listen to the propertiesAssigned() signal.</p>
<pre class="cpp"> previousState<span class="operator">-</span><span class="operator">></span>addTransition(previousState<span class="operator">,</span> SIGNAL(propertiesAssigned())<span class="operator">,</span> frameState);</pre>
<p>The last frame state is given a transition to the first one, so that the animation will loop until it is interrupted when a transition out from the animation state is taken. To get smooth animations between the different key frames, we set a default animation on the state machine. This is a parallel animation group which contains animations for all the "position" properties and will be selected by default when taking any transition that leads into a state that assigns values to these properties.</p>
<pre class="cpp"> m_machine <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qstatemachine.html">QStateMachine</a></span>();
m_machine<span class="operator">-</span><span class="operator">></span>addDefaultAnimation(m_animationGroup);</pre>
<p>Several such animation states are constructed, and are placed together as children of a top level "alive" state which represents the stickman life cycle. Transitions go from the parent state to the child state to ensure that each of the child states inherit them.</p>
<p class="centerAlign"><img src="images/stickman-example2.png" alt="" /></p><p>This saves us the effort of connect every state to every state with identical transitions. The state machine makes sure that transitions between the key frame animations are also smooth by applying the default animation when interrupting one and starting another.</p>
<p>Finally, there is a transition out from the "alive" state and into the "dead" state. This is a custom transition type called LightningSrikesTransition which samples every second and triggers at random (one out of fifty times on average.)</p>
<pre class="cpp"> <span class="keyword">class</span> LightningStrikesTransition: <span class="keyword">public</span> <span class="type"><a href="qeventtransition.html">QEventTransition</a></span>
{
<span class="keyword">public</span>:
LightningStrikesTransition(<span class="type"><a href="qabstractstate.html">QAbstractState</a></span> <span class="operator">*</span>target)
: <span class="type"><a href="qeventtransition.html">QEventTransition</a></span>(<span class="keyword">this</span><span class="operator">,</span> <span class="type"><a href="qevent.html">QEvent</a></span><span class="operator">::</span>Timer)
{
setTargetState(target);
qsrand((<span class="type"><a href="qtglobal.html#uint-typedef">uint</a></span>)<span class="type"><a href="qdatetime.html">QDateTime</a></span><span class="operator">::</span>currentDateTime()<span class="operator">.</span>toTime_t());
startTimer(<span class="number">1000</span>);
}
<span class="keyword">virtual</span> <span class="type">bool</span> eventTest(<span class="type"><a href="qevent.html">QEvent</a></span> <span class="operator">*</span>e)
{
<span class="keyword">return</span> <span class="type"><a href="qeventtransition.html">QEventTransition</a></span><span class="operator">::</span>eventTest(e) <span class="operator">&</span><span class="operator">&</span> ((qrand() <span class="operator">%</span> <span class="number">50</span>) <span class="operator">=</span><span class="operator">=</span> <span class="number">0</span>);
}
};</pre>
<p>When it triggers, the machine will first enter a "lightningBlink" state which uses a timer to pause for a brief period of time while the background color of the scene is white. This gives us a flash effect when the lightning strikes.</p>
<pre class="cpp"> <span class="type"><a href="qtimer.html">QTimer</a></span> <span class="operator">*</span>timer <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qtimer.html">QTimer</a></span>(lightningBlink);
timer<span class="operator">-</span><span class="operator">></span>setSingleShot(<span class="keyword">true</span>);
timer<span class="operator">-</span><span class="operator">></span>setInterval(<span class="number">100</span>);
<span class="type"><a href="qobject.html">QObject</a></span><span class="operator">::</span>connect(lightningBlink<span class="operator">,</span> SIGNAL(entered())<span class="operator">,</span> timer<span class="operator">,</span> SLOT(start()));
<span class="type"><a href="qobject.html">QObject</a></span><span class="operator">::</span>connect(lightningBlink<span class="operator">,</span> SIGNAL(exited())<span class="operator">,</span> timer<span class="operator">,</span> SLOT(stop()));</pre>
<p>We start and stop a <a href="qtimer.html">QTimer</a> object when entering and exiting the state. Then we transition into the "dead" state when the timer times out.</p>
<pre class="cpp"> lightningBlink<span class="operator">-</span><span class="operator">></span>addTransition(timer<span class="operator">,</span> SIGNAL(timeout())<span class="operator">,</span> m_dead);</pre>
<p>When the machine is in the "dead" state, it will be unresponsive. This is because the "dead" state has no transitions leading out.</p>
<p class="centerAlign"><img src="images/stickman-example3.png" alt="" /></p></div>
<!-- @@@animation/stickman -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
