Hello Pong: μέρος 4ο

Το ενδιαφέρον για την σειρά άρθρων πάνω στην ανάπτυξη ενός παιχνιδιού με τη χρήση του XNA Game Studio πέφτει με εκθετικό ρυθμό! Ελπίζω να οφείλονται οι διακοπές του καλοκαιριού για αυτό και όχι τα άρθρα τα ίδια! J Πάντως λαμβάνω πολύ εύστοχα και κριτικά σχόλια στα άρθρα και αυτό με ευχαριστεί πολύ.

Σήμερα θα ολοκληρώσουμε επιτέλους το Pong στην βασική του μορφή, εισάγοντας κίνηση του αντιπάλου, σκορ και ηχητικά εφέ. Το σχόλιο του Σπύρου (spahar) στο προηγούμενο άρθρο με δελέασε να αλλάξω τον τρόπο με τον οποίο συγκρούεται η μπάλα στη ρακέτα ώστε να είναι πιο ρεαλιστικός και το παιχνίδι πιο ενδιαφέρον, αλλά τελικά αποφάσισα να το κάνουμε αυτό μετά την ολοκλήρωση του παιχνιδιού στην απλή του μορφή ώστε να μην περιπλέξουμε τα πράγματα.

Η τεχνητή νοημοσύνη (artificial intelligence) του αντιπάλου που θα υλοποιήσουμε θα είναι παραπάνω από απλή. Το μόνο που θα κάνει είναι να ακολουθεί την μπάλα στην προσπάθεια του να την αποκρούσει. Σε κώδικα αυτό μεταφράζεται ως εξής:

protected override void Update(GameTime gameTime)
{
// υπόλοιπος κώδικας

	//κίνηση μπάλας
	ball.X = (int)(ball.X + ballSpeed * ballDirection.X);
	ball.Y = (int)(ball.Y + ballSpeed * ballDirection.Y);

	//κινηση ρακέτας υπολογιστή
	int sign = Math.Sign((ball.Top + ball.Height / 2) - (rightPaddle.Top + rightPaddle.Height / 2));
	rightPaddle.Y += (int)(sign*rightPaddleSpeed);

	if (rightPaddle.Bottom > viewHeight)
	{
		rightPaddle.Y = viewHeight - rightPaddle.Height;
	}
	else if (rightPaddle.Y < 0)
	{
		rightPaddle.Y = 0;
	}            

// υπόλοιπος κώδικας
	base.Update(gameTime);
}

Καταρχάς υπολογίζουμε την κίνηση (νέα θέση) της μπάλας πρώτα. Αυτό το κάνουμε έτσι ώστε να μπορεί να ακολουθεί ο υπολογιστής με την ρακέτα του την τρέχουσα θέση της μπάλας και όχι αυτή που είχε στο προηγούμενο καρέ. Υπολογίζουμε την απόσταση του κέντρου της μπάλας από το κέντρο της ρακέτας (την κάθετη απόσταση, υπολογίζουμε δηλαδή ΚεντροΜπάλας.Υ – ΚεντροΡακέτας.Υ). Από την απόσταση αυτή μας ενδιαφέρει προς το παρόν μόνο το πρόσημο. Αν η απόσταση είναι θετική, αυτό σημαίνει ότι το κέντρο της μπάλας βρίσκεται κάτω από το κέντρο της ρακέτας και ότι θα πρέπει να μετακινήσουμε την ρακέτα προς τα κάτω ώστε να την αποκρούσουμε. Αντίστοιχα αν η απόσταση είναι αρνητική, το κέντρο της μπάλας βρίσκεται πάνω από το κέντρο της ρακέτας και στην περίπτωση αυτή θα πρέπει να μετακινήσουμε τη ρακέτα προς τα πάνω. Αυτή η μπερδεμένη περιγραφή γίνεται ξεκάθαρη (ελπίζω) με ένα σχήμα:

Θυμηθείτε ότι στο σύστημα συντεταγμένων παραθύρου η αρχή (0,0) είναι πάνω-αριστερά το Υ αυξάνει προς τα κάτω και το Χ προς τα δεξιά. Η απόσταση Α είναι η διαφορά της Υμ συντεταγμένης του κέντρου της μπάλας με τη Υρ συντεταγμένη του κέντρου της ρακέτας. Αρνητική απόσταση σημαίνει ότι πρέπει να μετακινήσω τη ρακέτα προς τα πάνω για να αποκρούσω τη μπάλα και θετική το ανάποδο.

Το πρόσημο που μας ενδιαφέρει μπορούμε να το υπολογίσουμε με την συνάρτηση Math.Sign(). Αυτή επιστρέφει 1 ή -1 ανάλογα με το αν η παράμετρος που τις δίνουμε είναι θετική η αρνητική. Επιπλέον έχω ορίσει και μια float rightPaddleSpeed μεταβλητή την οποία έχω αρχικοποιήσει στη μέθοδο Initialise() με τιμή 5.0f. Η μεταβλητή αυτή κρατά την απόσταση που θα μετακινώ την ρακέτα σε κάθε καρέ. Έχοντας υπολογίσει το πρόσημο της απόστασης και έχοντας το αποθηκευμένο στη μεταβλητή sign, μπορώ να μετακινήσω τη ρακέτα του υπολογιστή πολύ απλά με την εντολή:

int sign = Math.Sign((ball.Top + ball.Height / 2) - (rightPaddle.Top + rightPaddle.Height / 2));
rightPaddle.Y += (int)(sign*rightPaddleSpeed);

Το sign μου καθορίζει αν θα πρέπει να προσθέσω ή να αφαιρέσω τη ποσότητα rightPaddleSpeed από τη Υ συνταγμένη της ρακέτας. Όλη αυτή η πολύπλοκη εξήγηση μεταφράστηκε σε 2 γραμμές κώδικα! Η συνθήκη if που ακολουθεί δεν κάνει τίποτα άλλο από να βεβαιώνει ότι η ρακέτα του υπολογιστή δεν θα βγει ποτέ εκτός οθόνης, κάτι που κάναμε και για την ρακέτα του παίκτη στο προηγούμενο άρθρο.

	if (rightPaddle.Bottom > viewHeight)
	{
		rightPaddle.Y = viewHeight - rightPaddle.Height;
	}
	else if (rightPaddle.Y < 0)
	{
		rightPaddle.Y = 0;
	}

Αν τρέξουμε τώρα το παιχνίδι με F5, η ρακέτα του υπολογιστή θα κινηθεί έτσι ώστε να αποκρούσει την μπάλα. Δεν θα τα καταφέρει όμως ποτέ, μιας και δεν έχουμε υλοποιήσει την σύγκρουση της μπάλας με την ρακέτα αυτή, κάτι που κάνουμε απλά ως εξής:

protected override void Update(GameTime gameTime)
{
// υπόλοιπος κώδικας

	//ανίχνευση σύγκρουσης μπάλας με τη ρακέτα υπολογιστή
	if (rightPaddle.Top <= ball.Top && ball.Bottom <= rightPaddle.Bottom)
	{
		if (ball.Right > rightPaddle.Left && ball.Left < rightPaddle.Left && ballDirection.X > 0)
		{
			ballDirection.X = -ballDirection.X;
		}
	}

	base.Update(gameTime);
}

Η λογική είναι εντελώς ανάλογη με αυτή που χρησιμοποιήσαμε στο προηγούμενο άρθρο για τη ρακέτα του παίκτη, και επιπλέον ενσωματώνει μια έξτρα συνθήκη για να κάνει την ανίχνευση σύγκρουσης περισσότερο αξιόπιστη, μετά την πολύ εύστοχη παρατήρηση του spahar.

