diff options
Diffstat (limited to 'src/quick/doc/src/advtutorial.qdoc')
| -rw-r--r-- | src/quick/doc/src/advtutorial.qdoc | 63 |
1 files changed, 18 insertions, 45 deletions
diff --git a/src/quick/doc/src/advtutorial.qdoc b/src/quick/doc/src/advtutorial.qdoc index 63c70067fd..6a00162753 100644 --- a/src/quick/doc/src/advtutorial.qdoc +++ b/src/quick/doc/src/advtutorial.qdoc @@ -1,32 +1,8 @@ -/**************************************************************************** -** -** Copyright (C) 2017 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** GNU Free Documentation License Usage -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. Please review the following information to ensure -** the GNU Free Documentation License version 1.3 requirements -** will be met: https://www.gnu.org/licenses/fdl-1.3.html. -** $QT_END_LICENSE$ -** -****************************************************************************/ +// Copyright (C) 2017 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only /*! -\page qml-advtutorial.html tutorial +\page qml-advtutorial.html \title QML Advanced Tutorial \brief A more advanced tutorial, showing how to use QML to create a game. \nextpage QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks @@ -298,9 +274,6 @@ until the next chapter - where your application becomes alive! Now we're going to do two things to liven up the game: animate the blocks and add a High Score system. -We've also cleaned up the directory structure for our application files. We now have a lot of files, so all the -JavaScript and QML files outside of \c samegame.qml have been moved into a new sub-directory named "content". - In anticipation of the new block animations, \c Block.qml file is now renamed to \c BoomBlock.qml. \section3 Animating Block Movement @@ -311,7 +284,7 @@ In \c BoomBlock.qml, we apply a \l SpringAnimation behavior to the \c x and \c y block will follow and animate its movement in a spring-like fashion towards the specified position (whose values will be set by \c samegame.js).Here is the code added to \c BoomBlock.qml: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 1 +\snippet tutorials/samegame/samegame4/BoomBlock.qml 1 The \c spring and \c damping values can be changed to modify the spring-like effect of the animation. @@ -328,7 +301,7 @@ animate the opacity value so that it gradually fades in and out, instead of abru visible and invisible. To do this, we'll apply a \l Behavior on the \c opacity property of the \c Image type in \c BoomBlock.qml: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 2 +\snippet tutorials/samegame/samegame4/BoomBlock.qml 2 Note the \c{opacity: 0} which means the block is transparent when it is first created. We could set the opacity in \c samegame.js when we create and destroy the blocks, @@ -354,14 +327,14 @@ To fade out, we set \c dying to true instead of setting opacity to 0 when a bloc Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a \l ParticleSystem in \c BoomBlock.qml, like so: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 3 +\snippet tutorials/samegame/samegame4/BoomBlock.qml 3 To fully understand this you should read \l {Using the Qt Quick Particle System}, but it's important to note that \c emitRate is set to zero so that particles are not emitted normally. Also, we extend the \c dying State, which creates a burst of particles by calling the \c burst() method on the particles type. The code for the states now look like this: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 4 +\snippet tutorials/samegame/samegame4/BoomBlock.qml 4 Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the player's actions. The end result is shown below, with a different set of images to demonstrate basic theming: @@ -378,20 +351,20 @@ To do this, we will show a dialog when the game is over to request the player's This requires a few changes to \c Dialog.qml. In addition to a \c Text type, it now has a \c TextInput child item for receiving keyboard text input: -\snippet tutorials/samegame/samegame4/content/Dialog.qml 0 +\snippet tutorials/samegame/samegame4/Dialog.qml 0 \dots 4 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 2 +\snippet tutorials/samegame/samegame4/Dialog.qml 2 \dots 4 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 3 +\snippet tutorials/samegame/samegame4/Dialog.qml 3 We'll also add a \c showWithInput() function. The text input will only be visible if this function is called instead of \c show(). When the dialog is closed, it emits a \c closed() signal, and other types can retrieve the text entered by the user through an \c inputText property: -\snippet tutorials/samegame/samegame4/content/Dialog.qml 0 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 1 +\snippet tutorials/samegame/samegame4/Dialog.qml 0 +\snippet tutorials/samegame/samegame4/Dialog.qml 1 \dots 4 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 3 +\snippet tutorials/samegame/samegame4/Dialog.qml 3 Now the dialog can be used in \c samegame.qml: @@ -401,9 +374,9 @@ When the dialog emits the \c closed signal, we call the new \c saveHighScore() f The \c nameInputDialog is activated in the \c victoryCheck() function in \c samegame.js: -\snippet tutorials/samegame/samegame4/content/samegame.js 3 +\snippet tutorials/samegame/samegame4/samegame.js 3 \dots 4 -\snippet tutorials/samegame/samegame4/content/samegame.js 4 +\snippet tutorials/samegame/samegame4/samegame.js 4 \section3 Storing High Scores Offline @@ -411,7 +384,7 @@ Now we need to implement the functionality to actually save the High Scores tabl Here is the \c saveHighScore() function in \c samegame.js: -\snippet tutorials/samegame/samegame4/content/samegame.js 2 +\snippet tutorials/samegame/samegame4/samegame.js 2 First we call \c sendHighScore() (explained in the section below) if it is possible to send the high scores to an online database. @@ -430,7 +403,7 @@ If the player entered their name we can send the data to the web service us If the player enters a name, we send the data to the service using this code in \c samegame.js: -\snippet tutorials/samegame/samegame4/content/samegame.js 1 +\snippet tutorials/samegame/samegame4/samegame.js 1 The \l XMLHttpRequest in this code is the same as the \c XMLHttpRequest() as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high @@ -438,7 +411,7 @@ score data to the web server. If it had returned a QML file (or a URL to a QML f way as you did with the blocks. An alternate way to access and submit web-based data would be to use QML types designed for this purpose. XmlListModel -makes it very easy to fetch and display XML based data such as RSS in a QML application (see the Flickr demo for an example). +makes it very easy to fetch and display XML based data such as RSS in a QML application. \section2 That's It! |