Различия

Здесь показаны различия между двумя версиями данной страницы.

--- help:qspider_interface [2024/03/12 17:52]
aleks_versus
+++ help:qspider_interface [2024/10/14 13:37] (текущий)
aleks_versus
@@ Строка 1: / Строка 1: @@
-====== Взаимодействие с интерфейсом и расширенные возможности qSpider ======
+====== Взаимодействие с интерфейсом (расширенные возможности qSpider) ======
-**qSpider** в отличие от классического плеера позволяет авторам более широко работать с выводимой на экран HTML-разметкой. В этом разделе описываются основные возможности плеера в плане работы с интерфейсом и разметкой HTML.
+**qSpider** в отличие от классического плеера позволяет авторам более широко работать с выводимой на экран HTML-разметкой.
-===== Темы оформления =====
+Управление интерфейсом и HTML-разметкой из кода игры осуществляется с помощью [[help:qspider_inclib|встроенной в плеер библиотеки]] "''qspider''". Чтобы воспользоваться этой библиотекой, необходимо подключить её в начале игры, как обычный модуль QSP:
-qSpider позволяет вам писать собственные темы оформления, которые затем можно переключать прямо из кода игры. Таким образом вы можете написать несколько тем для различных нужд, и включать их по мере необходимости.
+<sxh qsp>
+inclib 'qspider'
+</sxh>
-Например, у вас могут быть различные темы для локаций-помещений и локаций-пустошей. У вас могут быть отдельные темы для локаций-страниц, где вы представляете информацию об игре. Можно оформить темы для визуализации чтения книг, взаимодействия с хранилищами и так далее.
+В **qSpider** вы можете:
-Отделение интерфейса от кода игры — это полезная практика, позволяющая разнести оформление и логику. Так код становится более читаемым и понятным.
+  * Создавать собственные [[help:qspider_themes|темы оформления]] и управлять ими.
+  * Взаимодействовать с HTML через [[help:qspider_spectags|специальные теги]].
+  * [[#Привязка%20элементов%20HTML-форм%20к%20QSP-переменными|Связывать элементы форм HTML]] со значениями переменных QSP.
+  * [[#Вызов%20QSP-кода%20по%20событию%20в%20плеере|Вызывать код QSP по событию]] в браузере (плеере).
+  * [[#Вызов%20команд%20плеера|Вызывать встроенную команду плеера]] при клике по HTML-элементу.
-Тема в qSpider представляет собой HTML-код, где для каждого элемента плеера используется свой HTML-тег.
+===== Привязка элементов HTML-форм к QSP-переменными =====
-==== Создание тем ====
+В **qSpider** Элементы HTML-форм (''%%input%%'', ''%%select%%'', ''%%textarea%%'' и др.) можно связать с QSP-переменной. Для этого нужно использовать специальный атрибут ''qsp-bind''.
-Свою тему вы можете создать, модифицируя шаблон одной из встроенных тем:
+Связь двунаправленая — изменение переменной обновит элемент и изменение элемента (ввод текста или выбор опции) записываются в переменную.
-    * [[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, отредактировать тему для вас не составит труда.
+Примеры использования атрибута ''qsp-bind'':
-Обратите внимание на первые строки темы (ниже пример из встроенной классической темы):
 <sxh html>
-<qspider-theme name="qspider:classic">
+<input type="text" qsp-bind="$username">
-  <css-link src="qspider:themes/common.css"></css-link>
+<input type="password" qsp-bind="$form_password">
-  <css-link src="qspider:themes/classic.css"></css-link>
+<input type="color" value="#e66465" qsp-bind="$color">
+<input type="checkbox" value="1" qsp-bind="enable">
+<select qsp-bind="$car">
+    <option value="mercedes">Mercedes</option>
+    <option value="audi">Audi</option>
+</select>
 </sxh>
-В теге ''qspider-theme'' в атрибуте ''name'' указывается название темы. Именно это название в дальнейшем будет использоваться для указания темы по умолчанию и при переключении тем.
+Это позволяет быстрее и проще создавать собственные диалоговые окна для взаимодействия с игроком.
-Префикс ''qspider:'' в этом атрибуте указывает на то, что тема встроена в плеер, а значит qSpider будет искать эту тему в своих внутренних ресурсах. Названия созданных вами тем должны указываться без префикса ''qspider:''.
+===== Вызов QSP-кода по событию в плеере =====
-Теги ''css-link'' содержат ссылки на CSS-файлы со стилями для темы. Точно так же: обратите внимание на атрибут ''src''. Префикс ''qspider:'' указывает, что CSS будет браться из внутренних ресурсов плеера. Вам нужно указывать пути без префикса ''qspider:'' для реально существующих в игре файлов. Пути к CSS файлам указываются в темах **относительно конфигурационного файла игры**, в котором эти темы подключаются.
+Вы можете вызывать код QSP при определённых событиях в плеере с помощью новых атрибутов, начинающихся с префикса ''qsp-on:''.
-==== Подключение тем ====
+Поддерживаются следующие атрибуты:
-Для подключения своих тем к игре, пропишите в файле конфигурации параметры **themes** и **defaultTheme**:
+  * ''qsp-on:click'' — одинарный клик
+  * ''qsp-on:dblclick'' — двойной клик
+  * ''qsp-on:contextmenu'' — клик правой кнопкой
+  * ''qsp-on:mouseenter'' — наведение курсора
+  * ''qsp-on:mouseleave'' — выход курсора за пределы элемента
-<sxh toml>
+Содержимым атрибутов должен быть валидный код QSP. Примеры использования атрибутов:
-[[game]]
-id = "test-asset-qspider"
+<sxh html>
-title = "Суппер-пуппер-мега-игра"
+<div qsp-on:click="exec: msg 'click'" qsp-on:dblclick="exec: msg 'dblclick'">Click me</div>
-file="game_start.qsps"
+<div qsp-on:contextmenu="exec: menu '$context_menu'">Right Click me</div>
-themes = ["themes/intro_page.html", "themes/game_main.html"]
+<div qsp-on:mouseenter="exec: pl 'enter'" qsp-on:mouseleave="exec: pl 'leave'">Hover me</div>
-defaultTheme = "intro-page"
 </sxh>
-В параметре **themes** размещается список путей к темам относительно файла конфигурации.
+===== Вызов команд плеера =====
+Вы можете вызывать множество команд плеера по клику на HTML-элемент, используя специальный атрибут ''qsp-command''.
+Пример использования атрибута:
+<sxh html>
+<button qsp-command="resume">Resume</button>
+</sxh>
+Поддерживаются следующие команды плеера:
+  * ''%%quit%%'' — выход из игры на полку игр
+  * ''%%restart%%'' — перезапуск игры
+  * ''%%resume%%'' — продолжить игру (закрытие меню паузы)
+  * ''%%mute%%'' — выключить звук
+  * ''%%unmute%%'' — включить звук
+  * ''%%quicksave%%'' — быстрое сохранение
+  * ''%%quickload%%'' — быстрая загрузка
+  * ''%%pause:saves%%'' — открыть меню сохранения
+  * ''%%pause:preferences%%'' — открыть настройки
+  * ''%%scroll:main:bottom%%'' и ''%%scroll:main:top%%'' — прокрутка окна основного описания
+  * ''%%scroll:stats:bottom%%'' и ''%%scroll:stats:top%%'' — прокуртка окна доп описания
+Эти команды можно вызывать и непосредственно из кода QSP, если подключить [[help:qspider_inclib|встроенную библиотеку]] ''qspider''.
+Пример вызова команд из кода QSP:
+<sxh qsp>
+inclib 'qspider'
+@qspider_quit()
+@qspider_open_pause_screen('saves')
+</sxh>
-В параметре **defaultTheme** указывается название темы, которая будет использоваться по умолчанию (атрибут ''name'' тега ''qspider-theme'').
+===== Другие статьи по qSpider =====
+  * [[help:qspider|qSpider — общая информация]]
+  * [[help:qspider_gamecfg|Конфигурационный файл]]
+  * [[help:qspider_aeroqsp|Особенности запуска и работы игр AeroQSP на qSpider]]
+  * [[help:qspider_themes|Темы оформления]]
+  * [[help:qspider_spectags|Специальные теги]]
+  * [[help:qspider_inclib|Встроенная библиотека]]
+  * [[help:qspider_standalone|Стандалон-сборка игры на qSpider]]

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

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

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

Различия

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

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