Vairāku spēlētāju .io tīmekļa spēles izveide

Izlaists 2015. gadā Agar.io kļuva par jauna žanra priekšteci .io spēleskura popularitāte kopš tā laika ir kļuvusi arvien populārāka. Es personīgi esmu pieredzējis .io spēļu popularitātes pieaugumu: pēdējo trīs gadu laikā esmu piedzīvojis izveidoja un pārdeva divas šī žanra spēles..

Ja jūs nekad iepriekš neesat dzirdējis par šīm spēlēm, šīs ir bezmaksas vairāku spēlētāju tīmekļa spēles, kuras ir viegli spēlēt (nav nepieciešams konts). Viņi parasti saskaras ar daudziem pretinieku spēlētājiem vienā arēnā. Citas slavenas .io spēles: Slither.io и Diep.io.

Šajā rakstā mēs izpētīsim, kā izveidot .io spēli no nulles. Šim nolūkam pietiks tikai ar Javascript zināšanām: jums ir jāsaprot, piemēram, sintakse ES6, atslēgvārds this и solījumi. Pat ja jūsu zināšanas par Javascript nav ideālas, jūs joprojām varat saprast lielāko daļu ziņojuma.

.io spēles piemērs

Lai palīdzētu mācīties, mēs atsauksimies uz .io spēles piemērs. Mēģiniet to spēlēt!

Spēle ir pavisam vienkārša: tu kontrolē kuģi arēnā, kur ir citi spēlētāji. Jūsu kuģis automātiski izšauj šāviņus, un jūs mēģināt trāpīt citiem spēlētājiem, izvairoties no viņu šāviņiem.

1. Īss pārskats / projekta struktūra

ieteikt lejupielādēt avota kodu spēles piemērs, lai jūs varētu man sekot.

Piemērā tiek izmantots šāds:

• Kurjers ir vispopulārākais Node.js tīmekļa ietvars, kas pārvalda spēles tīmekļa serveri.
• ligzda.io - Websocket bibliotēka datu apmaiņai starp pārlūkprogrammu un serveri.
• Webpack - moduļa vadītājs. Varat lasīt par to, kāpēc izmantot Webpack. šeit.

Lūk, kā izskatās projekta direktoriju struktūra:

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

publisks/

Viss mapē public/ serveris iesniegs statiski. IN public/assets/ satur attēlus, ko izmanto mūsu projekts.

src /

Viss avota kods atrodas mapē src/. Nosaukumi client/ и server/ runā paši par sevi un shared/ satur konstantu failu, ko importē gan klients, gan serveris.

2. Montāžas/projekta iestatījumi

Kā minēts iepriekš, mēs izmantojam moduļa pārvaldnieku, lai izveidotu projektu. Webpack. Apskatīsim mūsu Webpack konfigurāciju:

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

Vissvarīgākās rindas šeit ir:

• src/client/index.js ir Javascript (JS) klienta ieejas punkts. Webpack sāksies no šejienes un rekursīvi meklēs citus importētos failus.
• Mūsu Webpack versijas izvades JS atradīsies direktorijā dist/. Es nosaukšu šo failu par mūsu js pakotni.
• Mēs izmantojam Kņadaun jo īpaši konfigurāciju @babel/preset-env lai pārsūtītu mūsu JS kodu vecākām pārlūkprogrammām.
• Mēs izmantojam spraudni, lai izvilktu visus CSS, uz kuriem atsaucas JS faili, un apvienotu tos vienuviet. Es viņu saukšu par mūsu css pakotne.

