Разница между страницами «Scene» и «Создание игры «Hidden Object Game»»

Материал из wiki.appsalutecreator.com
(Различия между страницами)
Перейти к: навигация, поиск
(→‎Параметры Сцены)
 
(→‎Настройка HiddenList)
 
Строка 1: Строка 1:
−
== Параметры Сцены ==
+
{| width="100%" 
−
[[Файл:Screen.jpg|500px|right]]
+
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
−
*'''Группа - Инициализация ''':         
+
! width="20%"|[[Learning|Оглавление]]  
−
:'''Выравнивание''' ('' align '') - выравнивание границ сцены относительно границ экрана. Заметно, если размеры сцены и размеры экрана отличаются. Значения от -1 до 5:<br/>  
+
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
−
::'''0''' - не работает ( при ините вписывает сцену как 2);
+
|}
−
::'''1''' - не работает ( при ините вписывает сцену как 3);
+
----
−
::'''2''' - сцена вписывается в экран, сохраняя пропорции, при ините и анимировании;
+
{{TOC right}}
−
::'''3''' - сцена вписывается в экран по границам с потерей пропорций, при ините и анимировании;
 
−
::'''4''' - вписывает экран в сцену, сохраняя пропорции, при ините и анимировании;
 
−
::'''5''' - инитится как 2 и переходит в 4;
 
−
::'''-1''' - не применимо.
 
  
 +
'''Цель:'''
 +
* Изучить настройки объектов [[HiddenList]], [[HiddenObject]] и  [[Table]] для типа механики Hidden Object Game на базе создания уровня из игры Travel.
 +
 +
'''Задачи:'''
 +
* Создать уровень игры содержащей 15 поисковых объектов.
 +
* Обеспечить размещение 5 объектов для поиска.
 +
*  Создать окно, информирующее о победе или поражении, с указанием очков полученных и звёзд.
  
−
0 и 2 - сцена пропорционально сжимается, чтобы полностью поместиться в границы экрана, или пропорционально растягивается, пока не достигнет границ экрана по горизонтали или вертикали.<br/>  
+
== Создание экрана и сцены в игровом проекте ==
−
1 и 3 - сцена сжимается таким образом, чтобы ее границы полностью совпали с границами экрана, при этом пропорции сцены не сохраняются.<br/>  
+
<div style="display: flex; text-align: justify;">
−
2 и 3 - срабатывает сразу при инициализации сцены и при анимировании ХидденХинтом (если используется скалирование).<br/>
+
  <div>
−
0 и 1 - срабатывает только при анимировании ХидденХинтом. В таком случае при ините сцены она отображается без выравнивания, такой как мы видим ее в редакторе сцен, а выравнивание происходить только при анимировании.<br/>
+
Как и в предыдущих уроках первым делом создадим новый [[Screen|экран]] Lesson_7 для создаваемой игры и игровую [[Scene|сцену]] stg_main.
 +
На созданной сцене добавим из редактора ресурсов фон (файл bg), 10 изображений из папки hiddenobj на выбор, которые спрячем в «подходящих» местах и изменим тип с [[Image]] на '''Game mechanic''' – [[HiddenObject]].
 +
Для того, чтобы при перемещении фона позиции «спрятанных» объектов не менялись их можно добавить внутрь объекта.
  
 +
[[Файл:Lesson7_bg_with_hiddens.png|400px]]
 +
  </div>
 +
  <div>
 +
[[Файл:Lesson7_hidden_objects.png|right]]
 +
  </div>
 +
</div>
  
−
:'''Левый бордюр''' ('' border_left '') - левый бордюр сцены (значение в пикселях на сколько мы может оттянуть левый край сцены от левого края экрана)
+
<div style="display: flex; text-align: justify;">
−
:'''Правый бордюр''' ('' border_right '') - правый бордюр сцены (значение в пикселях на сколько мы может оттянуть правый край сцены от правого края экрана)
+
Если вы добавляете в ресурсы изображение с прозрачностью вокруг объекта, то в редакторе оно будет обрезано, но, при размещении объекта на сцене, прозрачность будет учитываться. Благодаря этому есть возможность размещения объектов на сцене обычным перетаскиванием, если художник позаботился о нас (''подготовил изображения для того, чтобы они располагались в местах для «прятанья»'').
−
:'''Верхний бордюр''' ('' border_top '') - верхний бордюр сцены (значение в пикселях на сколько мы может оттянуть верхний край сцены от верхнего края экрана)
+
[[Файл:Lesson7_resize_template.png|350px|right]]
−
:'''Нижний бордюр''' ('' border_bottom '') - нижний бордюр сцены (значение в пикселях на сколько мы может оттянуть нижний край сцены от нижнего края экрана)
+
</div>
−
:'''Смещение по горизонтали''' ('' h_delta '') - допустимое смещение сцены по горизонтали при перетаскивании
 
