Εαρινό Εξάμηνο 2014

Ομάδα Εργασίας LAB41821249 :

Αθανάσιος Κυριαζής

Α.Μ. : 2008030002

02/06/2014

ΠΛΗ 418 Project Γραφικής

Flappy Bird 3D

Σκοπός του project

Σκοπός της εργασίας είναι να δημιουργήσουμε έναν 3D κλώνο του παιχνιδιού

Flappy Bird χρησιμοποιώντας Webgl και Javascript. Η εργασία στοχεύει στην

κατασκευή απλών και γρήγορων cross platform interactive 3D εφαρμογών

χρησιμοποιώντας state of art technologies.

Υλοποίηση παιχνιδιού

Σχεδιασμός της μηχανικής του παιχνιδιού, αναπαράσταση των

επιπέδων και απόδοση της γεωμετρίας και των βασικών

λειτουργιών

Η βασική λειτουργικότητα του παιχνιδιού όπως έχει υλοποιηθεί είναι η εξής :

Αρχικά όταν τρέχουμε την εφαρμογή βλέπουμε μία πίστα από κολόνες και ένα

πουλί το οποίο πρέπει να πετάει ανάμεσα από τις κολόνες χωρίς να έρχεται σε

επαφή με αυτές. Τα πλήκτρα τα οποία κατευθύνουν το πουλί στις 2 διαστάσεις (x

και y) είναι το δεξί και αριστερό βελάκι και το space. Με το δεξί βελάκι

κατευθύνουμε το πουλί προς τα δεξιά και με το αριστερό προς τα αριστερά στον

άξονα x ενώ με το space κατευθύνουμε το πουλί προς τα επάνω στον άξονα y. Δεν

υπάρχει επιλογή να κατευθύνουμε το πουλί προς τα κάτω στον άξονα y αφού αυτό

γίνεται αυτόματα με βάση τις εξισώσεις που μας έχουν δοθεί ώστε να χάνει ύψος

το πουλί και να υλοποιείται επιτυχώς η smooth κίνησή του ( Παράγραφος Extended

Functionality ). Όσον αφορά την τρίτη διάσταση στον άξονα z το πουλί κινείται

αυτόματα προς την πίστα και για να γίνει πιο ενδιαφέρον το παιχνίδι όσο προχωράει

το πουλί στον z και περνάει τις κολόνες αυξάνεται η ταχύτητά του.

Για την υλοποίηση του παιχνιδιού χρησιμοποιήθηκε ο κώδικας που μας δόθηκε

στο courses (WebGL sandbox) κάνοντας τις κατάλληλες αλλαγές και προσθήκες

που χρειάστηκαν.

Υλοποίηση πουλιού

Πιο συγκεκριμένα για τον σχεδιασμό του πουλιού χρησιμοποιήσαμε 3 κύβους

όπου ο ένας κύβος είναι το σώμα του πουλιού και οι άλλοι 2 είναι τα φτερά. Για το

σώμα αλλά και για τα φτερά έχουμε κάνει κατάλληλα scale ώστε να φαίνεται όσο

πιο ρεαλιστικό γίνεται. Επίσης για τον ίδιο λόγο έχουμε κάνει και ένα rotate σε

κάθε ένα από τα 2 φτερά, βάση 2 μεταβλητών που πειράζουμε στην animate() ώστε

να κουνιούνται πάνω κάτω ταυτόχρονα και να φαίνεται το πουλί σαν να πετάει.

Εδώ πρέπει να αναφέρουμε ότι για να πετύχουμε αυτήν την κίνηση να γίνεται

σωστά και όλα μαζί να κουνιούνται ταυτόχρονα τα Push και Pop των 2 φτερών

έχουν υλοποιηθεί μέσα στο Push του σώματος του πουλιού.

Levels και πίστα

Όσον αφορά την πίστα έχουμε χρησιμοποιήσει κατάλληλους πίνακες τους

οποίους και έχουμε γεμίσει με 0 και 1 αναλόγως αν σε κάθε σημείο της πίστας

υπάρχει κολόνα ή όχι. Όταν υπάρχει κολόνα τη συμβολίζουμε με 1 ενώ σε αντίθετη

περίπτωση με 0. Έχουμε υλοποιήσει 2 levels όπως μας ζητείται και από την

εκφώνηση τα οποία εξηγούμε παρακάτω.

