Игру мне пришлось делать 2 раза. Первая, по ссылкам выше - сделана на "старой версии" джаваскрипт. И сам скрипт - был вписан в index.html страницу. По сути одна большая портянка.
И это немного удручало. В КодАкадемии мы и то, файлы со скриптом отдельно писали, не смешивая коней и людей, образно говоря.
Но на мое удивление был найден в том же источнике (на русском языке)- обновленный вариант, той же игры, но на "современном" джаваскрипт.
Создание вашей первой игры Phaser 3 на современном JavascriptДа, надо отметить, что раньше в джаваскрипт просто не было понятия о классах. А потом их добавили. И конечно, с классами можно проделывать те же штуки, что и с С#, по сути джаваскрипт приблизилась к ООП.
То есть все те деления и расчленения кода на фракции, с одной точкой "входа" - одним только файлом, прикрепленныым к index.html, а не целой связкой всего, что у вас наскрипчено.
В этом уроке прибегают к использованию упаковщика Vite.js, который вам и нужные плагины подгрузит, и потом общую сборку и ужатие проекта (оптимизацию) сделает.
Вообще то эта штука - сделана для фронт энд разработки. А не конкретно для Phaser3 или игроделия.
Он удобен разработчикам веб страниц и веб приложений.
То есть он мне пригодится и для основной темы, которую я изучаю - фронт энда.
Как я ни кляла некогда терминал - мои возмущения касались работы через терминал с Git и Github
Git и тошнота...- на практике - это довольно не удобная штука. Но с использованием npm все меняется (так мне удобнее, чем на голом bash с компом общаться).
npm - устанавливается с Node.js
npm (англ. Node Package Manager) — менеджер пакетов, входящий в состав Node.js
С ее помошью можно загружать любые версии того же Node.js, и различные дополнительные библиотеки.
И вот с ее помощью, устанавливается Vite.js
Ох, конечно поначалу я с ним намучалась.. Пока не нашла нормальное подробное (для нубов) объяснение, как по шагам подключить этот Vite.js. И как потом извлекать готовую сборку.
Удобство, которое сразу меня удивило, это то, что вызвав этот самый Vite, с помощью npm в командной строке терминала, прямо в программе разработки - VS Code -- можно выбрав язык, которым я буду пользоваться (джаваскрипт) - за секунду создать папку для веб разработки, шаблон, со всем необходимым для старта!
Там вам вся структура папок, с каким то примером простенькой страницы будет.
Все папочки и файлы организованы и уже взаимосвязаны между собой. И подключен простенький скрипт..
У вас сразу будет и стартовая страница - index.html , и стиль для страницы - styles.css, и уже вкрученный в стартовую страницу скрипт main.js
Но помимо того, в проекте появятся и другие папки.. облегчающие вам жизнь, как разработчику.
Vite создаст вам папочку с кучей библиотек и плагинов, которые вам могут понадобится, в которую можно проинсталлировать какой то плагин или библиотеку, если ее нет умолчанию...
Например тот же Phaser3 - по умолчанию его нет. Входим основную папку проекта, которую нам создал Vite
Парой слов в терминале npm phaser install - нам добавят в папку с плагинами так же и библиотеку Phaser, со всеми плюшками, которые предоставляют разработчики.
И да, с его помощью, запустив в терминале команду npm run start - вы вызовите лайф сервер, на порту 5000 или 8000... то есть вбив выданную вам строку или нажав прямо на ней (контроль клик) вам откроется веб страница, прямо с вашего компа, и она будет обновляться с каждым внсенным вами изменением. с каждой строчкой кода, которую вы внесете. Для разработчика это просто необходимо.
в терминале это выглядит так :
> phaser3-vite-template@0.0.0 start
> vite
VITE v3.2.7 ready in 101 ms
➜ Local: http://localhost:8000/
➜ Network: http://ххх.ххх.х.хх:8000/И не нужно пользоваться никакими иными расширениями или плагинами для вашей среды разработки. npm и терминал оказались довольно полезной и прямо таки потрясшей меня вещью..
Зачем все это надо? Ведь в конце концов можно ручками накачать неоходимое или закинуть нужную библиотеку.
И лайв сервер - можно как расширение установить на программу, в которой вы работаете..
Так вот на самом деле это нужно для больших проектов. Или проектов дробленых, состоящих из кучи файлов.
Когда закончив работу над проектом вы вызовите npm run build - вам создадут сборку вашего проекта - оптимизированную версию, и работающую быстрее, чем куча тех файлов, что вы написали в оригинале.
И из сборки убирается все лишнее, что в конечном проекте не используется или не подключено.
Из кучи файлов джаваскрипта вы получите один. Который хрен прочтешь.. так как он написан не для вас.. а для машины..
Поначалу у меня была проблема эту сборку запустить. Сам проект работает, а билд -сборка- только белый экран показывает..В джаваскрипт файле не возможно что то править, так как после сборки -там какая то нечитабельная хрень..
И только потом я нашла в чем дело.. При сборке, все ваши лдаваскрипт файлы компонуются в один. И! внимание! -- у него другое имя.
Программа прикрепляет файл в index.html в виде ссылки, удалив старую ссылку ( старого файла/файлов более не существует. Он останется у вас в папке проекта, но в сборке его нет.
И вот проблема состояла в том, что ссылку эту надо было немного подправить.. просто поставить впереди
./ перед именем файла.
А потом я скачала с репозитория по ссылке к уроку - (клонировала, тоже через терминал- git clone (enter)-
готовый шаблон, именно для Phaser3 + Vite.Там добавлены мелкие но приятные плюшки и всякие нужные подсказки к коду на фазере, которого обычно в среде разработки нет.
Наверно тем кто далек от всего этого - такие записи кажутся скучными.
Но те кто в теме - смогли бы понять мою радость. Когда разберешься с чем то новым, и оно оказывается удобным и полезным. А не страшным и запутанным, чем вначале.
Папки проекта (куча джаваскрипт сцен игры) в оригинале и в сборке (один джаваскрипт с непроизносимым именем и не читабельным для человека кодом)
Файлы оптимизированного проекта тут
https://github.com/mtapirina/phaser3_vite_buildИгрушка так же играется, как и ранее (сылки выше)
https://mtapirina.github.io/phaser3_vite_build/на картинках:
Оригинальный проект.
Оптимизированный проект.
Нечитабельный новый файл, результат слияния всех файлов джаваскрипт проекта в один.