Το παιχνίδι μας είναι λειτουργικό πλέον και μπορείτε να το δοκιμάσετε. Για να το κάνουμε πιο ενδιαφέρον ας προσθέσουμε και σκορ. Θέλουμε 2 μεταβλητές για το σκορ, μια για κάθε παίκτη (playerScore και computerScore).

public class Game1 : Microsoft.Xna.Framework.Game
{
	GraphicsDeviceManager graphics;
	SpriteBatch spriteBatch;
	Rectangle rightPaddle;
	Rectangle leftPaddle;
	float rightPaddleSpeed;
	int playerScore;
	int computerScore;

  // υπόλοιπος κώδικας

Ο κάθε παίκτης θα χάνει (ο αντίπαλος θα κερδίζει ένα πόντο) όταν αφήνει την μπάλα να περάσει χωρίς να την αποκρούσει με την ρακέτα του. Το πότε γίνεται αυτό μπορούμε να το διαπιστώσουμε εύκολα, έχουμε ήδη το κώδικα έτοιμο:

protected override void Update(GameTime gameTime)
{
   // υπόλοιπος κώδικας

	//ανίχνευση σύγκρουσης μπάλας με τα τοιχώματα του "γηπέδου"
	if (ball.Left < 0)
	{
		ball.X = 0;
		ballDirection.X = -ballDirection.X;
		computerScore++;
	}
	else if (ball.Right > viewWidth)
	{
		ball.X = viewWidth - ball.Width ;
		ballDirection.X = -ballDirection.X;
		playerScore++;
	}

   // υπόλοιπος κώδικας
}

Αν η μπάλα χτυπήσει στο αριστερό τοίχωμα του γηπέδου, αυτό σημαίνει ότι ο παίκτης δεν κατάφερε να την αποκρούσει και δίνουμε ένα πόντο στον υπολογιστή. Αν η μπάλα χτυπήσει στο δεξί τοίχωμα τότε χάνει ο υπολογιστή και δίνουμε στο παίκτη ένα πόντο.

Μπορούμε να κρατήσουμε το σκορ τώρα, αλλά δεν μπορούμε να το απεικονίσουμε στην οθόνη ακόμα. Για να απεικονίσουμε κείμενο στο XNA πρέπει πρώτα να προσθέσουμε ένα νέο αρχείο (New Item) περιεχομένου στο project Content:

Από το παράθυρο που ανοίγει επιλέγουμε Sprite Font, του δίνουμε το όνομα Arial.Spritefont και πατάμε το Add.

Στο Content project θα υπάρχει τώρα ένα XML αρχείο με το όνομα Arial.spritefont. Ανοίξτε το και θα δείτε τη περιγραφή ενός font:

<?xml version="1.0" encoding="utf-8"?>
<!--
This file contains an xml description of a font, and will be read by the XNA
Framework Content Pipeline. Follow the comments to customize the appearance
of the font in your game, and to change the characters which are available to draw
with.
-->
<XnaContent xmlns:Graphics="Microsoft.Xna.Framework.Content.Pipeline.Graphics">
  <Asset Type="Graphics:FontDescription">

    <!--
    Modify this string to change the font that will be imported.
    -->
    <FontName>Kootenay</FontName>

    <!--
    Size is a float value, measured in points. Modify this value to change
    the size of the font.
    -->
    <Size>14</Size>

Αυτό που μας ενδιαφέρει είναι η μεταβλητή FontName την οποία θα αλλάξουμε σε Arial από Kootenay (που το βρήκε αυτό το font;), και τη Size που θα την αυξήσουμε σε 60.

Η περιγραφή του font είναι έτοιμη αλλά δεν μπορούμε να το χρησιμοποιήσουμε ακόμα, πρέπει πρώτα να το φορτώσουμε στη μνήμη. Για να το κάνουμε αυτό πρέπει να δημιουργήσουμε ένα αντικείμενο τύπου SpriteFont, το οποίο περιγράφει font στο περιβάλλον XNA. Αρχικά δηλώνουμε μια μεταβλητή arialFont τύπου SpriteFont:

public class Game1 : Microsoft.Xna.Framework.Game
{
	GraphicsDeviceManager graphics;
	SpriteBatch spriteBatch;
	Rectangle rightPaddle;
	Rectangle leftPaddle;
	float rightPaddleSpeed;
	int playerScore;
	int computerScore;
	SpriteFont arialFont;

