יצירת משחק אינטרנט מרובה משתתפים .io

יצא ב-2015 אגר.יו הפך להיות האב של ז'אנר חדש משחקים .ioשגדלה בפופולריות מאז. אני אישית חוויתי את העלייה בפופולריות של משחקי .io: במהלך שלוש השנים האחרונות, קרה לי יצר ומכר שני משחקים מהז'אנר הזה..

למקרה שמעולם לא שמעתם על המשחקים האלה בעבר, אלו הם משחקי אינטרנט מרובי משתתפים בחינם שקל לשחק בהם (אין צורך בחשבון). בדרך כלל הם מתמודדים עם שחקנים יריבים רבים באותה זירה. משחקי io מפורסמים אחרים: Slither.io и Diep.io.

בפוסט זה נבדוק כיצד צור משחק .io מאפס. בשביל זה, רק ידע ב-Javascript יספיק: אתה צריך להבין דברים כמו תחביר ES6, מילת מפתח this и הבטחות. גם אם הידע שלך ב-Javascript אינו מושלם, אתה עדיין יכול להבין את רוב הפוסט.

דוגמה למשחק .io

לסיוע בלמידה, נפנה ל דוגמה למשחק .io. נסה לשחק בו!

המשחק די פשוט: אתה שולט בספינה בזירה שבה יש שחקנים אחרים. הספינה שלך יורה קליעים אוטומטית ואתה מנסה לפגוע בשחקנים אחרים תוך כדי הימנעות מהקליעים שלהם.

1. סקירה קצרה / מבנה הפרויקט

אני ממליץ להוריד קוד מקור משחק לדוגמה כדי שתוכל לעקוב אחרי.

הדוגמה משתמשת בדברים הבאים:

• אקספרס היא מסגרת האינטרנט הפופולרית ביותר של Node.js המנהלת את שרת האינטרנט של המשחק.
• socket.io - ספריית websocket להחלפת נתונים בין דפדפן לשרת.
• Webpack - מנהל מודול. אתה יכול לקרוא על למה להשתמש ב-Webpack. כאן.

כך נראה מבנה ספריות הפרויקט:

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

ציבורי /

הכל בתיקייה public/ יוגש באופן סטטי על ידי השרת. IN public/assets/ מכיל תמונות המשמשות את הפרויקט שלנו.

src /

כל קוד המקור נמצא בתיקייה src/. כותרות client/ и server/ לדבר בעד עצמם ו shared/ מכיל קובץ קבועים שמיובא הן על ידי הלקוח והן על ידי השרת.

2. הגדרות הרכבות/פרויקטים

כפי שהוזכר לעיל, אנו משתמשים במנהל המודול לבניית הפרויקט. Webpack. בואו נסתכל על תצורת Webpack שלנו:

webpack.common.js:

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

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

השורות הכי חשובות כאן הן:

• src/client/index.js הוא נקודת הכניסה של לקוח Javascript (JS). Webpack יתחיל מכאן ויחפש באופן רקורסיבי אחר קבצים מיובאים אחרים.
• הפלט JS של ה-Webpack build שלנו יהיה ממוקם בספרייה dist/. אני אקרא לקובץ הזה שלנו חבילת js.
• אנו משתמשים בבל, ובפרט התצורה @babel/preset-env להמרת קוד JS שלנו לדפדפנים ישנים יותר.
• אנו משתמשים בתוסף כדי לחלץ את כל ה-CSS אליו מתייחסים קבצי JS ולשלב אותם במקום אחד. אני אקרא לו שלנו חבילת css.

אולי שמת לב לשמות קבצים מוזרים של חבילות '[name].[contenthash].ext'. הם מכילים החלפות שמות קבצים חבילת אינטרנט: [name] יוחלף בשם של נקודת הקלט (במקרה שלנו, זה game), ו [contenthash] יוחלף ב-hash של תוכן הקובץ. אנחנו עושים את זה כדי מטב את הפרויקט עבור hashing - אתה יכול להגיד לדפדפנים לשמור את חבילות ה-JS שלנו ללא הגבלת זמן, בגלל אם חבילה משתנה, אז גם שם הקובץ שלה משתנה (שינויים contenthash). התוצאה הסופית תהיה שם קובץ התצוגה game.dbeee76e91a97d0c7207.js.

קובץ webpack.common.js הוא קובץ התצורה הבסיסי שאנו מייבאים לתצורות הפיתוח והפרויקט המוגמר. להלן תצורת פיתוח לדוגמה:

webpack.dev.js

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

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

לצורך יעילות, אנו משתמשים בתהליך הפיתוח webpack.dev.js, ועובר ל webpack.prod.jsכדי לייעל את גדלי החבילות בעת הפריסה לייצור.

הגדרה מקומית

אני ממליץ להתקין את הפרויקט על מחשב מקומי כדי שתוכל לבצע את השלבים המפורטים בפוסט זה. ההגדרה פשוטה: ראשית, המערכת חייבת להיות מותקנת צומת и NPM. הבא אתה צריך לעשות

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

ואתה מוכן ללכת! כדי להפעיל את שרת הפיתוח, פשוט הפעל

$ npm run develop

ועבור לדפדפן האינטרנט 3000. שרת הפיתוח יבנה מחדש באופן אוטומטי את חבילות ה-JS וה-CSS כשהקוד משתנה - פשוט רענן את העמוד כדי לראות את כל השינויים!

3. נקודות כניסה ללקוח

בוא נרד לקוד המשחק עצמו. קודם כל אנחנו צריכים דף index.html, בעת ביקור באתר, הדפדפן יטען אותו תחילה. הדף שלנו יהיה די פשוט:

index.html

משחק .io לדוגמה  לְשַׂחֵק

דוגמה זו של הקוד פושטה מעט לצורך הבהירות, ואני אעשה את אותו הדבר עם רבות מדוגמאות הפוסטים האחרות. תמיד ניתן לראות את הקוד המלא בכתובת GitHub.

יש לנו:

• רכיב קנבס HTML5 (<canvas>) שבו נשתמש לעיבוד המשחק.
• <link> כדי להוסיף את חבילת ה-CSS שלנו.
• <script> כדי להוסיף את חבילת ה-Javascript שלנו.
• תפריט ראשי עם שם משתמש <input> וכפתור ה-PLAY (<button>).

לאחר טעינת דף הבית, הדפדפן יתחיל להפעיל קוד Javascript, החל מקובץ JS של נקודת הכניסה: src/client/index.js.

index.js

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

import './css/main.css';

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

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

זה אולי נשמע מסובך, אבל לא קורה כאן הרבה:

1. ייבוא ​​מספר קבצי JS אחרים.
2. ייבוא ​​CSS (כך ש-Webpack יודעת לכלול אותם בחבילת ה-CSS שלנו).
3. הפעלה connect() ליצור חיבור עם השרת ולהפעיל downloadAssets() כדי להוריד תמונות הדרושות לעיבוד המשחק.
4. לאחר סיום שלב 3 התפריט הראשי מוצג (playMenu).
5. הגדרת המטפל ללחיצה על כפתור "PLAY". כאשר הכפתור נלחץ, הקוד מאתחל את המשחק ואומר לשרת שאנו מוכנים לשחק.

ה"בשר" העיקרי של ההיגיון של שרת-לקוח שלנו הוא באותם קבצים שיובאו על ידי הקובץ index.js. כעת נשקול את כולם לפי הסדר.

4. החלפת נתוני לקוחות

במשחק זה, אנו משתמשים בספרייה ידועה כדי לתקשר עם השרת socket.io. ל-Socket.io יש תמיכה מקורית WebSockets, אשר מתאימים היטב לתקשורת דו כיוונית: אנו יכולים לשלוח הודעות לשרת и השרת יכול לשלוח לנו הודעות באותו חיבור.

יהיה לנו קובץ אחד src/client/networking.jsמי ידאג כל תקשורת עם השרת:

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

קוד זה גם התקצר מעט לצורך הבהירות.

יש שלוש פעולות עיקריות בקובץ הזה:

• אנחנו מנסים להתחבר לשרת. connectedPromise מותר רק כאשר יצרנו חיבור.
• אם החיבור הצליח, אנו רושמים פונקציות התקשרות חוזרת (processGameUpdate() и onGameOver()) להודעות שאנו יכולים לקבל מהשרת.
• אנחנו מייצאים play() и updateDirection()כדי שקבצים אחרים יוכלו להשתמש בהם.

5. עיבוד לקוח

זה הזמן להציג את התמונה על המסך!

...אבל לפני שנוכל לעשות זאת, עלינו להוריד את כל התמונות (המשאבים) הדרושים לשם כך. בוא נכתוב מנהל משאבים:

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

ניהול משאבים לא כל כך קשה ליישום! הרעיון המרכזי הוא לאחסן חפץ assets, שיקשר את המפתח של שם הקובץ לערך האובייקט Image. כאשר המשאב נטען, אנו מאחסנים אותו באובייקט assets לגישה מהירה בעתיד. מתי כל משאב בודד יורשה להוריד (כלומר, כל משאבים), אנו מאפשרים downloadPromise.

לאחר הורדת המשאבים, תוכל להתחיל בעיבוד. כפי שנאמר קודם לכן, כדי לצייר על דף אינטרנט, אנו משתמשים HTML5 בד (<canvas>). המשחק שלנו די פשוט, אז אנחנו צריכים רק לצייר את הדברים הבאים:

1. Фон
2. ספינת שחקנים
3. שחקנים אחרים במשחק
4. פגזים

הנה הקטעים החשובים src/client/render.js, המציגים בדיוק את ארבעת הפריטים המפורטים למעלה:

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

קוד זה מקוצר גם לשם הבהירות.

render() הוא הפונקציה העיקרית של קובץ זה. startRendering() и stopRendering() לשלוט בהפעלת לולאת העיבוד ב-60 FPS.

יישומים קונקרטיים של פונקציות עוזרות עיבוד בודדות (למשל. renderBullet()) לא כל כך חשובים, אבל הנה דוגמה אחת פשוטה:

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

שימו לב שאנו משתמשים בשיטה getAsset(), שנראה בעבר ב asset.js!

אם אתה מעוניין ללמוד על עוזרי עיבוד אחרים, קרא את השאר. src/client/render.js.

6. קלט לקוח

הגיע הזמן לעשות משחק ניתן לשחק! ערכת הבקרה תהיה פשוטה מאוד: כדי לשנות את כיוון התנועה, אתה יכול להשתמש בעכבר (במחשב) או לגעת במסך (במכשיר נייד). כדי ליישם זאת, נירשם מאזינים לאירועים עבור אירועי עכבר ומגע.
ידאג לכל זה src/client/input.js:

input.js

import { updateDirection } from './networking';

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

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

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

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

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

onMouseInput() и onTouchInput() הם מאזיני אירועים שמתקשרים updateDirection() (מתוך networking.js) כאשר מתרחש אירוע קלט (לדוגמה, כאשר העכבר מוזז). updateDirection() מטפל בהעברת הודעות עם השרת, שמטפל באירוע הקלט ומעדכן את מצב המשחק בהתאם.

7. סטטוס לקוח

הקטע הזה הוא הקשה ביותר בחלק הראשון של הפוסט. אל תתייאש אם אתה לא מבין את זה בפעם הראשונה שאתה קורא את זה! אתה יכול אפילו לדלג עליו ולחזור אליו מאוחר יותר.

החלק האחרון בפאזל הדרוש להשלמת קוד הלקוח/שרת הוא היו. זוכרים את קטע הקוד מקטע עיבוד הלקוח?

render.js

import { getCurrentState } from './state';

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

  // Do the rendering
  // ...
}

getCurrentState() אמור להיות מסוגל לתת לנו את המצב הנוכחי של המשחק בלקוח בכל נקודת זמן מבוסס על עדכונים שהתקבלו מהשרת. הנה דוגמה לעדכון משחק שהשרת יכול לשלוח:

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

כל עדכון משחק מכיל חמישה שדות זהים:

• t: חותמת זמן של שרת המציינת מתי עדכון זה נוצר.
• me: מידע על הנגן שמקבל עדכון זה.
• אחרים: מערך מידע על שחקנים אחרים המשתתפים באותו משחק.
• כדורים: מערך מידע על קליעים במשחק.
• leaderboard: נתוני Leaderboard נוכחיים. בפוסט זה, לא נשקול אותם.

7.1 מצב לקוח נאיבי

יישום נאיבי getCurrentState() יכול רק להחזיר ישירות את הנתונים של עדכון המשחק האחרון שהתקבל.

naive-state.js

let lastGameUpdate = null;

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

export function getCurrentState() {
  return lastGameUpdate;
}

יפה וברור! אבל אם זה היה כל כך פשוט. אחת הסיבות שהיישום הזה בעייתי: זה מגביל את קצב פריימים לעיבוד לקצב השעון של השרת.

קצב פריימים: מספר פריימים (כלומר שיחות render()) לשנייה, או FPS. משחקים בדרך כלל שואפים להשיג לפחות 60 FPS.

סמן דירוג: התדירות שבה השרת שולח עדכוני משחק ללקוחות. לרוב הוא נמוך מקצב הפריימים. במשחק שלנו, השרת פועל בתדירות של 30 מחזורים בשנייה.

אם רק נעבד את העדכון האחרון של המשחק, אז ה-FPS למעשה לעולם לא יעלה על 30, כי לעולם לא נקבל יותר מ-30 עדכונים בשנייה מהשרת. גם אם נתקשר render() 60 פעמים בשנייה, אז מחצית מהשיחות האלה פשוט יציירו מחדש את אותו הדבר, ובעצם לא יעשו כלום. בעיה נוספת ביישום הנאיבי היא שזה מועדים לעיכובים. עם מהירות אינטרנט אידיאלית, הלקוח יקבל עדכון משחק בדיוק כל 33ms (30 לשנייה):

למרבה הצער, שום דבר אינו מושלם. תמונה מציאותית יותר תהיה:

היישום הנאיבי הוא למעשה המקרה הגרוע ביותר בכל הנוגע ל-latency. אם עדכון משחק מתקבל באיחור של 50ms, אז דוכני לקוחות תוספת של 50 אלפיות השנייה מכיוון שהיא עדיין מציגה את מצב המשחק מהעדכון הקודם. אתם יכולים לתאר לעצמכם כמה זה לא נוח לשחקן: בלימה שרירותית תגרום למשחק להרגיש קופצני ולא יציב.

7.2 מצב לקוח משופר

נבצע כמה שיפורים ביישום הנאיבי. ראשית, אנו משתמשים עיכוב בעיבוד למשך 100 אלפיות השנייה. זה אומר שהמצב ה"נוכחי" של הלקוח תמיד יפגר אחרי מצב המשחק בשרת ב-100ms. לדוגמה, אם השעה בשרת היא 150, אז הלקוח יציג את המצב שבו היה השרת באותו זמן 50:

זה נותן לנו מאגר של 100ms כדי לשרוד זמני עדכון בלתי צפויים של המשחק:

התמורה עבור זה תהיה קבועה פיגור קלט למשך 100 אלפיות השנייה. זוהי הקרבה קטנה למשחק חלק - רוב השחקנים (במיוחד שחקנים מזדמנים) אפילו לא ישימו לב לעיכוב הזה. הרבה יותר קל לאנשים להסתגל לזמן השהייה קבוע של 100ms מאשר לשחק עם חביון בלתי צפוי.

אנחנו יכולים גם להשתמש בטכניקה אחרת שנקראת חיזוי מצד הלקוח, שעושה עבודה טובה בהפחתת השהייה הנתפסת, אך לא יסוקר בפוסט הזה.

שיפור נוסף שאנו משתמשים בו הוא אינטרפולציה לינארית. עקב פיגור בעיבוד, בדרך כלל אנחנו מקדימים לפחות עדכון אחד מהזמן הנוכחי בלקוח. כשמתקשרים getCurrentState(), אנחנו יכולים לבצע אינטרפולציה לינארית בין עדכוני המשחק ממש לפני ואחרי השעה הנוכחית בלקוח:

זה פותר את בעיית קצב הפריימים: כעת נוכל להציג פריימים ייחודיים בכל קצב פריימים שנרצה!

7.3 יישום מצב לקוח משופר

דוגמה ליישום ב src/client/state.js משתמש גם ב-Rend lag וגם באינטרפולציה ליניארית, אבל לא לאורך זמן. בואו נשבור את הקוד לשני חלקים. הנה הראשון:

state.js חלק 1

const RENDER_DELAY = 100;

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

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

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

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

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

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

הצעד הראשון הוא להבין מה currentServerTime(). כפי שראינו קודם לכן, כל עדכון משחק כולל חותמת זמן של שרת. אנחנו רוצים להשתמש בהשהיית רינדור כדי להציג את התמונה 100ms מאחורי השרת, אבל לעולם לא נדע את השעה הנוכחית בשרת, כי אנחנו לא יכולים לדעת כמה זמן לקח עד שאף אחד מהעדכונים הגיע אלינו. האינטרנט אינו צפוי ומהירותו עשויה להשתנות מאוד!

כדי לעקוף את הבעיה הזו, אנחנו יכולים להשתמש בקירוב סביר: אנחנו להעמיד פנים שהעדכון הראשון הגיע מיד. אם זה היה נכון, אז היינו יודעים את זמן השרת ברגע המסוים הזה! אנו מאחסנים את חותמת הזמן של השרת firstServerTimestamp ולשמור על שלנו מקומי חותמת זמן (לקוח) באותו רגע ב gameStart.

הו חכה. זה לא אמור להיות זמן שרת = זמן לקוח? מדוע אנו מבחינים בין "חותמת זמן של שרת" ל"חותמת זמן של לקוח"? זו שאלה מצוינת! מסתבר שהם לא אותו דבר. Date.now() יחזיר חותמות זמן שונות בלקוח ובשרת, וזה תלוי בגורמים מקומיים למכונות אלו. לעולם אל תניח שחותמות הזמן יהיו זהות בכל המכונות.

עכשיו אנחנו מבינים מה עושה currentServerTime(): זה חוזר חותמת הזמן של השרת של זמן העיבוד הנוכחי. במילים אחרות, זה הזמן הנוכחי של השרת (firstServerTimestamp <+ (Date.now() - gameStart)) מינוס עיכוב בעיבוד (RENDER_DELAY).

עכשיו בואו נסתכל על איך אנחנו מטפלים בעדכוני משחקים. כאשר מתקבל משרת העדכונים, הוא נקרא processGameUpdate()ואנחנו שומרים את העדכון החדש במערך gameUpdates. לאחר מכן, כדי לבדוק את השימוש בזיכרון, אנו מסירים את כל העדכונים הישנים לפני כן עדכון בסיסכי אנחנו לא צריכים אותם יותר.

מהו "עדכון בסיסי"? זֶה את העדכון הראשון אנו מוצאים על ידי מעבר אחורה מהשעה הנוכחית של השרת. זוכרים את התרשים הזה?

עדכון המשחק ישירות משמאל ל-"Client Render Time" הוא עדכון הבסיס.

למה משמש עדכון הבסיס? למה אנחנו יכולים להוריד עדכונים לקו הבסיס? כדי להבין את זה, בואו Наконец-то לשקול את היישום getCurrentState():

state.js חלק 2

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

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

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

אנו מטפלים בשלושה מקרים:

1. base < 0 פירושו שאין עדכונים עד לזמן הרינדור הנוכחי (ראה יישום לעיל getBaseUpdate()). זה יכול לקרות ממש בתחילת המשחק עקב פיגור בעיבוד. במקרה זה, אנו משתמשים בעדכון האחרון שהתקבל.
2. base הוא העדכון האחרון שיש לנו. ייתכן שהסיבה לכך היא עיכוב ברשת או חיבור לקוי לאינטרנט. במקרה זה, אנו משתמשים גם בעדכון האחרון שיש לנו.
3. יש לנו עדכון גם לפני וגם אחרי זמן העיבוד הנוכחי, אז אנחנו יכולים אינטרפולציה!

כל מה שנשאר בפנים state.js הוא יישום של אינטרפולציה ליניארית שהיא מתמטיקה פשוטה (אך משעממת). אם אתה רוצה לחקור את זה בעצמך, אז פתח state.js על GitHub.

חלק 2. שרת אחורי

בחלק זה, נסקור את הקצה האחורי של Node.js ששולט שלנו דוגמה למשחק .io.

1. נקודת כניסה לשרת

כדי לנהל את שרת האינטרנט, נשתמש במסגרת אינטרנט פופולרית עבור Node.js שנקראת אקספרס. הוא יוגדר על ידי קובץ נקודת הכניסה לשרת שלנו src/server/server.js:

server.js חלק 1

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

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

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

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

זוכרים שבחלק הראשון דיברנו על Webpack? זה המקום שבו נשתמש בתצורות ה-Webpack שלנו. נשתמש בהם בשתי דרכים:

• להשתמש webpack-dev-middleware לבנות מחדש באופן אוטומטי את חבילות הפיתוח שלנו, או
• העבר תיקייה סטטית dist/, שלתוכו Webpack יכתוב את הקבצים שלנו לאחר בניית הייצור.

עוד משימה חשובה server.js זה להגדיר את השרת socket.ioשמתחבר רק לשרת האקספרס:

server.js חלק 2

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

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

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

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

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

לאחר יצירת חיבור socket.io בהצלחה לשרת, הגדרנו מטפלי אירועים עבור השקע החדש. מטפלי אירועים מטפלים בהודעות המתקבלות מלקוחות על ידי האצלה לאובייקט יחיד game:

server.js חלק 3

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

// ...

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

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

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

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

אנחנו יוצרים משחק .io, אז אנחנו צריכים רק עותק אחד Game ("משחק") - כל השחקנים משחקים באותה זירה! בחלק הבא נראה איך השיעור הזה עובד. Game.

2. שרתי משחקים

בכיתה Game מכיל את ההיגיון החשוב ביותר בצד השרת. יש לו שתי משימות עיקריות: ניהול שחקנים и הדמיית משחק.

נתחיל במשימה הראשונה, ניהול שחקנים.

game.js חלק 1

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

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

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

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

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

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

  // ...
}

במשחק זה נזהה את השחקנים לפי המגרש id שקע socket.io שלהם (אם אתה מתבלבל, חזור אל server.js). Socket.io עצמו מקצה לכל שקע ייחודי idאז אנחנו לא צריכים לדאוג בקשר לזה. אני אתקשר אליו מזהה שחקן.

עם זה בחשבון, בואו נחקור משתני מופע במחלקה Game:

• sockets הוא אובייקט שמקשר את מזהה הנגן לשקע המשויך לנגן. זה מאפשר לנו לגשת לשקעים לפי מזהי הנגן שלהם בזמן קבוע.
• players הוא אובייקט שמקשר את מזהה הנגן לקוד>אובייקט נגן

bullets הוא מערך של אובייקטים Bullet, שאין לו סדר מוגדר.
lastUpdateTime הוא חותמת הזמן של הפעם האחרונה שהמשחק עודכן. נראה כיצד נעשה בו שימוש בקרוב.
shouldSendUpdate הוא משתנה עזר. אנו גם נראה את השימוש בו בקרוב.
שיטות addPlayer(), removePlayer() и handleInput() אין צורך להסביר, הם משמשים server.js. אם אתה צריך לרענן את הזיכרון שלך, חזור קצת יותר גבוה.

שורה אחרונה constructor() מתחיל מחזור עדכון משחקים (בתדירות של 60 עדכונים/שניות):

game.js חלק 2

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

class Game {
  // ...

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

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

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

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

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

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

  // ...
}

שיטה update() מכיל אולי את החלק החשוב ביותר בהיגיון בצד השרת. הנה מה שהוא עושה, לפי הסדר:

1. מחשב כמה זמן dt חלף מאז האחרון update().
2. מרענן כל קליע ומשמיד אותם במידת הצורך. נראה את יישום הפונקציונליות הזו מאוחר יותר. לעת עתה, די לנו לדעת זאת bullet.update() החזרות trueאם יש להשמיד את הקליע (הוא יצא מהזירה).
3. מעדכן כל שחקן ומוליד קליע במידת הצורך. נראה גם את היישום הזה מאוחר יותר - player.update() יכול להחזיר חפץ Bullet.
4. בודק התנגשויות בין קליעים ושחקנים עם applyCollisions(), שמחזיר מערך קליעים שפוגע בשחקנים. עבור כל קליע שהוחזר, אנו מגדילים את הנקודות של השחקן שירה אותו (באמצעות player.onDealtDamage()) ולאחר מכן הסר את הקליע מהמערך bullets.
5. מודיע ומשמיד את כל השחקנים שנהרגו.
6. שולח עדכון משחק לכל השחקנים כל שנייה פעמים שבהן התקשרו update(). זה עוזר לנו לעקוב אחר משתנה העזר שהוזכר לעיל. shouldSendUpdate. כפי ש update() נקרא 60 פעמים/שניות, אנחנו שולחים עדכוני משחק 30 פעמים/שניות. לכן, תדר שעון שעון שרת הוא 30 שעונים לשנייה (דיברנו על קצבי שעון בחלק הראשון).

למה לשלוח עדכוני משחקים בלבד לאורך זמן ? כדי לשמור ערוץ. 30 עדכוני משחק בשנייה זה הרבה!

למה לא פשוט להתקשר update() 30 פעמים בשנייה? כדי לשפר את סימולציית המשחק. המכונה לעתים קרובות יותר update(), כך סימולציית המשחק תהיה מדויקת יותר. אבל אל תיסחף יותר מדי עם מספר האתגרים. update(), כי זו משימה יקרה מבחינה חישובית - 60 לשנייה זה מספיק.

שאר הכיתה Game מורכב משיטות עוזר המשמשות ב update():

game.js חלק 3