−
:'''Смещение по вертикали''' ('' v_delta '') - допустимое смещение сцены по вертикали при перетаскивании
 
  
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
После добавления хидденов необходимо подготовить для них текстовое описание. Это делается в текстовом редакторе ([[Интерфейс_TextEditor|TextEditor]]).
 +
Создадим в нём папку Lesson_7 и по одной записи для каждого объекта. Также добавим для каждого объекта графическое отображение. Для этого нажмём кнопку Start [[Интерфейс_ResourceEditor|Res Editor]], перетащим соответствующее изображение в поле Image viewer и установим тип иконки Icon 1 (''правой кнопкой мыши на изображение'').
 +
  </div>
 +
[[Файл:Lesson7_text_editor.png|350px|right]]
 +
</div>
  
−
После смещения когда мы отпускаем сцену она возвращается в свое крайнее (левое, правое, верхнее, нижнее) положение, заданное бордюрами.
+
== Реализация механики HOG ==
 +
<div style="text-align: justify;">
 +
Для базовой реализации механики HOG необходимо использовать комбинацию из компонентов [[HiddenObject]], [[HiddenList]] и [[Table]].
 +
[[HiddenObject]] у нас уже есть – это наши «спрятанные» хиддены, а вот [[HiddenList]] и Table создадим с помощью контекстного меню (Создать объект после текущего...).
 +
</div>
  
−
'''''Если мы в бордюре укажем к примеру 100 пикселей и в смещении еще 50, то сцену мы сможем оттянуть на 150 пикселей, но при отпускании она вернется в положение оттянутое на 100 пикселей от края экрана.'''''
+
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
=== Настройка HiddenList ===
 +
[[HiddenList]] – это список поисковых объектов (Hidden), которые надо найти в хидден-сцене.
 +
Каждый поисковый объект на сцене связывают со списком. Объектов в списке может быть больше, чем будет показано в данной игровой сессии (поле "объектов"). В таком случае они будут выбраны случайным образом. Запоминаются те из них, по которым произошёл клик (''увеличивается счетчик их кликов''). При следующем заходе на сцену, поисковые слова сортируются по возрастанию числа кликов и снова активизируется количество спрятанных объектов, указанных в поле "количество".
 +
[[HiddenList]] определяет основные параметры для настройки [[HiddenObject]] (''например, скорость полета''). В дальнейшем, при необходимости, эти же параметры можно добавить в [[HiddenObject]], чтобы для данного объекта они "перебивали" общие значения для всех.
 +
Зададим основные параметры, такие как:
 +
* num (поле «объектов») – максимальное количество объектов, участвующие в поиске.
 +
* table (поле «таблица») – идентификатор объекта [[Table]]. Необходим для вывода списка объектов для поиска.
 +
* counter (поле «счетчик») - счетчик, который записывает количество найденных объектов.
 +
* timer (поле «таймер (осталось)») - таймер, который показывает, сколько времени осталось.
  
 +
Также для коректной работы необходимо настроить параметры распределения. Для этого включим равномерное распределение, и выключим итерацеонное. Также необходимо включить новейшую адаптивность для того, чтобы всьо заработало.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_hiddenlist_params.png|260px|right]]
 +
  </div>
 +
</div>
  
−
:'''Время восстановления''' ('' tmRecovery '') - время анимации востановления начальных размеров(при скейле) и положении(при смещении) сцены.
 
−
:'''время начального експанда''' ('' tmStartExp '') - время анимации при начальном експанде.
 
−
:'''тип границ экрана''' ('' scrBorT ''):
 
−
::'''0''' - по умолчанию app.icf;
 
−
::'''1''' - логические;
 
−
::'''2''' - физические.
 
  
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
  
−
'''''Чтоб работало необходимо вкл. таскаемость см. ниже'''''
+
=== Настройка Table ===
 +
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_table_params.png|260px|right]]
 +
  </div>
 +
</div>
  
  
−
*'''Положение''':
+
<div style="display: flex; text-align: justify;">
−
:'''х''' ('' x '') - Горизонтальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены;
+
  <div>
−
:'''у''' ('' y '') - Вертикальная координата центра объекта (его точки пивота) в пикселях. Отсчитывается от точки пивота сцены.
+
=== Настройка HiddenObject ===
 +
Как было сказано ранее, [[HiddenObject]] это наш «спрятанный» объект, который, возможно, предстоит найти. Для его настройки укажем следующие параметры:
 +
* txtID (поле «текстID») – название хидден-объекта, которое будет отображаться в списке. Перетаскивается мышкой из текстового редактора;  
 +
* list (поле «list») – ссылка на [[HiddenList]], к которому будет подключен объект, для обеспечения связи между ними;
 +
Параметр list можно задать выделив несколько [[HiddenObject]].
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_hiddenobj_params.png|260px|right]]
 +
  </div>
 +
</div>
  
 +
<blockquote>
 +
'''Внимание!''' [[HiddenList]] не будет работать без объекта Options, который вы должны были создать в предыдущем уроке, а так же без параметра id игры (Очковая система – id игры).
 +
</blockquote>
  
−
'''''Обычно для того чтоб сцена расположилась в центре экрана нужно координаты сцены задать в два раза меньше размера экрана. (Если размер экрана 960*640 то сцена с координатами 480*320)'''''
+
== Упражнения ==
 +
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
 +
<p>2. Установить для поиска 7 объектов вместо 5.</p>
 +
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
 +
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>
  
 +
== Настройка системы подсчета очков ==
 +
<div style="display: flex; text-align: justify;">
 +
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
 +
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
 +
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
 +
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
 +
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
 +
[[Файл:Lesson7_timer_counter.png|right]]
 +
</div>
 +
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]
  
−
*''' Группа - Размер ''':
 
−
:'''w''' ('' w '') - ширина сцены в пикселях;
 
−
:'''h''' ('' h '') - высота сцены в пикселях.
 
  
−
*''' Группа - Модификаторы ''':
+
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
−
:'''alpha''' ('' al '') - прозрачность: от 0 (прозрачен) до 1 (не прозрачен)
+
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
−
:'''angle''' ('' ang '') - угол поворота в градусах (0 - не повёрнут). Отсчитывается от оси x вниз. Вверх - идут отрицательные углы
 
−
:'''scale x''' ('' sx '') - масштаб по оси x (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.)
 
−
:'''scale y''' ('' sy '') - масштаб по оси y (1 - не изменен, 1.5 - увеличен в полтора раза, и т.д.)
 
  
−
*'''z'''  ('' z '') - параметр порядка рисования объекта. Сначала рисуются объекты с большим z, затем, поверх них - с меньшим
+
Настройки хидденлиста:  
−
*'''память''' ('' memo ''):
 
−
:'''1''' - при повторном открытии экрана объект не обновляет свои параметры (помнит текущие параметры, оставшиеся от предыдущего посещения экрана);
 
−
:'''0''' - обновит свои параметры, при повторном открытии экрана.
 
  
−
*''' Группа - Показ сцены ''':    
+
[[Файл:hiddenlist1.png]]
−
:'''Время''' ('' tm '') - время в ms показа сцены в рабочем состоянии (если определено поле переход)
+
[[Файл:hiddenlist2.png]]
−
:'''Переход''' ('' scr '') - экран к которому нужно перейти после окончания времени показа сцены
+
[[Файл:hiddenlist3.png]]
 +
[[Файл:hiddenlist4.png]]
 +
[[Файл:hiddenlist5.png]]
  
−
*'''Растягиваемая''' ('' stretch ''):
 
−
:'''1''' - сцена может быть растянута '''''(должно быть 1 если используем утку)''''';
 
−
:'''0''' - сцена не может быть растянута.
 
−
*'''Таскаемая''' ('' drag ''):
 
−
:'''0''' - не таскается;
 
−
:'''1''' - сцену можно таскать мышкой (объекты должны быть прокликиваемые);
 
−
:'''2''' - можно таскать даже за объекты.
 
−
*'''отклонение от мин. скейл для таскания''' ('' minscaledrag '') - указываем, с какого скейла разрешаем таскание в диапазоне скейлов ["min_scale"+ "minscaledrag","max_scale"]. Т.е. если в утке стоит "min_scale" = 0.5, а отклонение ("minscaledrag") - 0.10, то таскаемость будет при скейле от 0.6;
 
−
*'''Границы''' ('' bound ''):
 
−
:'''0''' - берутся из app.icf;
 
−
:'''1''' - сцена при таскании упирается в границы экрана (если она больше, то снаружи, если меньше, то изнутри);
 
−
*'''курсор''' ('' curs '') - графический ресурс курсора текущего и всех дочерних объектов.
 
−
*'''Двойной тач''' ('' doubletouch ''):
 
−
:'''0''' - не обрабатывается;
 
−
:'''1''' - сцена обрабатывает двойной тач.
 
−
*'''не передавать при отпускании''' (''' dont_handle_touches_ahead ''') - при установке флага, после утки или таскании сцены, HO объекты не воспримут нажатие в отпускаемом месте;
 
  
 +
Настройки таймера:
  
−
*''' Группа - оттяжка''':
+
[[Файл:Lesson7_timer_params.png]]
−
:'''оттяжка''' ('' pul '') - Автоматическое возвращение сцены к краю при оттаскивании:
 
−
:'''по x''' ('' puldx '') - Максимально допустимая оттяжка по x (меньше 0 - бесконечно);
 
−
:'''по y''' ('' puldy '') - Максимально допустимая оттяжка по y (меньше 0 - бесконечно);
 
−
:'''замедление''' ('' pula '') - Замедление движения сцены.
 
  
−
*''' Группа - Утка''':
+
== Настройка системы комбо ==
−
:'''утка''' ('' duck '') - Масштабирование мультитачем:
+
<div style="text-align: justify;">
−
::'''0''' - не работает;
+
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):
−
::'''1''' - работает.
 
−
:'''min scale''' ('' min scale '') - Минимальный коэффициент масштабирования (0.1);
 
−
:'''max scalе''' ('' max scale '') - Максимальный коэффициент масштабирования (4);
 
−
:'''восстановление''' ('' duck_restore '') - Восстанавливать размеры после минимизации:
 
−
::'''0''' - восстанавливать;
 
−
::'''1''' - не восстанавливать.
 
  
−
*''' Группа - отсечение''' - отсечение сцены прямоугольником в локальных координатах экрана:
+
[[Файл:progress_params.png]]
−
:'''вкл''' ('' ampIs '') - Масштабирование мультитачем:
+
</div>
−
::'''0''' - выкл;
+
<div style="display: flex; text-align: justify;">
−
::'''1''' - вкл.
+
Для графики (заполнитель) можно использовать следующее изображение:
−
:'''scrX''' ('' ampX '') - X верхнего левого угла прямоугольника в лок. координатах экрана;
+
</div>
−
:'''scrY''' ('' ampY '') - Y верхнего левого угла прямоугольника в лок. координатах экрана;
 
−
:'''scrW''' ('' ampW '') - ширина прямоугольника в лок. координатах экрана;
 
−
:'''scrH''' ('' ampH '') - высота прямоугольника в лок. координатах экрана.
 
  
 +
[[Файл:666.png]]
  
−
*'''Открытие''' - Сцена может открыться (появится) не сразу, а выполнив определенные действия (выехать, проявиться по прозрачности и т.п.):
+
<div style="display: flex; text-align: justify;">
−
:'''пауза''' ('' tmBeg '') - время в ms перед началом появления сцены;
+
  <div>
−
:'''время''' ('' tmOpn '') - время в ms процесса открытия сцены;
+
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
−
:'''x''' ('' bX '') - начальная координата x из которой сцена будет выезжать при открытии;
+
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
−
:'''y''' ('' bY '') - начальная координата y из которой сцена будет выезжать при открытии;
+
  </div>
−
:'''alpha''' ('' bAl '') - начальная прозрачность сцены ( от 0 до 1) при старте анимирования открытия:
+
  <div>
−
::'''0''' - прозрачна;
+
[[Файл:Lesson7_progress_score_1.png|right]]
−
::'''1''' - непрозрачна.
+
[[Файл:Lesson7_progress_score_2.png|right]]
−
:'''angle''' ('' bAng '') - начальный угол (в градусах) от которого сцена будет вращаться при появлении до рабочего угла;
+
  </div>
−
:'''scale x''' ('' bSX '') - начальный масштаб по оси x от которого сцена начнет открываться к масштабу, указанному в общем списке параметров;
+
</div>
−
:'''scale y''' ('' bSY '') - начальный масштаб по оси y от которого сцена начнет открываться  к масштабу, указанному в общем списке параметров.
 
  
−
*''' Закрытие ''' - Сцена может закрыться (исчезнуть) не сразу, а выполнив определенные действия (уехать, растаять по прозрачности и т.п.)
+
<div style="text-align: justify;">
−
:'''время''' ('' tmCls '') - время в ms процесса закрытия сцены
+
Кроме поощрения игрока дополнительными очками существует также и способ «наказать» его за ошибочные клики (звёзды – лимит ложных кликов), после которых игровая сцена должна блокироваться. Для этого существует так называемая машина-блокатор.
−
:'''x''' ('' eX '') - конечная координата x куда сцена будет уезжать при закрытии
+
Создадим её и настроим следующим образом:
−
:'''y''' ('' eY '') - конечная координата y куда сцена будет уезжать при закрытии
 
−
:'''alpha''' ('' eAl '') - Финальная прозрачность сцены (0-прозрачна, 1-непрозрачна) при её закрытии
 
−
:'''angle''' ('' eAng '') - конечный угол (в градусах) к которому сцена будет вращаться при закрытии от рабочего угла
 
−
:'''scale x''' ('' eSX '') - конечный масштаб по оси x к которому сцена будет закрываться
 
−
:'''scale y''' ('' eSY '') - конечный масштаб по оси y к которому сцена будет закрываться
 
  
−
*'''Прокликиваемая''' ('' passClk '') - как и любому объекту сцене можно задавать этот параметр
+
[[Файл:Lesson7_err_click_blocker.png]]
−
:'''0''' - не прозрачна для клика;
 
−
:'''1''' - сцена прозрачна для клика мышкой (пропускает объектам под ней);
 
−
:'''2''' - сцена сама обрабатывает клик, но и пропускает его дальше.
 
  
−
*'''Фокус''' - группа параметров, отвечающая за возможность фокусировки на объекте. Сцена может фокусироваться на объекты, которые находятся в ней:
+
а для того, чтобы машина именно блокировала сцену создадим внутри неё объект типа [[Rectangle]] закрывающий всю игровую сцену как маска (''высота и ширина объекта должна быть равна размерам сцены'').
−
:'''координаты фокуса''' ('' focCoord '') - координаты фокуса могут быть заданы или же вместо них будет использоваться позиция сцены, 0 - задаються следующие два параметра - x,y; 1 - следующие два параметра буду игнорироваться и будет браться позиция сцены;
+
</div>
−
:'''x''' ('' focX '') - координата фокуса по х;
 
−
:'''y''' ('' focY '') - координата фокуса по y;
 
−
:'''объект''' ('' focObj '') - объект, который будет помещён в фокус;
 
−
:'''скорость''' ('' focVel '') - скорость перемещения объекта в фокус;
 
−
:'''начало замедления''' ('' focAccTm '') - расстояние с которого начинается замедление.
 
−
:'''направление''' ('' focDir '') - Разрешенные направления движения:
 
−
::'''0''' - везде;
 
−
::'''1''' - горизонтально;
 
−
::'''2''' - вертикально;
 
−
::'''3''' - запрещена.
 
  
−
*'''инерция''' - Параметры инерционного движения сцены:
+
<div style="display: flex; text-align: justify;">
−
:'''включена''' ('' iOn '') - Включена ли инерция:
+
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
−
::'''0''' - нет;
+
[[Файл:Lesson7_sel_blocker.png]]
−
::'''1''' - да.
+
</div>
−
:'''масштаб''' ('' iSc '') - Масштаб;
 
−
:'''мин. скорость''' ('' iVMn '') - Минимальная скорость;
 
−
:'''макс. скорость''' ('' iVMx '') - Максимальная скорость;
 
−
:'''время''' ('' iTm '') - Время.
 
  
 +
== Создание окна с результатами игры ==
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
Для создания окна вывода результатов создадим новую сцену stg_win_lose, на которой создадим [[Machine|машину состояний]] win.
 +
Данная машина состояний будет управлять инициализацией данных окна, а также его отображение и закрытием.
 +
Внутри машины создадим объекты с примерно следующей структурой:
 +
* lock – [[rectangle]]-маска для блокировки сцены игры. Должен иметь размер больший или равный сцене.
 +
* window – [[rectangle]] для фона окна.
 +
* *_points – [[Counter|счётчики]] для очков.
 +
* *_pts_lbl – [[Text|текстовое описание]] для счётчиков.
 +
* Star1 – [[Machine|машина состояний]] для звезды.
 +
* close_btn – [[Button|кнопка]] закрытия окна.
 +
  </div>
 +
  <div>
 +
[[Файл:Lesson7_result_wnd_struct.png|right]]
 +
  </div>
 +
</div>
  
