Перейти к основному содержимому

22.5. Скопировал шаблон оформления в папку со своей игрой, но что с ним теперь делать?

Эта статья устарела!

Новый плеер с поддержкой HTML - qSpider

В: Скопировал шаблон оформления в папку со своей игрой, но что с ним теперь делать? Не пойму, что за что отвечает.

О:

Внимание!!!

Ниже "Quest Navigator" называется просто Навигатором.

Редактировать будем шаблон "default", предварительно скопированный в папку с игрой. Под словом "окно" далее понимается то, что понималось под словом окно в Классическом плеере, то есть визуальные блоки основного и дополнительного описаний, предметов и действий, а так же строка ввода. Непосредственно окно плеера, чтобы не путаться, будем называть страницей по аналогии со страницей в браузере.

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

  • gameAwesomium.html
  • skins/game.css

Давайте пробежимся по ключевым моментам, чтобы понять, что к чему.

Во-первых, чтобы наглядно видеть, где что располагается в вашем шаблоне, откройте в Quest Navigator такую игру, в которой есть вывод во все четыре окна: основного, дополнительного описаний, в окно предметов и в окно действий. Ещё не мешало бы, чтобы в этой игре можно было вызывать различные диалоговые окна, вроде пользовательского меню, окон msg, $input и других.

Откройте "gameAwesomium.html" в любом текстовом редакторе, а лучше в редакторе с подсветкой кода, например в SublimeText.

Подключение CSS​

В блоке "<head>...</head>" вы увидите вот такую строку:

<link type="text/css" href="skins/game.css" rel="stylesheet" />

Как вы понимаете, это ссылка на таблицу стилей, которая используется в вашей игре. Вы можете добавить собственные файлы ".css", разместив их в той же папке "skins", например, или в любой другой папке на одном уровне с "gameAwesomium.html" или ниже, и прописать подобную ссылку на таблицу стилей. Например, я создал папку "avscss" и разместил в ней файл собственных стилей "coolstyle.css", значит мне нужно прописать в блоке "<head> ... </head>" такую строчку:

<link type="text/css" href="avscss/coolstyle.css" rel="stylesheet" />

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

Подключение скриптов​

Далее идут строки, подгружающие JavaScript-файлы:

<script type="text/javascript" src="../qsplib/js/core.js"></script>
<script type="text/javascript" src="../qsplib/js/coreAwesomium.js"></script>
<script type="text/javascript" src="../qsplib/js/QspLibAwesomium.js"></script>
<script type="text/javascript" src="../qsplib/js/api.js"></script>
<script type="text/javascript" src="../standalone_content/skins/js/game.js"></script>

Не изменяйте и не удаляйте данные строки, если не знаете в точности, что за что отвечает. Так же не меняйте порядок строк, ведь скрипты выполняются последовательно.

Чтобы добавить собственный файл скриптов, разместите его рядом с файлом "gameAwesomium.html" или во вложенной папке, и пропишите относительный путь в подобной строке. Например, я создал папку "avsscripts" и поместил в неё файл "alert.js", значит мне нужно добавить к строкам выше такую строку:

<script type="text/javascript" src="avsscripts/alert.js"></script>

Сейчас мы не будем править скрипты, или писать свои. Приведённая информация только для ознакомления. Если вы не знакомы с JavaScript, пока эту часть лучше не трогать.

BODY​

Переходим к блоку "<body>...</body>". Для этого блока в "skins/game.css" определены следующие настройки:

html, body { height: 100%; margin: 0px; padding: 0px; }

Данную строку лучше не менять, иначе при вёрстке у вас могут возникнуть проблемы с расположением остальных блоков. А вот строку:

body { margin:0;    padding:0; }

ниже по коду "skins/game.css" можно удалить, так как она частично дублирует предыдущую.

В блоке "<body>...</body>" находится множество блоков div, которые и отвечают за отрисовывание всего оформления игры. Далее вместо того, чтобы произносить целиком "div с id (айди) skin-splashscreen-foreground", мы будем говорить просто "блок skin-splashscreen-foreground", и тому подобное. Поскольку вся оставшаяся часть HTML-кода состоит из блоков div, и так будет понятно, что мы говорим о блоках div.

skin-splashscreen-foreground​

Два основных блока в "body" это "skin-splashscreen-foreground" и "skin-ui-wrapper". И для обоих основные стили прописаны непосредственно в "gameAwesomium.html". Это сделано для того, чтобы данные блоки отображались адекватно стилям ещё при загрузке страницы, даже если "skins/game.css" ещё не загрузился.

Если запустить игру в Навигаторе, мы увидим "skin-splashscreen-foreground" на короткое время в виде простого белого экрана, затем он "погаснет", а вместо него отобразится блок "skin-ui-wrapper". Эти два основных блока рекомендую сохранить, они сменяют друг-друга (это происходит за счёт скриптов), создавая привлекательный переход, к тому же "skin-ui-wrapper" содержит все остальные блоки оформления.

