Mängu loomine mitme mängijaga veebimäng žanris .io

Käivitati 2015. aastal Agar.io sai uue žanri mängude .io eellaseks, mille populaarsus on sellest ajast palju kasvanud. Olen kogenud .io mängude populaarsuse kasvu ise: viimase kolme aasta jooksul olen loomine ja müük kahest selle žanri mängust..

Kui te pole kunagi varem sellistest mängudest kuulnud: need on tasuta mitmikmängu veebimängud, kuhu on lihtne liituda (kasutajakonto pole vajalik). Tüüpiliselt toovad nad kokku palju vastaseid mängijaid ühel areenil. Teised tuntud .io žanri mängud: Slither.io ja Diep.io.

Selles postituses uurime, kuidas nullist luua .io mängu. Selleks on vaja vaid Javascripti teadmist: peate mõistma selliseid asju nagu süntaks ES6, märksõna this ja Promises. Isegi kui te ei valda Javascripti täielikult, saate siiski enamikus postitusest hakkama.

Näide .io mängust

Koolituse toetamiseks viitame näidisele .io mängust. Proovige seda mängida!

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

1. Projekte ülevaade / struktuur

Soovitan laadida alla lähtekood näidismängust, et saaksite minuga järgida.

Näites kasutatakse järgmist:

• Express on kõige populaarsem veebiraamistik Node.js jaoks, mis haldab mängu veebiserverit.
• socket.io on websocketteek, mis võimaldab andmete vahetamist brauseri ja serveri vahel.
• Webpack on moodulihaldur. Webpacki kasutamise põhjustest saate lugeda siit.

Nii näeb projekti katalooge struktuur välja:

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

public/

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

src/

Kogu lähtekood asub kaustas src/. Nimetused client/ ja server/ räägivad enda eest, ning shared/ sisaldab konstantsfaili, mida impordivad nii klient kui ka server.

2. Kogumid / projekti seaded

Nagu ülal 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 JavaScripti (JS) kliendi sisenemispunkt. Webpack alustab siit ja otsib rekursiivselt teisi imporditud faile.
• Meie Webpacki väljund-JS asub kaustas dist/. Ma nimetan seda faili meie JS paketiks.
• Me kasutame Babel, ja konkreetselt seadistust @babel/preset-env , et transpileerida meie JS kood vanematesse brauseritesse.
• Kasutame pluginat, mis ekstraktib kõik CSS-id, mida JS failid viitavad, ja ühendab need ühte kohta. Ma nimetan seda meie CSS paketiks.

Võisite märgata kummalisi failinimesid pakettide kohta '[name].[contenthash].ext'. Need to include file name placeholders Webpack: [name] will be replaced by the entry point name (in our case it's game), and [contenthash] will be replaced by the content hash of the file. We do this to optimize the project for hashing — allowing browsers to cache our JS bundles indefinitely because if the bundle changes, its file name changes as well (it changes contenthash). The resulting file name will look like game.dbeee76e91a97d0c7207.js.

File webpack.common.js — this is the basic configuration file that we import into the development and production configurations. Here, for example, is the development configuration:

webpack.dev.js

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

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

For efficiency, we use during development webpack.dev.js, and switches to webpack.prod.js, to optimize bundle sizes for production deployment.

Local setup

I recommend setting up the project on your local machine so you can follow the steps outlined in this post. The setup is simple: first, you need to have Sõlm ja NPMinstalled on your system. Next, run

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

ja olete valmis tööle! Arendusteenuse käivitamiseks piisab, kui täita

$ npm run develop

ja avada veebibrauseris localhost:3000. Arendusteenus koostab JS ja CSS paketid automaatselt uuesti, kui koodimuudatused on tehtud — lihtsalt uuendage lehte, et näha kõiki muudatusi!

3. Klientide sisenemispunktid

Alustame mängu koodist. Esiteks vajame lehte index.html, mille brauser laadib saidi külastamisel esimesena. Meie leht saab olema ü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 pisut lihtsustatud arusaadavuse huvides; sama teen ka paljude teiste postituse näidete puhul. Täielikku koodi saab alati vaadata Github.

Meil on:

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

Pärast esilehe laadimist hakkab brauseris käima Javascript-kood, alustades järgmise sissepääsufailiga: 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 toimub siin mitte nii palju toiminguid:

1. Mitme muu JS-faili importimine.
2. CSS-i importimine (et Webpack teaks, et tuleb need meie CSS-paketti lisada).
3. Käivita connect() serveriga ühenduse loomiseks ja mängu käivitamiseks. downloadAssets() mängu renderdamiseks vajalike piltide allalaadimiseks.
4. Muidugi, pärast 3. etapi lõpetamist kuvatakse peamenüü (playMenu).
5. Nuppu 'PLAY' vajutamise käitleja seadistamine. Nupule vajutamisel algatab kood mängu ja teavitab serverit, et oleme mängimiseks valmis.

Meie kliendi-serveri loogika peamine osa asub nendes failides, mis imporditi failist. index.js. Nüüd vaatame neid kõiki järjekorras.

4. Kliendi andmevahetus

Selles mängus serveriga suhtlemiseks kasutame hästi tuntud teeki socket.io. Socket.io-l on sisseehitatud tugi WebSockets, mis sobivad suurepäraselt kahepoolsesse suhtlemisse: saame serverile sõnumeid saata ja server saab meile sama ühenduse kaudu sõnumeid saata.

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(() => {
    // Registreeri tagasiside sisestused
    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 huvides samuti veidi lühendatud.

Selles failis toimub kolm peamist tegevust:

• Proovime serveriga ühendada. connectedPromise lahendatakse ainult siis, kui oleme ühenduse loonud.
• Kui ühendus on edukalt loodud, registreerime callback-funktsioonid (processGameUpdate() ja onGameOver()) serverilt saadud sõnumite jaoks.
• Ekspordime play() ja updateDirection(), et neid saaksid kasutada teised failid.

5. Kliendi renderdamine

On aeg kuvada ekraanile pilt!

…kuid enne seda peame alla laadima kõik pildid (ressursid), mis selleks vajalikud. 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 idee on säilitada objekt assets, mis seob faili nime võtme objekti väärtusega Image. Kui ressurss on alla laaditud, salvestame selle objekti assets kiireks hankimiseks tulevikus. Kui iga eraldi ressursi allalaadimine lubatakse (st ressursid on laetud), lubame kõik ressursid), me lubame downloadPromise.

Allala saadud ressursid, saab alustada renderdamist. Nagu varem öeldud, kasutame veebilehe joonistamiseks HTML5 Canvas (<canvas>). Meie mäng on üsna lihtne, seega piisab, kui joonistame vaid järgmised elemendid:

1. Taust
2. Mängija laev
3. Teised mängijad, kes on mängus
4. Kütted

Siin on olulised fragmendid src/client/render.js, mis joonistavad just nimelt ülaltoodud neli 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;

// Hangi kanva graafikakontekst
const canvas = document.getElementById('game-canvas');
const context = canvas.getContext('2d');

// Tee kanvas 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 kütted
  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 ka lühendatud selguse huvides.

render() — selle faili peamine funktsioon. startRendering() ja stopRendering() hallitsevad renderdamise tsükli aktiveerimist sagedusel 60 FPS.

Teatud renderdamise abifunktsioonide konkreetsed teostused (nt 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 oleme varem näinud asset.js!

Kui teid huvitab teiste renderdamise abifunktsioonide uurimine, lugege ülejäänud osa src/client/render.js.

6. Klientide sisend

On aeg muuta mäng mängitavaks! Kontrollisüsteem on väga lihtne: liikumissuuna muutmiseks saab kasutada hiirt (arvutis) või ekraani puudutamist (mobiilseadmest). Selle teostamiseks registreerime Event Listeners hiire ja puutetundlike sündmuste jaoks.
Kõigega 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, вызывающие updateDirection() (allikas networking.js) при совершении события ввода (например, при перемещении мыши). updateDirection() осуществляет связь с сервером, который обрабатывает событие ввода и соответствующим образом обновляет состояние игры.

7. Клиентское состояние

Этот раздел — самый сложный в первой части поста. Не расстраивайтесь, если не поймёте его с первого прочтения! Можете даже пропустить его и вернуться к нему позже.

Последний кусок пазла, который нужен для завершения клиент-серверного кода — это state. Помните фрагмент кода из раздела «Рендеринг клиента»?

render.js

import { getCurrentState } from './state';

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

  // Выполните рендеринг
  // ...
}

getCurrentState() peab olema suuteline andma meile mängu hetkeseisu kliendis igast ajast serverilt saadud värskenduste põhjal. Siin on näide mängu värskendusest, 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": "Player",
      "score": 3
    }
  ]
}

Iga mängu värskendus sisaldab viit sama välist:

• t: serveri ajamärk, mis tähistab selle värskenduse loomise aega.
• me: teave mängijast, kes selle värskenduse saab.
• others: teiste mängijate teabe massiiv, kes osalevad samas mängus.
• bullets: mängus toimuvate projektide teabe massiiv.
• leaderboard: tabeli hetkeseisu andmed. Selles postituses me neid arvesse ei võta.

7.1 Lihtne kliendi seisund

Lihtne rakendus getCurrentState() suudab ainult vahetult tagastada kõige värskema saadud mängu värskenduse andmed.

naive-state.js

let lastGameUpdate = null;

// Uuendatud mängu haldamine.
export function processGameUpdate(update) {
  lastGameUpdate = update;
}

export function getCurrentState() {
  return lastGameUpdate;
}

Kaunis ja arusaadav! Kuid kui vaid kõik oleks nii lihtne. Üks põhjus, miks selline teostus on probleemne: see piirab renderdamise kaadrisagedust serveri taktsagedusega.

Kaadrisagedus (Frame Rate): kaadrite arv (st kõnede render()) sekundis, või FPS. Mängudes püütakse tavaliselt saavutada vähemalt 60 FPS.

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 renderdame lihtsalt viimase mängu uuenduse, ei saa FPS põhimõtteliselt kunagi ületada 30, sest me ei saa serverilt kunagi rohkem kui 30 uuendust sekundis. Isegi kui kutsume render() 60 korda sekundis, siis pool neist kõnede lihtsalt joonistab sama uuesti, sisuliselt mitte midagi tehes. Veel üks naiivse teostuse probleem on see, et see on viivitustele tundlik. Kui Interneti kiirus on ideaalne, saab klient mängu värskenduse iga 33 ms järel (30 korda sekundis):

Kahjuks ei ole miski ideaalne. Realistlikum pilt on järgmine:

Naive rakendus on tegelikult halvim juhtum viivituste osas. Kui mängu värskendus tuleb 50 ms hilinemisega, siis kliendi viivitus on 50 ms täiendavalt, kuna ta renderdab endiselt mängu olekut eelmise värskenduse põhjal. Saate aru, kui ebamugav see mängijale on: juhuslike viivituste tõttu tundub mäng katkestusteta ja ebastabiilne.

7.2 Parandatud kliendi olek

Teeme naïvesse rakendusse mõned parandused. Esiteks kasutame renderdamise viivitust 100 ms. See tähendab, et kliendi „praegune” olek on alati 100 ms võrra mängu seisust serveris maha jäänud. Näiteks kui serveris aeg on 150, siis renderdatakse kliendis olek, mis oli serveris ajal 50:

See annab meile 100 ms puhvrina, et taluda ettearvamatut mängu värskenduste saamise aega:

Selle hinna eest on pidev sisendi viivitus (input lag) 100 ms-nä. See on väike ohverdus sujuva mängukogemuse nimel — enamik mängijaid (eriti juhuslikud) ei pane seda viivitust isegi tähele. Inimestel on palju lihtsam harjuda pideva 100 ms viivitusega kui mängida ettearvamatute viivitustega.

Saame kasutada ka teist tehnikat nimega „kliendipoolne prognoosimine“, mis aitab tõhusalt vähendada tajutavaid viivitusi, kuid seda ei käsitleta selles postituses.

Veel üks täiustamine, mida me kasutame, on lineaarne interpolatsioon. Renderdamise viivitusest tulenevalt oleme tavaliselt vähemalt ühe värskenduse võrra ajast ette. Kui getCurrentState()kutsutakse välja, saame teha lineaarset interpolatsiooni mängu värskenduste vahel, mis toimuvad otse enne ja pärast kliendi praegust aega:

See lahendab kaadrisageduse probleemi: nüüd saame renderdada unikaalseid kaadreid mistahes soovitud sagedusega!

7.3 Parandatud kliendi oleku rakendamine

Rakenduse näidis src/client/state.js kasutab nii renderdamise viivitust kui ka lineaarset interpolatsiooni, kuid see ei kesta kaua. 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);

  // Hoidke enne kehtiva serveri aega ainult üks mängu värskendus
  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 ei ole.
function getBaseUpdate() {
  const serverTime = currentServerTime();
  for (let i = gameUpdates.length - 1; i >= 0; i--) {
    if (gameUpdates[i].t <= serverTime) {
      return i;
    }
  }
  return -1;
}

Esiteks tuleb mõista, mida currentServerTime(). Nagu me varem nägime, sisaldab iga mängu värskendus serveri ajamärki. Soovime kasutada renderdamise viivitust, et kuvada pilti, mis jääb serverist 100 ms võrra maha, kuid me ei saa kunagi teada, mis on serveri praegune aeg, kuna me ei saa teada, kui kaua on võtnud endale iga värskenduse jõudmine meie juurde. Internet on ettearvamatu ning selle kiirus võib väga palju varieeruda!

Selle probleemi lahendamiseks saame kasutada mõistlikku lähendust: me teeme näo, et esimene värskendus saabus koheselt. Kui see oleks tõsi, teaksime serveri aega just sel hetkel! Salvestame serveri ajamärgi firstServerTimestamp ja salvestame meie kohaliku (kliendi) ajamärgi samal hetkel gameStart.

Oi, oota. Kas serveri aeg ei peaks olema sama, mis kliendi aeg? Miks eristame 'serveri ajamärki' ja 'kliendi ajamärki'? See on suurepärane küsimus! Selgub, et need ei ole samad. Date.now() tagastab erinevad ajamärgid kliendi ja serveri jaoks ning see sõltub nende masinate kohalikest teguritest. Ärge kunagi eeldage, et ajamärgid on kõigil masinatel samad.

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

Nüüd uurime, kuidas käsitleme mängu uuendusi. Serverilt uuenduste saamisel kutsutakse processGameUpdate(), ja salvestame uue uuenduse massiivi gameUpdates. Siis, et kontrollida mälu kasutamist, eemaldame kõik vanad uuendused kuni baasuudistus, sest nad ei ole meile enam vajalikud.

Mis on siis «põhivärskendus»? See on esimene värskendus, mille leiame, liikudes tagasi serveri praegusest ajast. Kas mäletate seda skeemi?

Värskendus, mis asub otse «Client Render Time» vasakul pool, on põhivärskendus.

Milleks kasutatakse põhivärskendust? Miks me saame kõrvaldada värskendused kuni põhini? Selle mõistmiseks 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),
    };
  }
}

Käsitleme kolme juhtumit:

1. base < 0 tähendab, et praeguse renderdamisaja jaoks ei ole värskendusi (vt ülaltoodud rakendus getBaseUpdate()). See võib juhtuda kohe mängu alguses renderdamise viivituse tõttu. Sellisel juhul kasutame kõige viimast saadud värskendust.
2. base on kõige viimane värskendus, mis meil on. See võib juhtuda võrgu viivituse või kehva Interneti-ühenduse tõttu. Sellisel juhul kasutame samuti kõige viimast värskendust, mis meil on.
3. Meil on värskendus nii enne kui ka pärast praegust renderdamise aega, seega on võimalik interpoleerida!

Kõik, mis on jäänud state.js — on lineaarse interpoleerimise rakendus, mis esindab lihtsat (kuid igavat) matemaatikat. Kui soovite seda ise uurida, avage state.js järgnevaga Github.

Osa 2. Tagaküljeteenus

Selles osas vaatame Node.js tagakäyttuuri, mis haldab meie näidet mängust .io.

1. Serveri sisenemispunkt

Veebiserveri haldamiseks kasutame populaarset Node.js veebiraamistiku, mida nimetatakse Express. Selle seadistamisega tegeleb 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');

// Loome Expressi serveri
const app = express();
app.use(express.static('public'));

if (process.env.NODE_ENV === 'development') {
  // Seadistame Webpacki arendamiseks
  const compiler = webpack(webpackConfig);
  app.use(webpackDevMiddleware(compiler));
} else {
  // Statistiliselt serveerime dist/ kausta tootmises
  app.use(express.static('dist'));
}

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

Pidage meeles, et esimeses osas rääkisime Webpackist? Just siin hakkame kasutama meie Webpacki konfiguratsioone. Rakendame neid kahel viisil:

• Kasutage webpack-dev-middleware meie arenduspakettide automaatseks uuesti kompileerimiseks, või
• Statistiliselt edastada kausta dist/, kuhu Webpack meie failid tootmisse kogumise järel kirjutab.

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 kuulab porti ${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 loomist serveriga seadistame sündmuste töötlejad uue socketi jaoks. Sündmuste töötlejad käsitlevad klientidelt saadud sõnumeid, delegeerides need singelton-objektile 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);
}

Loome .io žanri mängu, seega vajame ainult ühte eksemplari Mäng („Mäng“) – kõik mängijad mängivad ühel areenil! Järgmises osas vaatame, kuidas see klass toimib Mäng.

2. Serveri Mäng

Klass Mäng on sisaldab kõige olulisemat loogikat serveripoolses osas. Sellel 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;

    // Genereeri positsioon, kus see mängija alustab.
    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 soketi kaudu (kui olete segaduses, minge tagasi server.js). Socket.io määrab igale soketile unikaalse id, seega ei pea me selle pärast muretsema. Ma nimetan seda mängija ID-ks.

Seda meeles pidades uurime klassi Mäng:

• sockets — on objekt, mis seob mängija ID soketiga, mis on seotud mängijaga. See võimaldab meil pideva aja jooksul ligipääsu soketitele nende mängija ID-de järgi.
• mängijad — on objekt, mis seob mängija ID objekti code>Player.

bullets — on objektide massiiv. Bullet, millel ei ole kindlat järjekorda.
viimaneUuenduseAeg — on ajatemperatuur mängu viimase uuenduse hetkest. Peagi näeme, kuidas seda kasutatakse.
peabSaatmaUuenduse — on abimuutuja. Selle kasutust näeme samuti peagi.
Meetodid lisaMängija(), eemaldaMängija() ja käsitleSisend() ei vaja seletamist, neid kasutatakse. server.js. Kui vajate juhtimiseks mälu värskendamist, minge natuke kõrgemale.

Viimane rida konstruktor() käivitab uuenduse tsükli mängu (kiirusel 60 uuendust/s):

game.js, osa 2

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

class Game {
  // ...

  update() {
    // Arvuta möödunud aeg
    const now = Date.now();
    const dt = (now - this.lastUpdateTime) / 1000;
    this.lastUpdateTime = now;

    // Uuenda iga kuul
    const bulletsToRemove = [];
    this.bullets.forEach(bullet => {
      if (bullet.update(dt)) {
        // Hävita see kuul
        bulletsToRemove.push(bullet);
      }
    });
    this.bullets = this.bullets.filter(
      bullet => !bulletsToRemove.includes(bullet),
    );

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

    // Rakenda kokkupõrked, tühista mängijad, kui nad tabavad kuule
    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),
    );

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

    // Saada iga mängijale mängu uuendus 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() liikluslogi kõige olulisema osa serveri küljest. Järgnevalt loetleme kõik, mida see teeb:

1. Arvutab, kui kaua aega dt on möödunud viimasest update().
2. Uuendab igat mürsku ja hävitab need vajadusel. Selle funktsionaalsuse teostuseni jõuame hiljem. Praegu piisab, kui teame, et bullet.update() tagastab true, kui mürsk tuleb hävitada (see on väljunud areenist).
3. Uuendab iga mängijat ja loob vajadusel mürsu. Selle teostuse näeme samuti hiljem — player.update() võib tagastada objekti Bullet.
4. Kontrollib kokkupõrkeid mürskude ja mängijate vahel, kasutades applyCollisions(), mis tagastab mürskude massiivi, mis on mängijatesse tabanud. Iga tagastatud mürsu jaoks suurendame mängija punkte, kes selle lasi (kasutades player.onDealtDamage()), ja seejärel kustutame mürsu massiivist bullets.
5. Teavitab ja hävitab kõik surnud mängijad.
6. Saadab kõigile mängijatele mängu uuenduse iga teise korra, kui kutsutakse update(). See aitab meil jälgida eelpool mainitud abimuutujat peabSaatmaUuenduse. Kuna update() kutsutakse 60 korda/s, saadame mängu uuendusi 30 korda/s. Seega, taktsagedus serveri sagedus on 30 takti/s (oleme taktimugavausest rääkinud esimeses osas).

Miks saata mängu uuendusi ainult iga teise korra ? kanali kokkuhoiu nimel. 30 mängu uuendust sekundis on tõeliselt palju!

