Πώς δημιουργείτε ένα HTML5 βιντεοπαιχνίδι

πριν 8 χρόνια

Οι δημιουργοί του War Games: Space Dementia αποκαλύπτουν όλα τους τα μυστικά για την δημιουργία ενός HTML5 παιχνιδιού.

Ένας καουμπόη του διαστήματος σε ενθαρρύνει από το διαστημόπλοιό του να παίξεις, και στη συνέχεια, έτσι ξαφνικά, βρίσκεσαι στο δικό σου διαστημόπλοιο, παρακάμπτοντας τα βλήματα και πυροβολώντας τους εισβολείς σου, οι οποίοι δεν είναι ακριβώς λίγοι. Έτσι ακριβώς αρχίζει το νέο HTML5 παιχνίδι του Spritted, που ονομάζεται War Games: Space Dementia. "Είχα την ιδέα αυτή γιατί πάντα ήθελα να ανοίξω ένα κατάστημα ηλεκτρονικών παιχνιδιών δράσης. Μου αρέσει πραγματικά το παιχνίδι Robotron 2084· Το θεωρώ πραγματικά απλό και διασκεδαστικό, οπότε, σκέφτηκα, γιατί να μην το χρησιμοποιήσω σαν έμπνευση·" εξηγεί  o Eduardo Ortega, Spritted Project Manager. Θέλησε να αποκαλύψει όλα του τα μυστικά, και μαζί με την ομάδα του, μας είπε για το πώς λειτουργούν, όταν πρόκειται για τη δημιουργία ενός παιχνιδιού.

Ο Eduardo, ο οποίος περιγράφει τον εαυτό του ως "ένας παθιασμένος παίκτης βιντεοπαιχνιδιών, που του αρέσει η απλή και άμεση δυνατότητα αναπαραγωγής που σου δίνουν τα κλασικά παιχνίδια", είχε την ιδέα να δημιουργήσει το War Games: Space Dementia ως "arcade παιχνίδι που είναι απλό και μεταφερόμενο". Το πρώτο βήμα στη δημιουργική διαδικασία ενός βιντεοπαιχνιδιού είναι να έχεις μια ιδέα, και αφού έχεις επιλέξει την ιδέα σου, μπορείς να αρχίσεις το σενάριο, το οποίο σημαίνει ότι θα πρέπει να καθορίσεις τι θα περιέχει περίπου το παιχνίδι. Για να το κάνεις αυτό, η ομάδα, η οποία θα φέρει αυτό το παιχνίδι εν ζωή, θα πρέπει να κάνει συναντήσεις και να σχεδιάσει το πως θα προχωρήσουν.

"Όταν ξέρω το τι είδος παιχνιδιού θέλουμε, μαζευόμαστε όλοι μαζί και σχεδιάζουμε μια γενική ιδέα για το τι πρόκειται να περιέχει το παιχνίδι", εξηγεί ο Ortega. Εργάζεται με έναν προγραμματιστή και έναν σχεδιαστή. Ο τελευταίος επεξεργάζεται πρώτα ένα σκίτσο των διασυνδέσεων του χρήστη- το μενού και τις μεταβάσεις οθόνης. Είναι επίσης υπεύθυνος για την εμπειρία του χρήστη, η οποία περιλαμβάνει το να "εξασφαλίζει ότι οι οθόνες ρέουν σε ένα διαισθητικό και φιλικό τρόπο για τον χρήστη", όπως μας λέει ο Ortega. Στη συνέχεια, η πραγματική ανάπτυξη του παιχνιδιού, που είναι, οι οθόνες, οι εχθροί, τα αντικείμενα κλπ, σχεδιάζεται κατά έναν γενικό τρόπο. Μόλις ο σχεδιαστής κάνει όλα αυτά και το παραδίδει στον Eduardo, που το εγκρίνει, όλα τα υπόλοιπα μπαίνουν σε κίνηση: τα σκίτσα του σχεδιαστή και η πρώτη κωδικοποίηση γίνεται από τον προγραμματιστή.

Πάθος και έμπνευση, οι μούσες του σχεδιασμού βιντεοπαιχνιδιών.

