永利最大(官方)网站

用Qt编写GUI的另一种方法是使用QtQuick模块。使用QtQuick的GUI是用QML编写的。QML是一种声明性的对象描述语言，它集成了Javascript进行程序化编程。QtQuick为使用QML开发GUI提供了必要的模块。可以只用QML编写整个应用程序，但通常只有GUI是用QML编写的，应用程序的后台是用C++实现的（参见整合QML和C++）。

点击下载Qt最新试用版

 一个针对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。