Създайте своя собствена физическа игра WebGL

Този проект ще бъде разделен на различни части. Ще дадем кратко въведение в Heroku, ще покажем как да използваме Physijs с three.js, ще обясним как да обработваме събития на сокети през Node.js и също така как работим с изпратените данни.

01. Хероку

Heroku е лесен за използване и безплатен за тестване уеб сървър node.js



Heroku е лесен за използване и безплатен за тестване уеб сървър node.js

Този проект ще бъде хостван на Heroku , която е облачна платформа за хостване на вашите приложения. Той има голямо разнообразие от поддържани езици като Ruby, Java, PHP и Python. Ще използваме Node.js.



Регистрирайте се за акаунт и изберете Node.js. За този проект можем да използваме основния сървър, който е безплатен. След регистрацията ще стигнете до таблото си за управление, където можете да създадете приложението си. Това ще създаде поддомейн на herokuapp.com.

Като метод за разгръщане можете да изберете или да използвате интерфейса на командния ред Heroku (CLI) за разгръщане, използвайки неговото git хранилище, или да имате връзка, настроена към GitHub или Dropbox. Избрах да отида с неговия CLI; това ще изисква инсталиране. Но в замяна получавате разнообразие от нови полезни инструменти, един от тях е отстраняване на грешки на живо през вашия терминал.



как да направите банер на уебсайт в

За настройка на вашия сървър препоръчвам да следвате стъпките както е описано тук .

За разполагане използвате git команди по подразбиране. Всеки, който използвате, ще задейства сървъра за изграждане и приложението ви ще бъде разположено на сървъра Heroku и след това ще бъде видимо във вашия поддомейн.

След като кодът бъде разположен, можете да прегледате проекта си на [yourproject] .herokuapp.com. За да видите дневниците, използвайте командата 'heroku logs - tail' във вашия терминал. Някои от нещата, които се показват, са това, което се обслужва на клиента - показва връзките на сокета и ако искате да отстраните грешките си код, можете също да използвате console.log, за да изведете към терминала.



02. Изградете физическата сцена

Докоснете екрана или натиснете интервала, за да отскочите масата нагоре

Докоснете екрана или натиснете интервала, за да отскочите масата нагоре

Ще използваме най-популярната WebGL рамка, three.js , за да изградим 3D сцена, съдържаща обект, върху който ще прикачим физика. Избраната физическа библиотека е Physijs , плъгин за three.js. Като разширение на three.js, Physijs използва същата конвенция за кодиране, което улеснява използването, ако вече сте запознати с three.js.

Първото нещо е билярдната маса. Използваме Physijs HeightfieldMesh , защото тази мрежа ще отчете височината от PlaneGeometry. Така че основно ще се увие около обекта three.js.

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);

Така HeightfieldMesh изисква геометрия, но също и Physijs материал. Добавяме две нови функции към материала three.js. Това са триене и реституция променливи. Триенето е съпротивлението, което обектът оказва, а възстановяването се отнася до „подскачането“. Тези две променливи ще определят колко реално ще се чувства физиката във вашата сцена.

За създадените топки за билярд не искаме да ги правим прекалено подскачащи, затова поддържайте броя нисък. Подобно на three.js, Physijs също има серия от основни форми, за да заобиколи оригиналната мрежа. SphereMesh опаковане на SphereGeometry ще даде на топката физика. Когато инициализираме сцената, ние се обаждаме buildBall (8) , което ще задейства следната функция ...

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

Добавете текстурата:

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

Създайте материала с активирана физика с някои прилични свойства на триене и отскачане:

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

Картиране на текстура:

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]); };

Добавяме текстура от .jpg файл. Създайте материала и го използвайте за SphereMesh за да създадем обекта, който ще поставим вертикално нагоре, за да падне на екрана.

03. Свързване на контакти

Основната цел на нашата игра е да подражава на физическите движения на екрана

Основната цел на нашата игра е да подражава на физическите движения на екрана