class Game {
  // ...

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

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

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

getLeaderboard() די פשוט - הוא ממיין את השחקנים לפי ניקוד, לוקח את חמשת הראשונים ומחזיר את שם המשתמש והניקוד עבור כל אחד מהם.

createUpdate() משמש ב- update() כדי ליצור עדכוני משחק שמופצים לשחקנים. המשימה העיקרית שלו היא לקרוא לשיטות serializeForUpdate()מיושם עבור כיתות Player и Bullet. שימו לב שהוא מעביר רק נתונים לכל שחקן על הקרוב ביותר שחקנים וקליעים - אין צורך להעביר מידע על חפצי משחק שנמצאים רחוק מהשחקן!

3. חפצי משחק בשרת

במשחק שלנו, קליעים ושחקנים למעשה דומים מאוד: הם אובייקטי משחק מופשטים, עגולים וניתנים להזזה. כדי לנצל את הדמיון הזה בין שחקנים לקליעים, בואו נתחיל ביישום מחלקת הבסיס Object:

object.js

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

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

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

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

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

אין כאן שום דבר מסובך. שיעור זה יהווה נקודת עיגון טובה עבור הרחבה. בוא נראה איך הכיתה Bullet использует Object:

bullet.js

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

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

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

Реализация Bullet קצר מאוד! הוספנו ל Object רק את ההרחבות הבאות:

• שימוש בחבילה קצריד לדור אקראי id קֶלַע.
• הוספת שדה parentIDכדי שתוכל לעקוב אחר השחקן שיצר את הקליע הזה.
• הוספת ערך החזרה ל update(), ששווה ל trueאם הקליע נמצא מחוץ לזירה (זוכרים שדיברנו על זה בסעיף האחרון?).

בואו נעבור ל Player:

player.js

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

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

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

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

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

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

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

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

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

שחקנים מורכבים יותר מקליעים, אז יש לאחסן עוד כמה שדות במחלקה זו. השיטה שלו update() עושה עבודה רבה, במיוחד, מחזיר את הקליע החדש שנוצר אם לא נשאר fireCooldown (זוכרים שדיברנו על זה בסעיף הקודם?). זה גם מרחיב את השיטה serializeForUpdate(), כי אנחנו צריכים לכלול שדות נוספים עבור השחקן בעדכון המשחק.

בעל כיתת בסיס Object - צעד חשוב להימנע מחזרה על קוד. למשל, אין שיעור Object לכל אובייקט משחק חייב להיות אותו יישום distanceTo(), והעתק-הדבק של כל ההטמעות הללו על פני מספר קבצים יהיה סיוט. זה הופך להיות חשוב במיוחד עבור פרויקטים גדולים.כאשר מספר מתרחב Object הכיתות גדלות.

4. זיהוי התנגשות

הדבר היחיד שנותר לנו הוא לזהות מתי הקליעים פוגעים בשחקנים! זכור את קטע הקוד הזה מהשיטה update() בכיתה Game:

game.js

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

class Game {
  // ...

  update() {
    // ...

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

    // ...
  }
}

אנחנו צריכים ליישם את השיטה applyCollisions(), שמחזיר את כל הקליעים שפוגעים בשחקנים. למרבה המזל, זה לא כל כך קשה לעשות כי

• כל העצמים המתנגשים הם עיגולים, שזו הצורה הפשוטה ביותר ליישום זיהוי התנגשות.
• יש לנו כבר שיטה distanceTo(), שיישמנו בסעיף הקודם בכיתה Object.

כך נראה היישום שלנו של זיהוי התנגשות:

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

זיהוי התנגשות פשוט זה מבוסס על העובדה ש שני מעגלים מתנגשים אם המרחק בין המרכזים שלהם קטן מסכום הרדיוסים שלהם. הנה המקרה שבו המרחק בין מרכזים של שני מעגלים שווה בדיוק לסכום הרדיוסים שלהם:

יש עוד כמה היבטים שכדאי לקחת בחשבון:

• אסור שהקליע יפגע בנגן שיצר אותו. ניתן להשיג זאת על ידי השוואה bullet.parentID с player.id.
• הקליע חייב לפגוע פעם אחת בלבד במקרה המגביל של התנגשות של מספר שחקנים בו זמנית. נפתור בעיה זו באמצעות המפעיל break: ברגע שהשחקן שמתנגש עם הקליע נמצא, אנחנו מפסיקים את החיפוש ועוברים לקליט הבא.

סוף

זה הכל! כיסינו את כל מה שאתה צריך לדעת כדי ליצור משחק אינטרנט .io. מה הלאה? בנה משחק .io משלך!

כל הקוד לדוגמה הוא קוד פתוח ומתפרסם ב- GitHub.

מקור: www.habr.com