Iespējams, esat pamanījis dīvainus pakotņu failu nosaukumus '[name].[contenthash].ext'. Tie satur failu nosaukumu aizstāšana Tīmekļa pakotne: [name] tiks aizstāts ar ievades punkta nosaukumu (mūsu gadījumā šis game) un [contenthash] tiks aizstāts ar faila satura jauktu. Mēs to darām, lai optimizēt projektu jaukšanai - Jūs varat likt pārlūkprogrammām saglabāt mūsu JS pakotnes kešatmiņā uz nenoteiktu laiku, jo ja mainās pakotne, mainās arī tās faila nosaukums (izmaiņas contenthash). Gala rezultāts būs skata faila nosaukums game.dbeee76e91a97d0c7207.js.

fails webpack.common.js ir bāzes konfigurācijas fails, ko mēs importējam izstrādes un pabeigtā projekta konfigurācijās. Šeit ir izstrādes konfigurācijas piemērs:

webpack.dev.js

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

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

Efektivitātes labad mēs izmantojam izstrādes procesā webpack.dev.js, un pārslēdzas uz webpack.prod.jslai optimizētu iepakojuma izmērus, izvietojot to ražošanā.

Vietējais iestatījums

Es iesaku instalēt projektu vietējā datorā, lai jūs varētu veikt šajā ziņojumā norādītās darbības. Iestatīšana ir vienkārša: pirmkārt, sistēmai jābūt instalētai mezgls и NPM. Tālāk jums jādara

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

un tu esi gatavs doties! Lai palaistu izstrādes serveri, vienkārši palaidiet

$ npm run develop

un dodieties uz tīmekļa pārlūkprogrammu localhost: 3000. Izstrādes serveris automātiski pārbūvēs JS un CSS pakotnes, mainoties kodam — vienkārši atsvaidziniet lapu, lai redzētu visas izmaiņas!

3. Klientu ieejas punkti

Sāksim pie paša spēles koda. Vispirms mums ir vajadzīga lapa index.html, apmeklējot vietni, pārlūkprogramma to vispirms ielādēs. Mūsu lapa būs diezgan vienkārša:

index.html

io spēles piemērs  SPĒLĒT

Šis koda piemērs skaidrības labad ir nedaudz vienkāršots, un es darīšu to pašu ar daudziem citiem ziņu piemēriem. Pilnu kodu vienmēr var apskatīt vietnē GitHub.

Mums ir:

• HTML5 kanvas elements (<canvas>), ko izmantosim spēles renderēšanai.
• <link> lai pievienotu mūsu CSS pakotni.
• <script> lai pievienotu mūsu Javascript pakotni.
• Galvenā izvēlne ar lietotājvārdu <input> un pogu PLAY (<button>).

Pēc sākumlapas ielādes pārlūkprogramma sāks izpildīt Javascript kodu, sākot no ieejas punkta JS faila: 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);
  };
});

Tas var izklausīties sarežģīti, taču šeit nekas daudz nenotiek:

1. Vairāku citu JS failu importēšana.
2. CSS importēšana (tā Webpack zina, ka tās ir jāiekļauj mūsu CSS pakotnē).
3. Запуск connect() lai izveidotu savienojumu ar serveri un palaistu downloadAssets() lai lejupielādētu attēlus, kas nepieciešami spēles renderēšanai.
4. Pēc 3. posma pabeigšanas tiek parādīta galvenā izvēlne (playMenu).
5. Apdarinātāja iestatīšana pogas "PLAY" nospiešanai. Kad poga tiek nospiesta, kods inicializē spēli un paziņo serverim, ka esam gatavi spēlēt.

Mūsu klienta-servera loģikas galvenā "gaļa" ir failos, kurus importēja fails index.js. Tagad mēs tos visus izskatīsim kārtībā.

4. Klientu datu apmaiņa

Šajā spēlē mēs izmantojam labi zināmu bibliotēku, lai sazinātos ar serveri ligzda.io. Socket.io ir vietējais atbalsts WebSockets, kas ir labi piemēroti divvirzienu saziņai: mēs varam nosūtīt ziņojumus uz serveri и serveris var nosūtīt mums ziņojumus, izmantojot to pašu savienojumu.

