Mitme kasutaja veebimängu loomine .io žanris

Ilmunud 2015. aastal Agar.io sai uue žanri alguseks mängude .io, mille populaarsus on alates sellest ajast tõusnud. Olen ise kogenud mängude .io populaarsuse kasvu: viimase kolme aasta jooksul olen loonud ja müünud kaks mängu sellest žanrist..

Kui te pole selliseid mänge kunagi varem kuulnud: need on tasuta mitmikmängud, kus on lihtne osaleda (konto loomine ei ole vajalik). Tüüpiliselt mängitakse mitmeid vastandlikke mängijaid ühel areenil. Teised tuntud mängud žanris .io: Slither.io ja Diep.io.

Selles postituses käsitleme, kuidas nullist luua .io mäng. Selleks vajate vaid Javascripti teadmisi: peate mõistma selliseid asju nagu süntaks ES6, võtmesõna this ja Promises. Isegi kui te ei tunne Javascripti täiuslikult, suudate siiski enamikust postitusest aru saada.

.io mängu näidis

Koolituse abil viitame me .io mängu näidisele. Proovige selle mängida!

Mäng on üsna lihtne: te juhtite laeva areenil, kus on teised mängijad. Teie laev tulistab automaatselt projekte ja te üritate tabada teisi mängijaid, samal ajal vältides nende progete.

1. Projekti ülevaade/struktuur

Soovitan alla laadida lähtekood mängu näidisele, et saaksite mind jälgida.

Näidis kasutab järgmist:

• Express — kõige populaarsem veebiraamistik Node.js jaoks, mis haldab mängu veebiserverit.
• socket.io — Websocketi teek, mis edastab andmeid brauseri ja serveri vahel.
• Webpack — moodulite haldur. Selle kohta, miks kasutada Webpacki, saate lugeda siin.

Näidisprojekt struktuur näeb välja selline:

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

public/

Kõik kaustas public/ edastatakse serveri poolt staatiliselt. Kaustas public/assets/ on meie projekti kasutatavad pildid.

src/

Kogu lähtekood asub kaustas src/. Nime client/ ja server/ räägib enda eest, ja shared/ sisaldab konstandifaili, mida imporditakse nii kliendi kui serveri poolt.

2. Kogumid/projekti seaded

Nagu eespool mainitud, kasutame projekti kogumiseks moodulihaldurit Webpack. Vaatame meie Webpacki konfiguratsiooni:

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

Siin on kõige olulisemad read:

• src/client/index.js — see on Javascript (JS) kliendi sisenemispunkt. Webpack alustab siit ja otsib rekurssiivselt teisi imporditud faile.
• Meie Webpack'i väljund- JS asub kaustas dist\/. Ma nimetan seda faili meie JS paketiks.
• Me kasutame Babel, ja eriti konfigureerimist @babel\/preset-env kliendi JS koodi transpileerimiseks vanade brauserite jaoks.
• Kasutame pluginat, et eraldada kõik CSS-failid, millele JS-failid viitavad, ja koguda need ühte kohta. Ma nimetaksin seda meie CSS paketiks.

Olete võib-olla märganud kummalisi pakettide failinimesid '[name].[contenthash].ext'. Need sisaldavad failinime asendusi Webpack: [name] asendatakse sisenemispunkti nimega (meie puhul on see game), ja [contenthash] asendatakse faili sisu hash'iga. Teeme seda, et optimeerida projekti hash'imiseks — saame käskida brauseritel meie JS pakette lõputult vahemällu salvestada, sest kui pakett muutub, muutub ka faili nimi (muutub contenthash). Valmis tulemus on faili nimi kujul game.dbeee76e91a97d0c7207.js.

Fail webpack.common.js — see on põhikonfiguratsioonifail, mille impordime arenduse ja valmisprojekti seadistustesse. Näiteks siin on arenduskonfiguratsioon:

webpack.dev.js

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

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

Tõhususe huvides kasutame arenduse protsessis webpack.dev.js, ja lülitub webpack.prod.js, et optimeerida pakettide suurusi tootmisversioonis.

Kohalik seadistus

Soovitan paigaldada projekti oma kohalikku masinasse, et saaksite järgida selles postituses loetletud etappe. Seadistus on lihtne: kõigepealt peavad süsteemis olema paigaldatud Node ja NPM. Seejärel tuleb käivitada

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

ja olete valmis tööle! Arendusserveri käivitamiseks piisab, kui teha

$ npm run develop

ja minna veebibrauseris aadressile localhost:3000. Arendusserver koostab JS ja CSS paketid automaatselt uuesti, kui koodi muudetakse — lihtsalt värskendage lehte, et näha kõiki muudatusi!

3. Kliendipunktid

Alustame mängu koodiga. Esiteks vajame lehte index.html, mille brauser laadib saidi külastamisel esimesena. Meie leht on üsna lihtne:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Näide .io mängust</title>
  <link type="text/css" rel="stylesheet" href="/game.bundle.css">
</head>
<body>
  <canvas id="game-canvas"></canvas>
  <script async src="/game.bundle.js"></script>
  <div id="play-menu" class="hidden">
    <input type="text" id="username-input" placeholder="Kasutajanimi" />
    <button id="play-button">MÄNGI</button>
  </div>
</body>
</html>

See koodinäide on natuke lihtsustatud arusaadavuse huvides, sarnaseid muudatusi teen ka paljude muude näidete puhul. Täielikku koodi saab alati vaadata aadressil Github.

Meil on:

• HTML5 Canvas element (<canvas>), mida kasutame mängu renderdamiseks.
• <link> CSS paketi lisamiseks.
• <script> Javascript paketi lisamiseks.
• Peamenüü koos kasutajanimega <input> ja nupuga „PLAY“ ().

Pärast kodulehe laadimist alustab brauser Javascript-koodi täitmist, alustades sissepääsu JS-failist: 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 = () => {
    // Mängi!
    play(usernameInput.value);
    playMenu.classList.add('hidden');
    initState();
    startCapturingInput();
    startRendering();
    setLeaderboardHidden(false);
  };
});

See võib tunduda keeruline, kuid tegelikult ei toimu siin mitte nii palju toiminguid:

1. Mõnede teiste JS-failide importimine.
2. CSS importimine (et Webpack teaks, et tuleb see meie CSS paketti lisada).
3. Käivitamine connect() serveriga ühenduse loomiseks ja käivitamiseks downloadAssets() mängu renderdamiseks vajalike piltide allalaadimiseks.
4. Pärast 3. etapi lõpetamist kuvatakse peamenüü (playMenu).
5. Seadistame „PLAY“ nupu klõpsamisürituse. Nupu vajutamisel käivitab kood mängu ja teatab serverile, et oleme mängimiseks valmis.

Meie kliendiserveri loogika peamine sisu asub nendes failides, mis imporditi faili index.js. Nüüd vaatame neid kõiki järjest.

4. Kliendi andmevahetus

Selles mängus suhtleme serveriga tuntud teegi kaudu socket.io. Socket.io-l on sisseehitatud tugi WebSockets, mis sobivad suurepäraselt kahepoolseks suhtlemiseks: saame saata sõnumeid serverile ja server võib saata meile sõnumeid sama ühenduse kaudu.

Meil on üks fail src/client/networking.js, mis tegeleb kõigi serveriga suhtlemisega:

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

See kood on arusaadavuse nimel ka pisut lühendatud.

Selles failis toimuvad kolm peamist tegevust:

• Proovime ühendust serveriga. connectedPromise lahendatakse alles siis, kui me oleme ühenduse sõlminud.
• Kui ühendus on õnnestunud, registreerime callback-funktsioonid (processGameUpdate() ja onGameOver()) sõnumite jaoks, mida me serverilt vastu saame.
• Ekspordime play() ja updateDirection(), et teised failid saaksid neid kasutada.

5. Klientide renderdamine

On aeg ekraanile pilt kuvada!

…aga enne, kui saame seda teha, peame alla laadima kõik vajalikud pildid (ressursid). Kirjutame ressursihalduri:

assets.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];

Ressursside haldamine ei ole nii keeruline! Peamine mõte on hoida objekti assets, mis seob failinime võtme objekti väärtusega Pilt. Kui ressurss on alla laaditud, salvestame selle objekti assets kiireks juurdepääsuks tulevikus. Kui iga üksiku ressursi allalaadimine on lubatud (st ressursid on alla laaditud), lubame kõik downloadPromise Ressursid alla laadides, saame minna renderdamise juurde. Nagu öeldud, kasutame veebilehe joonistamiseks.

HTML5 Canvas ). Meie mäng on üsna lihtne, seega piisab, kui joonistame vaid järgmise: (<canvas>). Наша игра довольно проста, поэтому нам достаточно отрисовывать только следующее:

1. Taust
2. Mängija laev
3. Teised mängijad, kes mängus viibivad
4. Kuulid

Siin on olulised osad src/client/render.js, mis kujutavad endast just neid nelja punkti:

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;

// Saame kangas graafika konteksti
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');

// Teeme kangast täisekraaniks
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

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

  // Joonista taust
  renderBackground(me.x, me.y);

  // Joonista kõik kuulid
  bullets.forEach(renderBullet.bind(null, me));

  // Joonista kõik mängijad
  renderPlayer(me, me);
  others.forEach(renderPlayer.bind(null, me));
}

// ... Abifunktsioonid siin välja jäetud

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

See kood on samuti lühendatud arusaadavuse huvides.

render() — selle faili peamine funktsioon. startRendering() ja stopRendering() haldad renderdus tsükli aktiveerimist 60 FPS sagedusega.

Konkreetsete abifunktsioonide rakendused (näiteks renderBullet()) ei ole nii olulised, kuid siin on üks lihtne näide:

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

Pange tähele, et kasutame meetodit getAsset(), mida me varem nägime asset.js!

Kui teid huvitab teiste renderdusabifunktsioonide uurimine, siis lugege järelejäänud osa src/client/render.js.

6. Kliendi sisend

On aeg muuta mäng mängitavaks! Juhtimis skeem on väga lihtne: liikumise suuna muutmiseks saab kasutada hiirt (arvutis) või ekraani puudutamist (mobiilseadmes). Selle rakendamiseks registreerime Event Listeners hiire ja puudutuse sündmuste jaoks.
Sellega tegeleb 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() ja onTouchInput() — on Event Listeners, mis kutsuvad updateDirection() (koopia networking.js) sisse kasutuse sündmuse toimumisel (näiteks hiire liigutamisel). updateDirection() tegeleb suhtluse loomisega serveriga, mis töötleb sisendi sündmusi ja uuendab mängu seisundit vastavalt.

7. Kliendi seisund

See jaotis on esimese osa kõige keerulisem. Ärge muretsege, kui te ei saa sellest esimesel lugemisel aru! Võite isegi selle vahele jätta ja tagasi tulla hiljem.

Viimane pusletükk, mis on vajalik kliendi-serveri koodi lõpetamiseks, on state. Kas mäletate koodifragmenti jaotises "Kliendi renderdamine"?

render.js

import { getCurrentState } from './state';

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

  // Teeme renderdamise
  // ...
}

getCurrentState() peab suutma anda meile mängu praeguse seisundi kliendis igaks hetkeks serverilt saadud uuenduste põhjal. Siin on näide mängu uuendusest, mida server võib saata:

{
  "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": "Mängija",
      "score": 3
    }
  ]
}

Iga mängu uuendus sisaldab viit sama välja:

• t: serveri ajatempleid, mis näitab, millal see uuendus loodi.
• me: info mängija kohta, kes selle uuenduse saab.
• others: massiiv teisi mängijaid puudutavat teavet, kes osalevad samas mängus.
• bullets: massiiv mängus olevate projektide kohta.
• leaderboard: praegused tabeli juhtide andmed. Me ei arvestata neid selles postituses.

7.1 Lihtne kliendi seisund

Lihtne teostus getCurrentState() saab lihtsalt otse tagastada kõige värskema saadud mängu uuenduse andmed.

naive-state.js

let lastGameUpdate = null;

// Käsitleme uut mängu uuendust.
export function processGameUpdate(update) {
  lastGameUpdate = update;
}

export function getCurrentState() {
  return lastGameUpdate;
}

Ilus ja arusaadav! Aga kui ainult kõik oleks nii lihtne. Üks põhjus, miks selline teostus on problemaatiline: see piirab renderdamise kaadrisagedust serveri taktsageduse kaudu.

Kaadrisagedus (Frame Rate): kaadrite (st kutsete render()) arv sekundis, ehk FPS. Mängudes püüeldakse tavaliselt 60 FPS saavutamise poole.

Taktsagedus (Tick Rate): sagedus, millega server saadab mängu uuendusi klientidele. Sageli on see madalam kui kaadrisagedus. Meie mängus töötab server 30 takti sekundis.

Kui me lihtsalt renderdame mängu viimast värskendust, siis FPS ei saa kunagi ületada 30, sellepärast et me ei saa serverilt kunagi rohkem kui 30 värskendust sekundis. Isegi kui me kutsume render() 60 korda sekundis, siis pool neist kutsumistest lihtsalt uuendab sama asja, tegelikult mitte midagi tegemata. Veel üks naiivse rakenduse probleem on see, et see on viivitustele avatud. Ideaalsete internetikiirusete korral saab klient mängu värskenduse täpselt iga 33 ms järel (30 korda sekundis):

Kahjuks ei ole miski ideaalne. Rohkem reaalne pilt oleks järgmine:

Naivne rakendus on praktiliselt halvima juhtumi näide viivituste osas. Kui mängu värskendus saabub 50 ms viivitusega, siis klient viibib täiendavad 50 ms, kuna ta renderdab ikkagi mängu seisundit eelmisest värskendusest. Kas saate ette kujutada, kui ebamugav see mängijale on: ettekirjutatud viivituste tõttu tundub mäng katkendlik ja ebastabiilne.

7.2 Parandatud kliendi seisund

Teeme naivse rakenduse suhtes mõned parendused. Esiteks, me kasutame renderdamise viivitust 100 ms. See tähendab, et kliendi "praegune" seisund jääb alati 100 ms võrra serveri mängu seisundist maha. Näiteks kui serveri ajal on 150, siis renderdatakse kliendis seisund, milles server viibis ajal 50:

See annab meile 100 ms puhvriga, mis võimaldab üle elada ettearvamatuid mängu värskenduste saamise aegu:

Selle tõttu on pidev sisendi viivitus (input lag) 100 ms. See on väike ohver sujuva mängukogemuse nimel — enamik mängijaid (eriti juhuslikud) ei märkagi seda viivitust. Inimestel on palju lihtsam harjuda püsiva 100 ms viivitusega, kui mängida ettearvamatute viivitustega.

Me saame kasutada ka teist tehnikat, mida nimetatakse "klientpoolne prognoosimine", mis loobus hästi tajutud viivituste vähendamisega, kuid seda postitust ei käsitleta.

Veel üks parendamine, mida me kasutame, on lineaarne interpolatsioon. Renderdamise viivituse tõttu oleme tavaliselt vähemalt ühe värskenduse võrra praegu ajast ees kliendis. Kui kutsutakse getCurrentState(), saame teha lineaarset interpolatsiooni. mängu värskenduste vahel otse enne ja pärast praegust aega kliendis:

See lahendab kaadrifrekventsiga seotud probleemi: nüüd saame renderdada ainulaadseid kaadreid mistahes soovitud sagedusel!

7.3 Parandatud kliendi oleku rakendamine

Rakendamise näide src/client/state.js kasutab nii renderdamise viivitust kui ka lineaarselt interpoleerimist, kuid mitte kauaks. Jagame koodi kaheks osaks. Siin on esimene:

state.js, osa 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);

  // Hoia ainult ühte mängu värskendust enne praegust serveri aega
  const base = getBaseUpdate();
  if (base > 0) {
    gameUpdates.splice(0, base);
  }
}

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

// Tagastab baasi värskenduse indeksi, esimese mängu värskenduse enne
// praegust serveri aega, või -1, kui pole saadaval.
function getBaseUpdate() {
  const serverTime = currentServerTime();
  for (let i = gameUpdates.length - 1; i >= 0; i--) {
    if (gameUpdates[i].t <= serverTime) {
      return i;
    }
  }
  return -1;
}

Esiteks peame aru saama, mida teeb currentServerTime(). Nagu me varem nägime, sisaldab iga mängu värskendus serveri ajatemplit. Soovime kasutada renderdamise viivitust, et renderdada pilti, mis on serverist 100 ms kaugusel, kuid me ei saa kunagi teada, mis on serveri praegune aeg, sest me ei tea, kui kaua on kulunud, et mis tahes värskendus meieni jõuaks. Internet on ettearvamatu ja selle kiirus võib väga suuresti varieeruda!

Selle probleemi vältimiseks võime kasutada mõistlikku lähendust: me teeskleme, et esimene värskendus saabus koheselt. Kui see oleks tõsi, siis me teaksime serveri aega just sel hetkel! Salvestame serveri ajatempli firstServerTimestamp ja salvestame meie kohaliku (kliendi) ajatempli samal hetkel gameStart.

Oi, oota. Kas serveri aeg ei peaks olema võrreldav kliendi ajaga? Miks me eristame "serveri ajatemplit" ja "kliendi ajatemplit"? See on suurepärane küsimus! Selgub, et need ei ole samad. Date.now() tagastab erinevaid ajatempleid kliendis ja serveris, ning see sõltub nende masinate lokaalsetest teguridest. Ärge kunagi eeldage, et ajatempli väärtused on kõikidel masinatel samad.

Nüüd mõistame, mida teeb currentServerTime(): see tagastab serveri ajatempli praegusel renderdamise ajal. Teisisõnu, see on serveri praegune aeg (firstServerTimestamp <+ (Date.now() - gameStart)) miinus renderdamise viivitus (RENDER_DELAY).

Nüüd vaatame, kuidas me mängu uuendusi töötleme. Serverilt uuenduse saamisel kutsume esile processGameUpdate(), ja salvestame uue uuenduse massiivi gameUpdates. Seejärel, et jälgida mälu kasutamist, kustutame kõik vanad uuendused kuni alusuuenduseni, kuna need pole meile enam vajalikud.

Mis on «alusuuendus»? See on esimene uuendus, mille leiame, liikudes tagasi serveri praegusest ajast. Kas mäletate seda skeemi?

Mängu uuendus, mis asub «Client Render Time» vasakul küljel, on alusuuendus.

Kuhu kasutatakse alusuuendust? Miks saame aluseks olevad uuendused kõrvale jätta? Selle arusaamiseks vaatame lõpuks rakendust getCurrentState():

state.js, osa 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),
    };
  }
}

Töötame kolme juhtumiga:

1. base < 0 tähendab, et enne praegust renderdamise aega ei ole uuendusi (vt eespool rakendust getBaseUpdate()). See võib juhtuda kohe mängu alguses renderdamise viivituse tõttu. Sellisel juhul kasutame viimast saadud uuendust.
2. base — see on viimane uuendus, mis meil on. See võib juhtuda ka võrgu viivituse või halva internetiühenduse tõttu. Sellisel juhul kasutame samuti viimast saadud uuendust.
3. Meil on uuendus nii enne kui ka pärast praegust renderdamise aega, seega on võimalik interpoleerida!

Kõik, mis jääb üle, on state.js – see on lineaarse interpoleerimise rakendus, mis on lihtne (aga igav) matemaatika. Kui soovite seda iseseisvalt uurida, avage state.js . Tundub, et Github.