За комуникация между сървъра и клиента ще използваме socket.io . Това е една от най-надеждните библиотеки, достъпни за Node.js. Той е изграден върху API на WebSockets.

Сега физиката е активирана за мрежите, от които се нуждаем потребителски вход, за да направим играта интерактивна. Устройството за въвеждане, което използваме, е мобилното устройство. Мобилният браузър е контролерът, който ще предоставя данни от акселерометъра и жироскопа на работния плот, където ще видите играта.

Първо, трябва да се направи връзка между мобилния браузър и настолния браузър. Всеки път, когато браузър се свърже с нашето приложение Node.js, трябва да установим нова връзка. Клиентска връзка се настройва, като се използва следното:

var socket = io.connect();

За изпращане на съобщения използвате излъчвам функция:

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

И за получаване използвате .На() функция:

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

03.1. Настройване на настолната игра

Ако сме на работен плот, ще изпратим нашите сокети, излъчвани от устройство, казващи на нашия сървър, че работният плот е играта, използвайки следния ред код:

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

Сървърът ще ни върне уникален ключ / код на играта генерирани от крипто . Това ще се покаже на работния плот.

// 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

Кажете на клиента за игра да инициализира и покаже кода на играта на потребителя ...

socket.emit('initialize', gameCode);

03.2. Свържете контролера към играта

За да свържем мобилното устройство към играта, ще използваме формуляр за изпращане на кода на играта от екрана на работния плот. При изпращане на формуляра ще изпратим кода на играта на сървъра за удостоверяване.

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

Сървърът ще провери дали кодът на играта е валиден и ще настрои връзката с настолната игра

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', {}); }

След като връзката е настроена, след това ще дадем на 8-топката малко натискане от x и z със следната команда ...

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

04. Изпращане на данни

Сега, когато връзката е установена, ние искаме да изпратим променливите жироскоп и акселерометър към играта. Като използвате window.ondevicemotion и window.ondeviceorientation събития, имаме данните, които са ни необходими, за да емулираме същите движения на накланяне на нашия телефон към билярдната маса. Избрах да използвам интервал от 100 ms за излъчване на тези стойности.

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

От страна на клиента ще разрешим латентността, като пренасочим входящите стойности от сървъра към наклона на билярдната маса. За туинг използваме 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. Допълнителни събития

Повече топки означава по-голямо забавление. Опитайте да натиснете интервала или да докоснете екрана на мобилния си телефон

Повече топки означава по-голямо забавление. Опитайте да натиснете интервала или да докоснете екрана на мобилния си телефон

За да му дам малко повече интерактивност, добавих няколко допълнителни събития, с които потребителят да играе. Ще дадем на потребителя възможност да добавя допълнителни топки до 8-топката, като използва цифрите на клавиатурата.

Друг е да отскочите масата нагоре. За това можете да натиснете интервала. Но също така добавяме събитие за докосване на устройството на контролера. Това ще изпрати събитие до билярдната маса, което ще издигне масата и ще изпрати топките нагоре.

Първо трябва да хванем клавиатурните събития ...

// 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(); } });

The buildBall функция е същата функция, която използвахме за създаване на сфера 8-топка. Ние просто използваме различни текстури, които ще обвият сферата. За изтласкване на масата нагоре, ние даваме на масата движение нагоре по оста y с този код ...

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

Заключение

Добавете още топки и вижте колко може да се справи с вашия браузър

Добавете още топки и вижте колко може да се справи с вашия браузър

Когато имате концепция за игра или нещо друго, е напълно вероятно да има библиотеки, които да улеснят живота ви. Това е демонстрация, която показва как това може да работи. Надяваме се, че това ще ви помогне да предизвика някои творчески идеи или ще ви помогне с текущия ви проект. Вижте пример на живо за играта тук или го намерете на GitHub .

Тази статия първоначално е публикувана в брой 300 от нето , световното топ списание за професионални уеб дизайнери и разработчици. Купете издание 300 или абонирайте се тук .

Свързани статии: