Цитата: Einharr от 15.02.21, 16:05

Начну с истории появления этого поста. С неделю назад, примерно, наткнулся я в дискорде Контигра 2020(Куда я делал игру, да так и не поспел с релизом), на пост одного из разработчиков "Оглядываюсь, но бегу", о проблеме с "расползающимся" на смартфонах интерфейсом игры. Не знаю уж, что именно дёрнуло меня вызваться помочь ребятам с их проблемой. Об Axma я на тот момент знал только то, что она существует. Зато у меня был обширный опыт работы с html, javascript, css, php и другими страшными словами. Прикинув, что задача мне по силам, я погрузился в пучины документации. Чтение оной меня привело к двум выводам.
1) Axma — достаточно могуча, за счёт использования JS. В теории, на ней даже mmorpg написать можно, если будет желание и достаточно сумасбродства для реализации такой задачи.
2) Документация Axma - непростительно скудная и непонятная. Отсутствие примеров, в частности, заставляло меня спотыкаться на простейших задачах. Второй проблемой было отсутствие пояснений, что и зачем нужно. Axma может создавать StoryStyle.css, она умеет подключать внешние стили, но совершенно не рассказывает новичку, на кой, собственно, чёрт они нужны.
А с другой стороны — используя некоторые методы JS, порой весьма специфические, вроде String.fromCharCode() или parseFloat(s), документация совершенно ничего не рассказывает о совершенно базовых вещах, таких как ID элементов и вообще манипуляции со свойствами DOM элементов.

Собственно, подобная скудность документации и побудила меня к написанию данного поста. И да, я пишу пост на полумертвый форум, в надежде что хоть кому—то из новичков это пригодится. Краткий ликбез о том, как сделать вашу игру визуально красивее.

CSS
[quote]Каскадные таблицы стилей (Cascading Style Sheets = CSS) — это язык, который отвечает за визуальное представление документов пользователю.[/quote]

В наши дни, за внешний вид практически любого сайта, отвечает именно этот язык разметки. Причём позволяет он не только менять цвет, положение или размер элемента. Он способен на куда более комплексные штуки. Хотите горящий текст — запросто! Хотите добавить анимацию к окнам интерфейса — без проблем. Хотите анимированный дождь или мерцающее звездное небо на фоне? Извольте! Хотите "эффект старой пленки"? Заверните два! В моем личном проекте(На чистом JS, без аксмы), я с его помощью отрисовываю псевдо-3Дшные планеты, и смотрится это неплохо.
Более того, CSS используется настолько широко, что решение 90% всех проблем с ним легко находится в гугле, как и готовые примеры самых разнообразных эффектов текста, фона, параллаксов, да всего на свете!

И вот, axma услужливо создает вам таблицу стилей, совершенно не поясняя что это, зачем нужно и как работает. Более того, документация умалчивает о доступном инструментарии для работы с CSS. В частности о том, как в среде аксмы можно работать с селекторами CSS.
Их в CSS 4 штуки.
1) Селекторы тегов.
2) Селекторы классов.
3) Селекторы ID.
4) Селекторы групп.

Конечно, о селекторах лучше почитать в тематических статьях, на тегах и группах я вообще не буду концентрировать внимание, ограничусь ID и классами.
Для чего они нужны? В рамках CSS они существуют для того чтобы менять внешний вид элементов, и для этой задачи можно использовать любой из двух вариантов. В таблице стилей они выглядят очень похоже.

Класс будет выглядеть вот так:
.sprite1 {
width: auto !important;
height: 15% !important;
left: 10%;
top: 44%;
}

А ID вот так:

#sprite2 {
width: auto !important;
height: 15% !important;
left: 22%;
top: 30%;
}

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

У тут ты, читатель, скажешь: "Да что ты, черт побери, такое несешь? Какой CSS, какие классы и ID? В документации про это вообще ни слова!"

А я скажу: "В том то и беда! Тут то собака и порылась!"

В среде аксмы прекрасно работает JavaScript. И документация совершенно ничего не говорит о том что, к примеру, создавая новый спрайт, можно задать ему и класс, и ID. И делается это удивительно просто.

спрайт = sprite("название");
спрайт.id = "sprite2"; //Вуаля! Чудо произошло! При отрисовке элемент будет иметь высоту 15%, отступ слева  22% и сверху 30%! И всё это — без единой лишней строчки в самом коде!
спрайт.className = "sprite1"; //Соответственно, к спрайту применятся все свойства из селектора класса sprite2 в таблице стилей.
спрайт.show(1000);

И вот, мы уже избавились от захламивших весь наш код строк спрайт.left, спрайт.top и прочих sprite.bottom. Объём документа и его читаемость выросли в разы.

Но и это ещё не все! Одной из важнейших фишек CSS является @media! Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили.

То есть, можно менять визуал вашей игры, основываясь на том, на каком устройстве она запущена. Для этого достаточно добавить в таблицу стилей вот такую конструкцию:

@media screen and (orientation: landscape) {
.class1 {

top: 5%;

}
}
@media screen and (orientation: portrait) {
.class {

top: 10%;

}
}

То есть, мы не просто задаем объекту положение на экране. Мы основываемся на том, в ландшафтном или в портретном режиме находится устройство на данный момент. И да, обычные ПК мониторы работают в ландшафтном, если что. С помощью этих инструментов можно менять вывод в зависимости от ширины дисплея, а с помощью data-platform и data-useragent селекторов можно даже определять конкретный тип устройства пользователя, и подстраиваться под него.
html[data-useragent*='Android'] .class1{
top: 12%; //Свойство будет работать только на Android устройствах
}

html[data-platform='iPhone'] .class1 {
left: 18%; //Свойство будет работать только на айфонах
}

В общем, CSS классы и идентификаторы — могучее оружие в ваших руках. И уже с его помощью можно выходить не только супротив ветряных мельниц, но и против настоящих драконов! Но и это ещё не все!

Тут, однако, стоит помнить несколько важных вещей.
Во—первых, стиль для идентификатора имеет приоритет выше, чем у классов. То есть, если элемент имеет свойство, к примеру, top и в классе, и в ID, то применится значение из ID.
Во—вторых, ID у элемента может быть всего один а, а вот классов может быть несколько одновременно.
спрайт.className = "class1 class2"; //Просто через пробел.
Соотвественно, если у вас, к примеру, есть несколько элементов на одной линии — общую ось координат можно задать одним стилем, общим же для всех, а вторую — другим, уже уникальным.
Для наглядности опишу вот такой пример:

В вашей игре есть элемент интерфейса, отвечающий за прогресс игрока и его оппонентов. Вы создали спрайт фона, и разместили его сверху, в игровой области. Очевидно, что для спрайтов, отвечающих за положение игрока и оппонентов на трассе, положение по вертикали будет одинаковым, а по-горизонтали разным.
Создаем в таблице стилей класс
.trackVertical{
top: 12%;
}
А при создании спрайтов, задаем всем трём этот класс.
игрок = sprite("название");
игрок .className = "trackVertical";
оппонент1 = sprite("название");
оппонент1.className = "trackVertical";
оппонент2 = sprite("название");
оппонент2.className = "trackVertical";

Иными словами, с помощью классов можно задавать положение и размеры вообще всем элементам. Но зачем же тогда нужен ID?
С точки зрения CSS - функционал у него ровно тот же самый, что и у классов, но с двумя небольшими поправками.
1) ID элемента должен быть уникален. То есть на странице не должно быть несколько элементов с одинаковым ID. Это неизбежно приведёт к ошибкам.
2) С помощью ID элемента, к нему можно обращаться. Прям, лично подтянуть за базар и спросить как с понимающего. И для этого нам потребуется... JavaScript!
Маленькое примечание: подробнее про CSS совсем не трудно почитать в интернете. То, что я описал выше — простой и, надеюсь, понятный пример. Но с помощью CSS можно реализовать и куда более сложные вещи.

JavaScript

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Среда аксмы это, по сути, браузер. А значит всё, что работает в браузере — будет работать и в самой Axma Js. Что это нам даёт? Условно безграничные возможности по использованию JS в рамках нашей игры.  Но для этого нужно знать JavaScript, что характерно. Впрочем, для базовых задач в рамках текстовой игры — его даже глубоко изучать не нужно. Достаточно понимания базовых конструкций, к которым мы и шли через CSS.

Самая базовая и простая конструкция, которую стоит запомнить — "document.getElementById(id);". Мы ведь уже научились задавать элементу ID, а значит и обратиться к нему по этому ID теперь можем. А это открывает нам колоссальные возможности по взаимодействию с элементами нашей игры. Делается это следующим образом.

var myElement = document.getElementById(sprite2); //Таким образом, мы помещаем в переменную myElement ссылку на наш спрайт и теперь мы можем с ним работать.
myElement.style.opacity = 0; // Изменит прозрачность элемента. Такое и сама аксма может.
myElement.style.transition = "1s"; //Добавит возможность динамически менять элемент

Через style можно менять практически всё, что так или иначе связано с визуальным отображением элемента. Об открывающихся возможностях можно прочесть, к примеру, тут https://html5book.ru/css3-transition/
Ну, или просто набрать в гугле html css transition. Обилие возможностей вас удивит, я гарантирую это.

И это — только style. У любого html объекта куча разных свойств. И все их можно менять динамически. Причем, получив ID элемента и записав его в переменную, можно пользоваться как JS, так и привычным вам по самой аксме языком. И да, находить ID можно не только у элементов, созданных вами. Можно, к примеру, отловить весь "оберточный" DIV-элемент, в котором рисуются игровые спрайты:
var mainDiv = document.getElementById("spritesDiv");
И "потрясти" его, когда вашего персонажа оглоушат дубиной по голове. Вариантов, на самом деле, множество. Но, естественно, для полноценного их применения JS придётся учить хотя—бы на базовом уровне. Но пугаться не стоит. Хватит даже самых азов. Про переменные, массивы и циклы вы уже знаете из самой аксмы, это базовые принцыпы программирования, применимые в любом языке. Просто почитайте вдумчиво раздел про DOM элементы, к примеру, вот здесь — https://html5css.ru/js/js_htmldom.php

Более того, JS позволяет делать почти "из коробки" многие вещи, с которыми у Axma очевидные проблемы. Отвечая кому-то на этом форуме, я уже вставлял этот кусочек кода из своей игры, но повторю ещё раз:

//Сохранение и загрузка
function gamesave(obj, name){
var savedata = JSON.stringify(obj); //сериализуем переменную
localStorage.setItem(name, savedata); //пишем ее в хранилище
};

function gameload(name){
var loaddata = JSON.parse(localStorage.getItem(name)) //парсим его обратно объект
return loaddata;
};

Очень простая функция, позволяющая записать объект\переменную в local storage устройства. Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер. То есть, сохранение через local storage - отлично подойдёт и для смартфонов, и для запуска игры в браузере. Для большинства IF-игр такого сохранения будет более чем достаточно.

Учитывая, что axma почти перестали поддерживать, попробуйте искать решения на JS. Зачастую они очень просты, в изобилии присутствуют в интернете, и могут помочь вам без всяких модулей и надстроек к вашей игре.

Заключение.

Вообще, знание JS сильно помогает в разработке на axma. Но есть у Axma и серьезные недостатки. В частности, та самая причина, по которой я и пришел к написанию этой мини-статьи. Явная проблема — в базовых функциях Axma. К примеру функция sprite() не предполагает возможности создания дочерних элементов. Как итог, ребята, которые занимаются проектом "Оглядываюсь, но бегу!" столкнулись со следующей проблемой:

В вертикальной ориентации смартфона, объекты, сверстанные под 16:9, совершенно непотребным образом расползлись, так как никакого инструмента для привязки элементов к фону просто нет. Он не предусмотрен аксмой на уровне дизайна. Как итог, мне пришлось провозиться целый день в поисках решения. А решением стало написание новых, альтернативных функций для отрисовки спрайтов и прикрепления их к фону в качестве дочерних элементов.
И да, проблему в итоге удалось решить, но совсем не силами аксмы. Помог в итоге именно JS.

А заключительная мысль — она очень простая, на самом деле. JavaScript очень помогает в работе с аксмой. До такой степени помогает, что сама аксма становится не нужна. Ведь на JS написаны десятки тысяч сайтов, приложений и игр. У него есть обширная и понятная документация, а если и её не хватит — есть stackoverflow, где вашу проблему уже запостили, нашли оптимальное решение, и проверили его. Копируй и вставляй в свой проект.
Естественно, вам кажется что JavaScript это "настоящий" язык, в отличии от Axma. Что его сложно учить, а axma поймет и домохозяйка, но на самом деле — это заблуждение. Axma - это в изрядной степени и есть JavaScript. А сам JS - один из самых простых и понятных языков.
Я не знаю, будут ли поддерживать Axma в дальнейшем. А вот за JS я уверен. Более того, изучение JS может со временем превратить хобби в весьма неплохо оплачиваемую профессию.  Поэтому, ребята, учите жабаскрипт. Он вам пригодится.

Всегда ваш, Einharr. Извините, если где было сбивчиво и путано. Надеюсь, хоть кому—нибудь на этом полумертвом форуме мои вирши пригодятся.