Цель этой статьи — разработать простой шаблон проекта, который станет основой будущих игр. Итоговый код шаблона доступен на GitHub.

Видеоверсия

Пошаговое руководство на Udemy

• https://www.udemy.com/course/pixicourse/

Возможности шаблона:

• Создание и запуск приложения
• Загрузка и отображение ресурсов
• Управление сценами, состояниями, анимациями, звуком и экраном

Возьмём пустую структуру проекта из начальной ветки и изучим её.

1.1. Шаблон документа

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <style>
    body {
        background-color: #000;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
    canvas {
        position:absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
  </style>
  <body>
  </body>
</html>

1.2. Зависимости проекта

{
  "name": "match3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack/prod.js ",
    "start": "webpack-dev-server --config webpack/base.js --open"
  },
  "dependencies": {
    "gsap": "^3.10.4",
    "pixi.js": "^6.5.1"
  },
  "devDependencies": {
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3",
    "webpack-merge": "^5.8.0"
  }
}

• gsap для анимаций
• pixi для отрисовки
• webpack и babel для сборки

1.3. Структура проекта

• webpack/ — сценарии сборки
• src/scripts/system/ — общий системный код, одинаковый для всех игр
• src/scripts/game/ — код самой игры, уникальный для каждого проекта
• src/sounds/ — звуковые ресурсы
• src/sprites/ — изображения

1.4. Команды

Сначала установим зависимости из package.json

npm i

В блоке scripts файла package.json есть два способа запуска webpack: build и start.

npm start

Эта команда создаёт сборку для разработки и автоматически запускает проект в браузере через dev-server.

npm run build

Эта команда создаёт сборку для продакшена и сохраняет её файлы в папке dist/.

Папка создаётся автоматически и очищается при каждом запуске команды, поэтому не сохраняйте в ней свои файлы.