Ο Daniel Peña είναι υπεύθυνος για τη δημιουργία των χαρακτήρων και δίνει στα πάντα μια φυσική μορφή μέσα στο παιχνίδι. Αρχικά, ο σχεδιαστής του Spritted εργαζόταν σε διαφημιστικές εταιρείες, αλλά το πάθος του για τα βιντεοπαιχνίδια τον έκανε να καταλήξει στον σχεδιασμό τους. Αυτός ο νεαρός από το Valladolid μας διηγήται ότι η ιδέα του σχεδιασμού του War Games: Space Dementia του ήρθε καθώς άκουγε ένα τραγούδι των 80’s το: ‘Avalon’ by Roxy Music. Χάρη σε αυτόν τον τίτλο, και αφού πήρε την έγκριση του Eduardo Ortega, αποφάσισε να δημιουργήσει τους χαρακτήρες που βασίζονται στο θρύλο του Βασιλιά Αρθούρου και των Ιπποτών του Στρογγυλού Τραπεζιού.

Ο αρχικός τίτλος επρόκειτο να είναι Υπερασπιστές της AVA, αλλά σκέφτηκε ότι ο τίτλος αυτός θα μπορούσε να οδηγήσει σε παρεξήγηση με την σκανδιναβική pop μπάντα ABBA, και το άλλαξε σε Ιππότες του Διαστήματος. Παρ'όλα αυτά το παιχνίδι κατέληξε να έχει τον συγκεκριμένο τίτλο για μαρκετίστικους σκοπούς. "Ο τίτλος Ιππότες του Διαστήματος ήταν μια μικρή αναφορά στο Φρουροί του Γαλαξία του Marvel», λέει ο Peña, ο οποίος, επίσης, παραδέχεται την ένταξη αυτής της μικρής αναφοράς στο λογότυπο.

Η διαδικασία σχεδιασμού είναι εκπληκτικά αρκετά κλασική. Ο Daniel χρειάζεται μόνο ένα μολύβι και χαρτί για να κάνει τα σκίτσα του και από τη στιγμή που είναι ικανοποιημένος και έχει μια σαφή ιδέα, τα περνάει στο Illustrator. Αυτό το πρόγραμμα επιτρέπει την ψηφιοποιήση αυτού που είναι σχεδιασμένο στο χαρτί, κάθε σχέδιο που εμπνεύστηκε, για άλλη μια φορά, στο Βασιλιά Αρθούρο. "Το K1-ARZ επιβιβάζεται στο διαστημόπλοιό του, το XK-LIBUR, θα πρέπει να υπερασπιστεί τους 3 τομείς που περιβάλλουν το KM-LOT", ο Peña ξαναλέει την πλοκή του War Games: Space Dementia, και εξηγεί ότι το Κ1-ARZ είναι η διαστημική έκδοση του Βασιλιά Αρθούρου.

Αποκαλύπτει, επίσης, ότι η αισθητική του παιχνιδιού εμπνεύστηκε από τον εικονογράφο και δημιουργό του Hellboy, Mike Mignola - η χαρακτηριστική αντίθεση τόνων, η έλλειψη χρωμάτων και τα πολύγωνα με τα οποία συνήθως Εργάζεται. Επιπλέον, βλέπουμε επίσης την επιρροή από κλασικά arcade παιχνίδια του 80, όπως το Tron, το Asteroids ή το R-Type.

Προγραμματισμός, το πλαίσιο του βιντεοπαιχνιδιού

Εστιάζοντας στο πάθος του για την απλή δυνατότητα αναπαραγωγής, ο Ορτέγκα πρότεινε την ιδέα της δημιουργίας μιας απλής, επιβιώσιμης και μονής οθόνης videogame. Ο David Santin μας λέει ότι δημιουργούσε βιντεοπαιχνίδια από τότε που ήταν έντεκα χρονών, και ότι τώρα είναι ο προγραμματιστής videogame του Spritted. Όταν ο Project Manager έθεσε σε αυτόν τον νεαρό από τη Μαδρίτη αρμόδιο για την δημιουργία ενός videogame εμπνεύσμένο από το Robotron 2084, αμέσως σκέφτηκε το παιχνίδι Smash TV.

Στον David πάντα άρεσε αυτό το κλασικό arcade παιχνίδι, ο προκάτοχος της Robotron 2084, οπότε αποφάσισε να συνεχίσει την δυναμική του Smash TV για να δημιουργήσει το War Games: Space Dementia. Το Robotron βγήκε το 1982 και ο στόχος του παιχνιδιού ήταν να εξαλείψει τα ρομπότ που είχαν εξεγερθεί εναντίον της ανθρωπότητας κατά το έτος 2084, και τη διάσωση των επιζώντων. Αργότερα, το 1990, το Smash TV δημιουργήθηκε, με τον ίδιο στόχο επιβίωσης: ένας συμμετέχων φουτουριστικού TV-προγράμματος πρέπει να σκοτώσει τους εισβολείς του και να συλλέξει power-ups.