	// υπόλοιπος κώδικας

Στη μέθοδο LoadContent φορτώνουμε το font προσθέτοντας μια Load εντολή:

protected override void LoadContent()
{
	// Create a new SpriteBatch, which can be used to draw textures.
	spriteBatch = new SpriteBatch(GraphicsDevice);

	whiteTile = Content.Load<Texture2D>("white_tile");
	arialFont = Content.Load<SpriteFont>("arial");
}

Παρατηρούμε ότι χρησιμοποιούμε και πάλι την μέθοδο Content.Load όπως και με την υφή. Αυτή τη φορά όμως ως τύπο περιεχομένου δίνουμε SpriteFont. Και πάλι δίνουμε ως όρισμα στην Load το όνομα του αρχείου περιεχομένου, χωρίς την κατάληξη (.spritefont). Το XNA δεν διαχωρίζει κεφαλαία-μικρά. Το font μας είναι πλέον έτοιμο να το χρησιμοποιήσουμε. Αυτό θα το κάνουμε στη μέθοδο Draw().

Το αντικείμενο τύπου SpriteBatch, που χρησιμοποιούμε ήδη για να απεικονίσουμε ρακέτες και μπάλα, παρέχει μια μέθοδο ειδική για απεικόνιση κειμένου, τη DrawString(). Η μέθοδος αυτή παίρνει ως ορίσματα το αντικείμενο arialFont που δημιουργήσαμε παραπάνω, το κείμενο που θα τυπώσει, την τοποθεσία και το χρώμα του κειμένου. Συνεπώς πάντα ανάμεσα στο spriteBatch.Begin()/.End() καλώ τη μέθοδο αυτή 2 φορές για να απεικονίσω το σκορ κάθε παίκτη:

protected override void Draw(GameTime gameTime)
{
	GraphicsDevice.Clear(Color.Black);

	spriteBatch.Begin();

	//απεικόνισε ρακέτες και μπάλα
	spriteBatch.Draw(whiteTile, rightPaddle, Color.White);
	spriteBatch.Draw(whiteTile, leftPaddle, Color.White);
	spriteBatch.Draw(whiteTile, ball, Color.White);

	//απεικόνισε σκορ
	spriteBatch.DrawString(arialFont, playerScore.ToString(), new Vector2(220, 10), Color.Yellow);
	spriteBatch.DrawString(arialFont, computerScore.ToString(), new Vector2(500, 10), Color.Yellow);

	spriteBatch.End();

	base.Draw(gameTime);
}

Στο μόνο που αξίζει να αναφερθούμε σχετικά με τη κλήση της μεθόδου DrawString() είναι το παράξενο όρισμα playerScore.ToString(), και το αντίστοιχο για το computerScore. Το playerScore είναι μια απλή μεταβλητή τύπου integer που φαίνεται να υποστηρίζει μια μέθοδο ToString(); Αυτό είναι μια ιδιότητα της C# σύμφωνα με την οποία ΟΛΟΙ οι τύποι δεδομένων κληρονομούν από την class Object, ακόμα και απλές μεταβλητές τύπου integer, float, char κλπ. (χωρίς να είναι απαραίτητα αντικείμενα!) Η κλάση αυτή υποστηρίζει τη μέθοδο ToString() η οποία μετατρέπει σε κείμενο (string) το περιεχόμενο του αντίστοιχου αντικειμένου. Στην δική μας περίπτωση θα μετατρέψει σε κείμενο το integer αριθμό που είναι αποθηκευμένος στις μεταβλητές του σκορ.

Κατά τα άλλα ορίζω ένα αντικείμενο τύπου Vector για να ορίσω τη θέση του κειμένου και θέτω το χρώμα του σε κίτρινο. Μπορούμε επιτέλους να παίξουμε το παιχνίδι με αλληλεπίδραση, συγκρούσεις και σκορ!

Μετά από ένα-δυο λεπτά παιξίματος θα διαπιστώσετε ότι ο υπολογιστής δεν χάνει ποτέ ενώ δεν έχει πρόβλημα να κερδίσει εσάς (εκτός αν είστε τόσο καλοί παίκτες οπότε θα βλέπετε το 0-0 σκορ για πολύ ώρα). Αυτό συμβαίνει για η ταχύτητα της ρακέτας του υπολογιστή είναι ίδια με της μπάλας οπότε την προλαβαίνει πάντα. Για να κάνουμε τα πράγματα πιο δίκαια για το παίκτη, θα κάνουμε την εξής αλλαγή κάθε φορά που η μπάλα συγκρούεται με μια ρακέτα, θα αυξάνουμε λίγο την ταχύτητα της. Η ταχύτητα θα επαναφέρεται κάθε φορά που κάποιος χάσει ένα πόντο. Αυτό υλοποιείται εύκολα ως εξής:

protected override void Update(GameTime gameTime)
{
				// υπόλοιπος κώδικας

	//ανίχνευση σύγκρουσης μπάλας με τα τοιχώματα του "γηπέδου"
	if (ball.Left < 0)
	{
		ball.X = 0;
		ballDirection.X = -ballDirection.X;
		computerScore++;
		ballSpeed = 5.0f;
	}
	else if (ball.Right > viewWidth)
	{
		ball.X = viewWidth - ball.Width ;
		ballDirection.X = -ballDirection.X;
		playerScore++;
		ballSpeed = 5.0f;
	}

			   // υπόλοιπος κώδικας

	//ανίχνευση σύγκρουσης μπάλας με τη ρακέτα παίκτη
	if (leftPaddle.Top <= ball.Top && ball.Bottom <= leftPaddle.Bottom)
	{
		if (ball.Left < leftPaddle.Right && ball.Right > leftPaddle.Right && ballDirection.X < 0)
		{
			ballDirection.X = -ballDirection.X;
			ballSpeed *= 1.1f;
		}
	}

	//ανίχνευση σύγκρουσης μπάλας με τη ρακέτα υπολογιστή
	if (rightPaddle.Top <= ball.Top && ball.Bottom <= rightPaddle.Bottom)
	{
		if (ball.Right > rightPaddle.Left && ball.Left < rightPaddle.Left && ballDirection.X > 0)
		{
			ballDirection.X = -ballDirection.X;
			ballSpeed *= 1.1f;
		}
	}

			   // υπόλοιπος κώδικας

	base.Update(gameTime);
}

Με κάθε σύγκρουση της μπάλας με την ρακέτα αυξάνουμε τη ταχύτητα της κατά 10%, και την επαναφέρουμε όταν διαπιστωθεί σύγκρουση της με αριστερό ή δεξί όριο του γηπέδου. Με τον τρόπο αυτό δίνουμε στο παίκτη μια ευκαιρία να σημειώσει κανένα πόντο (αν και ακόμα και έτσι με τσάκισε ο υπολογιστής).

Θα σταματήσουμε το tutorial εδώ, το παιχνίδι βρίσκεται σε αρκετά καλή κατάσταση, λείπουν οι ήχοι του οποίους θα προσθέσουμε στο επόμενο tutorial. Επιπλέον η ανίχνευση σύγκρουσης της μπάλας με τις ρακέτες και η αναπήδηση της από αυτές θα μπορούσε να γίνει καλύτερη. Θα το επιχειρήσουμε και αυτό στο επόμενο tutorial.

Μπορείτε να βρείτε το κώδικα του παιχνιδιού με τις σημερινές προσθήκες εδώ.

Ερωτήσεις, σχόλια, προτάσεις για βελτίωση στο γνωστό μέρος!