−
Отсчёт координат начинается с левого верхнего угла. Координата (0;0) - левый верхний угол сцены, центр для сцены (960х640) будет в точке с координатами (480;320).
+
<div style="display: flex; text-align: justify;">
 +
Для всех счётчиков установим в качестве графического ресурса анимацию чисел созданную ранее, а для окна window и кнопки закрытия добавим новые. Можно использовать ресурсы представленные ниже:
 +
[[Файл:Lesson7_result_rect_params.png|right]]
 +
</div>
  
 +
‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
 +
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]
  
−
=== Добавляемые параметры ===
+
<div style="text-align: justify;">
 +
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
 +
</div>
  
−
[[Файл:+.png]] '''слушатель начала таскания сцены''' ('' drgbl '') - машина, которая переводится в состояние ''beg'' в момент начала таскания сцены. Кроме состояния машине передается вектор направления таскания в виде параметров ''dirx'' и ''diry'' (конец вектора). Таким образом можно узнать направление таскания:
+
[[Файл:Lesson7_result_wnd_template.png|450px]]
−
:'''объект''' ('' o '') - Объект, слушающий начало таскания сцены.
 
  
  
−
[[Файл:+.png]] '''слушатель конца таскания сцены''' ('' drgel '') - машина, которая переводится в состояние ''end'' в момент когда сцена прекращает движение:
+
=== Настройка счётчиков ===
−
:'''объект''' ('' o '') - Объект, слушающий конец таскания сцены.
+
<div style="text-align: justify;">
 +
Теперь, когда всё на своих местах, настроим счётчики и текстовые поля. Объект [[HiddenList]] сохраняет в объект [[Options]] некоторые данные о игре. Для того чтобы счётчик мог воспользоваться ими (''и не только счётчик'') необходимо в поле “Уровень” каждого счётчика указать строку вида [game.]level.param
 +
</div>
  
 +
<div style="text-align: justify;">
 +
Для нас важны следующие строки:
 +
* last_game.score30_total – Игровые очки. (счётчик game_points)
 +
* last_game.score30_time -  Бонус за время. (time_points)
 +
* last_game.score30_accuracy -  Бонус за аккуратность (accuracy_points)
 +
* last_game.ecmbRowMax -  Бонус за комбо (combo_points)
 +
* last_game.score30_level -  Очки за уровень (game_points)
 +
</div>
  
−
[[Файл:+.png]]  '''связанная сцена''' ('' lnkstg ''):
+
<div style="text-align: justify;">
−
:'''сцена''' ('' stg '') - '''??''';
+
Укажите данные строки в соответствующих полях, а также описание (''игровые очки и т.д.'') в текстовых полях.
−
:'''коэффициент''' ('' k '') - '''??'''.
+
</div>
  
−
== Состояния Сцены ==
 
  
−
'''focus''' - Перемещает объект указанный в поле '''объект''' группы '''фокус''' в фокус сцены.
+
=== Настройка звёзд ===
 +
<div style="text-align: justify;">
 +
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
 +
</div>
  
−
'''update''' - Обновляет параметры/свойства сцены. Чаще всего, приходится менять таскаемость (drag) и растягиваемость (duck). После изменения парметров следует сделать update, а не init.
+
Star1 (''Показать в любом случае'')
  
−
[[Category:Common objects]]
+
[[Файл:Lesson7_star1.png]]
 +
 
 +
Star2 (''Если очки за аккуратность не равны 0'')
 +
 
 +
[[Файл:star_accuracy.png]]
 +
 
 +
Star3 (''Если очки за время не равны 0'')
 +
 
 +
[[Файл:star_time.png]]
 +
 
 +
=== Настройка машины win ===
 +
<div style="text-align: justify;">
 +
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
 +
Настроим машину следующим образом:
 +
</div>
 +
 
 +
<div style="display: flex;">
 +
[[Файл:Lesson7_win_mch_states.png|700px]]
 +
</div>
 +
 
 +
<div style="text-align: justify;">
 +
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
 +
</div>
 +
 
 +
 
 +
=== Настройка отображения окна при победе/поражении ===
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
 +
  </div>
 +
  <div>
 +
[[Файл:Lesson7_win_state.png|right]]
 +
[[Файл:Lesson7_lose_state.png|right]]
 +
  </div>
 +
</div>
 +
 
 +
<div style="display: flex; text-align: justify;">
 +
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а  окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
 +
Проверяем на работоспособность игру.
 +
</div>
 +
 
 +