"Επιλέξαμε να κάνουμε ένα παιχνίδι με διαστημόπλοια γιατί είναι πιο εύκολη η ανάπτυξη», ομολογεί ο David. Δεδομένου ότι πρόκειται να είναι ένα παιχνίδι με πανοραμική θέα, ο σχεδιασμός ενός διαστημόπλοιου που φαίνεται από ψηλά είναι πιο εύκολος από ό,τι ο σχεδιασμός ενός ατόμου. Ο David εξηγεί ότι η δημιουργία ενός videogame είναι παρόμοια με "τον σχεδιασμό ενός μικρού animation στις γωνίες του βιβλίου και όταν γυρίζεις τις σελίδες, το σχέδιο ζωντανεύει- αυτό σημαίνει ότι κάθε σελίδα είναι ένα sprite." Ένα «sprite» θα μπορούσε να είναι ισοδύναμο με μία παγωμένη εικόνα στον κινηματογράφο.

Στην περίπτωση του War Games: Space Dementia, είχε προγραμματιστεί εξ αρχής σε μια πανοραμική θέα, που  είναι ο λόγος για τον οποίο επέλεξαν τα διαστημόπλοια ώστε να αποφύγουν τη δημιουργία των οκτώ απαραίτητων στάσεων της κίνησης ενός ατόμου: εμπρόσθια όψη, πίσω όψη, πλαϊνή όψη, κ.λπ. "Όταν σχεδιάζεις ένα τανκ ή ένα αεροπλάνο, που το βλέπεις από ψηλά, δεν έχει κεφάλι ή λαιμό ή τίποτα παρόμοιο, οπότε πρέπει να κάνεις μόνο ένα sprite," εξηγεί ο David. Οι οκτώ στάσεις απαιτούν οκτώ φορές περισσότερο χρόνο να προγραμματιστούν - από τη στιγμή που η κάθε κίνηση χρειάζεται τον δικό της κωδικό - και να σχεδιαστούν.

Ο David κάνει τον προγραμματισμό του ενώ παίρνει τα σχέδια από τον Daniel. Εργάζονται μαζί και λαμβάνουν αποφάσεις από κοινού, και ο David είναι επίσης υπεύθυνος για την παροχή ενός AI, δηλαδή, μιας συγκεκριμένης συμπεριφοράς σε κάθε στοιχείου στο παιχνίδι. "Ο κάθε τύπος διαστημόπλοιου έχει μια μοναδική συμπεριφορά και νοημοσύνη. Οι τύποι που αντιμετωπίζετε στα πρώτα επίπεδα είναι αργοί και ασταθής, αυτοί των τελευταίων επιπέδων δεν έχουν σχεδόν κανένα περιθώριο λάθους και είναι σε θέση να σε ακολουθήσει σε μια ομάδα και να προβλέψει όλες σου τις κινήσεις,"λέει ο Santín.

Κάθε στοιχείο στο παιχνίδι είναι σε θέση να εξοπλιστεί με μια μοναδική κίνηση και συμπεριφορά, χάρη σε ένα συνολικό έλεγχο επί των μεταβλητών που συνθέτουν το Σύμπαν. Σύμφωνα με τον Santín, "μερικές από αυτές τις μεταβλητές είναι η ταχύτητα, η βαρύτητα, η ταχύτητα αντίδρασης, η ικανότητα πυροβολισμού, η υγεία, και η επιδιώξει και η ικανότητα αυτόματης εναλλαγής".

Μία από τις μεγάλες δυσκολίες που αντιμετώπισε ο David κατά τη διάρκεια της δημιουργίας του War Games: Space Dementia ήταν, χωρίς αμφιβολία, η προσπάθεια να έχει μια καλή απόδοση παρά την κίνηση όλων των διαστημοπλοίων, βλημάτων, χαρακτήρων κλπ, που υπάρχουν στο παιχνίδι. "Είναι δύσκολο να βρεις HTML5 παιχνίδια στην αγορά που να είναι σε θέση να κινήσουν ταυτόχρονα τόσο πολλά αντικείμενα, διατηρώντας παράλληλα μια καλή απόδοση», καταλήγει ο David.