Mums būs viens fails src/client/networking.jskurš parūpēsies visi saziņa ar serveri:

networking.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);
};

Šis kods arī ir nedaudz saīsināts skaidrības labad.

Šajā failā ir trīs galvenās darbības:

• Mēs cenšamies izveidot savienojumu ar serveri. connectedPromise atļauts tikai tad, kad esam izveidojuši savienojumu.
• Ja savienojums ir veiksmīgs, mēs reģistrējam atzvanīšanas funkcijas (processGameUpdate() и onGameOver()) ziņojumiem, ko varam saņemt no servera.
• Mēs eksportējam play() и updateDirection()lai citi faili tos varētu izmantot.

5. Klientu renderēšana

Ir pienācis laiks parādīt attēlu ekrānā!

…bet pirms mēs to varam izdarīt, mums ir jālejupielādē visi šim nolūkam nepieciešamie attēli (resursi). Uzrakstīsim resursu pārvaldnieku:

aktīvi.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];

Resursu pārvaldība nav tik grūti īstenojama! Galvenā ideja ir objekta uzglabāšana assets, kas saistīs faila nosaukuma atslēgu ar objekta vērtību Image. Kad resurss ir ielādēts, mēs to uzglabājam objektā assets ātrai piekļuvei nākotnē. Kad tiks atļauts lejupielādēt katru atsevišķu resursu (tas ir, viss resursi), mēs pieļaujam downloadPromise.

Pēc resursu lejupielādes varat sākt renderēšanu. Kā minēts iepriekš, lai zīmētu tīmekļa lapā, mēs izmantojam HTML5 kanvas (<canvas>). Mūsu spēle ir diezgan vienkārša, tāpēc mums ir jāuzzīmē tikai sekojošais:

1. fons
2. Spēlētāju kuģis
3. Citi spēlētāji spēlē
4. čaumalas

Šeit ir svarīgi fragmenti src/client/render.js, kas atveido tieši četrus iepriekš uzskaitītos vienumus:

render.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);
}

Skaidrības labad šis kods ir arī saīsināts.

render() ir šī faila galvenā funkcija. startRendering() и stopRendering() kontrolēt renderēšanas cilpas aktivizēšanu ar ātrumu 60 kadri/s.

Atsevišķu renderēšanas palīgu funkciju īpašas ieviešanas (piemēram renderBullet()) nav tik svarīgi, taču šeit ir viens vienkāršs piemērs:

render.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,
  );
}

Ņemiet vērā, ka mēs izmantojam metodi getAsset(), kas iepriekš bija redzams asset.js!

Ja vēlaties uzzināt par citiem renderēšanas palīgiem, izlasiet pārējo. src/client/render.js.

6. Klienta ievade

Ir pienācis laiks izveidot spēli spēlējama! Vadības shēma būs ļoti vienkārša: lai mainītu kustības virzienu, var izmantot peli (datorā) vai pieskarties ekrānam (mobilajā ierīcē). Lai to īstenotu, mēs reģistrēsimies Pasākumu klausītāji Mouse and Touch notikumiem.
Par to visu parūpēsies src/client/input.js:

ievade.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() ir notikumu klausītāji, kas zvana updateDirection() (no networking.js), kad notiek ievades notikums (piemēram, kad tiek pārvietota pele). updateDirection() apstrādā ziņojumapmaiņu ar serveri, kas apstrādā ievades notikumu un attiecīgi atjaunina spēles stāvokli.

7. Klienta statuss

Šī sadaļa ir visgrūtākā ziņojuma pirmajā daļā. Nezaudējiet drosmi, ja to nesaprotat pirmajā lasīšanas reizē! Varat pat to izlaist un atgriezties pie tā vēlāk.

Pēdējais mīklas gabals, kas nepieciešams, lai aizpildītu klienta/servera kodu, ir bija. Atcerieties koda fragmentu no sadaļas Klientu renderēšana?

render.js

import { getCurrentState } from './state';

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

  // Do the rendering
  // ...
}

getCurrentState() jāspēj sniegt mums informāciju par pašreizējo klienta spēles stāvokli jebkurā brīdī pamatojoties uz atjauninājumiem, kas saņemti no servera. Šeit ir piemērs spēles atjauninājumam, ko serveris var nosūtīt:

{
  "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
    }
  ]
}

Katrs spēles atjauninājums satur piecus identiskus laukus:

• t: servera laikspiedols, kas norāda, kad šis atjauninājums tika izveidots.
• me: informācija par atskaņotāju, kas saņem šo atjauninājumu.
• pārējie: informācijas klāsts par citiem spēlētājiem, kas piedalās tajā pašā spēlē.
• lodes: informācijas masīvs par spēles šāviņiem.
• megabanneris: pašreizējie uzvarētāju saraksta dati. Šajā amatā mēs tos neapskatīsim.

7.1. Naivs klienta stāvoklis

Naiva īstenošana getCurrentState() var tieši atgriezt tikai pēdējā saņemtā spēles atjauninājuma datus.

naivvalsts.js

let lastGameUpdate = null;

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

export function getCurrentState() {
  return lastGameUpdate;
}

Skaisti un skaidri! Bet ja vien tas būtu tik vienkārši. Viens no iemesliem, kāpēc šī ieviešana ir problemātiska: tas ierobežo renderēšanas kadru ātrumu līdz servera pulksteņa ātrumam.

Kadru ātrums: kadru skaits (t.i., zvanu render()) sekundē vai FPS. Spēles parasti cenšas sasniegt vismaz 60 FPS.

Atzīmes likme: biežums, kādā serveris klientiem nosūta spēļu atjauninājumus. Bieži vien tas ir mazāks par kadru ātrumu. Mūsu spēlē serveris darbojas ar frekvenci 30 cikli sekundē.

Ja mēs vienkārši atveidosim jaunāko spēles atjauninājumu, FPS būtībā nekad nepārsniegs 30, jo mēs nekad nesaņemam vairāk par 30 atjauninājumiem sekundē no servera. Pat ja mēs piezvanīsim render() 60 reizes sekundē, tad puse no šiem zvaniem vienkārši pārzīmēs vienu un to pašu, būtībā neko nedarot. Vēl viena naivās ieviešanas problēma ir tā nosliece uz kavēšanos. Ar ideālu interneta ātrumu klients saņems spēles atjauninājumu tieši ik pēc 33 ms (30 sekundē):

Diemžēl nekas nav ideāls. Reālistiskāks attēls būtu:

Naivā ieviešana ir praktiski sliktākais gadījums, kad runa ir par latentumu. Ja spēles atjauninājums tiek saņemts ar 50 ms aizkavi, tad klientu stendi papildu 50 ms, jo tas joprojām atveido spēles stāvokli no iepriekšējā atjauninājuma. Varat iedomāties, cik tas ir neērti spēlētājam: patvaļīga bremzēšana liks spēlei justies saraustītai un nestabilai.

7.2 Uzlabots klienta stāvoklis

Mēs veiksim dažus uzlabojumus naivā ieviešanā. Pirmkārt, mēs izmantojam renderēšanas kavēšanās uz 100 ms. Tas nozīmē, ka klienta "pašreizējais" stāvoklis vienmēr atpaliks no spēles stāvokļa serverī par 100 ms. Piemēram, ja laiks serverī ir 150, tad klients atveidos stāvokli, kādā serveris tajā laikā bija 50:

Tas dod mums 100 ms buferi, lai izdzīvotu neparedzamos spēļu atjaunināšanas laikos:

Izmaksa par to būs pastāvīga ievades aizkave uz 100 ms. Tas ir neliels upuris vienmērīgai spēlei - lielākā daļa spēlētāju (īpaši gadījuma spēlētāji) pat nepamanīs šo aizkavi. Cilvēkiem ir daudz vieglāk pielāgoties pastāvīgam 100 ms latentumam, nekā spēlēt ar neparedzamu latentumu.