[[Файл:final_result.png]]
 +
 
 +
== Упражнения ==
 +
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
 +
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>
 +
 
 +
----
 +
 
 +
{| width="100%" 
 +
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
 +
! width="20%"|[[Learning|Оглавление]]
 +
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
 +
|}
 +
 
 +
[[Category:Learning]]

Версия 13:38, 13 октября 2023

Урок 6 << Оглавление >> Урок 8

Цель:

  • Изучить настройки объектов HiddenList, HiddenObject и Table для типа механики Hidden Object Game на базе создания уровня из игры Travel.

Задачи:

  • Создать уровень игры содержащей 15 поисковых объектов.
  • Обеспечить размещение 5 объектов для поиска.
  • Создать окно, информирующее о победе или поражении, с указанием очков полученных и звёзд.

Создание экрана и сцены в игровом проекте

Как и в предыдущих уроках первым делом создадим новый экран Lesson_7 для создаваемой игры и игровую сцену stg_main. На созданной сцене добавим из редактора ресурсов фон (файл bg), 10 изображений из папки hiddenobj на выбор, которые спрячем в «подходящих» местах и изменим тип с Image на Game mechanic – HiddenObject. Для того, чтобы при перемещении фона позиции «спрятанных» объектов не менялись их можно добавить внутрь объекта.

Lesson7 bg with hiddens.png

Lesson7 hidden objects.png

Если вы добавляете в ресурсы изображение с прозрачностью вокруг объекта, то в редакторе оно будет обрезано, но, при размещении объекта на сцене, прозрачность будет учитываться. Благодаря этому есть возможность размещения объектов на сцене обычным перетаскиванием, если художник позаботился о нас (подготовил изображения для того, чтобы они располагались в местах для «прятанья»).

Lesson7 resize template.png

После добавления хидденов необходимо подготовить для них текстовое описание. Это делается в текстовом редакторе (TextEditor). Создадим в нём папку Lesson_7 и по одной записи для каждого объекта. Также добавим для каждого объекта графическое отображение. Для этого нажмём кнопку Start Res Editor, перетащим соответствующее изображение в поле Image viewer и установим тип иконки Icon 1 (правой кнопкой мыши на изображение).

Lesson7 text editor.png

Реализация механики HOG

Для базовой реализации механики HOG необходимо использовать комбинацию из компонентов HiddenObject, HiddenList и Table. HiddenObject у нас уже есть – это наши «спрятанные» хиддены, а вот HiddenList и Table создадим с помощью контекстного меню (Создать объект после текущего...).

Настройка HiddenList

HiddenList – это список поисковых объектов (Hidden), которые надо найти в хидден-сцене. Каждый поисковый объект на сцене связывают со списком. Объектов в списке может быть больше, чем будет показано в данной игровой сессии (поле "объектов"). В таком случае они будут выбраны случайным образом. Запоминаются те из них, по которым произошёл клик (увеличивается счетчик их кликов). При следующем заходе на сцену, поисковые слова сортируются по возрастанию числа кликов и снова активизируется количество спрятанных объектов, указанных в поле "количество". HiddenList определяет основные параметры для настройки HiddenObject (например, скорость полета). В дальнейшем, при необходимости, эти же параметры можно добавить в HiddenObject, чтобы для данного объекта они "перебивали" общие значения для всех. Зададим основные параметры, такие как:

  • num (поле «объектов») – максимальное количество объектов, участвующие в поиске.
  • table (поле «таблица») – идентификатор объекта Table. Необходим для вывода списка объектов для поиска.
  • counter (поле «счетчик») - счетчик, который записывает количество найденных объектов.
  • timer (поле «таймер (осталось)») - таймер, который показывает, сколько времени осталось.

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

Ошибка создания миниатюры: /bin/bash: /usr/bin/convert: No such file or directory Error code: 127


Настройка Table

Объект Table предназначен для вывода данных в табличном виде. HiddenList использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (объект с нулевыми размерами не отображается) и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.

Lesson7 table params.png


Настройка HiddenObject

Как было сказано ранее, HiddenObject это наш «спрятанный» объект, который, возможно, предстоит найти. Для его настройки укажем следующие параметры:

  • txtID (поле «текстID») – название хидден-объекта, которое будет отображаться в списке. Перетаскивается мышкой из текстового редактора;
  • list (поле «list») – ссылка на HiddenList, к которому будет подключен объект, для обеспечения связи между ними;

Параметр list можно задать выделив несколько HiddenObject.

Lesson7 hiddenobj params.png