HTML5, μία παγκόσμια γλώσσα;

Ο Santín εξηγεί ότι "ο προγραμματισμός σε HTML5 προϋποθέτει πολλές δυσκολίες, ιδιαίτερα όταν πρόκειται για την απόδοση, δεδομένου ότι δεν είναι τόσο ισχυρή όσο η μητρική γλώσσα, αλλά έχει το πλεονέκτημα ότι είναι cross-platform". Η μητρική γλώσσα είναι αυτή που δημιουργήθηκε ειδικά για έναν συγκεκριμένο επεξεργαστή, και το καθένα έχει το δικό του, Apple, Android κλπ "Όταν προγραμματίζεις μια εφαρμογή στον μητρικό της κώδικα, είναι σαν να το κάνεις στη δική του γλώσσα, έτσι ώστε να μην χρειάζεται να "μεταφράζεις" τα πάντα και λειτουργεί πιο γρήγορα."

Έτσι, μπορείς να πεις ότι η HTML είναι μια παγκόσμια γλώσσα για όλους, αλλά δεν είναι η μητρική, οπότε δεν θα είναι τόσο αποτελεσματική. "Αυτό συμβαίνει όταν χρησιμοποιείς μια κοινή γλώσσα, ώστε στη συνέχεια η κάθε συσκευή να πρέπει να το ερμηνεύσει στη δική της γλώσσα," μας λέει ο David.

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

Στην πραγματικότητα, όταν παίζεις από το τηλέφωνο, θα έχεις την αίσθηση ότι οδηγείς ένα διαστημόπλοιο χάρη στη διπλή δυναμική joystick, ένα χαρακτηριστικό που υπάρχει επίσης το Robotron 2084 και στο Smash TV. Και από τη στιγμή που το Phaser, το πλαίσιο που χρησιμοποιεί ο David για τον προγραμματισμό παιχνιδιών, μόλις κυκλοφόρησε μια διπλή σύνδεση joystick, δεν υπήρχε ανάγκη να το δημιουργήσει από την αρχή.

"Το Phaser είναι ένα πλαίσιο, δηλαδή, μια σειρά από δομές προγραμματισμού επικεντρωμένες στην επίλυση κάποιων προβλημάτων. Συγκεκριμένα, το Phaser προσανατολίζεται στη δημιουργία βιντεοπαιχνιδιών," διευκρινίζει ο Santín. Είναι υπεύθυνο για την διαχείριση των sprites, εισαγωγή ήχων, και έχει επίσης εργαλεία για την δημιουργία παιχνιδιών και επικεντρώνεται στο να τους δίνει μια παράσταση υψηλού επιπέδου.

Παρά την αρχική ιδέα που είχε ο Eduardo Ortega ήταν να δημιουργήσει ένα απλό παιχνίδι επιβίωσης σε μία οθόνη- που σου επιτρέπει να παίξεις επ 'αόριστον μέχρι να χάσεις, το αποτέλεσμα ήταν αρκετά διαφορετικό. Όταν είδαν τις δυνατότητες του παιχνιδιού και την ευκαιρία να αφιερώσουν σε αυτό αρκετό χρόνο (ομολογούν ότι ήταν πολύ καλά προγραμματισμένο χρονικά με το καλοκαίρι), οι δημιουργοί του αποφάσισαν να προχωρήσουν ακόμα περισσότερο και κατέληξαν στη δημιουργία ενός πολύ πιο ανεπτυγμένου και λεπτομερούς HTML5 παιχνιδιού. Τελικά, είναι ένα παιχνίδι διαστημόπλοιων που χωρίζεται σε τρεις τομείς, στην οποία ο πρωταγωνιστής μάχεται με πέντε διαφορετικούς εχθρούς, που τους επιτίθεται με διαφορετικό τρόπο και νικάει έναν τελικό αρχηγό κάθε φορά. Αυτή είναι η μαγεία των βιντεοπαιχνιδιών και ο τρόπος δημιουργίας τους.

Το άρθρο γράφτηκε από την Paula Gil Alonso

 

Σχόλια

Τι γνώμη έχεις γι' αυτό το παιχνιδι; Σου αρέσει; Είσαι ο καλύτερος; Πες μας!