Qt新渲染底层Scene Graph研究(三)
上一篇文章介绍了Qt Quick和SceneGraph的一些理论上的内容。这也是我最新的研究成果。接下来我要介绍一下如何使用Scene Graph来制作一些好玩的效果。这也是我进行一次SceneGraph的尝试。
我的目标是希望在Scene Graph这一套渲染框架下实现一个带有纹理的立方体,并且旋转。花了几天,虽然不是那么满意,但是已经告一段落了。
蒋彩阳原创文章,首发地址:http://blog.csdn.net/gamesdev/article/details/43196787。欢迎同行前来探讨。
本文难度偏大,适合有经验的同行进行交流。
首先,对比C++,QML这边的代码稍微简单一些,那么从最简单开始说起吧。
import QtQuick 2.4
import QtQuick.Window 2.2
import TexturedCube 1.0
Window
{
title: qsTr( "Scene Graph Textured Object" )
width: isMobileDevice( )? Screen.width: 480
height: isMobileDevice( )? Screen.height: 320
visible: true
Rectangle
{
anchors.fill: parent
color: "orange"
Cube
{
id: theCube
anchors.centerIn: parent
length: 60
source: "../image/avatar.jpg"
property int rotateAngle: 0
transform:
[
Rotation
{
angle: theCube.rotateAngle
axis
{
x: 1
y: 1
}
}
]
NumberAnimation on rotateAngle
{
from: 0
to: 360
duration: 1000
loops: Animation.Infinite
}
Timer
{
interval: 3000
repeat: true
property int tCount: 0
running: true
onTriggered:
{
var sourceList = [ "../image/soul.png",
"../image/avatar.jpg" ];
theCube.source = sourceList[tCount++ % 2];
}
}
}
}
function isMobileDevice( )// 判断是否是移动平台
{
return Qt.platform.os === "android" ||
Qt.platform.os === "blackberry" ||
Qt.platform.os === "ios" ||
Qt.platform.os === "winphone";
}
}
一个普通的窗口,背景是橙色的,在上面显示了我们的Cube。我希望我的Cube沿着一个轴进行旋转,所以设定了NumberAnimationon rotateAngle。此外,我希望每隔三秒Cube更换纹理,所以设定了一个Timer来更换纹理。每一个Item都有transform成员,它表示Item经过什么样的转换,目前transform支持Translation、Rotation以及Scale,有人想要让MouseArea成为不规则的,其实如果官方提供了Shear这个类,那么就更方便了。
我们看到的QML代码仅仅是表象,其实在幕后,是一个较为复杂的C++类