Αρχικά και στα 2 level έχουμε βάλει τις κολόνες σε συγκεκριμένα σημεία του

άξονα x και γεμίζοντας τους πίνακες ουσιαστικά λέμε σε ποια σημεία των αξόνων

y και z θα υπάρχουν κολόνες ή όχι. Ουσιαστικά οι στήλες του πίνακα καθορίζουν

που θα υπάρχουν κολόνες στον z ενώ οι γραμμές καθορίζουν αντίστοιχα για τον y.

Και στα 2 level οι κολόνες απέχουν μεταξύ τους απόσταση ίση με 20 στον z και τα

κενά των κολονών μέσα από τα οποία περνάει το πουλί έχουν μέγεθος 4 στον y.

Επίσης και στα 2 level ξεκινάμε να ζωγραφίζουμε κολόνες από διαφορετικά σημεία

στον άξονα z για κάθε σταθερό x ώστε να μην είναι όλες οι κολόνες στα ίδια σημεία

του z και να φαίνεται η πίστα πιο ωραία. Οι διαφορές του level 1 με το level 2

εξηγούνται παρακάτω :

Level 1 :

Στο 1ο level έχουμε ζωγραφίσει 5 σειρές από κολόνες οι οποίες απέχουν μεταξύ

τους απόσταση ίση με 6.9 (δηλαδή για x=-13.8, x=-6.9 , x=0 , x=6.9, x=13.8) ώστε

με βάσει του υπολογισμούς που κάναμε να μην χωράει το πουλί να περάσει

ανάμεσα από τις κολόνες και να τερματίσει κατευθείαν (το πουλί με τα scale που

κάναμε έχει μέγεθος ίσο με 5 ενώ οι κολόνες έχουν μέγεθος 2 στον x, δηλαδή

μέγεθος συνολικά 7 ανάμεσα από τα x). Επίσης ο συνολικός αριθμός των κολονών

στο z (στο βάθος) είναι 20 κολόνες και τα κενά ανάμεσα σε κάθε 2 κολόνες (στον

z) δεν έχουν πολύ μεγάλη απόκλιση μεταξύ τους (στον y) για μεγαλύτερη ευκολία

του level 1. Τέλος σε αυτό το level η ταχύτητα με την οποία κινείται το πουλί στον

z είναι σχετικά μικρή.

Level 2 :

Με παρόμοια λογική στο 2ο level έχουμε ζωγραφίσει 7 σειρές από κολόνες οι

οποίες απέχουν μεταξύ τους απόσταση ίση με 5 (δηλαδή για x=-15, x=-10, x=-5 ,

x=0 , x=5, x=10, x=15) ώστε να γίνει πιο δύσκολο να περάσει το πουλί. Ακόμη

αυξάνουμε τον συνολικό αριθμό των κολονών στο z όπου τώρα γίνονται 30

κολόνες και μεγαλώνουμε τις αποκλίσεις των κενών ανάμεσα σε κάθε 2 κολόνες

για να γίνει πιο δύσκολο αυτό το level. Τέλος σε αυτό το level η ταχύτητα με την

οποία κινείται το πουλί στον z είναι μεγαλύτερη ώστε να δυσκολέψει το παιχνίδι

ακόμη περισσότερο.

Άρα με βάση και τα παραπάνω καταλαβαίνουμε ότι έχουν δημιουργηθεί 5

πίνακες για το level 1 και 7 για το level 2. Αυτοί οι πίνακες καλούνται με 2 for

loops για τις γραμμές και τις στήλες και έτσι ζωγραφίζονται οι κολόνες από κάτω

προς τα πάνω (αφού πχ το (0,0) είναι το κάτω σημείο της κάθε κολόνας) αναλόγως

με τη θέση που έχουμε εισάγει τους άσσους ( 1 ) σε αυτούς. Τέλος για να μπορούμε

να βλέπουμε τις επόμενες κολόνες όταν περνάει το πουλί από 1 κολόνα, κρατάμε

στην μεταβλητή zTrans τη θέση του πουλιού και ελέγχοντας με τη θέση της κάθε

κολόνας, τις σβήνουμε μετά από απόσταση ίση με z=5 από όταν περάσει το πουλί

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

Τερματισμός παιχνιδιού

Αφού εξηγήθηκε η λογική με την οποία φτιάξαμε το πουλί και τις πίστες πρέπει

