«Руководство для начинающих» по Phaser 3
Я уверен, что большинство из нас (разработчиков) впервые задумались о создании игры в какой-то момент своей жизни. Что ж, woopty - doo! Последние пару дней я возился и разбирался с Phaser 3. И, кстати, Phaser 3 - это фреймворк, используемый для создания игр HTML5, если вам интересно. Любой, кто, давайте начнем ...
УСТАНОВКА
!!! → Нажмите здесь ← !!! для руководства Phaser по установке. Обязательно выполните шаги 2–5.
ПРИМЕЧАНИЕ. Убедитесь, что в HTML-файл добавлен последний скрипт cdn, если только вы не выполняете установку npm.
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
ИНИЦИАЛИЗАЦИЯ НОВОЙ ИГРЫ
Итак, Phaser.Game () является основным контроллером. Здесь вы определяете настройки игры. Он отвечает за анализ ваших конфигураций (config), создание средства визуализации, обработку диспетчера сцен и запуск игры.
# Phaser.Game-Documentation
Ваш объект config - это в основном настройки или фундамент, на котором вы строите свою игру. Есть много свойств (тип, ширина, высота и т. Д.), которые вы можете передать, в зависимости от того, что и как вы хотите, чтобы ваша игра выглядела и ощущалась.
→ type: - это средство визуализации, которое вы хотите использовать; такие как - ХОЛСТ | WEBGL | АВТО. Обычно лучше оставить его на АВТО, чтобы он мог выбрать рендерер за вас.
→ ширина / высота: ширина / высота игры в пикселях.
→ физика: объект, который принимает от 1 до 4 свойств. Первый - default, в котором указывается, какой физический движок вы хотите использовать при загрузке. Следующие три - это аркада, удар и материя, которые представляют собой просто движки, на которых работает фазер. # Аркада против удара против материи
# физика-конфигурация-документация
→ сцена: - это объект, который просто регистрирует сцены вашей игры через свойства и их значения (функции). По умолчанию вам доступны предварительная загрузка, создание и обновление. Какие первые два важны, и первая сцена всегда будет запускаться первой.
→ прозрачный: делает фон по умолчанию прозрачным, а не черным, если задано значение true.
Вы можете передать еще много других свойств, но это одни из самых распространенных. Ознакомьтесь с документацией ниже:
# GameConfig-Documentation
ПРЕДЗАГРУЗКА
Метод preload () в основном используется для загрузки ваших спрайтов, листов спрайтов, атласа, плитки, звука, файлов данных и т. Д. Он не отображает их, а только настраивает их для отображения. потом. Я знаю три способа загрузки спрайта.
#preload () - документация
- ОДИН СПРАЙТ →
this.load.image('sky', 'assets/skies/space3.png')this относится к объекту инициализации. приведенный выше фрагмент принимает 2 аргумента. ключ, по которому можно вызывать изображение, и filePath, указывающий, где находится изображение, как либо строка, либо массив.
# load.image () - документация - SPRITE SHEET →
this.load.spritesheet('bot', 'assets/robot.png', {frameWidth: 85, frameHeight: 130})spritesheet () принимает те же два аргумента; ключ & filePath вместе с frameConfig . FrameConfig - это объект, который определяет ширину и высоту рамки каждого спрайта внутри листа. Это похоже на обрезку спрайтов для создания отдельных изображений. Если вы укажете неправильные размеры или ваши спрайты не выровнены правильно, то спрайты после анимации не будут отображаться должным образом.
СОВЕТ → → (Вы можете попробовать использовать веб-сайт, например SPRITECOW, чтобы узнать размеры, или сделать это самостоятельно, проверив полную ширину и высоту листа и разделив их на количество отдельных спрайтов. )
# load.spritesheet () - документация - ATLAS →
this.load.atlas('mainmenu', 'assets/mainmenu.png', 'assets/mainmenu.json')atlas () также принимает ключ и filePath плюс jsonFile. JsonFile - это место, где расположены данные каждого отдельного спрайта, такие как: имя файла, размер, расположение кадра в координатах x и y и т. Д. Атлас полезен, когда у вас есть спрайты разных размеров, а также использует меньше памяти при загрузке игра.
# load.atlas () - документация
СОВЕТ → → (Вы можете конвертировать свои листы спрайтов или гифки в отдельные файлы и использовать такую программу, как TexturePacker или Shoebox для создания файла атласа JSON.)
СОЗДАЙТЕ
create () - это то место, где мы хотим инициализировать наши игровые объекты, персонажей, игроков, платформы, фоновое изображение / параллакс, настроить коллайдеры, гравитацию, анимацию, и т.п.
Порядок, в котором вы определяете свои спрайты / плитки, имеет значение! Если вы сначала определите своих персонажей или платформы, а затем свой фон, тогда ваше фоновое изображение будет перекрывать все остальное. Так что не забудьте сначала загрузить фон, если только вы не сделаете это через CSS.
Создание изображений / спрайтов
this.add.image(400, 300, 'sky'); → это просто создание базового изображения, обычно для статичных фонов, логотипов или декораций. Первые два параметра - это координаты x и y того места, где вы хотите разместить изображение. Для координаты x он начинается с 0; но чем больше вы увеличиваете число, тем правее он идет. Координата Y начинается с 0 в верхней части экрана, поэтому чем больше вы увеличиваете число, тем ниже вы позиционируете изображение. Последний параметр - это ключ элемента, который мы определили еще в нашей preload ().
# add.image () - documentation
this.physics.add.sprite(100, 350, 'bot', 0) → создает спрайт с координатами x и y, ключом, ранее определенным в preload (), и frame либо в виде строки файла изображения спрайта, который вы хотите использовать, либо в виде целого числа, если используется лист спрайтов. Объекты Sprite могут использоваться как статические или динамические (анимация). Свойство физика просто позволяет спрайту падать, в противном случае он просто остается в воздухе. Когда вы добавляете физику к объекту, вы получаете дополнительные функции, которые можно вызывать, такие как collider (), setBounce () и т. Д.
«# add.sprite ( )-документация"
Группы (с включенной физикой и обычные)
this.add.group() используется, когда вы хотите сгруппировать объекты, которые собираетесь использовать повторно.
# add.group () - документация
this.physics.add.group() в значительной степени делает любые объекты, в которые вы передаете, физическое тело.
# Physics.add.group () - documentation
