[[help:sound|Назад: Звук]]

====== Графика ======

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

===== Список основных возможностей =====

==== Установка картинки фоном в окно основного описания. ====

Чтобы установить изображение фоном в окно основного описания, воспользуйтесь системной переменной ''%%$BACKIMAGE%%'':

<sxh qsp>
$backimage = 'image/picture.png'
</sxh>

Подробнее об использовании системной переменной ''%%$BACKIMAGE%%'' можно почитать в разделе [[help:main|"Окно основного описания"]].

==== Вывод изображения в отдельном окне. ====

Чтобы вывести изображение в отдельном окне, которое называется "**Окно предпросмотра**", используйте оператор ''%%VIEW%%'':

<sxh qsp>
view 'content/monster.png'
</sxh>

Подробнее об операторе ''%%VIEW%%'' можно прочитать в разделе "**Операторы для работы с графической частью**" на данной странице ниже.

==== Добавление иконки в пункт всплывающего меню. ====

Чтобы добавить иконку к пункту всплывающего меню, необходимо прописать путь к файлу иконки при заполнении массива, отвечающего за формирование пунктов меню:

  * Для массива кортежей третьим значением в кортеже: <sxh qsp>
! нет иконки
%usr_menu[0] = ['Взять предмет','take_item']
! иконка задана gif-файлом
%usr_menu[1] = ['Положить предмет','put_item','images/put_item.gif']
</sxh>
  * Для массива строк — через двоеточие после названия локации-обработчика пункта меню: <sxh qsp>
! нет иконки
$usr_menu[0] = 'Взять предмет:take_item'
! иконка задана gif-файлом
$usr_menu[1] = 'Положить предмет:put_item:images/put_item.gif'
</sxh>

Подробнее о добавлении иконок к пунктам меню можно почитать в разделе [[help:menu|"Меню"]].

==== Добавление картинки к действиям ====

Чтобы добавить картинку к действию, не изменяя фактического названия действия, нужно прописать путь к изображению вторым параметром к оператору ''%%ACT%%''.

<sxh qsp>
! действие в многострочной форме записи, с изображением
act "Сорвать арбуз с куста", "img/watermelon.png":
  арбуз += 1
  *pl "Вы сорвали арбуз с куста"
end
</sxh>

Подробнее об операторе ''%%ACT%%'' можно прочитать в разделе [[help:acts|"Действия"]].

==== Добавление картинки к предмету в инвентаре ====

Чтобы добавить картинку к предмету в инвентаре, не изменяя фактического названия предмета, нужно прописать путь к изображению вторым параметром к оператору ''%%ADDOBJ%%''.

<sxh qsp>
! добавляем предмет с картинкой в конец списка
addobj 'Гаечный ключ','image/wrench.png'
</sxh>

Подробнее об операторе ''%%ADDOBJ%%'' можно прочитать в разделе [[help:objs|"Предметы (инвентарь)"]].

==== Вставка картинок в любую часть текста с помощью HTML ====

Вы можете вставлять изображения в любую часть текста, используя HTML-тег ''%%<img>%%'' при включённом режиме распознавания HTML.

Примеры:

<sxh qsp>
! включаем режим распознавания HTML
usehtml=1
! вывод изображения в окно основного описания:
*p '<img src="images/pic_01.png">'
! вывод изображения в окне дополнительного описания:
p '<img src="icons/note_btn.ico">'
</sxh>

Так же есть возможность вставлять изображения в названия действий и предметов с помощью HTML.

<sxh qsp>
! добавляем предмет с картинкой в названии
addobj '<img src="res/ico/back_arrow.png"> Назад...'
! добавляем действие с картинкой в названии
act "Улыбнуться <img src=""res/emoji/smile.gif"">": goto 'smile'
</sxh>

**Обратите внимание!** При этом фактически изменяются названия действий и предметов. Например, при выборе действия "Назад..." в окне предметов ''%%$SELOBJ%%'' будет возвращать не только слово "''%%Назад...%%''",а всю строку "''%%<img src="res/ico/back_arrow.png"> Назад...%%''".

С помощью HTML можно вставлять изображения в модальные окошки ''%%MSG%%'' и ''%%$INPUT%%''. Следует учитывать, что при этом окошко выводится в определённом размере, и если изображение окажется по размеру больше окошка, то появятся полосы прокрутки.

<sxh qsp>
! выводим изображение в окне сообщения
msg '<img src="res/message/error.png">'
! выводим изображение в окне ввода
$name = $input('Введите своё имя? <img src="res/face/elph.jpg">')
</sxh>

Более подробно о возможностях HTML читайте в соответствующем [[help:html|разделе]].

===== Операторы для работы с изображениями =====

  * ''%%VIEW%%'' — выводит на экран указанное изображение. В классическом плеере изображение выводися в отдельном окошке (окно предпросмотра). Общая запись: <sxh qsp>
VIEW [$путь к графическому файлу]
</sxh> , где ''%%[$путь к графическому файлу]%%'' — путь к файлу картинки. Если параметр ''%%[$путь к графическому файлу]%%'' отсутствует, или задан как ''%%""%%'' (пустая строка), окно предпросмотра закрывается. Примеры: <sxh qsp>
! выводим изображение в окне предпросмотра
view 'content/monster.png'
! закрываем окно предпросмотра
view ''
! закрыть окно предпросмотра можно и так
view
</sxh>

===== Пути к графическим файлам =====

Пути к графическим файлам указываются относительно файла игры. Например, если файл игры лежит по адресу "''%%D:\QSP\game\game.qsp%%''", а картинка - по адресу "''%%D:\QSP\game\content\picture.jpg%%''", то путь нужно указывать, как "''%%content/picture.jpg%%''".

Это не зависит от того, где именно вы хотите вывести изображение:

<sxh qsp>
*p "<img src=""content/picture.jpg"">"

addobj "Контент","content/picture.jpg"

view 'content/monster.gif'
</sxh>

===== Поддерживаемые форматы изображений =====

  * Классический плеер поддерживает большинство распространнных форматов: ''%%.jpg%%'', ''%%.png%%'', ''%%.bmp%%'', ''%%.gif%%'', ''%%.ico%%''.
  * **qSpider** поддерживает все форматы изображений, которые поддерживает современный браузер, в т.ч. и "''%%svg%%''".

[[help:interface|Вперёд: Настройки интерфейса]]