<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- advtutorial.qdoc -->
<title>QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<link rel="prev" href="qml-advtutorial.html" />
<link rel="next" href="qtquick-tutorials-samegame-samegame2-example.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qml-advtutorial.html">QML Advanced Tutorial</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qtquick-tutorials-samegame-samegame2-example.html">QML Advanced Tutorial 2 - Populating the Game Canvas</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level2"><a href="#creating-the-application-screen">Creating the Application Screen</a></li>
<li class="level2"><a href="#adding-button-and-block-components">Adding <code>Button</code> and <code>Block</code> Components</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks</h1>
<span class="subtitle"></span>
<!-- $$$tutorials/samegame/samegame1-description -->
<div class="descr"> <a name="details"></a>
<a name="creating-the-application-screen"></a>
<h3 id="creating-the-application-screen">Creating the Application Screen</h3>
<p>The first step is to create the basic QML items in your application.</p>
<p>To begin with, we create our Same Game application with a main screen like this:</p>
<p class="centerAlign"><img src="images/declarative-adv-tutorial1.png" alt="" /></p><p>This is defined by the main application file, <code>samegame.qml</code>, which looks like this:</p>
<pre class="qml">
import QtQuick 2.0
Rectangle {
id: screen
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
width: parent.width
anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
anchors.fill: parent
source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
}
Rectangle {
id: toolBar
width: parent.width; height: 30
color: activePalette.window
anchors.bottom: screen.bottom
Button {
anchors { left: parent.left; verticalCenter: parent.verticalCenter }
text: "New Game"
onClicked: console.log("This doesn't do anything yet...")
}
Text {
id: score
anchors { right: parent.right; verticalCenter: parent.verticalCenter }
text: "Score: Who knows?"
}
}
}
</pre>
<p>This gives you a basic game window that includes the main canvas for the blocks, a "New Game" button and a score display.</p>
<p>One item you may not recognize here is the <a href="qml-qtquick-systempalette.html">SystemPalette</a> item. This provides access to the Qt system palette and is used to give the button a more native look-and-feel.</p>
<p>Notice the anchors for the <code>Item</code>, <code>Button</code> and <code>Text</code> types are set using group (dot) notation for readability.</p>
<a name="adding-button-and-block-components"></a>
<h3 id="adding-button-and-block-components">Adding <code>Button</code> and <code>Block</code> Components</h3>
<p>The <code>Button</code> item in the code above is defined in a separate component file named <code>Button.qml</code>. To create a functional button, we use the QML types <a href="qml-qtquick-text.html">Text</a> and <a href="qml-qtquick-mousearea.html">MouseArea</a> inside a <a href="qml-qtquick-rectangle.html">Rectangle</a>. Here is the <code>Button.qml</code> code:</p>
<pre class="qml">
import QtQuick 2.0
Rectangle {
id: container
property string text: "Button"
signal clicked
width: buttonLabel.width + 20; height: buttonLabel.height + 5
border { width: 1; color: Qt.darker(activePalette.button) }
antialiasing: true
radius: 8
// color the button with a gradient
gradient: Gradient {
GradientStop {
position: 0.0
color: {
if (mouseArea.pressed)
return activePalette.dark
else
return activePalette.light
}
}
GradientStop { position: 1.0; color: activePalette.button }
}
MouseArea {
id: mouseArea
anchors.fill: parent
onClicked: container.clicked();
}
Text {
id: buttonLabel
anchors.centerIn: container
color: activePalette.buttonText
text: container.text
}
}
</pre>
<p>This essentially defines a rectangle that contains text and can be clicked. The <a href="qml-qtquick-mousearea.html">MouseArea</a> has an <code>onClicked()</code> handler that is implemented to emit the <code>clicked()</code> signal of the <code>container</code> when the area is clicked.</p>
<p>In Same Game, the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate <code>Block.qml</code> file:</p>
<pre class="qml">
import QtQuick 2.0
Item {
id: block
Image {
id: img
anchors.fill: parent
source: "../shared/pics/redStone.png"
}
}
</pre>
<p>At the moment, the block doesn't do anything; it is just an image. As the tutorial progresses we will animate and give behaviors to the blocks. We have not added any code yet to create the blocks; we will do this in the next chapter.</p>
<p>We have set the image to be the size of its parent Item using <code>anchors.fill: parent</code>. This means that when we dynamically create and resize the block items later on in the tutorial, the image will be scaled automatically to the correct size.</p>
<p>Notice the relative path for the Image type's <code>source</code> property. This path is relative to the location of the file that contains the <a href="qml-qtquick-image.html">Image</a> type. Alternatively, you could set the Image source to an absolute file path or a URL that contains an image.</p>
<p>You should be familiar with the code so far. We have just created some basic types to get started. Next, we will populate the game canvas with some blocks.</p>
<p>Files:</p>
<ul>
<li><a href="qtquick-tutorials-samegame-samegame1-block-qml.html">tutorials/samegame/samegame1/Block.qml</a></li>
<li><a href="qtquick-tutorials-samegame-samegame1-button-qml.html">tutorials/samegame/samegame1/Button.qml</a></li>
<li><a href="qtquick-tutorials-samegame-samegame1-samegame-qml.html">tutorials/samegame/samegame1/samegame.qml</a></li>
<li><a href="qtquick-tutorials-samegame-samegame1-samegame1-qmlproject.html">tutorials/samegame/samegame1/samegame1.qmlproject</a></li>
</ul>
</div>
<!-- @@@tutorials/samegame/samegame1 -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qml-advtutorial.html">QML Advanced Tutorial</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qtquick-tutorials-samegame-samegame2-example.html">QML Advanced Tutorial 2 - Populating the Game Canvas</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> 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.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1797
