나만의 WebGL 물리 게임 빌드

이 프로젝트는 여러 부분으로 나뉩니다. Heroku에 대한 간략한 소개, three.js에서 Physij를 사용하는 방법, 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를 사용하기로 선택했습니다. 설치가 필요합니다. 그러나 그 대가로 다양한 새롭고 유용한 도구를 얻게됩니다.이 중 하나는 터미널을 통한 라이브 디버깅입니다.



애프터 이펙트 CC에 대한 요소 3d

서버를 설정하려면 다음 단계를 따르는 것이 좋습니다. 여기에 설명 된대로 .

배포하려면 기본 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 공 물리학을 제공합니다. 장면을 초기화 할 때 빌드 볼 (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; });

적절한 마찰 및 바운스 속성을 사용하여 physijs 지원 재질을 만듭니다.

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에서 사용할 수있는 가장 안정적인 라이브러리 중 하나입니다. WebSockets API 위에 구축되었습니다.

이제 게임을 인터랙티브하게 만들기 위해 사용자 입력이 필요한 메시에 물리가 활성화되었습니다. 우리가 사용하는 입력 장치는 모바일 장치입니다. 모바일 브라우저는 데이터를 제공하는 컨트롤러입니다. 가속도계와 자이로 스코프에서 게임을 볼 데스크탑으로 이동합니다.

우선 모바일 브라우저와 데스크톱 브라우저를 연결해야합니다. 브라우저가 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 이벤트, 우리는 당구대에 전화의 동일한 기울기 움직임을 에뮬레이션하는 데 필요한 데이터를 가지고 있습니다. 이 값을 방출하기 위해 100ms 간격을 사용하도록 선택했습니다.

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

그만큼 buildBall 함수는 구 8 볼을 만드는 데 사용한 것과 동일한 함수입니다. 우리는 구를 감싸는 다른 텍스처를 사용하고 있습니다. 테이블을 위로 올리기 위해이 코드를 사용하여 테이블에 y 축을 따라 위로 이동합니다.

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

결론

공을 더 추가하고 브라우저가 처리 할 수있는 정도를 확인하세요.

공을 더 추가하고 브라우저가 처리 할 수있는 정도를 확인하세요.

게임이나 다른 것에 대한 개념이있을 때, 당신의 삶을 더 쉽게 만들어 줄 라이브러리가있을 가능성이 큽니다. 이것이 어떻게 작동하는지 보여주는 데모입니다. 이것이 창의적인 아이디어를 촉발하거나 현재 프로젝트에 도움이되기를 바랍니다. 게임의 라이브 예보기 여기 , 또는 찾기 GitHub .

이 기사는 원래 그물 , 전문 웹 디자이너 및 개발자를위한 세계 최고의 잡지입니다. 300 호 구매 또는 여기에서 구독하세요 .

관련 기사: