стараюсь
я тут мучаюсь над одной темой..
помнишь лисенка, что я собирала на юнити?
такого типа хочу что то собрать.
даже сам лисенок есть.
карту из плиток - тайлов пытаюсь собрать, от того же художника, папочки лисенка.
Только теперь жутковатый грот или пещера с лавой и всеми делами.
на юнити все делалось проще, картинку перетянул в сцену и вот тебе и карта. коллизии - столкновения настроил, покрутив пару рычажков - и все..
а тут все в ручную надо собирать.
Не смотря на то что шаблоны вставок есть, но вся настройка и столкновения прописываются в ручную.
чуть ли не номера плиток, с которым герой сталкивается..
Нет нормальных полноценных уроков, от начала до конца.
Сейчас нашла у англичанина какого то, серию о платформере как его собирать с Фазером 3 на джаваскрипт
..
Может с его помощью настрою все.
Пиксель Арт и Бодание за тайлы с Phaser 3
Из за отсутствия нормально собранного учебного материала по Фазеру 3, а так же из за не вполне понятных доков (на мой нубовский взгляд) - приходится копаться и изучать самой. Собирая обрывки информации поясняющей как работают те или иные коды.
Например в академке нам так и не объяснили про тайлы. Ну знаете такие карты из плиток, которые разработчики игр - режут на кусочки (квадратики, 16 на 16 пикселей или 32 на 32 и т.д) и потом собирают из них уровни игровые.
Если вы используете карту называемую тайловой - то игра жрет меньше рессурсов системы и весит меньше, потому что один и тот же кубик может быть использован в нарисованном уровне множество раз.
Как это выглядит наверно всем вам знакомо. Все играли в того же Марио..И помнят боксики - коробки, которые надо было разбивать..
Тайл сэт (набор) и Карта тайлов (созданный с помощью набора - игровой уровень)
По сути карта тайлов (плиток для Марио) ныне доступна в интернете. И можно видеть, что она собой представляет. Разрезав ее на кусочки, можно повторяя эти кусочки собрать всю игру и все ее уровни.
Ну конечно и не только Марио. Но это наиболее хорошо знакомый всем пример.
Та же игра с лисенком, что я собирала на Юнити - состояла из тех же плиток, сета тайлов.
Так что уроков вроде бы полно. На английском уж точно. Но большинство начав с Джава скрипт - вдруг в середине обучения вдруг резко перешли на TypeScript , вариация С шарпа. На джаваскрипте валяются официальные уроки, типа того зайца с размножающимися безконтрольно морковками, что я описывала выше.. Или тех уроков что мы делали на курсе в академке. Но написаны они по старинке либо в теле html документа, либо отдельным файлом. Длинной такой портянкой, которая не разбита на появившиеся в джаваскрипт классы.. то есть не удобно читаемые..
Есть отдельные статьи по вставке тайлового сета (плиточной карты ) в скрипт.
Как загрузить, как создать карту одним только кодом.
Но как только доходишь до определения столкновений (ну чтоб герой ваш стоял на плитках, а не пролетал сквозь пол) то тут и начинаются замоморочки.
Есть встроенные функции в Фазер, которые это должны казалось бы решать одним махом.
Но на деле - эта функция не только у меня не срабатывает.
Попалось объяснение, что типа это работает если код всей игры у вас на одной странице записан, в одном документе. А если разные классы, с одной точкой входа на html страницу (main.js), то функция может косячить.. да что там, просто НЕ работает.
setCollisionByProperty(" здесь свойство, обычно слово -
collides, установленное в программе работы с тайлами Tiled"
НЕ РАБОТАЕТ ХЕРНЯ! ТОЛЬКО ГОВОРЯТ ЕСЛИ ВСЯ ИГРА В ОДНОЙ СЦЕНЕ
После долгих ковыряний англоязычного интрернета и читая ответы на подобные моим вопросы, в так же просматривая примеры игр, которые загружала -- - стало понятно, что
прописывать столкновения квадратикам карты видимо придется ручками...
типа такого, где worldLayer - это леер, созданной карты уровня, где располагаются платформы стены и все то, через что герой не сможет проходить. То есть уровень физических "объектов "-- тайлов
(в скобкакх = индексы - уникальные номера тайлов в сете, от и до. От номера кубика который будет физическим и до номера по который ... а так как кубики встречаются в архаическом порядке, то отсюда такая портянка.. от - до.. потом тайлы которые не взаимодействуют с героем - не физические. Аотом снова от и до..
Разработчики и тут накосячили. Уверяют, и в документах написано, что и от и до ВКЛЮЧИТЕЛЬНО!. на деле, последний номер - опускается в некоторых случаях.. то есть Фазер их почему то исключает. Не все, но некоторые.. И тогда приходится прописывать последним номером не физический кубик..чтоб программа включила нужный мне.
От чего это зависит вообще не понятно.. Так как в большинстве случаев работает как указанов доках)
ПРИМЕР части КОДА исключений. Тайлов "физических"
worldLayer.setCollisionBetween(0, 3);
worldLayer.setCollisionBetween(7, 11);
worldLayer.setCollisionBetween(14, 17);
worldLayer.setCollisionBetween(21, 25);
worldLayer.setCollisionBetween(28, 31);
worldLayer.setCollisionBetween(36, 39);
worldLayer.setCollisionBetween(42, 43);
worldLayer.setCollisionBetween(47, 52);
worldLayer.setCollisionBetween(58, 59);
//worldLayer.setCollisionBetween(63,64);
worldLayer.setCollisionBetween(65, 66);
worldLayer.setCollisionBetween(70, 73);
worldLayer.setCollisionBetween(85, 86);
worldLayer.setCollisionBetween(90, 93);
Тайл сет (та заготовка откуда мы карту потом создаем, многократно используя кубики - можно представить как массив. По сути Фазер 3 - как его и видит.
А карту собранную из этих кубиков - как новый массив, собранный из повторяющихся значений первого массива.
Двумерные массивы (одно измерение ширина, другое - высота)..
Ну и в сете, где плитки существуют в одном и единственном экземпляре - у них есть оригинальные или уникальные индентификационные номера. Номер его порядка в массиве и некое число, которым тайл условно обозначается, когда попадает в программу создания карты.
Уровень собирается из кусочков. Тайлы-плитки имеют уникальные номера.
Так что очевидно, что кубикам имеющим физику - придется руками прописывать это свойство, указывая их идентификационные номера в сете (сет - это основа карты где плитки встречаются в единственном экземпляре. Карта - это то, что дизайнер уровня из этих плиток сета создал, повторяя оригинальные плитки-тайлы столько раз, сколькое ему нужно).
Помимо тайлов платформ и поверхностей - на уровне есть стены и декорации. С ними как раз все в порядке, герою не надо с ними взаимодействовать..
Но даже когда с физикой и тайлами платформ - я определилась, осталась не решенной еще одна задача==как сделать некоторые тайлы - физическими (герой на них натыкается и не проходит на сквозь, может стоять)--только с одной стороны?
например сверху. Запрыгнув - герой стоит. Но если упал, то может снова запрыгнуть и голова его не будет биться о платформу, а пройдет насквозь (как будто он перед платформой стоит на которую прыгает.
Короче одностононне настроенные столкновения - -вообще пока не понятно.
Дело в том что просто с загруженными платформами в виде картинок (как в том же зайце с морковками, выше )-- нет такой проблемы.
Там по сути одна платформа, просто многократно использованная. Иллюзия, что платформ много, хотя картинка загружена всего одна.
но и мира там нет никакого, поэтому создать 5 или 10 платформ, и выстроить лесенкой перебирая массив из этих созданных платформ - не так уж сложно.
но попробуйте сделать это с какртой, эдаким атласом, где может быть до тысячи уникальных картинок..и отобрать надо только нужные. А не присваивать значения всем картинкам (в двухмерном массиве)..
ясно что нужно будет прибегать к циклам и итерациям по обоим массивам, ширине и высоте..
но у меня пока не получается..
Размер Игры и масштаб
Вторая проблема с которой разбиралась - это размер..
Размер окна, канву в которой видна игра.
Игру можно развернуть на полное окно, я даже не знала, что есть такая опция конфигурации. Обычно о ней не говорят, а задают строгие размеры.
По сути я и наткнулась на эту опцию, скачав демо игры на Фазере - созданную дизайнером пиксельного лисенка (ну. тот что в Юнити игре бегал, помните?)
Все наши классные работы на курсе открывались в окошке заданного размера на пустой странице. А тут игра на все окно..
Стала разбирать код, потом искать в интернете опции рендера, которые были прописаны в этой демо версии. И узнала кое что необходимое... новое..
Разрешение демоверсии игры - пиксельное.. то есть низкое.. Если бы игра соответствовала на самом деле размеру монитора и его расцирению, то вся карта поместилась бы в скромном уголке. То есть расширение и окно игры было и оставалось очень низким, как на олдскульных играх.
Но само окно игры буквально НАТЯНУТО на весь экран..
Это конечно сначала меня порадовало, так как пиксельные карты на самом деле состоят из очень мелких тайлов, порой и 8 на 8 пикселей..
Их просто не будет видно в окне 800 на 600 пикселей.. вы героя от точки не отличите на такой карте..
А мне надо было, чтоб героя было видно, как и амбиент его окружающий..
Казалось бы делов то, теперь, можно просто сделать игру в низком разрешении, потом натянуть на предоставленный и прописанный в style.css размер заданный <div> элементу(контейнеру), внутри которого расположен скрипт самой игры.
Игра никогда не вылезет за заданные родителю <div> контейнеру размеры.
main.js
const config = {
type: Phaser.AUTO,
scale: {
parent: 'game',
mode: Phaser.Scale.FIT,// full scrin of parent div container width:
288, height:
192......
style.css
#app{
max
-width: 800px;// ВОТ ТАКОЙ ШИРИНЫ БУДЕТ ИГРА В ВЕБ СТРАНИЦЕ!
margin: 2% auto;
text-align: center;
}
//GAME <div id=«game»> ! Родительский элемент на веб странице, в нутри которого находится ссылка на скрипт main.js
//НА ЭКРАНЕ ИГРА ЗАЙМЕТ ПРОСТРАНСТВО ДОСТУПНОГО КОНТЕЙНЕРА (max-width: 800px;
ХОТЯ в конфиге самой игры - размеры заданы :
ширина окна: 288,
высота окна: 192
родительский элемент DOM: "game",
Но вот еще одно решение проблемы!
У рендера есть опция
zoom! Тогда игру можно не натягивать на родительский "див" элемент, а просто
"приблизить" в три раза указав zoom:3
ШРИФТЫ
И все было бы хорошо, если бы ... НЕ ШРИФТЫ!!!
да я просто на изнанку вывернулась пытаясь настроить пиксельный шрифт в игре.. так что бы он не размывался..
Когда игра "натянута " на окно большего размера - шрифт плывет..
И я пока не смогла ничего с этим поделать.
Но на заметку взяла прочитанное в одном из советов на подобную жалобу -- лепить текстовый элемент ну UI - интерфейс пользователя в игре - отдельной сценой.Отдельным классом. И с отдельно заданными настройками..
Обычно мы прописываем настройки игры в файле "входа". Тот который вызывается из страницы index.html. тегом <script>, с типом модуля --- type="module".
Но сам файл этот пуст. В нем только конфигурация. И он вызывает первую сцену. Ну или содержит все сцены игры и вызывает в определенном порядке.. Вообще то сцены вызывают уже сами себя, подчиняясь определенной логике. Например, нажал кновку плей на экране--грузится основная сцена игры. Героя прибили -- сцена останавливает "физику" , окрашивает героя в красный или взрывает со звуков "Бууум!", и вызывает траурную сцену GAME OVRER!
То есть конфиг (файл конфигурации ) у игры обычно один.
Там прописано, будет ли включена физика или нет, если есть, то прописывается ила гравитации, если это платформер..., как будет рендериться сцена, WEB GL или как Canvas..
размеры или масштаб игры,
Там же определяется родительский контейнер - элемент <div> на index.html, его уникальный игдентификатор id = "game", например.. Что бы Фазер знал, за какие рамки ему выходить не надо..
То есть везде учат - что это такая уникальная штука. Одна, на всю игру.
А тут ребята говорят, что создают Текстовую сцену отдельным классом, и задают ему определенные свои собственные настройки.
И задают сцену основной игры. И ей устанавливают свою конфигурацию..
То есть игра натянутая на холст 800 на 600 рх - сама по себе мелкая, где то
// Game size
width: 288,
height: 192,
.
А для того, что бы пиксельный шрифт нормально смотрелся, то сцене или классу содержащему эти текстовые элементы лучше задать настройки побольше, те же 600 на 800. Чтоб края не расплывались, а оставались шероховатыми, как и подобает пиксельному шрифту..
Не знаю, пока не занималась этим, хочу разобраться с плиточными картами тайл мэп. И столкновениями.. короче физикой и видимой частью игы.
Потом уже текстами займусь..
Кстати в интернете практически не найти ВЕБ шрифтов пиксельных кириллических..
На гугле нашла только один.. Страшненький..
Есть много, но они не в ВWEB формате (woff, woff2), а трю тип - tff.
Но для веб страницы и особенно внутри игры - это файл не годится.. нужны веб версии..
Даж обидно как то за братьев славян...
а вот латицы полно..
Так что возня с отображением скрипта - еще предстоит. Как и с возможностью разных конфигураций одновременно..
Дело в том, что в Фазере 3 вы можете запускать несколько сцен в одном окне..
то есть например сердечки - жизни героя и счет собранных ним брюликов - висящие выше, возможно с портретом вашего героя - это одна сцена. А сама игра, в которую вы играете в том же окне - это на самом деле другая запущенная сцена..
Сцены то я совмещала. Но вот конфигурация игры была одна, прописанная в стартовом файле, точке входа в игру.
картинки -
1 тайловая карта, для примера, тем кто не знает что это такое.
2 Пример уровня, собранный из этих плиток путем их повторения (типа легго)
3 То чем я сейчас занимаюсь - тайловая карта, герой (временный заяц),
4 ниже - подкращенные кубики тайлов, которым прописаны столкновения (физическое тело).
Прописаны уже в ручную, после безуспешных попыток автоматизировать процесс с помощью функции от разрабов Файзера
И да, я поигралась со встройкой окна игры в страницу веб, с помощью стилей CSS
-----------------------------------------
Автор игрового АРТ сета - Ansimuzвот его страница.
Там есть ссылка на запакованный архив, демо игры написанной на Фазере
https://ansimuz.itch.io/sunny-land-pixel-game-artНо я не собираюсь переписывать его скрипты.. Я хочу научиться сама!
Что бы понимать почему оно так а не иначе..
И да, написано оно по старинке одной портянкой.. И это не игра, игра была бы намного более длинной портянкой...практически бесконечной.. обязательно нужно разбить по классам...
Но есть чему у него поучиться, за что ему спасибо. Помимо самих тайлов, картинок и лисенка, который мне очень нравится..