Непосредственно внутри блока "skin-splashscreen-foreground" вы можете разместить логотип или приветственную надпись, которые появятся на короткое время, сменившись экраном игры. (Рекомендую оставлять основной фон сплэшскрина белым)

skin-ui-wrapper​

Далее мы будем рассматривать содержимое блока "skin-ui-wrapper".

skin-back1​

И первый блок, который нам тут встречается, это блок "skin-back1". Он пустой и служит для того, чтобы задавать затенение по краям страницы (а строго говоря он задаёт фон страницы). Все его стили задаются в "skins/game.css", таким образом вы легко можете отредактировать стилистику этого блока, чтобы задать собственную рамку по краям окна, или создать какой либо эффект на фоне, ну или просто удалите этот блок, если подобные эффекты вам не нужны. Удаление блока "skin-back1" не повлияет на работоспособность игры.

skin-page​

Следующий блок — это блок "skin-page". Собственно это вся страница целиком, где размещены блоки окон основного, дополнительного описаний, окна предметов, действий и строки ввода. Нет явных скриптов, которые работают с блоком "skin-page", однако удалять его не рекомендуется. Особенностью данного блока является то, что он перекрывает собой блок "skin-back1" (оно и понятно, ведь для отрисовки фона страницы используется именно "skin-back1"). Поэтому, если вы стилизуете "skin-page" каким-нибудь фоном, этот фон перекроет видимость блока "skin-back1".

skin-back2​

В "skin-page" находится следующий блок, который мы рассмотрим, это блок "skin-back2". Это блок так называемого вторичного фона. Он снова растянут по всей ширине и высоте блока "skin-page", поэтому если поставить ему на фон сплошной цвет, это скроет видимость блока "skin-back1". Блок "skin-back2" нужен, чтобы отрисовать вертикальные полоски по краям окна в шаблоне "default". Если вы просто уберёте этот блок, функциональность игры не пострадает.

skin-top-menu-wrapper​

Следующий за "skin-back2" блок — это блок "skin-top-menu-wrapper", который отвечает за включение верхнего меню. Верхнее меню — это полоска с кнопками управления игрой и включения/выключения звука. Эта полоска появляется в двух случаях:

  • если отключено окно предметов. Тогда стили блоку "skin-top-menu-wrapper" можно задавать через строку: 
    body:not(.cover):not(.objs-visible) #skin-top-menu-wrapper
  • если размер страницы меньше 481px. Тогда стили блоку "skin-top-menu-wrapper" можно задавать через строку: 
    body:not(.cover) #skin-top-menu-wrapper

Само собой вы можете написать общий стиль для обоих вариантов отображения.

Блок "skin-top-menu-wrapper" выводится со свойством "display:table;", а вложенные блоки соответственно со свойствами "display:table-row;" и "display:table-cell;". Это сделано для того, чтобы обеспечить соответствующее выравнивание элементов внутри блоков.

skin-top-menu-row, skin-user1, skin-user2​

Вложенный блок "skin-top-menu-row" нужен исключительно для того, чтобы создать аналог табличной строки, хотя и его вы можете стилизовать.

Блоки "skin-user1" и "skin-user2" играют роль ячеек таблицы и в "skins/game.css" стилизованы по минимуму.

skin-user1-inner, skin-inv-toggle, skin-inv-caption​

Блок "skin-user1-inner" служит контейнером для двух нижележащих блоков, обёрнутых в одну гиперссылку. Вспомогательный блок для размещения вложенных блоков в одну линию.

Нижележащие блоки, обёрнутые в ссылку — это блоки "skin-inv-toggle" и "skin-inv-caption", они располагаются в одну линию благодаря свойству "dysplay:inline-block;". При щелчке по любому из этих блоков выполняется JavaScript из гиперссылки:

    skinToggleInv();

Данную функцию вы можете найти в файле "skins/js/game.js", она отвечает за плавное появление и пропадание окна с предметами, когда мы щёлкаем по слову инвентарь. Само собой размер страницы должен быть 480px и меньше.

skin-user-system, skin-user-music​

В блоке "skin-user2" располагаются два блока "skin-user-system" и "skin-user-music", которые соответственно отвечают за отображение кнопок "управление игрой" ("меню плеера") и "управление музыкой". Блок "skin-user2" отображается даже когда страница больше 480 пикселей шириной. Если удалить этот блок, оставив только кнопки, кнопки сместятся в правый верхний угол и "провалятся" под слой, станут некликабельными, пока размер страницы превышает 480 пикселей.

skin-right-column​

Блок "skin-right-column" занимает 30% от ширины страницы с правой стороны (при ширине страницы больше 480 пикселей). В этом блоке размещается окно предметов, а так же блок "skin-user2" (внизу), когда ширина страницы больше 480 пикселей.

skin-right-column-background​

В блоке "skin-right-column", по аналогии со "skin-page", находится блок, создающий фон под блоком окна предметов, это блок "skin-right-column-background". Он отображается только при ширине страницы более 480 пикселей и включённом окне предметов.

qsp-wrapper-objs​

Следующий блок "qsp-wrapper-objs" является уже непосредственно блоком окна предметов. Он отображается и при ширине окна 480 пикселей, и выше, только меняет своё местоположение. Этот блок связан с различными скриптами, которые создают полосу прокрутки в окне предметов.

qsp-scroller-objs, skin-inv-wrapper, skin-inv-top, qsp-inv​

Блок "qsp-scroller-objs" вложен в предыдущий и технически нужен для создания полосы прокрутки в окне предметов. Этот блок связан со скриптами полосы прокрутки. Следующий блок — блок "skin-inv-wrapper" — отвечает как раз за отображение предметов при изменении расширения. Именно с этим блоком работает скрипт, когда страница меньше 481 пикселя шириной, и мы щёлкаем по кнопке "Инвентарь".

В "skin-inv-wrapper" вложены два блока. "skin-inv-top" — декоративный блок, разграничивающий кнопку инвентаря и окно предметов при ширине страницы меньше 481 пикселя. А вот "qsp-inv" — очень важный блок. Именно в этот блок, при его наличии, Quest Navigator отправляет список предметов. Если вы планируете использовать окно предметов, удалять этот блок нельзя, а лучше сохранить все блоки вложенные в "qsp-wrapper-objs".

skin-left-column​

Блок "skin-right-column" занимает 70% от ширины страницы с левой стороны (при ширине страницы больше 480 пикселей). В этом блоке размещаются: окно дополнительного описания, окно основного описания и окно действий. А так же разные вспомогательные блоки.

skin-inv-bottom​

Блок "skin-inv-bottom" — декоративный блок, нижняя горизонтальная полоска инвентаря, когда ширина страницы не превышает 480 пикселей. Эта полоска видна и когда инвентарь раскрыт, и когда он свёрнут.

skin-wrapper-main-outer, qsp-wrapper-main, qsp-scroller-main​

Блок "skin-wrapper-main-outer" является внешним контейнером для блоков всех окон (дополнительного и основного описания и действий). В него вложены блоки "qsp-wrapper-main" и "qsp-scroller-main", на основе которых построен скрипт, иммитирующий ios-подобный скроллбар.

А уже здесь размещены блоки:

qsp-view​

"qsp-view" — отвечает за отображение окна предпросмотра (оператор view). [С этим блоком работают скрипты в api.js, однако его удаление не меняет функциональности оператора view.]

qsp-vars​

"qsp-vars" — отвечает за отображение окна дополнительного описания. В дефолтном шаблоне это окно отображается выше окна основного описания

qsp-main​

"qsp-main" — отвечает за отображение окна основного описания. Этот блок нельзя удалять, однако вы можете вполне свободно стилизовать и настраивать его.

qsp-acts​

"qsp-acts" — отвечает за отображение окна действий.

qsp-input-line​

Блок "qsp-input-line", а так же вложенные в него блоки, нужны для отображения и стилизации строки ввода, реализованной через поле "<input>".

Диалоговые окна​

Блоки диалоговых окон располагаются ниже блока "skin-page", чтобы при выведении на экран блоки диалоговых окон перекрывали блок "skin-page". Структура у всех диалоговых окон похожа, поэтому мы не будем подробно разбирать эти блоки.

qsp-dialog-msg​

Блок "qsp-dialog-msg" служит для вывода на экран диалогового окна при выполнении оператора msg.

qsp-dialog-input​

Блок "qsp-dialog-input" служит для вывода на экран диалогового окна с полем ввода при выполнении функции $input.

qsp-dialog-system-menu​

Блок "qsp-dialog-system-menu" служит для вывода на экран диалогового окна меню управления игрой. Это пункты "Загрузить|Сохранить|Заново|Другие игры".

qsp-dialog-save-slots​

Блок "qsp-dialog-save-slots" служит для вывода диалогового окна со слотами сохранения.

qsp-dialog-user-menu​

Блок "qsp-dialog-user-menu" отвечает за вывод всплывающего меню при выполнении оператора menu.

qsp-dialog-view​

Блок "qsp-dialog-view" отвечает за вывод блока с изображением (оператор view).

qsp-dialog-error​

Блок "qsp-dialog-error" отвечает за вывод сообщений об ошибках в коде QSP.

P.S.​

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

Вы можете перерабатывать и стилизовать шаблон по своему желанию и усмотрению, но делайте это постепенно, тестируя каждый изменённый кусочек. Я по очереди отключал и стилизовал блоки, когда подгонял шаблон для нужд "Вереницы миров", пока не добился нужного поведения. Необходимо учитывать поведение шаблона вместе со скриптами.

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

Возможностей море, если вы хорошо владеете HTML и CSS. Работа с JavaScript вам понадобится только тогда, когда вы захотите навешать на игру дополнительные функции, например различные горячие клавиши, управление с клавиатуры в принципе, анимации и т.д.

Quest Navigator в отличие от Классического плеера позволяет делать адаптивную вёрстку, то есть вёрстку подстраивающуюся под конкретное окно, а значит вы можете написать именно такую вёрстку, какая вам нужна и не беспокоиться о возможных отличиях в размере дисплеев, окон и т.д.