Ξεκινώντας με το Phaser για ανάπτυξη παιχνιδιών

Το Phaser είναι ένα πλαίσιο για τη δημιουργία βιντεοπαιχνιδιών 2D. Χρησιμοποιεί HTML5 Canvas για να εμφανίσει το παιχνίδι και JavaScript για να τρέξει το παιχνίδι. Το πλεονέκτημα της χρήσης του Phaser μέσω βανίλιας JavaScript είναι ότι διαθέτει μια εκτεταμένη βιβλιοθήκη που ολοκληρώνει μεγάλο μέρος της φυσικής των βιντεοπαιχνιδιών, επιτρέποντάς σας να επικεντρωθείτε στο σχεδιασμό του ίδιου του παιχνιδιού.

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

Γιατί να αναπτυχθεί με το Phaser;

Φάσερ είναι παρόμοιο με άλλες οπτικές γλώσσες προγραμματισμού στο ότι το πρόγραμμα βασίζεται σε ενημερωμένες ενημερώσεις. Το Phaser έχει τρία κύρια στάδια: προφόρτωση, δημιουργία και ενημέρωση.

Κατά την προφόρτωση, τα στοιχεία του παιχνιδιού μεταφορτώνονται και διατίθενται στο παιχνίδι.

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

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

Ρυθμίστε το σύστημά σας για την ανάπτυξη παιχνιδιών με το Phaser

Παρά το γεγονός ότι το Phaser εκτελείται σε HTML και JavaScript, τα παιχνίδια εκτελούνται στην πραγματικότητα από διακομιστή και όχι από πελάτη. Αυτό σημαίνει ότι θα πρέπει να τρέξετε το παιχνίδι σας το localhost σας. Η εκτέλεση του διακομιστή του παιχνιδιού επιτρέπει στο παιχνίδι σας να έχει πρόσβαση σε επιπλέον αρχεία και στοιχεία εκτός του προγράμματος. προτείνω χρησιμοποιώντας το XAMPP για να δημιουργήσετε ένα localhost εάν δεν έχετε ήδη μία ρύθμιση.

Τι είναι το 127.0 0.1, το Localhost ή μια διεύθυνση Loopback;

Έχετε δει "localhost" στον υπολογιστή σας, αλλά τι είναι αυτό; Τι σημαίνει η διεύθυνση 127.0.0.1; Έχετε πειραχτεί;

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

Για να τρέξει, το παιχνίδι θα απαιτεί μια εικόνα PNG που ονομάζεται "gamePiece" αποθηκευμένη σε ένα φάκελο "img" στο localhost σας. Για απλότητα, αυτό το παράδειγμα χρησιμοποιεί ένα πορτοκαλί τετράγωνο 60xgame de60px. Το παιχνίδι σας πρέπει να μοιάζει με αυτό:

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

Εξηγώντας τον κώδικα εγκατάστασης

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

Για να τρέξει ένα παιχνίδι Phaser, πρέπει να εισαγάγετε τη βιβλιοθήκη Phaser. Αυτό το κάνουμε στη γραμμή 3. Σε αυτό το παράδειγμα, συνδεθήκαμε με τον πηγαίο κώδικα, αλλά μπορείτε να τον κατεβάσετε στο localhost και να αναφέρετε επίσης το αρχείο.

Μεγάλο μέρος του κώδικα διαμορφώνει μέχρι τώρα το περιβάλλον παιχνιδιού, το οποίο η μεταβλητή διαμόρφωση προμήθεια. Στο παράδειγμά μας, δημιουργούμε ένα παιχνίδι phaser με μπλε φόντο (CCFFFF σε δεκαεξαδικό κώδικα χρώματος) που είναι 600px επί 600px. Προς το παρόν, η φυσική του παιχνιδιού έχει ρυθμιστεί στοά, αλλά το Phaser προσφέρει διαφορετική φυσική.

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

Σχετιζομαι με: Οι 6 καλύτεροι φορητοί υπολογιστές για προγραμματισμό και κωδικοποίηση

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

Η εικόνα του παιχνιδιού προστέθηκε στο παιχνίδι στη λειτουργία δημιουργίας. Η Γραμμή 29 λέει ότι προσθέτουμε το image gamePiece ως sprite 270px αριστερά και 450px κάτω από την επάνω αριστερή γωνία της περιοχής παιχνιδιών μας.

Κάνοντας το παιχνίδι μας Piece Move

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

Προσθήκη συνάρτησης ενημέρωσης

Νέα σκηνή στο config:

σκηνή: {
προφόρτωση: προφόρτωση,
δημιουργία: δημιουργία,
ενημέρωση: ενημέρωση
}

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

ενημέρωση λειτουργίας () {
}

Λήψη βασικών εισόδων

Για να επιτρέψει στον παίκτη να ελέγξει το παιχνίδι με τα πλήκτρα βέλους, θα πρέπει να προσθέσουμε μια μεταβλητή για να παρακολουθούμε ποια πλήκτρα πατάει ο παίκτης. Δηλώστε μια μεταβλητή που ονομάζεται keyInputs παρακάτω όπου δηλώσαμε το GamePieces. Εάν το δηλώσετε εκεί, θα επιτρέψει σε όλες τις λειτουργίες να αποκτήσουν πρόσβαση στη νέα μεταβλητή.

var gamePiece;
var keyInputs;

Η μεταβλητή keyInput πρέπει να αρχικοποιηθεί όταν δημιουργείται το παιχνίδι στη συνάρτηση create.

συνάρτηση δημιουργία () {
gamePiece = this.physics.add.sprite (270, 450, "παιχνίδι");
keyInputs = this.input.keyboard.createCursorKeys ();
}

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

