Rakenna oma WebGL-fysiikkapeli

Tämä projekti jaetaan eri osiin. Annamme lyhyen esittelyn Herokulle, näytämme kuinka käyttää Physijs-ohjelmaa three.js: n kanssa, kerromme, kuinka Socket-tapahtumia käsitellään Node.js: n kautta ja miten käsitellään lähetettyjä tietoja.

01. Heroku

Heroku on helppokäyttöinen ja ilmainen kokeiluversio node.js-verkkopalvelimelle



Heroku on helppokäyttöinen ja ilmainen kokeiluversio node.js-verkkopalvelimelle

Tätä projektia isännöidään Heroku , joka on pilvialusta sovellusten isännöimiseksi. Sillä on laaja valikoima tuettuja kieliä, kuten Ruby, Java, PHP ja Python. Aiomme käyttää Node.js.

Luo tili ja valitse Node.js. Tähän projektiin voimme käyttää peruspalvelinta, joka on ilmainen. Rekisteröitymisen jälkeen tulet kojelautaan, jossa voit luoda sovelluksesi. Tämä luo aliverkkotunnuksen osoitteeseen herokuapp.com.

Käyttöönottomenetelmänä voit joko käyttää Heroku-komentoriviliitäntää (CLI) asennettavaksi sen git-arkiston avulla tai määrittää yhteyden GitHubiin tai Dropboxiin. Olen päättänyt mennä sen CLI: n kanssa; tämä vaatii asennuksen. Mutta vastineeksi saat useita uusia hyödyllisiä työkaluja, joista yksi on live-virheenkorjaus päätelaitteen kautta.



joissakin käyttöjärjestelmissä on video- ja äänenmuokkausohjelmia

Palvelimen määrittämiseen suosittelen seuraavia vaiheita kuten tässä on kuvattu .

Voit ottaa käyttöön oletuskomennot. Jokainen käyttämäsi käynnistää koontipalvelimen, ja sovelluksesi otetaan käyttöön Heroku-palvelimelle ja on sitten nähtävissä aliverkkotunnuksessasi.

Kun koodi on otettu käyttöön, voit tarkastella projektiasi osoitteessa [oma projekti] .herokuapp.com. Voit tarkastella lokeja käyttämällä päätelaitteesi heroku logs - tail -komentoa. Jotkut näytetyistä asioista palvellaan asiakasta - se näyttää pistorasiakytkennät, ja jos haluat virheenkorjata koodisi, voit käyttää myös konsoli.logia tulostamaan päätelaitteelle.



02. Rakenna fysiikan kohtaus

Napauta näyttöäsi tai paina välilyöntiä palauttaaksesi pöydän ylös

Napauta näyttöäsi tai paina välilyöntiä palauttaaksesi pöydän ylös

Käytämme suosituinta WebGL-kehystä, three.js , rakentaa 3D-kohtaus, joka sisältää objektin, johon liitämme fysiikan. Valittu fysiikkakirjasto on Physijs , laajennus three.js: lle. Physijs käyttää tiedostoa three.js laajennuksena samaa koodauskäytäntöä, mikä helpottaa käyttöä, jos olet jo perehtynyt three.js-tiedostoon.

Ensimmäinen asia on biljardipöytä. Käytämme Physijoja HeightfieldMesh , koska tämä verkko lukee korkeuden PlaneGeometrystä. Joten se pohjimmiltaan kiertää itsensä three.js-objektin ympärille.

var tableGeometry = new THREE.PlaneGeometry(650, 500, 10, 10); var tableMaterial = Physijs.createMaterial( new THREE.MeshPhongMaterial({ shininess: 1, color: 0xb00000, emissive: 0x111111, side: THREE.DoubleSide }), .8, // friction .4 // restitution ); table = new Physijs.HeightfieldMesh(tableGeometry, tableMaterial, 0);

Niin HeightfieldMesh vaatii geometrian, mutta myös Physijs-materiaalin. Lisäämme kaksi uutta ominaisuutta three.js-materiaaliin. Ne ovat kitka ja palauttaminen muuttujat. Kitka on kohteen aiheuttama vastus, ja palauttaminen viittaa 'pomppumiseen'. Nämä kaksi muuttujaa määrittelevät kuinka todellinen fysiikka tuntuu kohtauksestasi.

Luotuille uima-altaan palloille emme halua tehdä niistä liian pomppivia, joten pidä lukua alhaalla. Kuten three.js, Physijsilla on myös sarja perusmuotoja kiertämään alkuperäinen verkko. PalloMesh kääriminen PalloGeometria antaa pallon fysiikan. Alustettaessa kohtausta soitamme rakentaa palloa (8) , joka käynnistää seuraavan toiminnon ...

var buildBall = function(numberBall) { var ballTexture = new THREE.Texture(); var ballIndex = ball.length;

Lisää rakenne:

ballTexture = THREE.ImageUtils.loadTexture('textures/' + numberBall + '_Ball.jpg', function(image) { ballTexture.image = image; });

Luo physijs-yhteensopiva materiaali, jolla on kunnolliset kitka- ja palautumisominaisuudet:

var ballMaterial = Physijs.createMaterial( new THREE.MeshLambertMaterial({ map: ballTexture, shininess: 10, color: 0xdddddd, emissive: 0x111111, side: THREE.FrontSide }), .6, // friction .5 // restitution );

Rakenteen kartoitus:

ballMaterial.map.wrapS = ballMaterial.map.wrapT = THREE.RepeatWrapping; ballMaterial.map.repeat.set(1, 1); Create the physics-enabled SphereMesh, and start it up in the air: ball[ballIndex] = new Physijs.SphereMesh( new THREE.SphereGeometry(25, 25, 25), ballMaterial, 100 ); // y offset to the top of the canvas ball[ballIndex].position.y = 500; // shadows ball[ballIndex].receiveShadow = true; ball[ballIndex].castShadow = true; // add the ball to your canvas scene.add(ball[ballIndex]); };

Lisäämme tekstuuria .jpg-tiedostosta. Luo materiaali ja käytä sitä PalloMesh luoda objekti, jonka sijoitamme pystysuunnassa ylöspäin niin, että se putoaa näyttöön.

03. Pistorasioiden liitäntä

Pelin tärkein tavoite on jäljitellä fyysisiä liikkeitä näytölle

Pelin tärkein tavoite on jäljitellä fyysisiä liikkeitä näytölle

Palvelimen ja asiakkaan väliseen viestintään käytämme socket.io . Tämä on yksi luotettavimmista Node.js-kirjastoista. Se on rakennettu WebSockets API: n päälle.

Fysiikka on nyt käytössä silmissä, joita tarvitsemme käyttäjän panoksella, jotta peli olisi vuorovaikutteinen. Syöttölaite, jota käytämme, on mobiililaite. Mobiiliselain on ohjain, joka toimittaa tietoja kiihtyvyysmittarista ja gyroskoopista työpöydälle, jossa näet pelin.

Ensinnäkin on muodostettava yhteys mobiiliselaimen ja työpöydän selaimen välille. Joka kerta, kun selain muodostaa yhteyden Node.js -sovellukseen, meidän on luotava uusi yhteys. Asiakkaan puoleinen yhteys muodostetaan seuraavasti:

var socket = io.connect();

Viestien lähettämiseen käytetään säteillä toiminto:

socket.emit('event name', data);

Ja vastaanottamiseen käytät .päällä() toiminto:

socket.on('event name', function() {});

03.1. Pöytäpelin asettaminen

Jos olemme työpöydällä, lähetämme pistorasioihimme laitteen lähettämän ilmoituksen palvelimellemme, että työpöytä on peli, käyttäen seuraavaa koodiriviä:

var socket = io.connect(); // when initial welcome message, reply with 'game' device type socket.on('welcome', function(data) { socket.emit('device', { 'type': 'game' }); });

Palvelin palauttaa meille ainutlaatuisen avaimen / pelikoodin salauksen tuottama . Tämä näkyy työpöydällä.

// generate a code var gameCode = crypto.randomBytes(3).toString('hex').substring(0, 4).toLowerCase(); // ensure uniqueness while (gameCode in socketCodes) { gameCode = crypto.randomBytes(3).toString('hex').substring(0, 4).toLowerCase(); } // store game code -> socket association socketCodes[gameCode] = io.sockets.sockets[socket.id]; socket.gameCode = gameCode

Käske peliohjelmaa alustamaan ja näyttämään pelikoodi käyttäjälle ...

socket.emit('initialize', gameCode);

03.2. Liitä ohjain peliin

Liittämään mobiililaitteen peliin käytämme lomaketta pelikoodin lähettämiseen työpöydän näytöltä. Lähetettävällä lomakkeella lähetämme pelikoodin palvelimelle todennusta varten.

socket.emit('device', { 'type': 'controller', 'gameCode': gameCode });

Palvelin tarkistaa, onko pelikoodi voimassa, ja muodostaa yhteyden pöytäpeliin

if (device.gameCode in socketCodes) { // save the game code for controller commands socket.gameCode = device.gameCode // initialize the controller socket.emit('connected', {}); // start the game socketCodes[device.gameCode].emit('connected', {}); }

Kun yhteys on muodostettu, annamme sitten 8-pallolle pienen työnnön x: stä ja z: stä seuraavan komennon avulla ...

ball[0].setLinearVelocity(new THREE.Vector3(30, 0, 30));

04. Tietojen lähettäminen

Nyt kun yhteys on muodostettu, haluamme lähettää gyro- ja kiihtyvyysmittarin muuttujat peliin. Käyttämällä ikkuna. ilmaiseva tunnelma ja ikkuna. suunnan suuntaus Tapahtumat, meillä on tarvittavat tiedot matkiaksemme puhelimen samoja kallistumisliikkeitä biljardipöytään. Olen päättänyt käyttää 100 ms: n välein näiden arvojen lähettämiseen.

setInterval(function() { socket.emit('send gyro', [Math.round(rotY), Math.round(rotX), ay, ax]); }, intervalTime);

Asiakkaan puolella ratkaistamme viive tweetoimalla saapuvat arvot palvelimelta biljardipöydän kallistukseen. Twinningiä varten käytämme TweenMax .

// handle incoming gyro data socket.on('new gyro', function(data) { var degY = data[1] < 0 ? Math.abs(data[1]) : -data[1]; TweenMax.to(table.rotation, 0.3, { x: degToRad(degY - 90), y: degToRad(data[0]), ease: Linear.easeNone, onUpdate: function() { table.__dirtyRotation = true; } }); });

05. Lisätapahtumat

Lisää palloja on hauskempaa. Yritä lyödä välilyöntiä tai napauttaa matkapuhelimesi näyttöä

Lisää palloja on hauskempaa. Yritä lyödä välilyöntiä tai napauttaa matkapuhelimesi näyttöä

Antaakseni sille hieman enemmän vuorovaikutteisuutta, olen lisännyt pari ylimääräistä tapahtumaa, joilla käyttäjä voi pelata. Annamme käyttäjälle mahdollisuuden lisätä ylimääräisiä palloja 8-pallon viereen käyttämällä näppäimistön numeroita.

Toinen on palauttaa pöytä ylöspäin. Tätä varten voit lyödä välilyöntiä. Mutta lisäämme myös napautustapahtuman ohjainlaitteeseen. Tämä lähettää tapahtuman biljardipöytään, joka nostaa pöytää ja lähettää pallot ylös.

Ensin meidän on pyydettävä näppäimistötapahtumat ...

// create balls / slam table on spacebar document.addEventListener('keydown', function(e) { if (e.keyCode == 49) { // key: 1 buildBall(1); } else if (e.keyCode == 50) { // key: 1 buildBall(2); } else if (e.keyCode == 51) { // key: 1 buildBall(3); } else if (e.keyCode == 32) { // key: spacebar bounceTable(); } });

rakentaaPallo toiminto on sama toiminto, jota käytimme pallon 8-pallon luomiseen. Käytämme vain erilaisia ​​tekstuureja, jotka käärivät pallon. Pöydän työntämiseksi ylöspäin annamme pöydän ylöspäin y-akselia pitkin tällä koodilla ...

table.setLinearVelocity(new THREE.Vector3(0, 500, 0));

Johtopäätös

Lisää lisää palloja ja katso kuinka paljon selaimesi pystyy käsittelemään

Lisää lisää palloja ja katso kuinka paljon selaimesi pystyy käsittelemään

Kun sinulla on konsepti peliin tai muuhun, on täysin todennäköistä, että siellä on kirjastoja, jotka voivat helpottaa elämääsi. Tämä on demo, joka osoittaa, miten tämä voi toimia. Toivomme, että tämä auttaa herättämään luovia ideoita tai auttaa sinua nykyisessä projektissasi. Katso elävä esimerkki pelistä tässä tai etsi se GitHub .

Tämä artikkeli julkaistiin alun perin 300: n numerossa netto , maailman suurin ammattilaissuunnittelijoiden ja -kehittäjien aikakauslehti. Osta numero 300 tai tilaa täällä .

Aiheeseen liittyvät artikkelit: