멀티플레이어 .io 웹 게임 만들기

2015년 출시 Agar.io 새로운 장르의 창시자가 되다 게임 .io그 이후로 인기가 높아졌습니다. 저는 개인적으로 .io 게임의 인기 상승을 경험했습니다. 지난 XNUMX년 동안 저는 이 장르의 두 게임을 만들고 판매했습니다..

이전에 이러한 게임에 대해 들어본 적이 없는 경우 플레이하기 쉬운 무료 멀티플레이어 웹 게임입니다(계정 필요 없음). 그들은 일반적으로 같은 경기장에서 많은 상대 플레이어와 마주합니다. 기타 유명한 .io 게임: Slither.io и Diep.io.

이번 포스팅에서는 그 방법에 대해 알아보겠습니다. 처음부터 .io 게임 만들기. 이를 위해서는 Javascript에 대한 지식만 있으면 충분합니다. 구문과 같은 것을 이해해야 합니다. ES6, 키워드 this и 약속. Javascript에 대한 지식이 완벽하지 않더라도 대부분의 게시물을 이해할 수 있습니다.

.io 게임 예시

학습 지원에 대해서는 다음을 참조합니다. .io 게임 예시. 그것을 재생해보십시오!

게임은 매우 간단합니다. 다른 플레이어가 있는 경기장에서 배를 조종합니다. 함선은 자동으로 발사체를 발사하고 다른 플레이어의 발사체를 피하면서 다른 플레이어를 공격하려고 합니다.

1. 프로젝트 개요/구조

추천 소스 코드 다운로드 당신이 나를 따라갈 수 있도록 예제 게임.

이 예에서는 다음을 사용합니다.

• Express 게임의 웹 서버를 관리하는 가장 인기 있는 Node.js 웹 프레임워크입니다.
• 소켓.io - 브라우저와 서버 간에 데이터를 교환하기 위한 웹소켓 라이브러리.
• 웹팩 - 모듈 관리자. Webpack을 사용하는 이유에 대해 읽을 수 있습니다. 여기에.

프로젝트 디렉토리 구조는 다음과 같습니다.

public/
    assets/
        ...
src/
    client/
        css/
            ...
        html/
            index.html
        index.js
        ...
    server/
        server.js
        ...
    shared/
        constants.js

공공의/

폴더의 모든 것 public/ 서버에 의해 정적으로 제출됩니다. 안에 public/assets/ 프로젝트에서 사용하는 이미지가 포함되어 있습니다.

src /

모든 소스 코드는 폴더에 있습니다. src/. 제목 client/ и server/ 스스로 말하고 shared/ 클라이언트와 서버 모두에서 가져온 상수 파일을 포함합니다.

2. 어셈블리/프로젝트 설정

위에서 언급했듯이 모듈 관리자를 사용하여 프로젝트를 빌드합니다. 웹팩. Webpack 구성을 살펴보겠습니다.

webpack.common.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    game: './src/client/index.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/client/html/index.html',
    }),
  ],
};

여기서 가장 중요한 라인은 다음과 같습니다.

• src/client/index.js Javascript(JS) 클라이언트의 진입점입니다. Webpack은 여기에서 시작하여 가져온 다른 파일을 재귀적으로 검색합니다.
• Webpack 빌드의 출력 JS는 디렉토리에 있습니다. dist/. 이 파일을 우리의 js 패키지.
• 우리는 사용 바벨, 특히 구성 @babel/preset-env 이전 브라우저용 JS 코드를 변환합니다.
• 플러그인을 사용하여 JS 파일에서 참조하는 모든 CSS를 추출하고 한 곳에서 결합합니다. 나는 그를 우리라고 부를 것이다 CSS 패키지.

이상한 패키지 파일 이름을 발견했을 수 있습니다. '[name].[contenthash].ext'. 그들은 포함 파일 이름 대체 웹팩: [name] 입력 지점의 이름으로 대체됩니다(이 경우 game), [contenthash] 파일 내용의 해시로 대체됩니다. 우리는 그것을 해싱을 위해 프로젝트 최적화 - JS 패키지를 무기한 캐시하도록 브라우저에 지시할 수 있습니다. 패키지가 변경되면 파일 이름도 변경됩니다. (변경 contenthash). 최종 결과는 보기 파일의 이름이 됩니다. game.dbeee76e91a97d0c7207.js.

파일 webpack.common.js 개발 및 완료된 프로젝트 구성으로 가져오는 기본 구성 파일입니다. 다음은 개발 구성의 예입니다.

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
});

효율성을 위해 개발 프로세스에서 사용합니다. webpack.dev.js로 전환합니다. webpack.prod.js프로덕션에 배포할 때 패키지 크기를 최적화합니다.

로컬 설정

이 게시물에 나열된 단계를 따를 수 있도록 로컬 컴퓨터에 프로젝트를 설치하는 것이 좋습니다. 설정은 간단합니다. 먼저 시스템이 설치되어 있어야 합니다. 노드 и NPM. 다음으로 해야 할 일

$ git clone https://github.com/vzhou842/example-.io-game.git
$ cd example-.io-game
$ npm install

그리고 당신은 갈 준비가되었습니다! 개발 서버를 시작하려면 다음을 실행하십시오.

$ npm run develop

그리고 웹 브라우저로 이동 localhost : 3000. 개발 서버는 코드가 변경되면 자동으로 JS 및 CSS 패키지를 다시 빌드합니다. 모든 변경 사항을 보려면 페이지를 새로고침하세요!

3. 클라이언트 진입점

게임 코드 자체에 대해 알아보겠습니다. 먼저 페이지가 필요합니다 index.html, 사이트를 방문하면 브라우저가 먼저 사이트를 로드합니다. 페이지는 매우 간단합니다.

index.html 페이지

.io 게임 예시  놀다

이 코드 예제는 명확성을 위해 약간 단순화되었으며 다른 많은 포스트 예제에서도 동일한 작업을 수행할 것입니다. 전체 코드는 항상 다음에서 볼 수 있습니다. 깃허브.

우리는:

• HTML5 캔버스 요소 (<canvas>) 게임을 렌더링하는 데 사용할 것입니다.
• <link> CSS 패키지를 추가합니다.
• <script> Javascript 패키지를 추가합니다.
• 사용자 이름이 있는 기본 메뉴 <input> 및 재생 버튼(<button>).

홈페이지를 로드한 후 브라우저는 진입점 JS 파일에서 시작하여 Javascript 코드 실행을 시작합니다. src/client/index.js.

index.js

import { connect, play } from './networking';
import { startRendering, stopRendering } from './render';
import { startCapturingInput, stopCapturingInput } from './input';
import { downloadAssets } from './assets';
import { initState } from './state';
import { setLeaderboardHidden } from './leaderboard';

import './css/main.css';

const playMenu = document.getElementById('play-menu');
const playButton = document.getElementById('play-button');
const usernameInput = document.getElementById('username-input');

Promise.all([
  connect(),
  downloadAssets(),
]).then(() => {
  playMenu.classList.remove('hidden');
  usernameInput.focus();
  playButton.onclick = () => {
    // Play!
    play(usernameInput.value);
    playMenu.classList.add('hidden');
    initState();
    startCapturingInput();
    startRendering();
    setLeaderboardHidden(false);
  };
});

이것은 복잡하게 들릴 수 있지만 여기서는 별로 진행되지 않습니다.

1. 다른 여러 JS 파일을 가져옵니다.
2. CSS 가져오기(Webpack이 CSS 패키지에 포함하는 것을 알 수 있도록).
3. 출시 connect() 서버와 연결을 설정하고 실행하려면 downloadAssets() 게임을 렌더링하는 데 필요한 이미지를 다운로드합니다.
4. 3단계 완료 후 메인 메뉴가 표시됩니다(playMenu).
5. "PLAY" 버튼을 누르기 위한 핸들러 설정. 버튼을 누르면 코드가 게임을 초기화하고 서버에 플레이할 준비가 되었음을 알립니다.

클라이언트-서버 논리의 주요 "핵심"은 파일에서 가져온 파일에 있습니다. index.js. 이제 우리는 그것들을 모두 순서대로 고려할 것입니다.

4. 고객 데이터 교환

이 게임에서는 잘 알려진 라이브러리를 사용하여 서버와 통신합니다. 소켓.io. Socket.io에는 기본 지원이 있습니다. WebSocket을양방향 통신에 적합합니다. 서버에 메시지를 보낼 수 있습니다. и 서버는 동일한 연결에서 우리에게 메시지를 보낼 수 있습니다.

우리는 하나의 파일을 가질 것입니다 src/client/networking.js누가 돌볼 것인가 모든 서버와의 통신:

네트워킹.js

import io from 'socket.io-client';
import { processGameUpdate } from './state';

const Constants = require('../shared/constants');

const socket = io(`ws://${window.location.host}`);
const connectedPromise = new Promise(resolve => {
  socket.on('connect', () => {
    console.log('Connected to server!');
    resolve();
  });
});

export const connect = onGameOver => (
  connectedPromise.then(() => {
    // Register callbacks
    socket.on(Constants.MSG_TYPES.GAME_UPDATE, processGameUpdate);
    socket.on(Constants.MSG_TYPES.GAME_OVER, onGameOver);
  })
);

export const play = username => {
  socket.emit(Constants.MSG_TYPES.JOIN_GAME, username);
};

export const updateDirection = dir => {
  socket.emit(Constants.MSG_TYPES.INPUT, dir);
};

이 코드도 명확성을 위해 약간 단축되었습니다.

이 파일에는 세 가지 주요 작업이 있습니다.

• 서버에 연결하려고 합니다. connectedPromise 연결이 설정된 경우에만 허용됩니다.
• 연결에 성공하면 콜백 함수를 등록합니다(processGameUpdate() и onGameOver()) 서버에서 받을 수 있는 메시지의 경우.
• 우리는 수출 play() и updateDirection()다른 파일에서 사용할 수 있도록 합니다.

5. 클라이언트 렌더링

화면에 그림을 표시할 시간입니다!

…하지만 그렇게 하기 전에 필요한 모든 이미지(리소스)를 다운로드해야 합니다. 자원 관리자를 작성해 봅시다.

자산.js

const ASSET_NAMES = ['ship.svg', 'bullet.svg'];

const assets = {};
const downloadPromise = Promise.all(ASSET_NAMES.map(downloadAsset));

function downloadAsset(assetName) {
  return new Promise(resolve => {
    const asset = new Image();
    asset.onload = () => {
      console.log(`Downloaded ${assetName}`);
      assets[assetName] = asset;
      resolve();
    };
    asset.src = `/assets/${assetName}`;
  });
}

export const downloadAssets = () => downloadPromise;
export const getAsset = assetName => assets[assetName];

리소스 관리는 구현하기 어렵지 않습니다! 주요 아이디어는 객체를 저장하는 것입니다. assets, 파일 이름의 키를 개체의 값에 바인딩합니다. Image. 리소스가 로드되면 개체에 저장합니다. assets 미래에 빠른 액세스를 위해. 각 개별 리소스의 다운로드가 허용되는 시기(즉, 모든 자원), 우리는 허용 downloadPromise.

리소스를 다운로드한 후 렌더링을 시작할 수 있습니다. 앞서 말했듯이 웹 페이지에 그림을 그리려면 다음을 사용합니다. HTML5 캔버스 (<canvas>). 우리 게임은 매우 간단하므로 다음과 같이 그리기만 하면 됩니다.

1. 배경
2. 선수선
3. 게임의 다른 플레이어
4. 껍질

다음은 중요한 스 니펫입니다. src/client/render.js, 위에 나열된 네 가지 항목을 정확히 렌더링합니다.

렌더.js

import { getAsset } from './assets';
import { getCurrentState } from './state';

const Constants = require('../shared/constants');
const { PLAYER_RADIUS, PLAYER_MAX_HP, BULLET_RADIUS, MAP_SIZE } = Constants;

// Get the canvas graphics context
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');

// Make the canvas fullscreen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function render() {
  const { me, others, bullets } = getCurrentState();
  if (!me) {
    return;
  }

  // Draw background
  renderBackground(me.x, me.y);

  // Draw all bullets
  bullets.forEach(renderBullet.bind(null, me));

  // Draw all players
  renderPlayer(me, me);
  others.forEach(renderPlayer.bind(null, me));
}

// ... Helper functions here excluded

let renderInterval = null;
export function startRendering() {
  renderInterval = setInterval(render, 1000 / 60);
}
export function stopRendering() {
  clearInterval(renderInterval);
}

이 코드도 명확성을 위해 축약되었습니다.

render() 이 파일의 주요 기능입니다. startRendering() и stopRendering() 60FPS에서 렌더링 루프의 활성화를 제어합니다.

개별 렌더링 도우미 기능의 구체적인 구현(예: renderBullet())는 그다지 중요하지 않지만 다음은 간단한 예입니다.

렌더.js

function renderBullet(me, bullet) {
  const { x, y } = bullet;
  context.drawImage(
    getAsset('bullet.svg'),
    canvas.width / 2 + x - me.x - BULLET_RADIUS,
    canvas.height / 2 + y - me.y - BULLET_RADIUS,
    BULLET_RADIUS * 2,
    BULLET_RADIUS * 2,
  );
}

방법을 사용하고 있으니 참고하세요 getAsset(), 이전에 본 asset.js!

다른 렌더링 도우미에 대해 알아보고 싶다면 나머지를 읽어보세요. src/클라이언트/render.js.

6. 클라이언트 입력

게임을 만들 시간이다 할 수 있는! 제어 체계는 매우 간단합니다. 이동 방향을 변경하려면 마우스(컴퓨터에서)를 사용하거나 화면을 터치(모바일 장치에서)할 수 있습니다. 이를 구현하기 위해 등록합니다. 이벤트 리스너 마우스 및 터치 이벤트의 경우.
이 모든 것을 처리합니다 src/client/input.js:

input.js

import { updateDirection } from './networking';

function onMouseInput(e) {
  handleInput(e.clientX, e.clientY);
}

function onTouchInput(e) {
  const touch = e.touches[0];
  handleInput(touch.clientX, touch.clientY);
}

function handleInput(x, y) {
  const dir = Math.atan2(x - window.innerWidth / 2, window.innerHeight / 2 - y);
  updateDirection(dir);
}

export function startCapturingInput() {
  window.addEventListener('mousemove', onMouseInput);
  window.addEventListener('touchmove', onTouchInput);
}

export function stopCapturingInput() {
  window.removeEventListener('mousemove', onMouseInput);
  window.removeEventListener('touchmove', onTouchInput);
}

onMouseInput() и onTouchInput() 호출하는 이벤트 리스너입니다. updateDirection() ~의 networking.js) 입력 이벤트가 발생할 때(예: 마우스가 움직일 때). updateDirection() 입력 이벤트를 처리하고 이에 따라 게임 상태를 업데이트하는 서버와의 메시징을 처리합니다.

7. 클라이언트 상태

이 섹션은 게시물의 첫 번째 부분에서 가장 어렵습니다. 처음 읽었을 때 이해가 되지 않더라도 낙담하지 마십시오! 건너뛰고 나중에 다시 돌아올 수도 있습니다.

클라이언트/서버 코드를 완성하는 데 필요한 퍼즐의 마지막 조각은 상태. 클라이언트 렌더링 섹션의 코드 스니펫을 기억하십니까?

렌더.js

import { getCurrentState } from './state';

function render() {
  const { me, others, bullets } = getCurrentState();

  // Do the rendering
  // ...
}

getCurrentState() 클라이언트에서 게임의 현재 상태를 알려줄 수 있어야 합니다. 언제든지 서버에서 받은 업데이트를 기반으로 합니다. 다음은 서버에서 보낼 수 있는 게임 업데이트의 예입니다.

{
  "t": 1555960373725,
  "me": {
    "x": 2213.8050880413657,
    "y": 1469.370893425012,
    "direction": 1.3082443894581433,
    "id": "AhzgAtklgo2FJvwWAADO",
    "hp": 100
  },
  "others": [],
  "bullets": [
    {
      "id": "RUJfJ8Y18n",
      "x": 2354.029197099604,
      "y": 1431.6848318262666
    },
    {
      "id": "ctg5rht5s",
      "x": 2260.546457727445,
      "y": 1456.8088728920968
    }
  ],
  "leaderboard": [
    {
      "username": "Player",
      "score": 3
    }
  ]
}

각 게임 업데이트에는 XNUMX개의 동일한 필드가 있습니다.

• t: 이 업데이트가 생성된 시간을 나타내는 서버 타임스탬프입니다.
• me: 이 업데이트를 받는 플레이어에 대한 정보입니다.
• 다른 사람: 같은 게임에 참여하는 다른 플레이어에 대한 정보의 배열입니다.
• 총알: 게임 내 발사체에 대한 정보의 배열입니다.
• 리더: 현재 순위표 데이터입니다. 이 게시물에서 우리는 그것들을 고려하지 않을 것입니다.

7.1 순진한 클라이언트 상태

순진한 구현 getCurrentState() 가장 최근에 받은 게임 업데이트 데이터만 직접 반환할 수 있습니다.

순진한 상태.js

let lastGameUpdate = null;

// Handle a newly received game update.
export function processGameUpdate(update) {
  lastGameUpdate = update;
}

export function getCurrentState() {
  return lastGameUpdate;
}

좋고 명확합니다! 그러나 그것이 그렇게 간단하다면. 이 구현이 문제가 되는 이유 중 하나는 다음과 같습니다. 렌더링 프레임 속도를 서버 클럭 속도로 제한합니다..

프레임 속도: 프레임 수(즉, 호출 render()) 초당 또는 FPS. 게임은 일반적으로 최소 60FPS를 달성하기 위해 노력합니다.

틱 비율: 서버가 클라이언트에 게임 업데이트를 보내는 빈도입니다. 종종 프레임 속도보다 낮습니다.. 우리 게임에서 서버는 초당 30주기의 빈도로 실행됩니다.

게임의 최신 업데이트만 렌더링하면 FPS는 기본적으로 30을 넘지 않습니다. 우리는 서버에서 초당 30개 이상의 업데이트를 받지 않습니다.. 불러도 render() 초당 60회, 그러면 이러한 호출의 절반은 본질적으로 아무것도 하지 않고 동일한 것을 다시 그릴 것입니다. 순진한 구현의 또 다른 문제는 지연되기 쉬운. 이상적인 인터넷 속도로 클라이언트는 정확히 33ms(초당 30)마다 게임 업데이트를 받습니다.

불행히도 완벽한 것은 없습니다. 보다 현실적인 그림은 다음과 같습니다.

순진한 구현은 대기 시간과 관련하여 사실상 최악의 경우입니다. 게임 업데이트가 50ms 지연되어 수신되면 클라이언트 중단 여전히 이전 업데이트의 게임 상태를 렌더링하고 있기 때문에 추가 50ms입니다. 이것이 플레이어에게 얼마나 불편한지 상상할 수 있습니다. 임의의 제동으로 인해 게임이 불안정하고 불안정하게 느껴질 수 있습니다.

7.2 향상된 클라이언트 상태

순진한 구현을 일부 개선할 것입니다. 첫째, 우리는 사용 렌더링 지연 100ms 동안. 이는 클라이언트의 "현재" 상태가 서버의 게임 상태보다 항상 100ms 뒤처진다는 것을 의미합니다. 예를 들어 서버의 시간이 150, 클라이언트는 당시 서버의 상태를 렌더링합니다. 50:

이렇게 하면 예측할 수 없는 게임 업데이트 시간에서 살아남을 수 있는 100ms 버퍼가 제공됩니다.

이것에 대한 보상은 영구적일 것입니다. 입력 지연 100ms 동안. 이는 원활한 게임 플레이를 위한 사소한 희생입니다. 대부분의 플레이어(특히 캐주얼 플레이어)는 이러한 지연을 알아차리지도 못합니다. 사람들이 예측할 수 없는 대기 시간으로 플레이하는 것보다 일정한 100ms 대기 시간에 적응하는 것이 훨씬 쉽습니다.

라는 또 다른 기술을 사용할 수도 있습니다. 클라이언트 측 예측인지 대기 시간을 줄이는 데 효과적이지만 이 게시물에서는 다루지 않습니다.

우리가 사용하고 있는 또 다른 개선 사항은 선형 보간. 렌더링 지연으로 인해 일반적으로 클라이언트의 현재 시간보다 한 번 이상 업데이트됩니다. 부를 때 getCurrentState(), 우리는 실행할 수 있습니다 선형 보간 클라이언트의 현재 시간 직전과 직후 게임 업데이트 사이:

이렇게 하면 프레임 속도 문제가 해결됩니다. 이제 원하는 프레임 속도로 고유한 프레임을 렌더링할 수 있습니다!

7.3 향상된 클라이언트 상태 구현

구현 예 src/client/state.js 렌더링 지연과 선형 보간을 모두 사용하지만 오랫동안 사용하지는 않습니다. 코드를 두 부분으로 나누겠습니다. 첫 번째는 다음과 같습니다.

state.js 파트 1

const RENDER_DELAY = 100;

const gameUpdates = [];
let gameStart = 0;
let firstServerTimestamp = 0;

export function initState() {
  gameStart = 0;
  firstServerTimestamp = 0;
}

export function processGameUpdate(update) {
  if (!firstServerTimestamp) {
    firstServerTimestamp = update.t;
    gameStart = Date.now();
  }
  gameUpdates.push(update);

  // Keep only one game update before the current server time
  const base = getBaseUpdate();
  if (base > 0) {
    gameUpdates.splice(0, base);
  }
}

function currentServerTime() {
  return firstServerTimestamp + (Date.now() - gameStart) - RENDER_DELAY;
}

// Returns the index of the base update, the first game update before
// current server time, or -1 if N/A.
function getBaseUpdate() {
  const serverTime = currentServerTime();
  for (let i = gameUpdates.length - 1; i >= 0; i--) {
    if (gameUpdates[i].t <= serverTime) {
      return i;
    }
  }
  return -1;
}

첫 번째 단계는 무엇인지 파악하는 것입니다. currentServerTime(). 앞서 살펴본 것처럼 모든 게임 업데이트에는 서버 타임스탬프가 포함됩니다. 렌더링 대기 시간을 사용하여 서버 뒤에서 100ms 뒤에 이미지를 렌더링하려고 하지만 우리는 서버의 현재 시간을 결코 알 수 없습니다, 업데이트가 도착하는 데 시간이 얼마나 걸렸는지 알 수 없기 때문입니다. 인터넷은 예측할 수 없으며 속도가 크게 다를 수 있습니다!

이 문제를 해결하기 위해 합리적인 근사치를 사용할 수 있습니다. 첫 번째 업데이트가 즉시 도착한 척. 이것이 사실이라면 우리는 이 특정 순간의 서버 시간을 알 것입니다! 우리는 서버의 타임 스탬프를 저장합니다 firstServerTimestamp 그리고 우리의 현지의 (클라이언트) 타임스탬프 gameStart.

오 잠깐만. 서버시간=클라이언트시간 아닌가요? "서버 타임스탬프"와 "클라이언트 타임스탬프"를 구분하는 이유는 무엇입니까? 좋은 질문입니다! 그들은 같은 것이 아닙니다. Date.now() 클라이언트와 서버에서 서로 다른 타임스탬프를 반환하며 이러한 시스템의 로컬 요인에 따라 달라집니다. 타임스탬프가 모든 시스템에서 동일할 것이라고 가정하지 마십시오.

이제 우리는 무엇을 이해 currentServerTime(): 반환 현재 렌더링 시간의 서버 타임스탬프. 즉, 이것은 서버의 현재 시간(firstServerTimestamp <+ (Date.now() - gameStart)) 빼기 렌더링 지연(RENDER_DELAY).

이제 게임 업데이트를 처리하는 방법을 살펴보겠습니다. 업데이트 서버에서 수신하면 호출 processGameUpdate()새로운 업데이트를 배열에 저장합니다. gameUpdates. 그런 다음 메모리 사용량을 확인하기 위해 이전 업데이트를 모두 제거합니다. 기본 업데이트더 이상 필요하지 않기 때문입니다.

"기본 업데이트"란 무엇입니까? 이것 서버의 현재 시간에서 뒤로 이동하여 찾은 첫 번째 업데이트. 이 다이어그램을 기억하십니까?

"클라이언트 렌더링 시간" 바로 왼쪽에 있는 게임 업데이트가 기본 업데이트입니다.

기본 업데이트는 어떤 용도로 사용되나요? 업데이트를 기준선으로 떨어뜨릴 수 있는 이유는 무엇입니까? 이것을 이해하기 위해, 마침내 구현을 고려 getCurrentState():

state.js 파트 2

export function getCurrentState() {
  if (!firstServerTimestamp) {
    return {};
  }

  const base = getBaseUpdate();
  const serverTime = currentServerTime();

  // If base is the most recent update we have, use its state.
  // Else, interpolate between its state and the state of (base + 1).
  if (base < 0) {
    return gameUpdates[gameUpdates.length - 1];
  } else if (base === gameUpdates.length - 1) {
    return gameUpdates[base];
  } else {
    const baseUpdate = gameUpdates[base];
    const next = gameUpdates[base + 1];
    const r = (serverTime - baseUpdate.t) / (next.t - baseUpdate.t);
    return {
      me: interpolateObject(baseUpdate.me, next.me, r),
      others: interpolateObjectArray(baseUpdate.others, next.others, r),
      bullets: interpolateObjectArray(baseUpdate.bullets, next.bullets, r),
    };
  }
}

세 가지 경우를 처리합니다.

1. base < 0 현재 렌더링 시간까지 업데이트가 없음을 의미합니다(위 구현 참조). getBaseUpdate()). 이는 렌더링 지연으로 인해 게임 시작 시 바로 발생할 수 있습니다. 이 경우 받은 최신 업데이트를 사용합니다.
2. base 우리가 가지고 있는 최신 업데이트입니다. 네트워크 지연 또는 인터넷 연결 불량 때문일 수 있습니다. 이 경우에도 최신 업데이트를 사용하고 있습니다.
3. 현재 렌더링 시간 전후에 업데이트가 있으므로 보간하다!

남아있는 모든 것 state.js 단순하지만 지루한 수학인 선형 보간의 구현입니다. 직접 탐색하고 싶다면 다음을 엽니다. state.js 에 깃허브.

파트 2. 백엔드 서버

이 부분에서는 우리의 노드를 제어하는 ​​Node.js 백엔드를 살펴보겠습니다. .io 게임 예시.

1. 서버 진입점

웹 서버를 관리하기 위해 우리는 Node.js라는 유명한 웹 프레임워크를 사용할 것입니다. Express. 서버 진입점 파일에 의해 구성됩니다. src/server/server.js:

server.js 파트 1

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('../../webpack.dev.js');

// Setup an Express server
const app = express();
app.use(express.static('public'));

if (process.env.NODE_ENV === 'development') {
  // Setup Webpack for development
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
} else {
  // Static serve the dist/ folder in production
  app.use(express.static('dist'));
}

// Listen on port
const port = process.env.PORT || 3000;
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

첫 번째 부분에서 Webpack에 대해 논의한 것을 기억하십니까? 여기에서 Webpack 구성을 사용할 것입니다. 두 가지 방법으로 사용할 것입니다.

• 사용 웹팩 개발 미들웨어 개발 패키지를 자동으로 다시 빌드하거나
• 정적으로 폴더 전송 dist/, 프로덕션 빌드 후 Webpack이 파일을 작성합니다.

또 다른 중요한 작업 server.js 서버를 설정하는 것입니다 소켓.ioExpress 서버에 연결됩니다.

server.js 파트 2

const socketio = require('socket.io');
const Constants = require('../shared/constants');

// Setup Express
// ...
const server = app.listen(port);
console.log(`Server listening on port ${port}`);

// Setup socket.io
const io = socketio(server);

// Listen for socket.io connections
io.on('connection', socket => {
  console.log('Player connected!', socket.id);

  socket.on(Constants.MSG_TYPES.JOIN_GAME, joinGame);
  socket.on(Constants.MSG_TYPES.INPUT, handleInput);
  socket.on('disconnect', onDisconnect);
});

서버에 대한 socket.io 연결을 성공적으로 설정한 후 새 소켓에 대한 이벤트 핸들러를 설정합니다. 이벤트 핸들러는 싱글톤 객체에 위임하여 클라이언트로부터 받은 메시지를 처리합니다. game:

server.js 파트 3

const Game = require('./game');

// ...

// Setup the Game
const game = new Game();

function joinGame(username) {
  game.addPlayer(this, username);
}

function handleInput(dir) {
  game.handleInput(this, dir);
}

function onDisconnect() {
  game.removePlayer(this);
}

우리는 .io 게임을 만들고 있으므로 하나의 사본만 필요합니다. Game ("게임") - 모든 플레이어가 같은 경기장에서 플레이합니다! 다음 섹션에서는 이 클래스가 어떻게 작동하는지 살펴보겠습니다. Game.

2. 게임 서버

클래스 Game 서버 측에서 가장 중요한 로직을 포함합니다. 두 가지 주요 작업이 있습니다. 플레이어 관리 и 게임 시뮬레이션.

첫 번째 작업인 플레이어 관리부터 시작하겠습니다.

game.js 파트 1

const Constants = require('../shared/constants');
const Player = require('./player');

class Game {
  constructor() {
    this.sockets = {};
    this.players = {};
    this.bullets = [];
    this.lastUpdateTime = Date.now();
    this.shouldSendUpdate = false;
    setInterval(this.update.bind(this), 1000 / 60);
  }

  addPlayer(socket, username) {
    this.sockets[socket.id] = socket;

    // Generate a position to start this player at.
    const x = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    const y = Constants.MAP_SIZE * (0.25 + Math.random() * 0.5);
    this.players[socket.id] = new Player(socket.id, username, x, y);
  }

  removePlayer(socket) {
    delete this.sockets[socket.id];
    delete this.players[socket.id];
  }

  handleInput(socket, dir) {
    if (this.players[socket.id]) {
      this.players[socket.id].setDirection(dir);
    }
  }

  // ...
}

이 게임에서는 필드별로 플레이어를 식별합니다. id 그들의 socket.io 소켓(혼란스럽다면 server.js). Socket.io 자체는 각 소켓에 고유한 id그래서 우리는 그것에 대해 걱정할 필요가 없습니다. 나는 그를 부를 것이다 플레이어 ID.

이를 염두에 두고 클래스의 인스턴스 변수를 살펴보겠습니다. Game:

• sockets 플레이어 ID를 플레이어와 연결된 소켓에 바인딩하는 개체입니다. 일정한 시간에 플레이어 ID로 소켓에 액세스할 수 있습니다.
• players 플레이어 ID를 코드>Player 개체에 바인딩하는 개체입니다.

bullets 개체의 배열입니다 Bullet, 명확한 순서가 없습니다.
lastUpdateTime 게임이 마지막으로 업데이트된 시간의 타임스탬프입니다. 우리는 그것이 어떻게 사용되는지 곧 보게 될 것입니다.
shouldSendUpdate 보조 변수입니다. 우리는 또한 그것의 사용을 곧 보게 될 것입니다.
방법 addPlayer(), removePlayer() и handleInput() 설명할 필요 없이 사용되는 server.js. 기억을 되살려야 한다면 조금 더 위로 돌아가세요.

마지막 줄 constructor() 시작하다 업데이트 주기 게임(초당 60회 업데이트 빈도):

game.js 파트 2

const Constants = require('../shared/constants');
const applyCollisions = require('./collisions');

class Game {
  // ...

  update() {
    // Calculate time elapsed
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // Update each bullet
    const bulletsToRemove = [];
    this.bullets.forEach(bullet => {
      if (bullet.update(dt)) {
        // Destroy this bullet
        bulletsToRemove.push(bullet);
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !bulletsToRemove.includes(bullet),
    );

    // Update each player
    Object.keys(this.sockets).forEach(playerID => {
      const player = this.players[playerID];
      const newBullet = player.update(dt);
      if (newBullet) {
        this.bullets.push(newBullet);
      }
    });

    // Apply collisions, give players score for hitting bullets
    const destroyedBullets = applyCollisions(
      Object.values(this.players),
      this.bullets,
    );
    destroyedBullets.forEach(b => {
      if (this.players[b.parentID]) {
        this.players[b.parentID].onDealtDamage();
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !destroyedBullets.includes(bullet),
    );

    // Check if any players are dead
    Object.keys(this.sockets).forEach(playerID => {
      const socket = this.sockets[playerID];
      const player = this.players[playerID];
      if (player.hp <= 0) {
        socket.emit(Constants.MSG_TYPES.GAME_OVER);
        this.removePlayer(socket);
      }
    });

    // Send a game update to each player every other time
    if (this.shouldSendUpdate) {
      const leaderboard = this.getLeaderboard();
      Object.keys(this.sockets).forEach(playerID => {
        const socket = this.sockets[playerID];
        const player = this.players[playerID];
        socket.emit(
          Constants.MSG_TYPES.GAME_UPDATE,
          this.createUpdate(player, leaderboard),
        );
      });
      this.shouldSendUpdate = false;
    } else {
      this.shouldSendUpdate = true;
    }
  }

  // ...
}

방법 update() 아마도 가장 중요한 서버측 로직을 포함하고 있을 것입니다. 순서대로 수행하는 작업은 다음과 같습니다.

1. 얼마나 오래 계산 dt 마지막 이후로 통과 update().
2. 각 발사체를 새로 고치고 필요한 경우 파괴합니다. 나중에 이 기능의 구현을 볼 수 있습니다. 지금은 그것만으로도 충분하다. bullet.update() 반환 true발사체를 파괴해야 하는 경우 (그는 경기장 밖으로 나갔다).
3. 각 플레이어를 업데이트하고 필요한 경우 발사체를 생성합니다. 우리는 또한 나중에 이 구현을 볼 것입니다. player.update() 객체를 반환할 수 있습니다 Bullet.
4. 발사체와 플레이어 간의 충돌을 확인합니다. applyCollisions(), 플레이어를 공격하는 발사체 배열을 반환합니다. 반환된 각 발사체에 대해 발사한 플레이어의 점수를 높입니다(사용 player.onDealtDamage()) 그런 다음 배열에서 발사체를 제거합니다. bullets.
5. 사망한 모든 플레이어에게 알리고 파괴합니다.
6. 모든 플레이어에게 게임 업데이트를 보냅니다. 매 초 호출된 횟수 update(). 이는 위에서 언급한 보조 변수를 추적하는 데 도움이 됩니다. shouldSendUpdate. 처럼 update() 초당 60회라고 하면 게임 업데이트를 초당 30회 보냅니다. 따라서, 클록 주파수 서버 클록은 30 클록/초입니다(첫 번째 부분에서 클록 속도에 대해 이야기했습니다).

게임 업데이트만 보내는 이유 경과 시간 ? 채널을 저장합니다. 초당 30개의 게임 업데이트는 많습니다!

왜 전화만 안해 update() 초당 30번? 게임 시뮬레이션을 개선합니다. 더 자주 불리는 update(), 게임 시뮬레이션이 더 정확해집니다. 그러나 도전의 수에 너무 몰두하지 마십시오. update(), 이것은 계산 비용이 많이 드는 작업이기 때문에 초당 60이면 충분합니다.

나머지 수업 Game 에서 사용되는 도우미 메서드로 구성됩니다. update():

game.js 파트 3

class Game {
  // ...

  getLeaderboard() {
    return Object.values(this.players)
      .sort((p1, p2) => p2.score - p1.score)
      .slice(0, 5)
      .map(p => ({ username: p.username, score: Math.round(p.score) }));
  }

  createUpdate(player, leaderboard) {
    const nearbyPlayers = Object.values(this.players).filter(
      p => p !== player && p.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );
    const nearbyBullets = this.bullets.filter(
      b => b.distanceTo(player) <= Constants.MAP_SIZE / 2,
    );

    return {
      t: Date.now(),
      me: player.serializeForUpdate(),
      others: nearbyPlayers.map(p => p.serializeForUpdate()),
      bullets: nearbyBullets.map(b => b.serializeForUpdate()),
      leaderboard,
    };
  }
}

getLeaderboard() 매우 간단합니다. 점수별로 플레이어를 정렬하고 상위 XNUMX개를 선택한 다음 각각의 사용자 이름과 점수를 반환합니다.

createUpdate() 에 사용 update() 플레이어에게 배포되는 게임 업데이트를 생성합니다. 주요 임무는 메서드를 호출하는 것입니다. serializeForUpdate()클래스에 대해 구현 Player и Bullet. 각 플레이어에게만 데이터를 전달합니다. 가장 가까운 플레이어 및 발사체 - 플레이어와 멀리 떨어져 있는 게임 개체에 대한 정보를 전송할 필요가 없습니다!

3. 서버의 게임 오브젝트

우리 게임에서 발사체와 플레이어는 실제로 매우 유사합니다. 추상적이고 둥글며 움직일 수 있는 게임 개체입니다. 플레이어와 발사체 간의 이러한 유사성을 활용하기 위해 기본 클래스를 구현하는 것부터 시작하겠습니다. Object:

object.js

class Object {
  constructor(id, x, y, dir, speed) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.direction = dir;
    this.speed = speed;
  }

  update(dt) {
    this.x += dt * this.speed * Math.sin(this.direction);
    this.y -= dt * this.speed * Math.cos(this.direction);
  }

  distanceTo(object) {
    const dx = this.x - object.x;
    const dy = this.y - object.y;
    return Math.sqrt(dx * dx + dy * dy);
  }

  setDirection(dir) {
    this.direction = dir;
  }

  serializeForUpdate() {
    return {
      id: this.id,
      x: this.x,
      y: this.y,
    };
  }
}

여기서는 복잡한 일이 없습니다. 이 클래스는 확장을 위한 좋은 앵커 포인트가 될 것입니다. 수업이 어떻게 되는지 보자 Bullet использует Object:

bullet.js

const shortid = require('shortid');
const ObjectClass = require('./object');
const Constants = require('../shared/constants');

class Bullet extends ObjectClass {
  constructor(parentID, x, y, dir) {
    super(shortid(), x, y, dir, Constants.BULLET_SPEED);
    this.parentID = parentID;
  }

  // Returns true if the bullet should be destroyed
  update(dt) {
    super.update(dt);
    return this.x < 0 || this.x > Constants.MAP_SIZE || this.y < 0 || this.y > Constants.MAP_SIZE;
  }
}

Реализация Bullet 매우 짧은! 우리는에 추가했습니다 Object 다음 확장자만:

• 패키지 사용 짧은 무작위 생성 id 발사체.
• 필드 추가 parentID이 발사체를 생성한 플레이어를 추적할 수 있습니다.
• 에 반환 값 추가 update(), 이는 true발사체가 경기장 밖에 있는 경우(지난 섹션에서 이에 대해 이야기한 것을 기억하십니까?).

로 이동하자 Player:

player.js

const ObjectClass = require('./object');
const Bullet = require('./bullet');
const Constants = require('../shared/constants');

class Player extends ObjectClass {
  constructor(id, username, x, y) {
    super(id, x, y, Math.random() * 2 * Math.PI, Constants.PLAYER_SPEED);
    this.username = username;
    this.hp = Constants.PLAYER_MAX_HP;
    this.fireCooldown = 0;
    this.score = 0;
  }

  // Returns a newly created bullet, or null.
  update(dt) {
    super.update(dt);

    // Update score
    this.score += dt * Constants.SCORE_PER_SECOND;

    // Make sure the player stays in bounds
    this.x = Math.max(0, Math.min(Constants.MAP_SIZE, this.x));
    this.y = Math.max(0, Math.min(Constants.MAP_SIZE, this.y));

    // Fire a bullet, if needed
    this.fireCooldown -= dt;
    if (this.fireCooldown <= 0) {
      this.fireCooldown += Constants.PLAYER_FIRE_COOLDOWN;
      return new Bullet(this.id, this.x, this.y, this.direction);
    }
    return null;
  }

  takeBulletDamage() {
    this.hp -= Constants.BULLET_DAMAGE;
  }

  onDealtDamage() {
    this.score += Constants.SCORE_BULLET_HIT;
  }

  serializeForUpdate() {
    return {
      ...(super.serializeForUpdate()),
      direction: this.direction,
      hp: this.hp,
    };
  }
}

플레이어는 발사체보다 더 복잡하므로 이 클래스에 몇 가지 필드를 더 저장해야 합니다. 그의 방법 update() 많은 작업을 수행합니다. 특히 남은 발사체가 없으면 새로 생성된 발사체를 반환합니다. fireCooldown (이전 섹션에서 이에 대해 이야기한 것을 기억하십니까?). 또한 방법을 확장합니다. serializeForUpdate(), 게임 업데이트에서 플레이어에 대한 추가 필드를 포함해야 하기 때문입니다.

베이스 클래스를 가지고 Object - 코드 반복을 피하기 위한 중요한 단계. 예를 들어, 수업이 없습니다. Object 모든 게임 개체는 동일한 구현을 가져야 합니다. distanceTo(), 여러 파일에 걸쳐 이러한 모든 구현을 복사하여 붙여넣는 것은 악몽이 될 것입니다. 이는 대규모 프로젝트에서 특히 중요합니다.확장 수가 많을 때 Object 수업이 늘어나고 있습니다.

4. 충돌 감지

우리에게 남은 유일한 것은 발사체가 플레이어를 때리는 시점을 인식하는 것입니다! 메소드에서 이 코드 조각을 기억하십시오. update() 클래스 Game:

game.js

const applyCollisions = require('./collisions');

class Game {
  // ...

  update() {
    // ...

    // Apply collisions, give players score for hitting bullets
    const destroyedBullets = applyCollisions(
      Object.values(this.players),
      this.bullets,
    );
    destroyedBullets.forEach(b => {
      if (this.players[b.parentID]) {
        this.players[b.parentID].onDealtDamage();
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !destroyedBullets.includes(bullet),
    );

    // ...
  }
}

방법을 구현해야 합니다. applyCollisions(), 플레이어를 때리는 모든 발사체를 반환합니다. 다행히도 그렇게 어렵지 않기 때문에

• 모든 충돌 객체는 충돌 감지를 구현하는 가장 간단한 모양인 원입니다.
• 우리는 이미 방법이 있습니다 distanceTo(), 클래스의 이전 섹션에서 구현했습니다. Object.

충돌 감지 구현은 다음과 같습니다.

충돌.js

const Constants = require('../shared/constants');

// Returns an array of bullets to be destroyed.
function applyCollisions(players, bullets) {
  const destroyedBullets = [];
  for (let i = 0; i < bullets.length; i++) {
    // Look for a player (who didn't create the bullet) to collide each bullet with.
    // As soon as we find one, break out of the loop to prevent double counting a bullet.
    for (let j = 0; j < players.length; j++) {
      const bullet = bullets[i];
      const player = players[j];
      if (
        bullet.parentID !== player.id &&
        player.distanceTo(bullet) <= Constants.PLAYER_RADIUS + Constants.BULLET_RADIUS
      ) {
        destroyedBullets.push(bullet);
        player.takeBulletDamage();
        break;
      }
    }
  }
  return destroyedBullets;
}

이 간단한 충돌 감지는 중심 사이의 거리가 반지름의 합보다 작으면 두 원이 충돌합니다.. 다음은 두 원의 중심 사이의 거리가 반지름의 합과 정확히 같은 경우입니다.

여기에서 고려해야 할 몇 가지 측면이 더 있습니다.

• 발사체는 발사체를 생성한 플레이어를 맞추면 안 됩니다. 이는 비교를 통해 달성할 수 있습니다. bullet.parentID с player.id.
• 발사체는 여러 플레이어가 동시에 충돌하는 제한된 경우에 한 번만 명중해야 합니다. 연산자를 사용하여 이 문제를 해결할 것입니다. break: 발사체와 충돌하는 플레이어가 발견되는 즉시 검색을 중지하고 다음 발사체로 이동합니다.

끝

그게 다야! .io 웹 게임을 만들기 위해 알아야 할 모든 것을 다루었습니다. 무엇 향후 계획? 나만의 .io 게임을 만드세요!

모든 샘플 코드는 오픈 소스이며 게시됩니다. 깃허브.

출처 : habr.com