Mēs varam izmantot arī citu tehniku, ko sauc klienta puses prognozēšana, kas labi samazina uztverto latentumu, taču tas netiks apskatīts šajā ziņojumā.

Vēl viens uzlabojums, ko mēs izmantojam, ir lineārā interpolācija. Renderēšanas aizkavēšanās dēļ mēs parasti esam vismaz vienu atjauninājumu priekšā klienta pašreizējam laikam. Kad sauc getCurrentState(), mēs varam izpildīt lineārā interpolācija starp spēles atjauninājumiem tieši pirms un pēc pašreizējā laika klientā:

Tas atrisina kadru ātruma problēmu: tagad mēs varam renderēt unikālus kadrus ar jebkuru vēlamo kadru nomaiņas ātrumu!

7.3. Uzlabota klienta stāvokļa ieviešana

Īstenošanas piemērs iekšā src/client/state.js izmanto gan renderēšanas nobīdi, gan lineāro interpolāciju, bet ne ilgi. Sadalīsim kodu divās daļās. Šeit ir pirmais:

state.js 1. daļa

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

Pirmais solis ir izdomāt, kas currentServerTime(). Kā redzējām iepriekš, katrā spēles atjauninājumā ir iekļauts servera laikspiedols. Mēs vēlamies izmantot renderēšanas latentumu, lai attēlu renderētu 100 ms aiz servera, taču mēs nekad neuzzināsim pašreizējo laiku serverī, jo mēs nevaram zināt, cik ilgs laiks pagāja, līdz kāds no atjauninājumiem nonāca pie mums. Internets ir neprognozējams, un tā ātrums var ievērojami atšķirties!

Lai apietu šo problēmu, mēs varam izmantot saprātīgu tuvinājumu: mēs izlikties, ka pirmais atjauninājums ieradās uzreiz. Ja tā būtu taisnība, tad mēs zinātu servera laiku šajā konkrētajā brīdī! Mēs saglabājam servera laikspiedolu firstServerTimestamp un paturiet mūsu vietējā (klienta) laikspiedols tajā pašā brīdī gameStart.

Pagaidi. Vai tam nevajadzētu būt servera laikam = klienta laikam? Kāpēc mēs atšķiram "servera laikspiedolu" un "klienta laikspiedolu"? Tas ir lielisks jautājums! Izrādās, ka tie nav viens un tas pats. Date.now() klientā un serverī atgriezīs dažādus laikspiedolus, un tas ir atkarīgs no faktoriem, kas ir lokāli šajās iekārtās. Nekad neuzņemieties, ka laikspiedoli visās iekārtās būs vienādi.

Tagad mēs saprotam, ko dara currentServerTime(): tas atgriežas pašreizējā renderēšanas laika servera laikspiedols. Citiem vārdiem sakot, šis ir servera pašreizējais laiks (firstServerTimestamp <+ (Date.now() - gameStart)) mīnus renderēšanas aizkave (RENDER_DELAY).

Tagad apskatīsim, kā mēs apstrādājam spēļu atjauninājumus. Saņemot no atjaunināšanas servera, tas tiek izsaukts processGameUpdate()un mēs saglabājam jauno atjauninājumu masīvā gameUpdates. Pēc tam, lai pārbaudītu atmiņas lietojumu, mēs noņemam visus vecos atjauninājumus bāzes atjauninājumsjo mums tās vairs nav vajadzīgas.

Kas ir "pamata atjauninājums"? Šis pirmais atjauninājums, ko atrodam, pārejot atpakaļ no servera pašreizējā laika. Atcerieties šo diagrammu?

Spēles atjauninājums tieši pa kreisi no "Client Render Time" ir pamata atjauninājums.

