Советы по созданию игр с Phaser3 и NPM
Для большинства, если не для каждого программиста, это мечта — как-то поработать над созданием игры, поскольку все мы любим игры. Но, как и многие другие вещи, лучше использовать, чем делать.
Было несколько трудностей, с которыми я столкнулся при создании своей первой игры, и я хотел бы поделиться тем, что я узнал, поэтому, когда вы впервые пытаетесь использовать Phaser3 для создания игры, вы тратите не так много времени, как я, застрял и беспомощный.
Здесь я не буду описывать основы, так как уже есть много основных и полных пошаговых статей по созданию игр с помощью Phaser3, таких как Марио-стиль-платформер и этот pdf плюс его видеоуроки.
Я сосредоточусь только на некоторых деталях, с которыми я столкнулся, которые убили много времени для меня и могли бы сэкономить вам массу времени:
ИЗОБРАЖЕНИЕ Спрайты
Я хотел бы начать с основных проблем, с которыми я столкнулся при работе с изображениями, спрайтами изображений, инструментами для редактирования и созданием спрайтов изображений.
Во-первых, важны размеры изображений, и существует ограничение на спрайт изображения. Смотрите, если вы получите сообщение об ошибке, говорящее о том, что ваше изображение имеет неправильный размер или превышает ограничение по размеру, вам необходимо уменьшить его. Ограничение, которое я нашел для спрайта, составляет: 4000 пикселей, все, что выше, приведет к ошибке.
Другая похожая ошибка, которая появляется для изображений, возникает, когда вы не устанавливаете правильный frameHeight для изображения при загрузке спрайта. Она может быть ниже, но не больше исходной высоты изображения в пикселях.
Во-вторых, горизонтальное позиционирование многих изображений по отношению к установленному frameWidth при загрузке. Вы должны быть осторожны, если изображение спрайта не имеет одинаковой ширины между движением каждого изображения, вы не увидите изображение правильно.
Размер изображения + расстояние между ними должно быть одинаковым, если нет, то лучше разделить их и загрузить также отдельно.
И последнее: лучше всего, если изображения в спрайте не имеют пробелов или пустых пикселей внизу, чтобы изображение не выглядело так, как будто оно ходит по воздуху, или даже ошибка, которая произошла со мной, когда игрок перестал работать, он упал, потому что столкновение больше не обнаруживало игрока, потому что спрайт изменился, поскольку они были разной высоты, он всегда падал (вы можете увидеть эффект до на втором изображении кролика).
Это также было проблемой, с которой я столкнулся при создании земли, так как мне пришлось сделать все части отдельными физическими элементами из-за отсутствия знаний о хороших инструментах для создания плиток, и мне также пришлось редактировать плитки земли, чтобы физические размеры каждой соответствовали размеру. фактическое изображение и не нужно было возиться с конфигурацией физического размера в коде.
Теперь я расскажу и перечислю вам инструменты, которые я использовал для изображений.
Инструмент для создания изображений спрайтов:
И простое редактирование изображений, такое как изменение размера, изменение положения или незначительные изменения пикселей, можно хорошо выполнить в вашем локальном редакторе изображений, например, я использовал следующие 2:
Всегда любые сомнения относительно любого метода Phaser3 вы можете проверить на следующих 2 сайтах:
DOM-объекты
Что касается манипулирования объектами DOM, вы должны сначала определить следующие 2 строки в своем блоке или файле конфигурации:
Первая строка - установить родительский контейнер, к которому будут добавлены созданные элементы DOM, и это идентификатор элемента, это важно, потому что в зависимости от вашего дизайна вы можете создать холст где-то еще и, например, добавить ваши объекты DOM, где бы вы ни хотели. Следующая строка создает контейнер div с префиксными стилями, куда будут добавлены все созданные вами элементы DOM.
После этого следующая важная вещь, например, центрировать список текста для табло, изменять размер или форматировать текст из объекта DOM, как вы хотите, и чтобы эти изменения реагировали на холст, вам нужно:
- Чтобы отменить некоторые свойства преобразования, установленные Phaser
- Все, что вы добавляете, должно быть установлено с помощью !important, потому что Phaser устанавливает множество фиксированных свойств для созданного элемента div.
- Вы должны правильно настроить только что созданный div
- И последнее, но не менее важное: вы можете быстро центрировать свой контент или, в данном случае, ваш элемент ввода внутри div с кодом, подобным следующему:
В приведенном выше коде вы можете заметить 3 основные вещи:
- То, как мы нацеливаемся на div, это способ нацеливания на первый дочерний элемент определенного типа.
- Как для этих div, созданных Phaser, мы используем !important, чтобы переопределить любое значение, которое дал Phaser
- Что мы можем центрировать div и внутренние элементы, сделав их либо display: inline, либо position: relative
В этом контексте я использовал относительную позицию, чтобы позиция div перемещалась в соответствии с изменением размера родительского элемента для оперативности.
Я надеюсь, что эти советы помогут всем, кто хочет начать или начинает использовать Phaser3 для создания потрясающих творений. Это возможно, но это требует большого объема работы, но с правильными инструментами вы можете воплотить в жизнь любую мечту, цифровую или нет.
Это все еще не идеально, но вы можете просмотреть мое творение в репозиторий GitHub или по следующей активной ссылке. И если вам нужна дополнительная помощь, не стесняйтесь обращаться через среду, твиттер или любой другой источник из моего личного портфолио.
