Development/Tutorials/Qt4 Ruby Tutorial/Chapter 13/fi - Revision history

FuzzyBot: Updating to match new version of source page

2012-07-18T14:25:59Z

Updating to match new version of source page

Centerlink: Created page with "=== Harjoitukset ==="

2011-11-01T17:32:11Z

Created page with "=== Harjoitukset ==="

Centerlink: Created page with "=== Sovelluksen suorittaminen ==="

2011-11-01T17:32:00Z

Created page with "=== Sovelluksen suorittaminen ==="

Centerlink: Created page with "=== Läpikäynti rivi riviltä ==="

2011-11-01T17:31:37Z

Created page with "=== Läpikäynti rivi riviltä ==="

Centerlink: Created page with "=== Yleiskuva ==="

2011-11-01T17:31:13Z

Created page with "=== Yleiskuva ==="

Centerlink: Created page with "== Peli loppui =="

2011-11-01T17:30:53Z

Created page with "== Peli loppui =="

Centerlink: Created page with "Peli loppui"

2011-11-01T17:30:34Z

Created page with "Peli loppui"

Centerlink: Created page with "Qt4 Ruby -oppikurssi"

2011-11-01T17:30:23Z

Created page with "Qt4 Ruby -oppikurssi"

Centerlink: Created page with "TutorialBrowser"

2011-11-01T17:30:10Z

Created page with "TutorialBrowser"

New page

<languages />

{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 13}}

{{TutorialBrowser|
series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby Tutorial]]|
name=Game Over|
pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_12|Tutorial 12 - Hanging in the Air the Way Bricks Don't]]|
next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_14|Tutorial 14 - Facing the Wall]]
}}
== Game Over ==
[[Image:Qt4_Ruby_Tutorial_Screenshot_13.png|center]]
Files:
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/lcdrange.rb lcdrange.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/gamebrd.rb gamebrd.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/t13.rb t13.rb]
* [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/cannon.rb cannon.rb]

=== Overview ===

In this example we start to approach a real playable game with a score.

We give '''<tt>MyWidget</tt>''' a new name ('''<tt>GameBoard</tt>'''), add some slots, and move it to '''<tt>gamebrd.rb</tt>'''

The '''<tt>CannonField</tt>''' now has a game over state.

The layout problems in '''<tt>LCDRange</tt>''' are fixed.

=== Line by Line Walkthrough ===
'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/lcdrange.rb lcdrange.rb]'''

<syntaxhighlight lang="ruby">
@label.setSizePolicy(Qt::SizePolicy::Preferred, Qt::SizePolicy::Fixed)
</syntaxhighlight>