Kam tiek izmantots bāzes atjauninājums? Kāpēc mēs varam atlaist atjauninājumus uz sākotnējo līmeni? Lai to noskaidrotu, pieņemsim beidzot apsveriet ieviešanu getCurrentState():

state.js 2. daļa

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

Mēs izskatām trīs lietas:

1. base < 0 nozīmē, ka līdz pašreizējam renderēšanas laikam nav atjauninājumu (skatiet iepriekš ieviešanu getBaseUpdate()). Tas var notikt tieši spēles sākumā renderēšanas aizkavēšanās dēļ. Šajā gadījumā mēs izmantojam jaunāko saņemto atjauninājumu.
2. base ir jaunākais mūsu atjauninājums. Tas var būt tīkla aizkaves vai slikta interneta savienojuma dēļ. Šajā gadījumā mēs izmantojam arī jaunāko atjauninājumu.
3. Mums ir atjauninājums gan pirms, gan pēc pašreizējā renderēšanas laika, tāpēc mēs varam interpolēt!

Viss, kas palicis iekšā state.js ir lineārās interpolācijas ieviešana, kas ir vienkārša (bet garlaicīga) matemātika. Ja vēlaties to izpētīt pats, atveriet state.js par GitHub.

2. daļa. Aizmugursistēmas serveris

Šajā daļā mēs apskatīsim Node.js aizmugursistēmu, kas kontrolē mūsu .io spēles piemērs.

1. Server Entry Point

Lai pārvaldītu tīmekļa serveri, mēs izmantosim populāru tīmekļa ietvaru Node.js ar nosaukumu Kurjers. To konfigurēs mūsu servera ieejas punkta fails src/server/server.js:

server.js 1. daļa

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

Atcerieties, ka pirmajā daļā mēs apspriedām Webpack? Šeit mēs izmantosim mūsu Webpack konfigurācijas. Mēs tos izmantosim divos veidos:

• Lietot webpack-dev-middleware lai automātiski atjaunotu mūsu izstrādes pakotnes, vai
• statiski pārsūtīt mapi dist/, kurā Webpack ierakstīs mūsu failus pēc ražošanas versijas.

Vēl viens svarīgs uzdevums server.js ir iestatīt serveri ligzda.iokas vienkārši izveido savienojumu ar Express serveri:

server.js 2. daļa

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

Pēc veiksmīgas socket.io savienojuma izveides ar serveri mēs iestatījām notikumu apdarinātājus jaunajai ligzdai. Notikumu apstrādātāji apstrādā ziņojumus, kas saņemti no klientiem, deleģējot to vienam objektam game:

server.js 3. daļa

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

Mēs veidojam .io spēli, tāpēc mums ir nepieciešams tikai viens eksemplārs Game ("Spēle") - visi spēlētāji spēlē vienā arēnā! Nākamajā sadaļā mēs redzēsim, kā šī klase darbojas. Game.

2. Spēļu serveri

Klase Game satur vissvarīgāko loģiku servera pusē. Tam ir divi galvenie uzdevumi: spēlētāju vadība и spēles simulācija.

Sāksim ar pirmo uzdevumu, spēlētāju menedžmentu.

game.js 1. daļa

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

  // ...
}

Šajā spēlē mēs noteiksim spēlētājus pēc laukuma id viņu socket.io ligzda (ja apmulsīsit, atgriezieties pie server.js). Socket.io pati katrai ligzdai piešķir unikālu idtāpēc mums par to nav jāuztraucas. Es viņam piezvanīšu Spēlētāja ID.

Paturot to prātā, izpētīsim klases mainīgos Game:

• sockets ir objekts, kas saista spēlētāja ID ar ligzdu, kas ir saistīta ar atskaņotāju. Tas ļauj mums pastāvīgi piekļūt ligzdām pēc to atskaņotāja ID.
• players ir objekts, kas saista spēlētāja ID ar kodu>Spēlētāja objekts

bullets ir objektu masīvs Bullet, kam nav noteiktas kārtības.
lastUpdateTime ir pēdējās spēles atjaunināšanas laika zīmogs. Drīzumā redzēsim, kā tas tiks izmantots.
shouldSendUpdate ir papildu mainīgais. Drīzumā redzēsim arī tā izmantošanu.
Metodes addPlayer(), removePlayer() и handleInput() nav jāskaidro, tie tiek izmantoti server.js. Ja jums ir jāatsvaidzina atmiņa, atgriezieties nedaudz augstāk.

Pēdējā rinda constructor() sāk darboties atjaunināšanas cikls spēles (ar biežumu 60 atjauninājumi / s):

game.js 2. daļa

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

  // ...
}

Metode update() satur, iespējams, vissvarīgāko servera puses loģikas daļu. Lūk, ko tas dara secībā:

1. Aprēķina, cik ilgi dt pagājis kopš pēdējās update().
2. Atsvaidzina katru šāviņu un iznīcina, ja nepieciešams. Šīs funkcionalitātes ieviešanu redzēsim vēlāk. Pagaidām mums pietiek ar to zināt bullet.update() atgriežas trueja šāviņš būtu jāiznīcina (viņš izkāpa no arēnas).
3. Atjaunina katru spēlētāju un, ja nepieciešams, rada šāviņu. Šo ieviešanu redzēsim arī vēlāk - player.update() var atgriezt objektu Bullet.
4. Pārbauda, ​​vai nav sadursmes starp šāviņiem un spēlētājiem ar applyCollisions(), kas atgriež virkni lādiņu, kas trāpīja spēlētājiem. Par katru atgriezto šāviņu mēs palielinām tā spēlētāja punktu skaitu, kurš to izšāva (izmantojot player.onDealtDamage()) un pēc tam noņemiet šāviņu no bloka bullets.
5. Paziņo un iznīcina visus nogalinātos spēlētājus.
6. Nosūta spēles atjauninājumu visiem spēlētājiem katru sekundi reizes, kad zvanīja update(). Tas palīdz mums sekot līdzi iepriekš minētajam papildu mainīgajam. shouldSendUpdate. Kā update() zvana 60 reizes/s, spēļu atjauninājumus nosūtām 30 reizes/s. Tādējādi pulksteņa frekvence servera pulkstenis ir 30 pulksteņi/s (par takts frekvencēm runājām pirmajā daļā).

Kāpēc sūtīt tikai spēļu atjauninājumus cauri laikam ? Lai saglabātu kanālu. 30 spēļu atjauninājumi sekundē ir daudz!

Kāpēc ne tikai piezvanīt update() 30 reizes sekundē? Lai uzlabotu spēles simulāciju. Jo biežāk sauc update(), jo precīzāka būs spēles simulācija. Taču pārāk neaizraujieties ar daudzajiem izaicinājumiem. update(), jo tas ir skaitļošanas ziņā dārgs uzdevums - pietiek ar 60 sekundē.

Pārējā klase Game sastāv no palīgmetodēm, kas izmantotas update():

game.js 3. daļa

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() diezgan vienkārši — tas sašķiro spēlētājus pēc rezultāta, ieņem piecus labākos un katram atgriež lietotājvārdu un rezultātu.

createUpdate() izmantots gadā update() lai izveidotu spēļu atjauninājumus, kas tiek izplatīti spēlētājiem. Tās galvenais uzdevums ir izsaukt metodes serializeForUpdate()ieviesta klasēm Player и Bullet. Ņemiet vērā, ka tas katram spēlētājam nodod datus tikai par tuvākais spēlētāji un šāviņi - nav nepieciešams pārraidīt informāciju par spēles objektiem, kas atrodas tālu no spēlētāja!

3. Spēļu objekti uz servera