να αναφέρουμε πότε το παιχνίδι τελειώνει. Το παιχνίδι τελειώνει είτε όταν χτυπήσει

το πουλί πάνω σε κολόνα όπου ο παίκτης χάνει, είτε όταν βγει το πουλί εκτός ορίων

της πίστας σε κάποιον από τους άξονες x ή y όπου επίσης χάνει ο παίκτης αφού αν

παίζει εκτός ορίων θα μπορεί να περάσει την πίστα μόνο πατώντας το space και το

παιχνίδι δεν θα ήταν λειτουργικό, είτε όταν φτάσουμε στο τέλος του κάθε level

όπου σε αυτήν την περίπτωση ο παίκτης κερδίζει. Επίσης όταν τερματίσει ο παίκτης

το level 1 ερωτάται αν θέλει να περάσει κατευθείαν στο level 2.

Κάμερες

Ακόμη έχουμε υλοποιήσει και 2 βασικές κάμερες όπως μας ζητήθηκε από την

εκφώνηση όπου η 1η κάμερα ακολουθάει το πουλί από πίσω στον z ενώ η 2η είναι

πανοραμική και φαίνεται η πίστα και το πουλί από ψηλά. H πρώτη κάμερα

υλοποιήθηκε απλά με την εντολή translate της κάμερας που μας έχει δοθεί και με

τα κατάλληλα ορίσματα ώστε να φαίνεται όσο το δυνατόν περισσότερο η πίστα ενώ

για την δεύτερη κάμερα προστέθηκε και η εντολή rotate πριν το translate όπου

περιστρέφει την κάμερα κατά 30 μοίρες στον x ώστε να πετύχουμε να φαίνεται

πανοραμικά. Τέλος έχουν υλοποιηθεί ακόμη 2 κάμερες που εξηγούνται στο

Personal Touch.

Collisions

Έχουμε υλοποιήσει βάσει των απαιτήσεων του παιχνιδιού 2 είδη collision. Το

πρώτο είναι όταν το πουλί βγαίνει εκτός ορίων πίστας στον x ή στον y άξονα. Αυτά

τα όρια της πίστας τα έχουμε εισάγει εμείς και είναι νοητά αφού εκεί που

τελειώνουν οι κολόνες τελειώνουν και τα όρια της πίστας. Αν δεν γινόταν αυτό το

πουλί θα μπορούσε να πετάει εκτός πίστας και να πέρναγε όλα τα επίπεδα χωρίς

καμία προσπάθεια και για αυτόν το λόγο εισάγουμε αυτό το είδος collision. Αυτό

έχει υλοποιηθεί στον κώδικα με 2 if για τον x και τον y άξονα με κατάλληλα όρια.

Το δεύτερο είδος collision είναι όταν το πουλί πέσει επάνω σε μια κολόνα. Για

αυτήν την περίπτωση πρέπει συνεχώς να κρατάμε τη θέση του πουλιού στους

άξονες y και z ώστε να μπορούμε να ελέγχουμε με βάση τον πίνακα αν υπάρχει 1

ή 0 στην θέση του πίνακα που βρίσκεται το πουλί σε κάθε frame. Αυτό γίνεται για

κάθε πίνακα ξεχωριστά και στα 2 level ώστε να ελέγχουμε για όλες τις σειρές

κολονών που υπάρχουν στην πίστα μας. Όσον αφορά τον άξονα x επειδή οι κολόνες

που ζωγραφίζονται σε αυτόν τον άξονα είναι σε συγκεκριμένα σημεία, κάνουμε

κατάλληλους ελέγχους με βάση το xTrans που είναι η μεταβλητή του πουλιού στον

άξονα x. Τα νούμερα που αφορούν αυτούς τους ελέγχους επιλέχθηκαν μετά από

σχεδιασμό της γεωμετρίας των κολονών στο χαρτί και αναλόγως την δυσκολία που

έχουμε εισάγει σε κάθε ένα από τα 2 level.

Extended Functionality

Στις επιπλέον λειτουργίες συμπεριλαμβάνονται τα textures ο φωτισμός (lighting)

καθώς επίσης και η smooth κίνηση του πουλιού. Αυτά τα 3 χαρακτηριστικά του

παιχνιδιού το κάνουν πιο ωραίο αισθητικά και τα αναφέρουμε παρακάτω όπως τα

