blob: b940986785e3abfdd42a600a7989096972058e5f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
/*!
\page advtutorial1.html
\example declarative/tutorials/samegame/samegame1
\title Advanced Tutorial 1 - Creating the Game canvas and block
\target advtutorial1
The first step is to create the items in your application. In Same Game we have a main game screen and the blocks that populate it.
\image declarative-adv-tutorial1.png
Here is the QML code for the basic elements. The game window:
\code
import Qt 4.6
Rectangle {
id: Screen
width: 490; height: 720
SystemPalette { id: activePalette; colorGroup: Qt.Active }
Item {
width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top
Image {
id: background
anchors.fill: parent; source: "pics/background.png"
fillMode: "PreserveAspectCrop"
}
}
Rectangle {
id: ToolBar
color: activePalette.window
height: 32; width: parent.width
anchors.bottom: Screen.bottom
Button {
id: btnA; text: "New Game"; onClicked: print("Implement me!");
anchors.left: parent.left; anchors.leftMargin: 3
anchors.verticalCenter: parent.verticalCenter
}
Text {
id: Score
text: "Score: Who knows?"; font.bold: true
anchors.right: parent.right; anchors.rightMargin: 3
anchors.verticalCenter: parent.verticalCenter
}
}
}
\endcode
This gives you a basic game window, with room for the game canvas. A new game
button and room to display the score. The one thing you may not recognize here
is the SystemPalette item. This item provides access to the Qt system palette
and is used to make the button look more like a system button (for exact native
feel you would use a QPushButton). Since we want a fully QML button, and the Fx
primitives don't include a button, we had to write our own. Below is the code
which we wrote to do this:
\code
import Qt 4.6
Rectangle {
id: Container
signal clicked
property string text: "Button"
color: activePalette.button; smooth: true
width: txtItem.width + 20; height: txtItem.height + 6
border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8;
gradient: Gradient {
GradientStop {
id: topGrad; position: 0.0
color: if (mr.pressed) { activePalette.dark } else { activePalette.light } }
GradientStop { position: 1.0; color: activePalette.button }
}
MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() }
Text {
id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText
}
}
\endcode
Note that this Button component was written to be fairly generic, in case we
want to use a similarly styled button later.
And here is a simple block:
\code
import Qt 4.6
Item {
id:block
Image { id: img
source: "pics/redStone.png";
anchors.fill: parent
}
}
\endcode
Since it doesn't do anything yet it's very simple, just an image. As the
tutorial progresses and the block starts doing things the file will become
more than just an image. Note that we've set the image to be the size of the itm. This will be used later, when we dynamically create and size the block items the image will be scaled automatically to the correct size.
You should be familiar with all that goes on in these files so far. This is a
very basic start and doesn't move at all - next we will populate the game canvas
with some blocks.
[\l {advtutorial.html}{Advanced Tutorial}] [Next: \l {advtutorial2}{Advanced Tutorial 2}]
*/
|
