<?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" />
<!-- advtutorial.qdoc -->
<title>Qt 4.8: QML Advanced Tutorial 2 - Populating the Game Canvas</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>QML Examples & Demos</li>
<li>QML Advanced Tutorial 2 - Populating the Game Canvas</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">
<link rel="prev" href="declarative-tutorials-samegame-samegame1.html" />
<link rel="next" href="declarative-tutorials-samegame-samegame3.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="declarative-tutorials-samegame-samegame1.html">QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks</a>
<a class="nextPage" href="declarative-tutorials-samegame-samegame3.html">QML Advanced Tutorial 3 - Implementing the Game Logic</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level2"><a href="#generating-the-blocks-in-javascript">Generating the blocks in JavaScript</a></li>
<li class="level2"><a href="#connecting-javascript-components-to-qml">Connecting JavaScript components to QML</a></li>
</ul>
</div>
<h1 class="title">QML Advanced Tutorial 2 - Populating the Game Canvas</h1>
<span class="subtitle"></span>
<!-- $$$declarative/tutorials/samegame/samegame2-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="declarative-tutorials-samegame-samegame2-block-qml.html">declarative/tutorials/samegame/samegame2/Block.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame2-button-qml.html">declarative/tutorials/samegame/samegame2/Button.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame2-samegame-js.html">declarative/tutorials/samegame/samegame2/samegame.js</a></li>
<li><a href="declarative-tutorials-samegame-samegame2-samegame-qml.html">declarative/tutorials/samegame/samegame2/samegame.qml</a></li>
<li><a href="declarative-tutorials-samegame-samegame2-samegame2-qmlproject.html">declarative/tutorials/samegame/samegame2/samegame2.qmlproject</a></li>
</ul>
<a name="generating-the-blocks-in-javascript"></a>
<h3>Generating the blocks in JavaScript</h3>
<p>Now that we've written some basic elements, let's start writing the game.</p>
<p>The first task is to generate the game blocks. Each time the New Game button is clicked, the game canvas is populated with a new, random set of blocks. Since we need to dynamically generate new blocks for each new game, we cannot use <a href="qml-repeater.html">Repeater</a> to define the blocks. Instead, we will create the blocks in JavaScript.</p>
<p>Here is the JavaScript code for generating the blocks, contained in a new file, <tt>samegame.js</tt>. The code is explained below.</p>
<pre class="js"> var <span class="name">blockSize</span> = <span class="number">40</span>;
var <span class="name">maxColumn</span> = <span class="number">10</span>;
var <span class="name">maxRow</span> = <span class="number">15</span>;
var <span class="name">maxIndex</span> = <span class="name">maxColumn</span> <span class="operator">*</span> <span class="name">maxRow</span>;
var <span class="name">board</span> = new <span class="name">Array</span>(<span class="name">maxIndex</span>);
var <span class="name">component</span>;
<span class="comment">//Index function used instead of a 2D array</span>
<span class="keyword">function</span> <span class="name">index</span>(<span class="name">column</span>, row) {
<span class="keyword">return</span> <span class="name">column</span> <span class="operator">+</span> (<span class="name">row</span> <span class="operator">*</span> <span class="name">maxColumn</span>);
}
<span class="keyword">function</span> <span class="name">startNewGame</span>() {
<span class="comment">//Delete blocks from previous game</span>
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">i</span> = <span class="number">0</span>; <span class="name">i</span> <span class="operator"><</span> <span class="name">maxIndex</span>; i++) {
<span class="keyword">if</span> (<span class="name">board</span>[<span class="name">i</span>] <span class="operator">!=</span> <span class="number">null</span>)
<span class="name">board</span>[<span class="name">i</span>].<span class="name">destroy</span>();
}
<span class="comment">//Calculate board size</span>
<span class="name">maxColumn</span> <span class="operator">=</span> <span class="name">Math</span>.<span class="name">floor</span>(<span class="name">background</span>.<span class="name">width</span> <span class="operator">/</span> <span class="name">blockSize</span>);
<span class="name">maxRow</span> <span class="operator">=</span> <span class="name">Math</span>.<span class="name">floor</span>(<span class="name">background</span>.<span class="name">height</span> <span class="operator">/</span> <span class="name">blockSize</span>);
<span class="name">maxIndex</span> <span class="operator">=</span> <span class="name">maxRow</span> <span class="operator">*</span> <span class="name">maxColumn</span>;
<span class="comment">//Initialize Board</span>
<span class="name">board</span> <span class="operator">=</span> new <span class="name">Array</span>(<span class="name">maxIndex</span>);
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">column</span> = <span class="number">0</span>; <span class="name">column</span> <span class="operator"><</span> <span class="name">maxColumn</span>; column++) {
<span class="keyword">for</span> (<span class="keyword">var</span> <span class="name">row</span> = <span class="number">0</span>; <span class="name">row</span> <span class="operator"><</span> <span class="name">maxRow</span>; row++) {
<span class="name">board</span>[<span class="name">index</span>(<span class="name">column</span>, <span class="name">row</span>)] <span class="operator">=</span> <span class="number">null</span>;
<span class="name">createBlock</span>(<span class="name">column</span>, <span class="name">row</span>);
}
}
}
<span class="keyword">function</span> <span class="name">createBlock</span>(<span class="name">column</span>, row) {
<span class="keyword">if</span> (<span class="name">component</span> <span class="operator">==</span> <span class="number">null</span>)
<span class="name">component</span> <span class="operator">=</span> <span class="name">Qt</span>.<span class="name">createComponent</span>(<span class="string">"Block.qml"</span>);
<span class="comment">// Note that if Block.qml was not a local file, component.status would be</span>
<span class="comment">// Loading and we should wait for the component's statusChanged() signal to</span>
<span class="comment">// know when the file is downloaded and ready before calling createObject().</span>
<span class="keyword">if</span> (<span class="name">component</span>.<span class="name">status</span> <span class="operator">==</span> <span class="name">Component</span>.<span class="name">Ready</span>) {
var <span class="name">dynamicObject</span> = <span class="name">component</span>.<span class="name">createObject</span>(<span class="name">background</span>);
<span class="keyword">if</span> (<span class="name">dynamicObject</span> <span class="operator">==</span> <span class="number">null</span>) {
<span class="name">console</span>.<span class="name">log</span>(<span class="string">"error creating block"</span>);
<span class="name">console</span>.<span class="name">log</span>(<span class="name">component</span>.<span class="name">errorString</span>());
<span class="keyword">return</span> <span class="number">false</span>;
}
<span class="name">dynamicObject</span>.<span class="name">x</span> <span class="operator">=</span> <span class="name">column</span> <span class="operator">*</span> <span class="name">blockSize</span>;
<span class="name">dynamicObject</span>.<span class="name">y</span> <span class="operator">=</span> <span class="name">row</span> <span class="operator">*</span> <span class="name">blockSize</span>;
<span class="name">dynamicObject</span>.<span class="name">width</span> <span class="operator">=</span> <span class="name">blockSize</span>;
<span class="name">dynamicObject</span>.<span class="name">height</span> <span class="operator">=</span> <span class="name">blockSize</span>;
<span class="name">board</span>[<span class="name">index</span>(<span class="name">column</span>, <span class="name">row</span>)] <span class="operator">=</span> <span class="name">dynamicObject</span>;
} else {
<span class="name">console</span>.<span class="name">log</span>(<span class="string">"error loading block component"</span>);
<span class="name">console</span>.<span class="name">log</span>(<span class="name">component</span>.<span class="name">errorString</span>());
<span class="keyword">return</span> <span class="number">false</span>;
}
<span class="keyword">return</span> <span class="number">true</span>;
}</pre>
<p>The <tt>startNewGame()</tt> function deletes the blocks created in the previous game and calculates the number of rows and columns of blocks required to fill the game window for the new game. Then, it creates an array to store all the game blocks, and calls <tt>createBlock()</tt> to create enough blocks to fill the game window.</p>
<p>The <tt>createBlock()</tt> function creates a block from the <tt>Block.qml</tt> file and moves the new block to its position on the game canvas. This involves several steps:</p>
<ul>
<li><a href="qml-qt.html#createComponent-method">Qt.createComponent()</a> is called to generate an element from <tt>Block.qml</tt>. If the component is ready, we can call <tt>createObject()</tt> to create an instance of the <tt>Block</tt> item.</li>
<li>If <tt>createObject()</tt> returned null (i.e. if there was an error while loading the object), print the error information.</li>
<li>Place the block in its position on the board and set its width and height. Also, store it in the blocks array for future reference.</li>
<li>Finally, print error information to the console if the component could not be loaded for some reason (for example, if the file is missing).</li>
</ul>
<a name="connecting-javascript-components-to-qml"></a>
<h3>Connecting JavaScript components to QML</h3>
<p>Now we need to call the JavaScript code in <tt>samegame.js</tt> from our QML files. To do this, we add this line to <tt>samegame.qml</tt> which imports the JavaScript file as a <a href="qdeclarativemodules.html#qml-modules">module</a>:</p>
<pre class="qml"> import "samegame.js" as SameGame</pre>
<p>This allows us to refer to any functions within <tt>samegame.js</tt> using "SameGame" as a prefix: for example, <tt>SameGame.startNewGame()</tt> or <tt>SameGame.createBlock()</tt>. This means we can now connect the New Game button's <tt>onClicked</tt> handler to the <tt>startNewGame()</tt> function, like this:</p>
<pre class="qml"> <span class="type">Button</span> {
<span class="type">anchors</span> { <span class="name">left</span>: <span class="name">parent</span>.<span class="name">left</span>; <span class="name">verticalCenter</span>: <span class="name">parent</span>.<span class="name">verticalCenter</span> }
<span class="name">text</span>: <span class="string">"New Game"</span>
<span class="name">onClicked</span>: <span class="name">SameGame</span>.<span class="name">startNewGame</span>()
}</pre>
<p>So, when you click the New Game button, <tt>startNewGame()</tt> is called and generates a field of blocks, like this:</p>
<p class="centerAlign"><img src="images/declarative-adv-tutorial2.png" alt="" /></p><p>Now, we have a screen of blocks, and we can begin to add the game mechanics.</p>
</div>
<!-- @@@declarative/tutorials/samegame/samegame2 -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="declarative-tutorials-samegame-samegame1.html">QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks</a>
<a class="nextPage" href="declarative-tutorials-samegame-samegame3.html">QML Advanced Tutorial 3 - Implementing the Game Logic</a>
</p>
</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>
