Назад Вперед

Часть 1. Создание структуры проекта и главных файлов.

Закончив с описанием мини-игры и того, что в ней должно быть, я приступаю к подготовке структуры проекта. Приверженец четкой иерархии создаваемых файлов и папок, чтобы все было на своих местах. Это не только внешнее выглядит красиво, но в дальнейшем, когда нужно возвращаться к доработке проекта, позволяет найти быстрее файлы, ресурсы или без опасения добавлять новые в сам проект.

Начну с создания папок. Первую папку с названием проекта создам в нужном месте через контекстное меню правой кнопкой мыши, сразу же открою ее в редакторе кода. Все остальное буду уже добавлять в нем.

Новая папка проекта

Мне понадобится папка для хранения созданной графики и звуковых файлов. Поэтому создаю папку assets, а в ней еще две папки — image и audio.

Папки для хранения ресурсов

Следующей идет папка с файлами, которые буду непосредственно писать сам в редакторе кода. Ее по традиции называют src. Внутри еще 2 папки: style — для файлов с разрешением .css, script — для всех файлов, написанных на JavaScript.

В самой папке script создам еще две папки: scene, где будут хранится скрипты всех сцен проекта, и game_object — для хранения скриптов игровых объектов.

Папки для скриптов и стилей

Отдельно в корне мне еще понадобится папка lib. В ней я буду хранить файл самого фреймворка phaser.js, скачанный с официального сайта последней версии. Сразу же его туда и перекину. По папкам на данный момент все.

Папка для хранения файла фреймворка

Теперь перехожу к созданию основных файлов, которые пригодятся при работе с проектом. В корне самого проекта — самый стандартный и уже несколько раз упомянутый в других материалах index.html. Сразу открыв его нажму ! и Enter, чтобы редактор записал обычный шаблон html-документа. Его редактировать буду позже.

Стартовая страница

Создаю в папке style — файл main.css, а папке scriptmain.js. Заморачиваться с названием их не стал для простого проекта. Зато понятно, что это главные файлы для стилей и скриптов.

Файлы для скрипта и стилей

Вернусь к файлу index.html. На данный момент мне необходимо подключить все созданные файлы и сам фреймворк. Начну со стилей. Под тегом title прописываю тег link с атрибутом пути расположения файла.

Файл index.html:


    ...
    <link rel="stylesheet" href="./src/style/main.css">
    ...
 

Теперь необходимо перед закрытием тега body подключить скрипт сначала фреймворка, а затем созданного файла main.js. Для этого файла также укажу еще один дополнительный атрибут type='module', так как это файл будет у меня местом сбора всех остальных скриптов, в которых будут расположены классы игровых сцен.

Файл index.html:


    ...
    <script src="./lib/phaser.js"></script>

    <script src="./src/script/main.js" type="module"></script>
    ...
 

Запуск локального сервера

Итак, проверю, чтобы все было правильно и что все файлы подключены. Запущу браузер с помощью плагина live Server и нажму F12 чтобы открыть в нем среду разработчика. Во вкладке Console можно посмотреть существуют ли какие ошибки или предупреждения.

Просмотр страницы в браузере

В данном материале я еще доделаю html-документ и пропишу основные стили, чтобы игра была расположена по центру экрана браузера.

В файле index.html в теге html заменю язык с en на ru. Так же пока удалю лишнее мета-теги, которые пока не нужны, а оставлю только тег с кодировкой и тег, который предназначен для мобильных браузеров. В title меняю название на PingPong.

В этом документе мне еще нужно создать место, где будет расположена сама игра. Для этого я создаю тег main и в нем вложенный тег section. Для тега section прописываю id='container'. По нему в настройках игры буду находить то самое место, где должна будет находиться игра.

Итоговый вариант документа

Чтобы окно игры было расположено по центру, мне нужно прописать несколько правил стилей в файле main.css. Указываю их для элемента с id #container. Ширина элемента 100%, расположение по центру, верхний и нижний отступ по 20 px, а боковые — auto.

Файл main.css:


    #container {
        width: 100%;
        text-align: center;
        margin: 20px auto;
    }
 

Чтобы проверить, что игра на самом деле будет расположена по центру, я захожу в файл main.js и прописываю основные настройки игры и создаю новый экземпляр класса игры (каждый параметр разбирал при рассмотрении фреймворка).

Файл main.js:


    const config = {
        type: Phaser.AUTO,
        parent: 'container',
        width: 600,
        height: 400
    };

var game = new Phaser.Game(config);
 

Теперь, если запустить браузер, то могу увидеть, что вверху экрана по центру расположен черный экран игры. Все подключено правильно. На этом подготовку заканчиваю, в следующем материале создам три основные класса для сцен и импортирую их в файл main.js.

Игровое окно по центру

Спасибо за внимание!

Назад Вперед