ενημέρωση λειτουργίας () {
εάν (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2;
}
εάν (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2;
}
εάν (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2;
}
εάν (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2;
}
}

Το παιχνίδι έχει κινητό χαρακτήρα τώρα! Αλλά για να είμαστε πραγματικά ένα παιχνίδι, χρειαζόμαστε έναν στόχο. Ας προσθέσουμε μερικά εμπόδια. Η αποφυγή εμποδίων ήταν η βάση για πολλά παιχνίδια στην εποχή των 8-bit.

Προσθήκη εμποδίων στο παιχνίδι

Αυτό το παράδειγμα κώδικα χρησιμοποιεί δύο sprites εμποδίων που ονομάζονται εμπόδιο1 και εμπόδιο 2. Το εμπόδιο1 είναι ένα μπλε τετράγωνο και το εμπόδιο2 είναι πράσινο. Κάθε εικόνα θα πρέπει να προφορτωθεί ακριβώς όπως το sprite του παιχνιδιού.

προφόρτωση λειτουργίας () {
this.load.image ('gamePiece', 'img / gamePiece.png');
this.load.image ('obstacle1', 'img / obstacle1.png');
this.load.image ('obstacle2', 'img / obstacle2.png');
}

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

συνάρτηση δημιουργία () {
gamePiece = this.physics.add.sprite (270, 450, "παιχνίδι");
keyInputs = this.input.keyboard.createCursorKeys ();
obstacle1 = this.physics.add.sprite (200, 0, «εμπόδιο1»);
obstacle2 = this.physics.add.sprite (0, 200, «εμπόδιο2»);
}

Κάνοντας τα εμπόδια να κινηθούν

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

obstacle1.y = εμπόδιο1.y + 4;
εάν (εμπόδιο1.y> 600) {
εμπόδιο1.y = 0;
obstacle1.x = Phaser. Μαθηματικά. Μεταξύ (0, 600);
}
εμπόδιο2.x = εμπόδιο2.x + 4;
εάν (εμπόδιο2.x> 600) {
εμπόδιο2.x = 0;
obstacle2.y = Phaser. Μαθηματικά. Μεταξύ (0, 600);
}

Ο παραπάνω κωδικός θα μετακινήσει το εμπόδιο1 κάτω από την οθόνη και το εμπόδιο2 σε όλη την περιοχή του παιχνιδιού 4px κάθε καρέ. Μόλις ένα τετράγωνο είναι εκτός οθόνης, μετακινείται πίσω στην αντίθετη πλευρά σε ένα νέο τυχαίο σημείο. Αυτό θα διασφαλίσει ότι υπάρχει πάντα ένα νέο εμπόδιο για τον παίκτη.

Ανίχνευση συγκρούσεων

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

Η βιβλιοθήκη φυσικής Phaser διαθέτει ανιχνευτή collider. Το μόνο που πρέπει να κάνουμε είναι να το αρχικοποιήσουμε στη λειτουργία δημιουργίας.

this.physics.add.collider (παιχνίδιPiece, εμπόδιο1, λειτουργία (gamePiece, εμπόδιο1) {
gamePiece.destroy ();
obstacle.destroy ();
εμπόδιο2.destroy ();
});
this.physics.add.collider (παιχνίδιPiece, εμπόδιο2, λειτουργία (gamePiece, εμπόδιο2) {
gamePiece.destroy ();
obstacle.destroy ();
εμπόδιο2.destroy ();
});

Η μέθοδος collider απαιτεί τρεις παραμέτρους. Οι δύο πρώτες παράμετροι προσδιορίζουν ποια αντικείμενα συγκρούονται. Έτσι παραπάνω, έχουμε ρυθμίσει δύο συγκρούσεις. Το πρώτο ανιχνεύει πότε το παιχνίδι έχει συγκρούσει με το εμπόδιο1 και το δεύτερο συγκρουόμενο ψάχνει για συγκρούσεις μεταξύ του παιχνιδιού και του εμποδίου2.

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

Δοκιμάστε το Game Development με το Phaser

Υπάρχουν πολλοί διαφορετικοί τρόποι με τους οποίους αυτό το παιχνίδι μπορεί να βελτιωθεί και να γίνει πιο περίπλοκο. Δημιουργήσαμε μόνο έναν παίκτη, αλλά ένας δεύτερος χαρακτήρας με δυνατότητα αναπαραγωγής θα μπορούσε να προστεθεί και να ελεγχθεί με τα στοιχεία ελέγχου "awsd". Ομοίως, θα μπορούσατε να πειραματιστείτε με την προσθήκη περισσότερων εμποδίων και τη μεταβολή της ταχύτητας της κίνησής τους.

Αυτή η εισαγωγή θα σας ξεκινήσει, αλλά υπάρχουν πολλά ακόμη να μάθετε. Το μεγάλο πράγμα για το Phaser είναι ότι πολλά από τα παιχνίδια φυσικής έχουν γίνει για εσάς. Είναι ένας πολύ καλός τρόπος για να ξεκινήσετε να σχεδιάζετε 2D παιχνίδια. Συνεχίστε να βασίζεστε σε αυτόν τον κώδικα και βελτιώστε το παιχνίδι σας.

Εάν αντιμετωπίσετε σφάλματα, το πρόγραμμα εντοπισμού σφαλμάτων του προγράμματος περιήγησης είναι ένας πολύ καλός τρόπος για να ανακαλύψετε το πρόβλημα.

Τρόπος χρήσης του Chrome DevTools για την αντιμετώπιση προβλημάτων ιστότοπου

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

Σχετικά με τον Συγγραφέα