Qt Quick 开发案例：触摸版游戏开发

这是一个针对Qt Quick的触摸设备游戏，该游戏使用SpriteSequence，ParticleSystem，Emitter和Wander类型对对象进行动画处理，并使用SoundEffect类型来播放声音效果。

用

一个针对Qt Quick的触摸设备游戏，该游戏使用SpriteSequence，ParticleSystem，Emitter和Wander类型对对象进行动画处理，并使用SoundEffect类型来播放声音效果。

《麻烦的马龙》展示了QML功能，这些功能在开发游戏时非常有用：

• 使用自定义QML类型为游戏的不同阶段创建不同的屏幕。
• 使用项目和图像类型构造游戏背景。
• 使用SequentialAnimation，NumberAnimation，ParticleSystem，Emitter和Wander类型为背景对象设置动画。
• 在开始游戏之前，使用“计时器”和“中继器”类型显示倒计时序列。
• 使用具有自定义属性的自定义QML类型来构造游戏板。
• 使用SpriteSequence和Sprite类型将动画对象添加到游戏板上。
• 使用自定义QML类型，该类型将Image类型与一些自定义属性一起使用，以添加一个菜单，供玩家购买物品。
• 使用具有私有功能的自定义属性来跟踪游戏统计信息，并使用自定义QML类型将其显示给玩家。
• 使用State类型和JavaScript函数来管理游戏状态。
• 根据对象类型和应用于对象的操作，使用SoundEffect类型播放单独的声音效果。
• 使用信 处理程序为某些游戏操作指定键盘快捷键。
• 使用资源文件打包游戏资源以进行部署和交付。

运行示例

要从Qt Creator运行示例，请打开“欢迎”模式，然后从“示例”中选择示例。有关更多信息，请访问构建和运行示例。

添加画面

在Maroon in Trouble应用程序中，我们使用以下自定义类型（分别在单独的.qml文件中定义）创建游戏屏幕：

• NewGameScreen.qml
• GameCanvas.qml
• GameOverScreen.qml

要使用自定义类型，我们在主QML文件maroon.qml中添加了一个import语句，该语句将导入名为content类型所在位置的文件夹：

import "content"

我们在游戏的不同阶段使用屏幕类型。NewGameScreen类型用于创建玩家启动应用程序时出现的屏幕。在NewGameScreen.qml中，我们使用“图像”类型创建“新游戏”按钮，玩家可以按此按钮来开始新游戏。

轻击该按钮将启动一个倒数计时器，该倒计时计时器将通过使用GameCanvas类型触发游戏画布的创建。另一种“计时器”类型会在气泡内生成小鱼，玩家必须先将其释放才能到达水面。玩家可以点击屏幕来打开菜单，在这里他们可以购买不同类型的武器（近战，远程和炸弹）以破灭泡泡。

游戏结束时，出现使用GameOverScreen类型创建的屏幕。在此屏幕上，玩家可以查看他们的分数并开始新的游戏。

这些屏幕都是在相同的背景上创建的，并使用某些相同的图像和动画。

构造背景

在maroon.qml文件中，我们使用带有ID以及固定宽度和高度的Item类型root来创建游戏的主窗口：

Item{   id: root    width: 320   height: 480   property var gameState   property bool passedSplash: false
我们宣布了根项目两个自定义属性，gameState并且passedSplash我们将在后面使用管理的游戏状态。
我们使用一个Image项来显示游戏背景图像：
  Image {          source:"content/gfx/background.png"          anchors.bottom: view.bottom

我们希望能够在应用启动时仅加载一次背景图片，并且仍将不同的场景用于游戏屏幕。因此，background.png是根项目长度的三倍，并显示一个场景，该场景从海底延伸到地平线上方的天空。
我们使用该anchors.bottom属性将背景图像锚定到我们用来放置屏幕的Column布局的底部：
Column {  id: view y: -(height - 480)  width: 320    GameOverScreen{gameCanvas: canvas}
我们为该y属性设置一个负值，以将第一个场景设置在海底。我们通过从height属性中减去屏幕的高度来计算位置。
在列布局中，我们使用Item类型将对象添加到背景。在该项目内，我们使用行布局对象定位图像对象，这些对象在游戏画布和游戏屏幕上方显示波浪：
Item {      id: canvasArea      width: 320      height: 480                Row {                  height: childrenRect.height         Image {              id: wave              y: 30              source:"content/gfx/wave.png"          }Image {              y: 30              source:"content/gfx/wave.png"          }      ...  Row {          opacity: 0.5          Image {              id: wave2              y: 25              source: "content/gfx/wave.png"}          Image{              y: 25              source: "content/gfx/wave.png"          }
第二行波位于y轴上，与第一行略有偏移。我们还使用该opacity属性使波浪的颜色看起来比前两个波浪更浅，从而使背景更深。
我们使用Image对象还在新游戏屏幕和游戏画布上显示阳光：
Image {          source: "content/gfx/sunlight.png"          opacity: 0.02          y: 0          anchors.horizontalCenter: parent.horizontalCenter ...      Image {          source: "content/gfx/sunlight.png"          opacity: 0.04          y: 20          anchors.horizontalCenter: parent.horizontalCenter
我们将opacity图像的属性设置为，0.02并0.04赋予阳光一定的深度。我们使用y属性将图像定位在y轴上的固定位置，并使用属性将图像anchors.horizontalCenter相对于其父对象水平居中。
我们使用一个图像类型来显示一个在背景上加深阴影的图像：
 Image {         source: "content/gfx/grid.png"         opacity: 0.5      }     }              
我们将opacity图像的属性设置0.5为使背景在阴影后可见。
为了使背景更有趣，我们为添加到其中的一些对象设置了动画。下面我将详细讲解如何构建动画背景对象 。
Qt常用组件：

• QtitanRibbon| 下载试用: 遵循Microsoft Ribbon UI Paradigm for Qt技术的Ribbon UI组件，致力于为Windows、Linux和Mac OS X提供功能完整的Ribbon组件。
• QtitanChart | 下载试用 :是一个C ++库，代表一组控件，这些控件使您可以快速地为应用程序提供漂亮而丰富的图表。并且支持所有主要的桌面操作系统。
• QtitanDataGrid | 下载试用 :这个Qt数据 格组件使用纯C++创建，运行速度极快，处理大数据和超大数据集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而极易适应其他相似的开发环境，保证100%兼容Qt GUI。

标签：