Редактирование оформления в StoryStyle и не только
Привет и спасибо за внимание. :з
Вопросы у меня по ASM JS beta 8.
Тема оформления — интерактивная история.
Итак, есть три блока: центральный с текстом игры, справа вверху для спрайтов и сразу под ним — меню, оно же StoryMenu.
Как мне сделать, чтобы:
— окно спрайтов имело квадратную форму (как в предыдущих версиях ASM, а то здесь его почему-то сплющило);
— блок меню растягивался в зависимости от степени заполнения, а то он занимает всё свободное место, даже если содержит всего пару пунктов;
— ссылки имели вид ссылок, а не кнопок, какими они являются по умолчанию?
print(tab(n));
print(" текст "); — это единственный способ сделать красную строку? Как-то очень много лишних телодвижений.
Не вижу, как изменить разделитель .hr — в StoryStyle с ним не работают свойства width, height, margin-top, margin-bottom.
Куда пропала кнопка «Назад»? Как мне её вернуть и как изменить иконку?
Ещё вот какой интересный вопрос. В сборке игры на предыдущем движке параграф StoryMenu у меня содержал ссылки на такие параграфы как Инвентарь, Журнал, Навыки и т.д., самые обычные, в общем-то, и необходимые вещи в любой РПГ. Заметила, что из них нельзя вернуться в игру стандартной кнопкой «Назад», так как она возвращает лишь на предыдущий параграф, и если посетить сначала Инвентарь, а потом Журнал, то навсегда застреваешь в переходе между ними. Я пользовалась системной переменной $$title, и в каждом важном параграфе истории задавала переменную вида <<set $location = $$title>> и затем возвращалась на нужную страницу ссылкой [[Текст|$location]].
Возможно, не самый изящный вариант, но рабочий.
Так вот, ASM JS как-то некорректно этот мой костыль портирует. Игра просто не запускается.
Собственно вопрос, как это правильно реализовать-то в новой версии?
Это пока всё. Я совсем нуб ещё, так что вопросы у меня такие вот. И будут новые, так что я, наверное, продолжу их транслировать сюда.
Привет, и начнём по порядку.
1. Окно спрайтов, оно же область иллюстрации, - не квадратное, не прямоугольное, оно зависит от размеров окна и соотношения сторон. Не забываем про то, что у всех экраны разные, помимо ПК есть планшеты, смартфоны, телевизоры, холодильники, стиральные машины и прочие умные аппараты )) Просто надо подвигать мышкой границы окна, и сразу всё станет понятно.
2. Высоту блока меню можно изменить так: найти и заменить в параграфе стилей #menu {height:62%; на #menu {height:auto;
3. Делать ссылки ссылками функцией link или, например, центрировать их: \ <center>[[ссылка]]</center>.
4. Красную строку попробую сделать в обновлении, хотя на она на компьютерных экранах не нужна по многим причинам (см, например, п.1). Правильнее для разделения абзацев использовать пустую строку, как и сделано сейчас. Но спорить не буду - хотите красную строку, сделаю.
5. Для изменения линии hr не нужно ставить точку перед hr ) Можно прямо в тексте параграфа менять, например: <hr style='width:50%;'>
6. Кнопки назад больше не будет. Используйте функцию back для её замены.
7. [[Текст|$location]] больше нельзя писать, нужно так:
var location = $$title;
print(link('Текст',location));
Но можно: [[Текст|$$title]]
Пишите ещё вопросы, но разбивайте их на темы, а то в одной теме уже 7 вопросов получилось ;)
Спасибо за ответы. Несколько уточнений ещё.
1. Окей, это поняла. А есть возможность проставить для окон значения в пикселях? Просто, ну, изображение же искажается, если окно меняет размеры; его то растягивает, то часть не видно, то пустые области, в зависимости от настроек. Как бы понятно, что тогда интерфейс не для всех экранов подойдёт, но.
Как люди справляются-то вообще с этой проблемой? :) Каким должно быть изображение, чтобы оно выглядело наиболее презентабельно при игре на разных платформах? Ну вот по опыту.
3. Это да, если к ссылкам применять форматирование, их оформление отключается. Я просто подумала, мол, можно же как-то кнопки в стилях отключить совсем, чтобы мне не мучиться каждый раз и не делать работу, которая мне, в общем-то, не нужна.
4. Не, с пустой строкой всё хорошо, текст выглядит нормально. Я просто экспериментирую. Присматриваюсь, как будет лучше. С типографской формой печати с красной строкой или без неё. Наверное, хорошо, если такая возможность просто будет.
5. Точка здесь — указание на параграф стилей (там ж типа того: .hr {color:#0a0a0a; background-color:#0a0a0a; width:95%; border:none; height:1px; margin-top: 1.4em; margin-bottom: 1.4em;} — и вот в ASM JS это не работает, в 6.1 работало нормально). Опять же, если мне нужно единое оформление разделителя, легче там изменить однажды, чем каждый раз в параграфах. И если я хочу использовать разделитель, чтобы разграничивать текст и варианты выбора, например, мне именно что придётся в каждом параграфе прописывать отступы сверху/снизу, ширину, толщину в пикселях. Неудобно же. Да и зачем столько лишнего кода?
6. Жаль. Удобная была. А ручками её в стилях, опять же, не добавить?
Ну некуда мне её отдельной ссылкой/кнопкой пихать, она там как пятое колесо.
7. Ну вот ASM JS так портирует.
То есть в начале в нужном параграфе задаёт переменную location вот так: location = $$title;
а в параграфах меню ссылка получается вот такая: [[— Закрыть —|location]]
То есть вроде код правильно преобразован, но вместе оно не работает, и игра попросту крашится.
Тут, кстати, уточняющий вопрос: а правильно будет в таком случае объявлять переменную var location = $$title; ? Переменные var ведь только в пределах одного параграфа работают? При переходах по меню, особенно множественных, их значения всё ещё будут сохраняться?
7.
Так ссылку делать теперь нельзя:
\ [[Закрыть|location]] -- неверно. Может использоваться только имя параграфа, но не переменная его содержащая.
Теперь надо так:
print(link("Закрыть", location)); -- верно. Функция link создает правильную ссылку, а print её показывает.
Кстати я тоже примерно так делаю для служебных параграфов типо инвентаря и журнала в рпг: запоминаю имена основных параграфов и не запоминаю имена служебных :)
Ещё кстати. Теперь не надо редактировать параграф стилей! Теперь есть очень полезная функция:
style("files/mystyles.css");
Тоесть вы можете создать отдельный файл стилей и редактировать его (имена классов и прочих редактируемых элементов берём из StoryStyle). Почему в отдельном файле? Во-первых, в нём гораздо проще что-то найти, чем в гигантском StoryStyle, и в-главных, если вы вдруг захотите поменять тему игры, но оставить свои изменения -- вы сможете это сделать без повторного редактирования StoryStyle! Можно даже удалить StoryStyle :) Все важные для вас параметры вроде ширины кнопок или высоты меню будут в вашем отдельном файле.
Просто пишите эту функцию в параграфе Start.
Ну тогда [[Закрыть|location]] — ошибка при портировании из старых версий.
А вот так не работает:
var location = $$title;
print(link('Текст',location));
А вот так:
location = $$title;
игра крашится на странице, где это написано.
Цитата: Obey от 18.12.18, 18:24Ну тогда [[Закрыть|location]] — ошибка при портировании из старых версий.
А вот так не работает:
var location = $$title;
print(link('Текст',location));А вот так:
location = $$title;
игра крашится на странице, где это написано.
Крашится! Как приятно читать программистские термины :)
А знаете что я понял?
имя location -- оказывается зарезервированное слово!
Если использовать например passage -- то всё работает.
Во, точно. Вот теперь заработало.
Но только с passage = $$title;
С var passage = $$title; всё-таки не работает, переменная уже не определяется, стоит только перейти в любой параграф меню.
Кстати, а как мне ссылку вида print(link('- Закрыть -',passage)); разместить по центру? Как тут правильно <center></center> вставить?
Цитата: Obey от 18.12.18, 19:06Во, точно. Вот теперь заработало.
Но только с passage = $$title;
С var passage = $$title; всё-таки не работает, переменная уже не определяется, стоит только перейти в любой параграф меню.Кстати, а как мне ссылку вида print(link('- Закрыть -',passage)); разместить по центру? Как тут правильно <center></center> вставить?
var - это локальная переменная - она видна только в пределах данного параграфа (или функции, если определена внутри неё). На самом деле, я подозреваю, что все параграфы теперь становятся функциями при компиляции :)
Попробуйте так:
print("<center>" + link('- Закрыть -',passage) + "</center>");
Спасибо, работает.
Возвращаясь к п.1. Я поняла, что мне нужно. Мне нужно, чтобы область иллюстраций всегда была равна по ширине и высоте. Ширина будет изменяться в зависимости от размеров окна, а высота всегда подстраиваться под неё. Как мне этого добиться? У меня все спрайты квадратные!