χρησιμοποιήσαμε.

Textures

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

προσθέσαμε textures τόσο στις κολόνες όσο και στο πουλί με βάση το tutorial που

μας δόθηκε και στην εκφώνηση (http://learningwebgl.com/blog/?p=507) ώστε να

φαίνεται καλύτερα η θέση του πουλιού και των κολονών και να γίνει πιο ευχάριστο

και ρεαλιστικό το παιχνίδι. Όταν προστέθηκαν τα textures κατευθείαν φάνηκε

μεγάλη διαφορά στην ποιότητα του παιχνιδιού σε σχέση με τα απλά χρώματα.

Έχουμε προσθέσει διαφορετικό texture για το πουλί και διαφορετικό για τις

κολόνες και έχουν επιλεγεί έτσι ώστε να κάνει αντίθεση και να είναι πιο ευδιάκριτο

το gameplay. Τέλος έχουν προστεθεί διαφορετικά textures για κάθε level. Όπως

είναι κατανοητό για να μπορέσουμε να φορτώσουμε τα textures στον κώδικα

έπρεπε να σβήσουμε ότι ορίσματα, μεταβλητές, buffers κτλ είχαν σχέση με

χρώματα.

Smooth animated bird movement

Χρησιμοποιώντας τις εξισώσεις επιτάχυνσης που μας είχαν δοθεί κάναμε την

κίνηση του πουλιού πιο smooth ώστε να δίνει την αίσθηση ενός πραγματικού

πουλιού που πετάει και έτσι όσο πέφτει στον άξονα y χάνει βαρύτητα και πέφτει

συνεχώς πιο απότομα. Αυτό γίνεται μέχρι να πατηθεί το space που θα δώσει την

εντολή να πάει το πουλί προς τα πάνω όπου μηδενίζουμε αυτές τις τιμές γιατί σε

διαφορετική περίπτωση η επιτάχυνση συνεχώς θα μεγάλωνε όσο προχώραγε το

πουλί με τελικό αποτέλεσμα να μην παίζεται το παιχνίδι. Ακόμη αυτές οι εξισώσεις

έχουν μπει μέσα σε ένα if το οποίο υπάρχει για να εφαρμοστούν μετά από λίγο στο

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

δώσει ύψος στο πουλί.

Lighting

Έγινε προσπάθεια να μπει καλύτερος φωτισμός βάσει του tutorial που μας είχε

δοθεί αλλά τελικά δεν τα καταφέραμε διότι κάτι μπέρδευε με τα textures και μας

τα έβγαζε μαύρα τόσο την πίστα όσο και το πουλί και έτσι αφού δεν καταφέραμε

να τα συνδυάσουμε δεν βάλαμε καθόλου φωτισμό ώστε να μπορεί να παίζεται πιο

ευχάριστα το παιχνίδι.

Personal Touch

Τα προσωπικά μας χαρακτηριστικά που βάλαμε στο παιχνίδι έτσι ώστε να το κάνει

πιο ενδιαφέρον και περισσότερο playable είναι τα εξής :

Αρχικά βάλαμε background εικόνα της επιλογής μας η οποία κάνει το

παιχνίδι πιο ενδιαφέρον και σίγουρα πιο ελκυστικό από ότι αν υπήρχε ένα

απλό χρώμα από πίσω.

Έχουμε εισάγει 2 επιπλέον κάμερες με διαφορετικές γωνίες ώστε να

δίνουμε περισσότερες επιλογές στον χρήστη. Η μία κάμερα (Panoramic2)

έχει γωνίες ενδιάμεσα στις 2 βασικές μας κάμερες δηλαδή είναι κάτι

ανάμεσα σε gameplay και πανοραμική. Η τελευταία κάμερα (Alternative)

είναι μία τελείως διαφορετική κάμερα που δείχνει την πίστα και το πουλί

από το πλάι όπως γίνεται και στο κλασσικό παιχνίδι Flappy Bird 2D.

Έχουμε βάλει ήχο καθώς επίσης και sound effects. Ο ήχος είναι

απενεργοποιημένος by default και μόνο όποιος χρήστης του παιχνιδιού το

επιθυμεί μπορεί να τον ενεργοποιήσει. Τα sound effects είναι

ενεργοποιημένα πάντα και έχουν ως εξής : Το πρώτο sound effect έχει να

κάνει με τα collisions και είναι το ίδιο με του κλασσικού παιχνιδιού. Έτσι

όποτε υπάρχει collision (είτε πέφτουμε πάνω σε κολόνα είτε βγαίνουμε

εκτός ορίων πίστας) ακούγεται κάποιος χαρακτηριστικός ήχος ότι υπήρξε

σύγκρουση. Τα άλλα 2 sound effects ακούγονται όταν ο παίχτης τερματίσει

επιτυχώς κάποιο level. Ακούγεται διαφορετικός ήχος στο τέλος του 1ου level

και διαφορετικός στο τέλος του 2ου.

Έχουμε βάλει να κρατάει το παιχνίδι σκορ το οποίο το εμφανίζει πάνω

αριστερά στην οθόνη αλλά και στο μήνυμα που εμφανίζεται μετά από κάθε

collision. Αυτό το σκορ είναι ουσιαστικά όπως και στο κλασσικό Flappy

Bird το πόσες κολόνες έχει περάσει το πουλί μέχρι εκείνη την στιγμή.

Κάθε φορά που ανοίγει ο χρήστης το παιχνίδι εμφανίζεται ο τίτλος του

παιχνιδιού καθώς επίσης και ένα menu. Οι επιλογές που υπάρχουν στο

menu έχουν ως εξής :

Change Camera : Με αυτήν την επιλογή μπορούμε να επιλέξουμε

όποια κάμερα μας αντιπροσωπεύει και μπορούμε να παίξουμε

καλύτερα από τις 4 διαθέσιμες κάμερες που αναφέρθηκαν

παραπάνω.

Levels : Με αυτήν την επιλογή επιλέγουμε ποιο level θέλουμε να

παίξουμε ανάμεσα στα 2 διαθέσιμα level που έχουν υλοποιηθεί.

Αυτό μπορεί να γίνει σε οποιαδήποτε στιγμή του παιχνιδιού θέλουμε

και όταν νικήσουμε το level 1 εμφανίζεται μήνυμα ώστε να

παίξουμε το 2ο level εφόσον απαντήσουμε θετικά.

Audio : Αυτή η επιλογή υπάρχει ώστε να μπορεί ο χρήστης να

ενεργοποιήσει τον ήχο του παιχνιδιού εάν το επιθυμεί όπως

αναφέρθηκε και παραπάνω.

Start-Pause-Restart Game : Αυτή είναι η πιο βασική επιλογή του

menu αφού για να ξεκινήσει το παιχνίδι πρέπει ο χρήστης να

πατήσει το start καθώς όταν ανοίγει το παιχνίδι έχουμε

ακινητοποιήσει το πουλί και μόνο έτσι μπορεί να κινηθεί. Επίσης

υπάρχει η επιλογή pause με την οποία παγώνουμε το παιχνίδι ώστε

να μπορέσουμε να φτιάξουμε κάποια από τις άλλες ρυθμίσεις ή να

μην χάσουμε αν πρέπει να κάνουμε κάτι άλλο την ώρα που

παίζουμε. Αυτή η επιλογή ενεργοποιείται και με το πλήκτρο

ENTER για ευκολία στον χρήστη την στιγμή που παίζει. Τέλος

υπάρχει και η επιλογή να κάνουμε restart το παιχνίδι ώστε αν

θελήσουμε για οποιοδήποτε λόγο να ξεκινήσουμε από την αρχη.

Ο τίτλος του παιχνιδιού καθώς επίσης και το menu έχουν υλοποιηθεί με

κώδικες HTML που έχουμε βρει στο Internet (dropdown menu) και δεν

είναι πλήρως παραμετροποιημένα όλα τα γνωρίσματα καθώς δεν

γνωρίζουμε καλή HTML και είναι η πρώτη φορά που τη

χρησιμοποιούμε.

Το παιχνίδι υλοποιήθηκε και σχεδιάστηκε για τον browser Firefox αφού στο chrome

υπάρχει πρόβλημα με τη φόρτωση των textures.

Βασικά πλήκτρα παιχνιδιού (Με bolt παραπάνω)

1) Δεξί-Αριστερό βελάκι , 2) Space(Κίνηση πάνω) , 3) Enter (Pause)

Have a nice game in the world of Flappy Bird 3D !!!!!