Ενότητα 5 - Τμήμα 1 - Γραφικά

5.1.1 - Συνεχίζουμε

Με βάση το βασικό πρότυπο της pygame η οθόνη που δημιουργήσαμε ανανεώνεται 60 φορές το δευτερόλεπτο με την εντολή  clock.tick(60).

Αλλάξτε το χρώμα της οθόνη σε ΜΑΥΡΟ αλλάζοντας την γραμμή 44 σε :

screen.fill(BLACK)

Για να σχεδιάσουμε ένα ορθογώνιο παραλληλόγραμμο γράψτε την εντολή που ακολουθεί στη γραμμή 47 (μη ξεχάσετε να διορθώσετε τη στοίχιση στην εσοχή).

pygame.draw.rect(screen,WHITE, [50, 50, 50, 50])

Η Οθόνη ανανεώνεται με ρυθμό 60 φορών το δευτερόλεπτο αλλά δεν μπορούμε να το αντιληφθούμε γιατί το ορθογώνιο παραλληλόγραμμο είναι πάντα στην ίδια θέση.

Τώρα θα μετακινήσουμε το ορθογώνιο παραλληλόγραμμο. Πως μπορούμε να το κάνουμε αυτό; Ποιόι από τους τέσσερις αριθμούς [50, 50, 50, 50] αντιστοιχούν στην αρχική θέση του ορθογώνιου παραλληλόγραμμου; Αν δεν θυμάστε κοιτάξτε την φωτογραφία που ακολουθεί.

Αρχικά θα αλλάξουμε όλους τους αριθμούς με μεταβλητές, μετά αντικαθιστούμε την εντολή draw στη γραμμή 47 με τις 8 γραμμές που ακολουθούν. (μην ξεχάσετε την στοίχιση στην σωστή εσοχή)

rect_x = 50    # X starting position of rectangle
rect_y = 50    # Y starting position of rectangle
speed_x = 5   # X speed of rectangle
speed_y = 5   # Y speed of rectangle
pygame.draw.rect(screen, WHITE, [rect_x, rect_y, 50,50])
rect_x += speed_x
rect_y += speed_y
print ("rect_x =", rect_x, "rect_y =", rect_y)

Τίποτα δεν συμβαίνει. Γιατί; Γιατί 60 φορές το δευτερόλεπτο οι μεταβλητές rect_x και rect_y γίνονται 50 και 55 αντίστοιχα. Ελέξτε την περιοχή εντολών (CLI) να δείτε που είναι το σημείο έναρξης σχεδίασης του ορθογώνιου παραλληλόγραμμου. Η Εντολή print χρησιμεύει για να μας πληροφορήσει για τη θέση του ορθογώνιου παραλληλόγραμμου. Όταν τα καταφέρουμε στο να μετακινούμε το ορθογώνιο παραλληλόγραμμο θα βάλουμε αυτή τη γραμμή σε σχόλια ή θα τη διαγράψουμε.

Τι πρέπει να κάνουμε;

• ΠρώτονFirst : δημιουργούμε ένα σετ εντολών αρχικοποίησης έξω από την κύρια επανάληψη και μετακινούμε τις 4 πρώτες εντολές εκεί, προσοχή στην εσοχή των εντολών.
  
• Δεύτερον: μετακινούμε τις 2 επόμενες εντολές στο τμήμα της λογικής παιχνιδιού (Game logic), δεν είναι απαραίτητο αλλά καλύτερα να βάλουμε τις εντολές στο κατάλληλο σημείο, έτσι είναι ευκολότερο να κάνουμε αλλαγές και να διορθώσουμε λάθη.

Αν κάνατε κάποιο λάθος που δεν μπορείτε να διορθώσετε μπορείτε να καταβάσετε τον ολοκληρωμένο κώδικα από εδώ.

Ουάου!! Ένα ορθογώνιο παραλληλόγραμμο που μετακινείται!!

Ουάου!! Το ορθογώνιο παραλληλόγραμμο μετά από λίγο εξαφανίζεται έξω από την οθόνη....

Κοιτάξτε στην περιοχή γραμμής εντολών για να καταλάβετε τι συνέβη στο ορθογώνιο παραλληλόγραμμο. Για να σταματήσετε και επαναφέρετε το Thonny πατήστε στο κουμπί .

5.1.2 - και συνεχίζουμε

Καταφέραμε να κάνουμε κινούμενο ένα ορθογώνιο παραλληλόγραμμο. Τώρα θα ελέγξουμε την κίνηση του. Αν δεν το καταφέρατε μπορείτε να κατεβάσετε τον κώδικα από εδώ και να τον ανοίξετε με το Thonny.

Αλλάξτε τις γραμμές 42 και 43 χρησιμοποιώντας διαφορετικούς ακεραίους (0, 1, 2,...) και δοκιμάστε να εκτελέσετε τον κώδικα μετά από κάθε αλλαγή που κάνατε. Δοκιμάστε και αρνητικούς αριθμούς (π.χ. -5 ή -1).

Τι συμβαίνει αν οι μεταβλητές speed_x ή speed_y γίνουν 0; Τι σμυβαίνει αν πάρουν αρνητικές τιμές;

speed = 0 σημαίνει ότι το ορθογώνιο παραλληλόγραμμο δεν κινείται
speed > 0 σημαίνει ότι το ορθογώνιο παραλληλόγραμμο κινείται προς μία κατεύθυνση (δεξιά ή κάτω)
speed < 0 σημαίνει ότι το ορθογώνιο παραλληλόγραμμο κινείται προς μία κατεύθυνση (αριστερά ή πάνω)

Πως μπορούμε να αλλάξουμε την κατεύθυνση του ορθογώνιου παραλληλογράμμου; Δοκιμάστε τα παρακάτω στη γραμμή εντολών:

>>> number = 5
>>> print (number)
>>> number *= -1
>>> print (number)

Ποιος νομίζετε ότι είναι ο σκοπός της τρίτης εντολής;

Πως πιστεύετε ότι μπορούμε να αλλάξουμε την κατεύθυνση του κύβου όταν φτάσει στην άκρη της οθόνης;

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

Αν δεν καταφέρατε να ολοκληρώσετε τον κώδικα ή έχετε κάνει κάποιο λάθος μπορείτε να το κατεβάσετε από εδώ.

Προσπαθήστε να καταλάβετε γιατί ο αριθμός που χρησιμοποιήσαμε για την αναπήδηση δεξιά είναι 650 και όχι 700. Το ίδιο και για την αναπήδηση στο κάτω μέρος. Γιατί χρησιμοποιούμε 450 και όχι 500; Αλλάξτε το 650 σε 670 και το 450 σε 470 και εκτελέστε το πρόγραμμα ξανά.

5.1.3 - Πολλαπλά αντικείμενα

Τα πράγματα αρχίζουν να γίνονται πολύ ενδιαφέροντα. Αν θέλαμε να προσθέσουμε ένα ακόμα ΚΟΚΚΙΝΟ ορθογώνιο παραλληλόγραμμο στο παράθυρο με τα γραφικά μας τι θα έπρεπε να κάνουμε;

Ας ξαναδούμε τα βήματα μας.

Σχεδιάζουμε το ορθογώνιο στην θέση που θέλουμε (π.χ. 250, 180), με το μέγεθος που θέλουμε (π.χ. 80,80) και αν θέλουμε μόνο το περίγραμμα χρησιμοποιούμε άλλη παράμετρο για το πάχος (π.χ. 3)

pygame.draw.rect(screen, RED, [250, 180, 80, 80], 3)

Αντιγράψτε την εντολή και τοποθετήστε τη μετά την εντολή του κινούμενου άσπρου ορθογωνίου.

Αν δεν καταφέρετε να φτιάξετε τον σωστό κώδικα μπορείτε να τον κατεβάσετε από εδώ

Ποιο από τα δύο σχήματα είναι μπροστά; Γιατί; Μπορείτε να αλλάξετε των κώδικα ώστε να εμφανιστεί το άλλο σχήμα μπροστά;

Επίσης θυμηθείτε ότι μπορείτε να αλλάξετε την ταχύτητα του παιχνιδιού στην γραμμή 66 με την εντολή  

clock.tick(60) 

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

Επίσης αλλάζοντας την τιμή της ταχύτητας του ορθογωνίου στις γραμμές 31 και 32 έχει σαν αποτέλεσμα ομαλότερη κίνηση. Δοκιμάστε τιμές από το 1 μέχρι το 10.

speed_x = 2   # X speed of rectangle
speed_y = 2   # Y speed of rectangle

5.1.4 - Πολλαπλά αντικείμενα και κίνηση

Χρησιμοποιήστε σαν βάση εκκίνησης τον προηγούμενο κώδικα, που δημιουργήσαμε ένα κινούμενο λευκό ορθογώνιο και ένα κόκκινο πλαίσιο, μπορείτε να προσθέσετε κώδικα για το κόκκινο πλαίσιο για να κινείται και να αναπηδά στις άκρες της οθόνης;

Όπως αντιλαμβάνεστε ο κώδικας αρχίζει να γίνεται πολύπλοκος και η χρήση σχολίων και το μάζεμα του κώδικα βοηθά.

Αν έχετε κάποιο λάθος στον κώδικα σας μπορείτε να τον κατεβάσετε από εδώ 

Όπως μπορείτε να δείτε καταφέραμε να αναπηδούν τα δύο ορθογώνια σχήματα αλλά γράψατε τα πάντα δύο φορές (Wrote Everything Twice) το οποίο είναι αντίθετο με τη βασική αρχή του προγραμματισμού "μην επαναλαμβάνεστε" (Don't Repeat Yourself).