Δημιουργήστε το δικό σας webgl φυσικό παιχνίδι

Αυτό το έργο θα χωριστεί σε διάφορα μέρη. Θα δώσουμε μια σύντομη εισαγωγή στο Heroku, δείξτε πώς να χρησιμοποιήσετε physijs με τρεις.js, να εξηγήσετε πώς να χειρίζεστε τα συμβάντα υποδοχής πάνω από το Node.js και επίσης πώς προχωρούμε για το χειρισμό των αποστολών που αποστέλλονται.

• 20 εκπληκτικά παραδείγματα του WebGL σε δράση

01. Heroku

Αυτό το έργο θα φιλοξενηθεί Ηχείο , που είναι μια πλατφόρμα Cloud για να φιλοξενήσει τις εφαρμογές σας. Διαθέτει μεγάλη ποικιλία από υποστηριζόμενες γλώσσες όπως Ruby, Java, Php και Python. Θα χρησιμοποιήσουμε τον κόμβο.

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

Ως μέθοδος ανάπτυξης, μπορείτε να επιλέξετε είτε να χρησιμοποιήσετε τη διεπαφή γραμμής γραμμής Heroku (CLI) για να αναπτύξετε τη χρήση του αποθετηρίου GIT ή να έχετε μια σύνδεση που έχει ρυθμιστεί στο GitHub ή Dropbox. Έχω επιλέξει να πάω με την CLI της. Αυτό θα απαιτήσει μια εγκατάσταση. Αλλά σε αντάλλαγμα παίρνετε μια ποικιλία από νέα χρήσιμα εργαλεία, ένα από αυτά είναι ζωντανά εντοπισμό σφαλμάτων μέσω του τερματικού σας.

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

Για να αναπτύξετε τις προεπιλεγμένες εντολές GIT. Ο καθένας που χρησιμοποιείτε θα ενεργοποιήσετε τον διακομιστή κατασκευής και η εφαρμογή σας θα αναπτυχθεί στον διακομιστή Heroku και στη συνέχεια θα προβληθεί στο υποτομέα σας.

Μόλις αναπτυχθεί ο κώδικας, μπορείτε να δείτε το έργο σας στο [YourProject]. FurhokuApp.com. Για να δείτε τα αρχεία καταγραφής Χρησιμοποιήστε την εντολή "Heroku Logs - Tail" στο τερματικό σας. Μερικά από τα πράγματα που εμφανίζονται είναι αυτό που σερβίρεται στον πελάτη - εμφανίζει τις συνδέσεις υποδοχής και αν θέλετε να εντοπίσετε τον κώδικα σας, θα μπορούσατε επίσης να χρησιμοποιήσετε την κονσόλα .Log για να εξάγετε στο τερματικό.

02. Κατασκευάστε τη σκηνή φυσικής

Θα χρησιμοποιήσουμε τα πιο δημοφιλή Υπηρέτης δομή, Τρία , για να οικοδομήσουμε μια τρισδιάστατη σκηνή που περιέχει ένα αντικείμενο στο οποίο θα επισυνάψουμε τη φυσική. Η βιβλιοθήκη της Φυσικής της επιλογής είναι Physijs , ένα plug-in για τρία. Ως επέκταση σε τρεις.Js, οι Physijs χρησιμοποιούν την ίδια σύμβαση κωδικοποίησης, καθιστώντας ευκολότερη τη χρήση εάν είστε ήδη εξοικειωμένοι με το Three.js.

Το πρώτο πράγμα είναι το τραπέζι της πισίνας. Χρησιμοποιούμε τα physijs Ύψοςfieldmesh , επειδή αυτό το πλέγμα θα διαβάσει το ύψος από τη γολία. Έτσι θα τυλίξει ουσιαστικά γύρω από το αντικείμενο τριών.

 VAR TANDGEOMETRY = Νέα τρία .Planegeometry (650, 500, 10, 10).
var tablematerial = physijs.Creatematerial (
  Νέο τρίκλιθος ({
    Shininess: 1,
    Χρώμα: 0xB00000,
    Emissive: 0x111111,
    Πλευρά: τρία.Doublyide
  },
  .8, // τριβή
  .4 // αποκατάσταση
)
Πίνακας = Νέα Physijs.heightfieldmesh (επιτραδεμισμό, τυλιγία, 0); 

Έτσι Ύψοςfieldmesh απαιτεί μια γεωμετρία αλλά και ένα υλικό physijs. Προσθέτουμε δύο νέα χαρακτηριστικά στο υλικό Three.js. Αυτά είναι τα τριβή και αποκατάσταση μεταβλητές. Η τριβή είναι η αντίσταση που κάνει το αντικείμενο και η αποκατάσταση αναφέρεται στην «Bounciness». Αυτές οι δύο μεταβλητές θα ορίσουν πόσο πραγματική η φυσική θα νιώσει σαν στη σκηνή σας.

Για τις δημιουργημένες μπάλες της πισίνας δεν θέλουμε να τους κάνουμε πάρα πολύ γερά, έτσι κρατήστε τον αριθμό χαμηλό. Όπως τρία.js, τα Physijs διαθέτουν επίσης μια σειρά βασικών σχημάτων για να μετακινηθούν γύρω από το αρχικό πλέγμα. Σφαιρόν περιτύλιγμα του Σφαίρα θα δώσει τη φυσική μπάλα. Κατά την αρχικοποίηση της σκηνής, καλούμε buildball (8) , που θα ενεργοποιήσει την ακόλουθη λειτουργία ...

 var buildball = Λειτουργία (Numball) {
 var balltexture = νέα τρία.Texture ();
 var ballindex = μπάλα. 

Προσθέστε την υφή:

 Balltexture = Three.imageutils.LoadteCture ('υφές /' + numberball + '_ball.jpg', λειτουργία (εικόνα) {
     balltexture.image = εικόνα;
  }); 

Δημιουργήστε το υλικό με δυνατότητα Physijs με κάποια αξιοπρεπή ιδιότητες τριβής και αναπήδησης:

var ballmaterial = physijs.CreateMaterial (
    Νέο τριών.Meshlumbertmaterial ({
      Χάρτης: Balltexture,
      Shininess: 10,
      Χρώμα: 0xDDDDD,
      Emissive: 0x111111,
      Πλευρά: τρεις.Frontside
    },
    .6, // τριβή
    .5 // αποκατάσταση
  ) · 

Χαρτογράφηση υφής:

 Ballmaterial.map.wraps = Ballmaterial.map.Wrapt = Three.repeatwrping?
  ballmaterial.map.repeat.Set (1, 1);
 Δημιουργήστε το Spheremesh της Φυσικής, και ξεκινήστε τον στον αέρα:

  Ball [Ballindex] = Νέα Physijs.Spheremesh (
    Νέες τρεις.spergeyometry (25, 25, 25),
    προληπτικό,
    100
  )
  // Y αντισταθμίστε στην κορυφή του καμβά
  μπάλα [ballindex]. position.y = 500;
  // σκιές
  μπάλα [ballindex] .Receiveshadow = TRUE;
  μπάλα [ballindex] .castshadow = true;
  // Προσθέστε την μπάλα στον καμβά σας
  scene.add (μπάλα [ballindex]);
};

Προσθέτουμε υφή από ένα αρχείο .jpg. Δημιουργήστε το υλικό και χρησιμοποιήστε το για το Σφαιρόν Για να δημιουργήσετε το αντικείμενο, το οποίο θα τοποθετήσουμε κάθετα στην κορυφή, ώστε να πέσει στην οθόνη.

03. Σύνδεση υποδοχών

Για επικοινωνία μεταξύ του διακομιστή και του πελάτη, θα χρησιμοποιήσουμε socket.io . Αυτή είναι μια από τις πιο αξιόπιστες βιβλιοθήκες διαθέσιμες για τον κόμβο. Είναι χτισμένο πάνω από το API Websockets.

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

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

 var socket = io.connect (); 

Για την αποστολή μηνυμάτων που χρησιμοποιείτε το εκπέμπουν λειτουργία:

 socket.emit ('όνομα συμβάντος', δεδομένα) · 

Και για να λάβετε τη χρήση του .επί() λειτουργία:

 socket.on ('όνομα συμβάντος', λειτουργία () {}); 

03.1. Ρύθμιση του παιχνιδιού Desktop

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

 var socket = io.connect ();
// Όταν το αρχικό μήνυμα καλωσορίσματος, απαντήστε με τον τύπο συσκευής '
socket.on ("καλωσόρισμα", λειτουργία (δεδομένα) {
  socket.emit ("συσκευή", {"τύπος": "παιχνίδι"});
}) · 

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

 // Δημιουργήστε έναν κώδικα
var gamecode = crypto.randombytes (3) .TOSTRING ('hex'). Υποσύνολο (0, 4) .tolowercase ();
// εξασφαλίζει μοναδικότητα
ενώ (gamecode σε socketcodes) {
  gamecode = crypto.randombytes (3) .TOSTRING ('hex'). Υποψήφιο (0, 4) .tolowercase ();
}
// Αποθηκεύστε τον κωδικό παιχνιδιού - & GT; ένωση υποδοχής
Socketcodes [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = gamecode 

Πείτε στον πελάτη παιχνιδιού να αρχίσει και να δείξει τον κωδικό παιχνιδιού στον χρήστη ...

 socket.emit ("αρχικοποίηση", gamecode) · 

03.2. Συνδέστε τον ελεγκτή στο παιχνίδι

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

 socket.emit ("συσκευή", {"τύπος": "ελεγκτής", "gamecode": gamecode}); 

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

 εάν (συσκευή.gamecode σε socketcodes) {
  // Αποθηκεύστε τον κωδικό παιχνιδιού για εντολές ελεγκτή
  socket.gamecode = συσκευή.gamecode
  // Αρχικοποιήστε τον ελεγκτή
  socket.emit ("συνδεδεμένο", {});
  // ξεκίνα το παιχνίδι
  Socketcodes [Device.Gamecode] .Emit ("συνδεδεμένο", {});
} 

Μόλις ρυθμιστεί η σύνδεση, θα δώσουμε στη συνέχεια την 8-μπάλα μια μικρή ώθηση από το x και το z με την ακόλουθη εντολή ...

 μπάλα 
 .SetLinearvelocity (νέα τρία.Vector3 (30, 0, 30)). 

04. Αποστολή δεδομένων

Τώρα που η σύνδεση είναι εγκατεστημένη, θέλουμε να στείλουμε τις μεταβλητές gyro και επιταχυνσιόμετρο στο παιχνίδι. Χρησιμοποιώντας το window.ondevicequicemotion και το window.ondevicientation Εκδηλώσεις, έχουμε τα δεδομένα που χρειαζόμαστε να μιμηθούμε τις ίδιες κινήσεις κλίσης του τηλεφώνου μας στο τραπέζι της πισίνας. Έχω επιλέξει να χρησιμοποιήσω ένα διάστημα 100ms για να εκπέμψει αυτές τις τιμές.

setinterval (λειτουργία () {
  socket.emit ('στείλετε gyro', [math.round (roty), math.round (Rotx), AY, AX]);
}, διαστήματα) · 

Στην πλευρά του πελάτη θα επιλύσουμε τη λανθάνουσα κατάσταση, διασκεδάζοντας τις εισερχόμενες τιμές από το διακομιστή στην κλίση του πίνακα της πισίνας. Για το Tweening χρησιμοποιούμε Tweenmax .

 // Χειριστείτε τα εισερχόμενα δεδομένα gyro
socket.on ('νέο gyro', λειτουργία (δεδομένα) {
  var degy = δεδομένα 
 & lt; 0; Math.abs (δεδομένα 
): -data 
;
  Tweenmax.Για (τραπέζι.Rotation, 0,3, {
    x: Degtorad (Degy - 90),
    Y: degtorad (δεδομένα 
),
    Ευκολία: Linear.easenone,
    OnUpdate: Λειτουργία () {
        Πίνακας .__ DirtyRotation = TRUE;
    }
  });
}) · 

05. Επιπλέον γεγονότα

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

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

Πρώτα πρέπει να πιάσουμε τα γεγονότα του πληκτρολογίου ...

 // Δημιουργία μπάλες / τραπέζι Slam στο Spacebar
document.addeventListener ('keydown', λειτουργία (e) {
  Εάν (E.KeyCode == 49) {// Κλειδί: 1
    buildball (1);
  } αλλιώς εάν (e.keycode == 50) {// κλειδί: 1
    buildball (2);
  } αλλιώς εάν (e.keycode == 51) {// κλειδί: 1
    buildball (3);
  } αλλιώς εάν (E.KeyCode == 32) {// KEY: SPACEBAR
    bouncetable ();
  }
}) · 

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

 πίνακας.Setlinearvelocity (νέα τρία.Vector3 (0, 500, 0)). 

συμπέρασμα

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

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

Σχετικά Άρθρα:

• Ξεκινήστε με το WebGL χρησιμοποιώντας τρεις
• 20 Εργαλεία JavaScript για να φυσήξει το μυαλό σας
• Δημιουργία διαδραστικών τρισδιάστατων οπτικών με τρία