Внимание! HiddenList не будет работать без объекта Options, который вы должны были создать в предыдущем уроке, а так же без параметра id игры (Очковая система – id игры).

Упражнения

1. Добавить 5 новых «спрятанных» объекта.

2. Установить для поиска 7 объектов вместо 5.

3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.

4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.

Настройка системы подсчета очков

Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя. Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект Table, после чего добавим два объекта типа Counter (счётчик) и один Timer (таймер). Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры. Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (настраивается в поле «шрифт» и работает если не указан графический ресурс). Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.

Lesson7 timer counter.png
‎Count 0.png ‎Count 1.png Count 2.png Count 3.png ‎Count 4.png Count 5.png ‎Count 6.png ‎Count 7.png ‎‎Count 8.png ‎Count 9.png ‎Coun (5).png


После указания ресурса и размещения объектов на сцене свяжем их с HiddenList. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (например, hidden). Кроме этого установим у таймера в поле «значение» тоже число что и у HiddenList в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.

Настройки хидденлиста:

Hiddenlist1.png Hiddenlist2.png Hiddenlist3.png Hiddenlist4.png Hiddenlist5.png


Настройки таймера:

Lesson7 timer params.png

Настройка системы комбо

Для работы системы комбо нам понадобится объект Progress. Создадим его и настроим следующим образом (не забываем указать размер объекта):

Progress params.png

Для графики (заполнитель) можно использовать следующее изображение: 

666.png

Созданный Progress необходимо связать с объектом HiddenList. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах». В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.

Lesson7 progress score 1.png
Lesson7 progress score 2.png

Кроме поощрения игрока дополнительными очками существует также и способ «наказать» его за ошибочные клики (звёзды – лимит ложных кликов), после которых игровая сцена должна блокироваться. Для этого существует так называемая машина-блокатор. Создадим её и настроим следующим образом:

Lesson7 err click blocker.png

а для того, чтобы машина именно блокировала сцену создадим внутри неё объект типа Rectangle закрывающий всю игровую сцену как маска (высота и ширина объекта должна быть равна размерам сцены).

Машина-блокатор указывается в «очковой системе» объекта HiddenList. Lesson7 sel blocker.png

Создание окна с результатами игры

Для создания окна вывода результатов создадим новую сцену stg_win_lose, на которой создадим машину состояний win. Данная машина состояний будет управлять инициализацией данных окна, а также его отображение и закрытием. Внутри машины создадим объекты с примерно следующей структурой:

Lesson7 result wnd struct.png

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

Lesson7 result rect params.png
‎0001.png 0002.png 0003.png 0004.png 0005.png 0006.png 0007.png 0008.png 0009.png
Lesson7 close btn.png00010.png

Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (попробуйте изменить значения в полях и посмотрите на что они влияют)

Lesson7 result wnd template.png


Настройка счётчиков

Теперь, когда всё на своих местах, настроим счётчики и текстовые поля. Объект HiddenList сохраняет в объект Options некоторые данные о игре. Для того чтобы счётчик мог воспользоваться ими (и не только счётчик) необходимо в поле “Уровень” каждого счётчика указать строку вида [game.]level.param

Для нас важны следующие строки:

  • last_game.score30_total – Игровые очки. (счётчик game_points)
  • last_game.score30_time - Бонус за время. (time_points)
  • last_game.score30_accuracy - Бонус за аккуратность (accuracy_points)
  • last_game.ecmbRowMax - Бонус за комбо (combo_points)
  • last_game.score30_level - Очки за уровень (game_points)

Укажите данные строки в соответствующих полях, а также описание (игровые очки и т.д.) в текстовых полях.


Настройка звёзд

Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.

Star1 (Показать в любом случае)

Lesson7 star1.png

Star2 (Если очки за аккуратность не равны 0)

Star accuracy.png

Star3 (Если очки за время не равны 0)

Star time.png

Настройка машины win

Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины. Настроим машину следующим образом:

Lesson7 win mch states.png

Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.


Настройка отображения окна при победе/поражении

Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.

Lesson7 win state.png
Lesson7 lose state.png

Настройка вывода окна при победе настраивается в HiddenList путём добавления «разбор: изменить состояние объекта», а окна поражения в Timer – «время истекло: изменить состояние объекта». Проверяем на работоспособность игру.

Final result.png

Упражнения

1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.

2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.

Урок 6 << Оглавление >> Урок 8
Источник — «https://wiki.appsalutecreator.com/index.php?title=Scene&oldid=10118»