Osa 2. Tagaplaani server

Selles osas vaatleme b2b-Node.js tagaplaani, mis haldab meie mängu .io näidet..

1. Serveri sisenemispunkt

Veebiserveri juhtimiseks kasutame populaarset Node.js veebiraamistiku nimega Express. Selle seadistuse teeb meie serveri sisenemispunkti fail src/server/server.js:

server.js, osa 1

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

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

if (process.env.NODE_ENV === 'development') {
  // Seadista Webpack arenduseks
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
} else {
  // Statiliselt serveeri dist\/ kaust tootmises
  app.use(express.static('dist'));
}

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

Kas mäletate, et esimeses osas rääkisime Webpackist? Just siin hakkame me kasutama meie Webpacki konfiguratsioone. Me rakendame neid kahel viisil:

• Kasutage webpack-dev-middleware arendustegevuse pakettide automaatseks taastootmiseks, või
• Statiliselt edastada kaust dist\/, kuhu Webpack kirjutab meie failid pärast tootmist.

Veel üks oluline ülesanne server.js on serveri seadistamine socket.io, mis lihtsalt ühendub Express serveriga:

server.js, osa 2

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

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

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

// Kuula socket.io ühendusi
io.on('connection', socket => {
  console.log('Mängija on ühendatud!', socket.id);

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

Pärast socket.io eduka ühenduse seadistamist serveriga seadistame me uue soketi jaoks sündmuste käsitlejad. Sündmuste käsitlejad töötlevad klientidelt saadud sõnumeid, delegeerides need objekti-sügismõjule game:

server.js, osa 3

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

// ...

// Seadista Mäng
const game = new Game();

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

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

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

Me loome mängu žanris .io, seetõttu vajame me ainult ühte eksemplari Mäng („Mäng“) – kõik mängijad mängivad ühel arenel! Järgmises osas vaatame, kuidas see klass töötab Mäng.

2. Mängu server

Klass Mäng sisaldab kõige olulisemat loogikat serveripoolselt. Tal on kaks peamist ülesannet: mängijate haldamine ja mängu simuleerimine.

Alustame esimesest ülesandest – mängijate haldamisest.

game.js, osa 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;

    // Генерируем позицию, с которой начнется этот игрок.
    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);
    }
  }

  // ...
}

Selles mängus identifitseerime mängijad nende id socket.io väljade kaudu (kui oled segaduses, vaata tagasi server.js). Socket.io määrab igale soketile ainulaadse id, seega ei pea me selle pärast muretsema. Ma nimetatakse seda mängija ID-ks.

Pidades seda meeles, uurime klassi Mäng:

• sockets — see on objekt, mis seob mängija ID soketiga, mis on seotud mängijaga. See võimaldab meil pidevalt juurde pääseda soketitele nende mängija ID-de kaudu.
• players — see on objekt, mis seob mängija ID mängija objekti

bullets — see on objekti massiiv Bullet, millel ei ole kindlat järjekorda.
lastUpdateTime — see on mängu viimase värskenduse ajatemple. Kohe näeme, kuidas seda kasutatakse.
shouldSendUpdate — see on abimuutuja. Selle kasutamine selgub peagi.
Meetodid addPlayer(), removePlayer() ja handleInput() ei vaja selgitamist, neid kasutatakse server.js. Kui sul on vaja mälu värskendada, vaata natuke ülespoole.

Viimane rida constructor() käivitab mängu värskenduse tsükli (60 värskendust/s): game.js, osa 2

game.js, часть 2

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

class Game {
  \/\/ ...

  update() {
    \/\/ Arvutame möödunud aja
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) \/ 1000;
    this.lastUpdateTime = now;

    \/\/ Uuendame iga kuuli
    const bulletsToRemove = [];
    this.bullets.forEach(bullet => {
      if (bullet.update(dt)) {
        \/\/ Hävitame selle kuuli
        bulletsToRemove.push(bullet);
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !bulletsToRemove.includes(bullet),
    );

    \/\/ Uuendame iga mängijat
    Object.keys(this.sockets).forEach(playerID => {
      const player = this.players[playerID];
      const newBullet = player.update(dt);
      if (newBullet) {
        this.bullets.push(newBullet);
      }
    });

    \/\/ Rakendame kokkupõrkeid, anname mängijatele punkte kuuli tabamise eest
    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),
    );

    \/\/ Kontrollime, kas mõni mängija on surnud
    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);
      }
    });

    \/\/ Saadame mängu värskenduse igale mängijale iga teise korra järel
    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;
    }
  }

  \/\/ ...
}

Meetod update() sisaldab tõenäoliselt kõige olulisemat osa serveri loogikast. Loetleme järjest kõik, mida ta teeb:

1. Arvutab, kui palju aega dt on möödunud viimase update().
2. Uuendab iga kuuli ja hävitab neid vajadusel. Selle funktsiooni teostust näeme hiljem. Praegu piisab, kui teada, et bullet.update() toob tagasi true, kui kuul peab olema hävitatud (ta on väljunud areenist).
3. Uuendab iga mängijat ja loob vajadusel kuuli. Seda teostust näeme ka hiljem - player.update() võib tagastada objekti Bullet.
4. Kontrollib kokkupõrkeid kuuli ja mängijate vahel kasutades applyCollisions(), mis tagastab massiivi kuule, mis tabasid mängijaid. Iga tagastatud kuuli jaoks suurendame mängija punkte, kes selle välja lõi (kasutades player.onDealtDamage()), ja seejärel eemaldame kuuli massiivist bullets.
5. Teavitab ja hävitab kõik surnud mängijad.
6. Saadab kõigile mängijatele mängu värskenduse iga teine kord, kui seda kutsutakse update(). See aitab meil jälgida ülalmainitud abimuutujat shouldSendUpdate. Kuna update() kutsutakse 60 korda/s, me saadame mängu uuendusi 30 korda/s. Seeläbi, kellafrekvents serveri kellafrekvents on 30 takti/s (olemme rääkinud kellafrekventsist esimeses osas).

Miks saata mängu uuendusi ainult iga teise korra ? Kanalite säästmiseks. 30 mängu uuendust sekundis on väga palju!

Miks siis lihtsalt mitte kutsuda update() 30 korda sekundis? Mängu simuleerimise parandamiseks. Mida sagedamini kutset tehakse, update(), seda täpsem on mängu simuleerimine. Kuid ei tasu liialdada kutsete arvuga, update()sest see on arvutuslikult kulukas ülesanne — 60 sekundis on täiesti piisav.

Klassi ülejäänud osa Mäng koosneb abimeetoditest, mida kasutatakse update():

game.js, osa 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)  b.distanceTo(player)  p.serializeForUpdate()),
      bullets: nearbyBullets.map(b => b.serializeForUpdate()),
      leaderboard,
    };
  }
}

getLeaderboard() on üsna lihtne — see sorteerib mängijad punktide järgi, võtab viis parimat ja tagastab igaühe jaoks kasutajanime ja skoori.

createUpdate() kasutatakse update() mängu uuenduste loomiseks, mis edastatakse mängijatele. Selle peamine ülesanne on kutsete tegemine meetoditele serializeForUpdate(), mis on rakendatud klassides Player ja Bullet. Pange tähele, et see edastab igale mängijale teavet ainult lähedalolevatest mängijatest ja mürskudest – pole vajadust edastada teavet mängu objektide kohta, mis asuvad mängijast kaugel!

3. Mängu objektid serveris

Meie mängus on mürskud ja mängijad tegelikult väga sarnased: need on abstraktsed ümmargused liikuvad mängu objektid. Kasutamaks seda sarnasust mängijate ja mürskude vahel, alustame põhiklassi rakendamisest 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,
    };
  }
}

Siin ei toimu midagi keerulist. See klass on hea lähtepunkt laienemiseks. Vaatame, kuidas klass Bullet kasutab 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;
  }

  // Tagastab true, kui kuul tuleks hävitada
  update(dt) {
    super.update(dt);
    return this.x  Constants.MAP_SIZE || this.y  Constants.MAP_SIZE;
  }
}

Rakendamine Bullet on väga lühike! Oleme lisanud Object ainult järgmised laiendused:

• Paketi kasutamine shortid juhuslikuks genereerimiseks id kuuli.
• Välja lisamine parentID, et saaksime jälgida mängijat, kes selle kuuli lõi.
• Tagastava väärtuse lisamine update(), mis on true, kui kuul on areenist väljas (mäletate, me rääkisime sellest eelmisel peatükil?).

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

  // Tagastab äsja loodud kuuli, või null.
  update(dt) {
    super.update(dt);

    // Uuendab skoori
    this.score += dt * Constants.SCORE_PER_SECOND;

    // Veenduge, et mängija jääb piiridesse
    this.x = Math.max(0, Math.min(Constants.MAP_SIZE, this.x));
    this.y = Math.max(0, Math.min(Constants.MAP_SIZE, this.y));

    // Tulista kuul, kui vajalik
    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,
    };
  }
}

Mängijad on keerulisemad kui kuulid, seega peab see klass talletama veel mõnda välja. Tema meetod update() teeb rohkem tööd, sealhulgas tagastab just loodud kuuli, kui enam ei ole fireCooldown mäletate, me rääkisime sellest eelmisel peatükil?). Samuti laiendab ta meetodit serializeForUpdate(), sest peame mängu uuendamiseks lisama mängija täiendavad välja.

Põhiklassi olemasolu Object on oluline samm, et vältida koodi kordamist. Näiteks ilma klassita Object peaks iga mänguobjekt omama sama rakendust distanceTo(), ja nende rakenduste kopeerimise sünkroniseerimine mitmes failis oleks õudusunenägu. See muutub eriti oluliseks suurtes projektides, kui laienemise Object klasside arv suureneb.

4. Kokkuvõrkimiste tuvastamine

Ainus asi, mis meile jääb, on tuvastada, millal mürsud tabavad mängijaid! Pea meeles seda koodijuppi meetodist update() klassist Mäng:

game.js

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

class Game {
  // ...

  update() {
    // ...

    // Rakenda kokkupõrkeid, anna mängijatele skoor mürsude tabamise eest
    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),
    );

    // ...
  }
}

Me peame rakendama meetodi applyCollisions(), mis tagastab kõik mürsud, mis tabavad mängijaid. Õnneks ei ole seda keeruline teostada, sest

• Kõik kokkupõrkavad objektid on ringid, mis on lihtsaimad rakendatavad kokkupõrke tuvastamise kujund.
• Meil on juba meetod distanceTo(), mille me eelmisel jaotisel rakendasime klassis Object.

Nii näeb välja meie kokkupõrke tuvastamise rakendus:

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

See lihtne kokkupõrke tuvastamine põhineb tõsiasjal, et kaks ringi põrkuvad, kui nende keskust vahemaa on väiksem kui nende raadiuste summa. Siin on juhtum, kui kahe ringi keskuste vahemaa on täpselt nende raadiuste summa:

Siin tuleb arvestada veel paari aspektiga:

• Mürsu ei tohi langeda see mängija, kes selle lõi. Seda saab saavutada, võrreldes bullet.parentID jot player.id.
• Mürsu peab tabama ainult üks kord, juhul kui mitme mängijaga toimub samaaegne kokkupõrge. Selle ülesande lahendame operaatori abil break: kui leidub mängija, kes põrkas mürsuga kokku, lõpetame otsingu ja liigume järgmise mürsu juurde.

Lõpp

Ja kõik! Oleme käsitlenud kõike, mida peab teadma veebimängu loomise kohta žanris .io. Mis edasi? Koguge oma .io mäng!

Kogu näidiskood on avatud lähtekoodiga ja saadaval aadressil Github.

Allikas: habr.com