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

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

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





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



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

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





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

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



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

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

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



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







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}


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



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

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

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

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

πώς να προσθέσετε καρφίτσες στους χάρτες Google

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

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

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

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

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

Πραγματοποιώντας την κίνηση του παιχνιδιού μας

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

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

Νέα σκηνή σε διαμόρφωση:

scene: {
preload: preload,
create: create,
update: update
}

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

πώς να αλλάξετε τη σειρά των σελίδων στο word
function update(){
}

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

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

var gamePiece;
var keyInputs;

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

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

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

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

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

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

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

Κίνηση των εμποδίων

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

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

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

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

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

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

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

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

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

Δοκιμάστε την ανάπτυξη παιχνιδιών με το Phaser

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

Ο εξωτερικός σκληρός δίσκος των windows 10 δεν λειτουργεί

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

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να χρησιμοποιήσετε το Chrome DevTools για την αντιμετώπιση προβλημάτων ιστοτόπου

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

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • JavaScript
  • HTML5
  • Ανάπτυξη παιχνιδιών
Σχετικά με τον Συγγραφέα Τζένιφερ Σίτον(Δημοσιεύθηκαν 21 άρθρα)

Ο J. Seaton είναι Επιστημονικός Συγγραφέας που ειδικεύεται στην ανάλυση σύνθετων θεμάτων. Έχει διδακτορικό από το Πανεπιστήμιο του Saskatchewan. η έρευνά της επικεντρώθηκε στη χρήση της μάθησης με βάση τα παιχνίδια για την αύξηση της συμμετοχής των μαθητών στο διαδίκτυο. Όταν δεν εργάζεται, θα τη βρείτε να διαβάζει, να παίζει βιντεοπαιχνίδια ή να ασχολείται με την κηπουρική.

Περισσότερα από την Jennifer Seaton

Εγγραφείτε στο newsletter μας

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

Κάντε κλικ εδώ για εγγραφή