Miks mitte lihtsalt kutsuda update() 30 korda sekundis? Mängu simuleerimise parandamiseks. Mida sagedamini kutsutakse update(), seda täpsem on mängu simuleerimine. Kuid ei tasu liialdada kutsumiseks update(), kuna 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 järjestab mängijad punktide arvu järgi, võtab viis parimat ja tagastab igaühe kasutajanime ja skoori.

createUpdate() kasutatakse update() mängu värskenduste loomiseks, mis edastatakse mängijatele. Selle peamine ülesanne on kutsuda esile meetodeid serializeForUpdate(), mis on rakendatud klassidele Player ja Bullet. Pange tähele, et ta edastab igale mängijale andmed ainult lähedastes mängijatest ja projektidest – pole vajalik edastada teavet mänguobjektide kohta, mis on mängijast kaugel!

3. Mänguobjektid serveris

Meie mängus on projektid ja mängijad tegelikult väga sarnased: need on abstraktsed ümmargused liikuvad mänguobjektid. Selle sarnasuse ära kasutamiseks mängijate ja projektide vahel, alustame baasklassi rakendamisega 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 saab olema hea tugipunkt edasise arendamise jaoks. 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;
  }

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

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

• Paketi kasutamine shortid juhuslikuks genereerimiseks id kuul.
• Lisa väli parentID, et saaks jälgida mängijat, kes selle kuuli lõi.
• Tagastatava väärtuse lisamine update(), mis on võrdne true, kui kuuli asukoht on areenist väljas (mäletate, me rääkisime sellest eelmisel korral?).

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

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

Mängijad on keerulisemad kui kuulid, seetõttu peab see klass sisaldama veel mitmeid välju. Selle meetod update() teeb suuremat tööd, andes tagasi just loodud kuul, kui neid ei ole jäänud fireCooldown (mäletage, et me rääkisime sellest eelmises osas?). Samuti laiendab ta meetodit serializeForUpdate(), kuna meil on vaja mängu värskendusse lisada täiendavad väljad mängija jaoks.

Alusklassi olemasolu Object — oluline samm, mis aitab vältida koodi korduvust. Näiteks, ilma klassita Object peab iga mänguobjekt omama sama rakendust distanceTo(), ja kõigi nende rakenduste kopeerimise ja kleepimise sünkroniseerimine mitmes failis oleks õudusunenägu. See muutub eriti oluliseks suurtes projektides, kui laiendavate Object klasside arv kasvab.

4. Kokkupõrgete tuvastamine

Ainus, mis meil üle jääb - on tuvastada, kui projektid tabavad mängijaid! Meenutage seda koodilõiku meetodist update() klassist Mäng:

game.js

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

class Game {
  // ...

  update() {
    // ...

    // Rakenda kokkupõrked, anna mängijatele punkt, kui nad tabavad kuulidega
    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),
    );

    // ...
  }
}

Peame rakendama meetodi applyCollisions(), mis tagastab kõik kuulid, mis on mängijatesse tabanud. Õnneks ei ole see nii keeruline, sest

• Kõik kokkupõrked on ringid ja see on lihtsaim kuju, mida rakendamise jaoks tuvastada.
• Meil on juba meetod distanceTo(), mille me eelmisel jaotisel klassis rakendasime Object.

Siin on meie kokkupõrgete 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õrgete tuvastamine põhineb tõsiasjal, et kaks ringi põrkuvad, kui nende keskpunktide vahemaa on väiksem kui nende raadiuste summa.Siin on juhtum, kus kahe ringi keskpunktide vahemaa on täpselt nende raadiuste summa:

Siin tuleb tähelepanu pöörata ka mõnele aspektile:

• Küsimus ei tohi tabada mängijat, kes selle lootis. Seda saab saavutada, võrreldes bullet.parentID koos player.id.
• Küsimus peab tabama ainult kord, kui mitme mängijaga kokkupõrked esinevad. Selle ülesande lahendame break: kui mängija, kes tabas projektiili, on leitud, lõpetame otsimise ja liigume järgmise projektiili juurde.

Lõpp

Ja kõik! Oleme vaadanud kõike, mida peate teadma .io žanri veebimängu loomiseks. Mis edasi? Koge oma .io mängu!

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

Allikas: habr.com