We set the size policy of the [http://doc.qt.nokia.com/latest/qlabel.html Qt::Label] to ([http://doc.qt.nokia.com/latest/qsizepolicy.html#Policy-enum Qt::SizePolicy::Preferred], [http://doc.qt.nokia.com/latest/qsizepolicy.html#Policy-enum Qt::SizePolicy::Fixed]). The vertical component ensures that the label won't stretch or shrink vertically; it will stay at its optimal size (its [http://doc.qt.nokia.com/latest/qwidget.html#sizeHint-prop QWidget::sizeHint()]). This solves the layout problems observed in Chapter 12.

'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/cannon.rb cannon.rb]'''

The '''<tt>CannonField</tt>''' now has a game over state and a few new functions.

<syntaxhighlight lang="ruby">
signals 'canShoot(bool)'
</syntaxhighlight>

This new signal indicates that the '''<tt>CannonField</tt>''' is in a state where the '''<tt>shoot()</tt>''' slot makes sense. We'll use it below to enable or disable the Shoot button.

<syntaxhighlight lang="ruby">
@gameEnded = false
</syntaxhighlight>

This variable contains the game state; '''<tt>true</tt>''' means that the game is over, and '''<tt>false</tt>''' means that a game is going on. Initially, the game is not over (luckily for the player :-).

<syntaxhighlight lang="ruby">
def shoot()
if isShooting()
return
end

@timerCount = 0
@shootAngle = @currentAngle
@shootForce = @currentForce
@autoShootTimer.start(5)
emit canShoot(false)
end
</syntaxhighlight>

We added a new '''<tt>isShooting()</tt>''' function, so '''<tt>shoot()</tt>''' uses it instead of testing directly. Also, shoot tells the world that the '''<tt>CannonField</tt>''' cannot shoot now.

<syntaxhighlight lang="ruby">
def setGameOver()
if @gameEnded
return
end

if isShooting()
@autoShootTimer.stop()
end

@gameEnded = true
update()
end
</syntaxhighlight>

This slot ends the game. It must be called from outside '''<tt>CannonField</tt>''', because this widget does not know when to end the game. This is an important design principle in component programming. We choose to make the component as flexible as possible to make it usable with different rules (for example, a multi-player version of this in which the first player to hit ten times wins could use the '''<tt>CannonField</tt>''' unchanged).

If the game has already been ended we return immediately. If a game is going on we stop the shot, set the game over flag, and repaint the entire widget.

<syntaxhighlight lang="ruby">
def restartGame()
if isShooting()
@autoShootTimer.stop()
end

@gameEnded = false

update()
emit canShoot(true)
end
</syntaxhighlight>

This slot starts a new game. If a shot is in the air, we stop shooting. We then reset the '''<tt>gameEnded</tt>''' variable and repaint the widget.

'''<tt>moveShot()</tt>''' too emits the new '''<tt>canShoot(true)</tt>''' signal at the same time as either '''<tt>hit()</tt>''' or '''<tt>miss()</tt>'''.

Modifications in CannonField::paintEvent():

<syntaxhighlight lang="ruby">
def paintEvent(event)
painter = Qt::Painter.new(self)

if @gameEnded
painter.setPen(Qt::black)
painter.setFont(Qt::Font.new( "Courier", 48, Qt::Font::Bold))
painter.drawText(rect(), Qt::AlignCenter, tr("Game Over"))
end
</syntaxhighlight>

The paint event has been enhanced to display the text "Game Over" if the game is over, i.e., '''<tt>gameEnded</tt>''' is '''<tt>true</tt>'''. We don't bother to check the update rectangle here because speed is not critical when the game is over.

To draw the text we first set a black pen; the pen color is used when drawing text. Next we choose a 48 point bold font from the Courier family. Finally we draw the text centered in the widget's rectangle. Unfortunately, on some systems (especially X servers with Unicode fonts) it can take a while to load such a large font. Because Qt caches fonts, you will notice this only the first time the font is used.

<syntaxhighlight lang="ruby">
paintCannon(painter)

if isShooting()
paintShot(painter)
end

unless @gameEnded
paintTarget(painter)
end

painter.end()
end
</syntaxhighlight>

We draw the shot only when shooting and the target only when playing (that is, when the game is not ended).

'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/gamebrd.rb gamebrd.rb]'''

This file is new. It contains the '''<tt>GameBoard</tt>''' class, which was last seen as '''<tt>MyWidget</tt>'''.

<syntaxhighlight lang="ruby">
slots 'fire()', 'hit()', 'missed()', 'newGame()'
</syntaxhighlight>

We have now added four slots.

We have also made some changes in the '''<tt>GameBoard</tt>''' constructor.

<syntaxhighlight lang="ruby">
@cannonField = CannonField.new()
</syntaxhighlight>

'''<tt>@cannonField</tt>''' is now a member variable, so we carefully change the constructor to use it.

<syntaxhighlight lang="ruby">
connect(@cannonField, SIGNAL('hit()'),
self, SLOT('hit()'))
connect(@cannonField, SIGNAL('missed()'),
self, SLOT('missed()'))
</syntaxhighlight>

This time we want to do something when the shot has hit or missed the target. Thus we connect the '''<tt>hit()</tt>''' and '''<tt>missed()</tt>''' signals of the '''<tt>CannonField</tt>''' to two protected slots with the same names in this class.

<syntaxhighlight lang="ruby">
connect(shoot, SIGNAL('clicked()'), self, SLOT('fire()') )
</syntaxhighlight>

Previously we connected the Shoot button's '''<tt>clicked()</tt>''' signal directly to the '''<tt>CannonField</tt>''''s '''<tt>shoot()</tt>''' slot. This time we want to keep track of the number of shots fired, so we connect it to a slot in this class instead.

Notice how easy it is to change the behavior of a program when you are working with self-contained components.

<syntaxhighlight lang="ruby">
connect(@cannonField, SIGNAL('canShoot(bool)'),
shoot, SLOT('setEnabled(bool)'))
</syntaxhighlight>

We also use the '''<tt>CannonField</tt>''''s '''<tt>canShoot()</tt>''' signal to enable or disable the Shoot button appropriately.

<syntaxhighlight lang="ruby">
restart = Qt::PushButton.new(tr('&New Game'))
restart.setFont(Qt::Font.new('Times', 18, Qt::Font::Bold))

connect(restart, SIGNAL('clicked()'), self, SLOT('newGame()'))
</syntaxhighlight>

We create, set up, and connect the New Game button as we have done with the other buttons. Clicking this button will activate the '''<tt>newGame()</tt>''' slot in this widget.

<syntaxhighlight lang="ruby">
@hits = Qt::LCDNumber.new(2)
@shotsLeft = Qt::LCDNumber.new(2)
hitsLabel = Qt::Label.new(tr('HITS'))
shotsLeftLabel = Qt::Label.new(tr('SHOTS LEFT'))
</syntaxhighlight>

We create four new widgets, to display the number of hits and shots left.

<syntaxhighlight lang="ruby">
topLayout = Qt::HBoxLayout.new()
topLayout.addWidget(shoot)
topLayout.addWidget(@hits)
topLayout.addWidget(hitsLabel)
topLayout.addWidget(@shotsLeft)
topLayout.addWidget(shotsLeftLabel)
topLayout.addStretch(1)
topLayout.addWidget(restart)
</syntaxhighlight>

The top-right cell of the [http://doc.qt.nokia.com/latest/qgridlayout.html Qt::GridLayout] is starting to get crowded. We put a stretch just to the left of the New Game button to ensure that this button will always appear on the right side of the window.

<syntaxhighlight lang="ruby">
newGame()
</syntaxhighlight>

We're all done constructing the '''<tt>GameBoard</tt>''', so we start it all using '''<tt>newGame()</tt>'''. Although '''<tt>newGame()</tt>''' is a slot, it can also be used as an ordinary function.

<syntaxhighlight lang="ruby">
def fire()
if @cannonField.gameOver() || @cannonField.isShooting()
return
end

@shotsLeft.display(@shotsLeft.intValue() - 1)
@cannonField.shoot()
end
</syntaxhighlight>

This function fires a shot. If the game is over or if there is a shot in the air, we return immediately. We decrement the number of shots left and tell the cannon to shoot.

<syntaxhighlight lang="ruby">
def hit()
@hits.display(@hits.intValue() + 1)

if @shotsLeft.intValue() == 0
@cannonField.setGameOver()
else
@cannonField.newTarget()
end
end
</syntaxhighlight>

This slot is activated when a shot has hit the target. We increment the number of hits. If there are no shots left, the game is over. Otherwise, we make the '''<tt>CannonField</tt>''' generate a new target.

<syntaxhighlight lang="ruby">
def missed()
if @shotsLeft.intValue() == 0
@cannonField.setGameOver()
end
end
</syntaxhighlight>

This slot is activated when a shot has missed the target. If there are no shots left, the game is over.

<syntaxhighlight lang="ruby">
def newGame()
@shotsLeft.display(15)
@hits.display(0)
@cannonField.restartGame()
@cannonField.newTarget()
end
</syntaxhighlight>

This slot is activated when the user clicks the New Game button. It is also called from the constructor. First it sets the number of shots to 15. Note that this is the only place in the program where we set the number of shots. Change it to whatever you like to change the game rules. Next we reset the number of hits, restart the game, and generate a new target.

'''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/t13.rb t13.rb]'''

This file has just been on a diet. '''<tt>MyWidget</tt>''' is gone, and the only thing left is the '''<tt>main()</tt>''' function, unchanged except for the name change.

=== Running the Application ===

The cannon can shoot at a target; a new target is automatically created when one has been hit.

Hits and shots left are displayed and the program keeps track of them. The game can end, and there's a button to start a new game.

=== Exercises ===

Add a random wind factor and show it to the user.

Make some splatter effects when the shot hits the target.

Implement multiple targets.

[[Category:Ruby]]

@@ Line 1: / Line 1: @@
 <languages />
-{{Template:I18n/Language Navigation Bar|Development/Tutorials/Qt4 Ruby Tutorial/Chapter 13}}
 {{TutorialBrowser|

@@ Line 275: / Line 275: @@
 Hits and shots left are displayed and the program keeps track of them. The game can end, and there's a button to start a new game.
-=== Exercises ===
+=== Harjoitukset ===
 Add a random wind factor and show it to the user.

@@ Line 269: / Line 269: @@
 This file has just been on a diet. '''<tt>MyWidget</tt>''' is gone, and the only thing left is the '''<tt>main()</tt>''' function, unchanged except for the name change.
-=== Running the Application ===
+=== Sovelluksen suorittaminen ===
 The cannon can shoot at a target; a new target is automatically created when one has been hit.

@@ Line 27: / Line 27: @@
 The layout problems in '''<tt>LCDRange</tt>''' are fixed.
-=== Line by Line Walkthrough ===
+=== Läpikäynti rivi riviltä ===
 '''[http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/lcdrange.rb lcdrange.rb]'''

@@ Line 17: / Line 17: @@
 * [http://www.darshancomputing.com/qt4-qtruby-tutorial/tutorial/t13/cannon.rb cannon.rb]
-=== Overview ===
+=== Yleiskuva ===
 In this example we start to approach a real playable game with a score.

@@ Line 9: / Line 9: @@
 next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_14|Tutorial 14 - Facing the Wall]]
 }}
-== Game Over ==
+== Peli loppui ==
 [[Image:Qt4_Ruby_Tutorial_Screenshot_13.png|center]]
 Files:

@@ Line 5: / Line 5: @@
 {{TutorialBrowser|
 series=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial|Qt4 Ruby -oppikurssi]]|
-name=Game Over|
+name=Peli loppui|
 pre=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_12|Tutorial 12 - Hanging in the Air the Way Bricks Don't]]|
 next=[[Special:myLanguage/Development/Tutorials/Qt4_Ruby_Tutorial/Chapter_14|Tutorial 14 - Facing the Wall]]