Mūsu spēlē šāviņi un spēlētāji patiesībā ir ļoti līdzīgi: tie ir abstrakti, apaļi, kustīgi spēles objekti. Lai izmantotu šo spēlētāju un šāviņu līdzību, sāksim ar bāzes klases ieviešanu Object:

objekts.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,
    };
  }
}

Šeit nekas sarežģīts nenotiek. Šī klase būs labs enkura punkts paplašinājumam. Redzēsim, kā klasē Bullet izmanto 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;
  }
}

Ieviešana Bullet ļoti īss! Mēs esam pievienojuši Object tikai šādi paplašinājumi:

• Izmantojot iepakojumu shortid nejaušai ģenerēšanai id šāviņš.
• Lauka pievienošana parentIDlai jūs varētu izsekot spēlētājam, kurš izveidoja šo šāviņu.
• Atgriešanas vērtības pievienošana update(), kas ir vienāds ar trueja šāviņš atrodas ārpus arēnas (atcerieties, ka mēs par to runājām pēdējā sadaļā?).

Pāriesim pie 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,
    };
  }
}

Spēlētāji ir sarežģītāki par šāviņiem, tāpēc šajā klasē ir jāuzglabā vēl daži lauki. Viņa metode update() paveic daudz darba, jo īpaši atdod jaunizveidoto šāviņu, ja tāda vairs nav fireCooldown (atcerieties, ka mēs par to runājām iepriekšējā sadaļā?). Tas arī paplašina metodi serializeForUpdate(), jo mums ir jāiekļauj papildu lauki spēlētājam spēles atjauninājumā.

Ir pamatklase Object - svarīgs solis, lai izvairītos no koda atkārtošanas. Piemēram, nav klases Object katram spēles objektam ir jābūt vienādai īstenošanai distanceTo(), un visu šo implementāciju kopēšana un ielīmēšana vairākos failos būtu murgs. Tas kļūst īpaši svarīgi lieliem projektiem.kad skaits paplašinās Object klases pieaug.

4. Sadursmes noteikšana

Mums atliek tikai atpazīt, kad šāviņi trāpīja spēlētājiem! Atcerieties šo koda daļu no metodes update() klasē Game:

spēle.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),
    );

    // ...
  }
}

Mums ir jāīsteno metode applyCollisions(), kas atgriež visus šāviņus, kas trāpīja spēlētājiem. Par laimi to nav tik grūti izdarīt, jo

• Visi sadursmes objekti ir apļi, kas ir visvienkāršākā forma sadursmes noteikšanai.
• Mums jau ir metode distanceTo(), ko ieviesām klasē iepriekšējā sadaļā Object.

Lūk, kā izskatās mūsu sadursmju noteikšanas ieviešana:

sadursmes.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;
}

Šī vienkāršā sadursmes noteikšana ir balstīta uz to, ka divi apļi saduras, ja attālums starp to centriem ir mazāks par to rādiusu summu. Šeit ir gadījums, kad attālums starp divu apļu centriem ir tieši vienāds ar to rādiusu summu:

Šeit ir jāņem vērā vēl daži aspekti:

• Šāviņš nedrīkst trāpīt spēlētājam, kurš to radījis. To var panākt, salīdzinot bullet.parentID с player.id.
• Šāviņam ir jātrāpa tikai vienu reizi, ja vienlaikus saduras vairāki spēlētāji. Mēs atrisināsim šo problēmu, izmantojot operatoru break: tiklīdz tiek atrasts spēlētājs, kurš saduras ar šāviņu, mēs pārtraucam meklēšanu un pārejam pie nākamā šāviņa.

beigas

Tas ir viss! Mēs esam apskatījuši visu, kas jums jāzina, lai izveidotu .io tīmekļa spēli. Ko tālāk? Izveidojiet savu .io spēli!

Viss parauga kods ir atvērtā pirmkoda un publicēts GitHub.

Avots: www.habr.com