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

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

Writing /var/www/qsp.su/public_html/wiki/data/meta/access.log failed

Боковая панель

help:navigator_game_template

Назад: Файлы игры на Quest Navigator

Шаблон игры на Quest Navigator

Шаблон игры отвечает за внешний вид игры. В шаблон игры входят: страницы html для соответствующих платформ, файлы стилей для соответствующих платформ 1), файлы JavaScript для соответствующих платформ 2) и другие файлы (например, изображения и шрифты).

Файл шаблона рассмотрен на примере gameAwesomium.htm из одной из работающих игр .

Файл шаблона игры в Quest Navigator

Заглоловок (head) страницы

<head>
  <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <link type="text/css" href="../standalone_content/folder/game.css" rel="stylesheet" />
  <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/folder/js/game.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        qspInitApi();
      });
  </script>
</head>

Я не буду разбирать каждую строчку, т.к. это излишне и я сам многого не понимаю. Нас интересуют только следующие строчки:

<link type="text/css" href="../standalone_content/folder/game.css" rel="stylesheet" />
<script type="text/javascript" src="../standalone_content/folder/js/game.js"></script>

В первой строке адрес файла стилей (CSS) игры. Во второй адрес файла JavaScript игры. Нужно следить, чтобы эти адреса соответствовали действительности. В данном примере файл game.css лежит по адресу folder/game.css, а файл game.js лежит по адресу folder/js/game.js относительно папки standalone_content.

Тело (body) страницы

А вот в структуре body без участия разработчика разобраться будет сложно. По моему мнению здесь стоило бы вставить табличку соответствия id↔назначение, а потом примеры популярных конструкций.

<div id="qsp-main">Пример использования id</div>
<div class="qsp-center">Пример использования class</div>

Таблица id, используемых QSP Navigator'ом:

idНазначение
qsp-js-sandboxНе добавлять в body 3), служебный 4)
qsp-back-imageКонтейнер для фонового изображения
qsp-wrapper-main, qsp-scroller-main, qsp-mainКонтейнер для описания локации
qsp-wrapper-acts, qsp-scroller-acts, qsp-actsКонтейнер для списка действий локации5)
qsp-wrapper-objs, qsp-scroller-objs, qsp-invКонтейнер для инвентаря6)
qsp-wrapper-vars, qsp-scroller-vars, qsp-varsКонтейнер для дополнительного описания7)
qsp-input-line input Строка ввода 8) 9)
qsp-dialog-view, qsp-dialog-view-image-containerКонтейнер для просмотра картинок 10)
qsp-dialog-msg, qsp-wrapper-msg,
qsp-scroller-msg, qsp-dialog-msg-content
Контейнер для диалоговых окон
qsp-dialog-error, qsp-dialog-error-contentКонтейнер для ошибок
qsp-dialog-user-menuКонтейнер для пользовательского интерфейса
qsp-dialog-inputКонтейнер диалога ввода
qsp-dialog-input-contentТекст приглашения для ввода
qsp-dialog-input-textПоле для ввода текста
qsp-button-input-okКнопка подтверждения ввода текста
qsp-dialog-system-menu
qsp-dialog-save-slots,
qsp-dialog-save-slots-container
Контейнер для меню сохранения/загрузки
classНазначение
qsp-center автоматическое выравнивание по центру экрана
qsp-skin-overlayоверлей для системного меню (system-menu)
qsp-skin-dialog
qsp-save-slot-enabledНе добавлять в body11)
qsp-save-slot-disabledНе добавлять в body12)
qsp-user-menu-itemНе добавлять в body13)
qsp-actionНе добавлять в body14)
qsp-skin-buttonНе добавлять в body15). Используется для action и save-slot
qsp-objectНе добавлять в body16)

Вперёд: Создание игр на Quest Navigator

1) , 2) чаще всего один файл на все платформы
3) , 11) , 12) , 13) , 14) , 15) , 16) Генерируется автоматически
4) используется для выполнения команды EXEC
5) см. SHOWACTS
6) см. SHOWOBJS
7) см. SHOWSTATS
8) обратите внимание - это должно быть <input class="qsp-input-line"> </input>, на данный момент поддержка этой области сильно ограничена
9) см. SHOWINPUT
10) см. VIEW
help/navigator_game_template.txt · Последние изменения: 2014/04/18 15:30 (внешнее изменение)