Документация QSP
Сайт Форум

Эта страница только для чтения. Вы можете посмотреть исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
====== Взаимодействие с интерфейсом (расширенные возможности qSpider) ======

**qSpider** в отличие от классического плеера позволяет авторам более широко работать с выводимой на экран HTML-разметкой.

Вы можете создавать свои темы оформления, оперативно управлять отдельными элементами, и связывать код игры с событиями плеера (клик, двойной клик, наведение курсора).

Управление интерфейсом и HTML-разметкой из кода игры осуществляется с помощью встроенной в плеер библиотеки "''qspider''". Чтобы воспользоваться этой библиотекой, необходимо подключить её в начале игры, как обычный модуль QSP:
<sxh qsp>
inclib 'qspider'
</sxh>

===== Темы оформления =====

qSpider позволяет вам писать собственные темы оформления, которые затем можно переключать прямо из кода игры. Таким образом вы можете написать несколько тем для различных нужд, и включать их по мере необходимости.

Например, у вас могут быть различные темы для локаций-помещений и локаций-пустошей. У вас могут быть отдельные темы для локаций-страниц, где вы представляете информацию об игре. Можно оформить темы для визуализации чтения книг, взаимодействия с хранилищами и так далее.

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

Тема в qSpider представляет собой HTML-код, где для каждого элемента плеера используется свой HTML-тег.

==== Создание тем ====

Свою тему вы можете создать, модифицируя шаблон одной из встроенных тем:
    * [[https://github.com/QSPFoundation/qspider/blob/master/public/themes/classic.html|Классическая]]
    * [[https://github.com/QSPFoundation/qspider/blob/master/public/themes/aero.html|Aero]]

Если вы когда-нибудь стилизовали HTML-разметку с помощью CSS, отредактировать тему для вас не составит труда.

Обратите внимание на первые строки темы (ниже пример из встроенной классической темы):

<sxh html>
<qspider-theme name="qspider:classic">
  <css-link src="qspider:themes/common.css"></css-link>
  <css-link src="qspider:themes/classic.css"></css-link>
</sxh>

В теге ''qspider-theme'' в атрибуте ''name'' указывается название темы. Именно это название в дальнейшем будет использоваться для указания темы по умолчанию и при переключении тем.

Префикс ''qspider:'' в этом атрибуте указывает на то, что тема встроена в плеер, а значит qSpider будет искать эту тему в своих внутренних ресурсах. Названия созданных вами тем должны указываться без префикса ''qspider:''.

Теги ''css-link'' содержат ссылки на CSS-файлы со стилями для темы. Точно так же: обратите внимание на атрибут ''src''. Префикс ''qspider:'' указывает, что CSS будет браться из внутренних ресурсов плеера. Вам нужно указывать пути без префикса ''qspider:'' для реально существующих в игре файлов. Пути к CSS файлам указываются в темах **относительно конфигурационного файла игры**, в котором эти темы подключаются.

==== Подключение тем ====

Для подключения своих тем к игре, пропишите в файле конфигурации параметры **themes** и **defaultTheme**:

<sxh qsp>
[[game]]
id = "test-asset-qspider"
title = "Суппер-пуппер-мега-игра"
file="game_start.qsps"
themes = ["themes/intro_page.html", "themes/game_main.html"]
defaultTheme = "intro-page"
</sxh>

В параметре **themes** размещается список путей к темам относительно файла конфигурации.

В параметре **defaultTheme** указывается название темы, которая будет использоваться по умолчанию (атрибут ''name'' тега ''qspider-theme'').
Документация QSPСайтФорум

Инструменты пользователя

Инструменты сайта

Инструменты страницы

Документация QSP
Сайт Форум
