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

Материал из wiki.appsalutecreator.com
(Различия между страницами)
Перейти к: навигация, поиск
 
м (→‎Настройка системы комбо)
 
Строка 1: Строка 1:
−
[[Файл:Counte.jpg|right]]
+
{| width="100%" 
−
'''Counter''' - [[Object|объект]], который хранит значение целого положительного числа, значение которого могут изменять другие объекты. Используется для визуализации числа сделанных ходов или кликов в игре, количества оставшихся подсказок и т.п. Он может быть скрыт и использоваться для хранения целого числа, необходимого для работы других объектов, например, [[Machine|машинами состояний]].
+
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
−
== Общие параметры ==
+
! width="20%"|[[Learning|Оглавление]]  
−
Смотреть описание [[Object|Object]].
+
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
−
== Основные параметры ==
+
|}
−
*'''res''' ('' res '') - Графический ресурс для отображения цифр ([[Интерфейс_ResourceEditor|анимированный клип]] из 10 фреймов: первый фрейм - 0, последний 9). Перетаскивается мышкой из редактора ресурсов.
+
----
−
*'''res neg''' ('' resneg '') - Графический ресурс для отображения отрицательных чисел (анимированный клип из 10 фреймов: первый фрейм - 0, последний 9). Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования). 11 фрейм - минус, если он есть.
+
{{TOC right}}
−
*'''отладка''' ('' trace '') - Отображать в окне состояний текущий объект
 
−
*'''min''' ('' min '') - Минимальное значение счетчика.
 
−
*'''max''' ('' max'') - Максимальное значение счетчика.
 
−
*'''val''' ('' val '') - Начальное (текущее)  значение счетчика.
 
−
*'''val2''' ('' val2 '') - Дополнительное значение счетчика. Только для время == 2.
 
−
*'''new_val''' ('' new_val '') - Новое значение. Будет записано в val при вызове состояния save.
 
−
*'''шаг (inc, dec)''' ('' dval '') - Величина, на которую изменяется счетчик при inc и dec ( min=1)  ( если меняем значение во вьювере, после задания значения - инитим счётчик).
 
−
*'''dx между цифрами''' ('' digShift '') - Расстояние между цифрами.
 
−
*'''выравнивание''' ('' left ''):
 
−
:'''1''' - число будет выравниваться по левому краю (цифры числа сдвигаются слева направо);
 
−
:'''2''' - будет выравниваться по центру;
 
−
:'''0''' - выравнивание по правому краю.
 
−
*'''время''' ('' time ''):
 
−
:'''1''' - число будет считаться временем в секундах и отображаться в виде mm:ss. Двоеточие должно быть 11 кадром графического ресурса;
 
−
:'''2''' - будет отображаться разделитель и второе значение из поля val2, разделитель также из 11 кадра графики;
 
−
:'''3''' - "нет (улучш.)" - поставив параметр время в это значение, каунтер будет правильно выравниваться в соответствии с параметром "выравнивание".
 
−
:'''0''' - будет отображенно число без форматирование во временную единицу.
 
−
*'''отображать дробную часть''' ('' showfloat '') - Отображать дробную часть
 
−
*'''разрядов не менее''' ('' digitsnum'') - отображает минимально фиксированное число разрядов(как на счётчиках) например при значении параметра 5 и значении счётчика 18 будет отображаться 00018.
 
−
'''Группа - времена''':
 
−
:'''невидимости''' ('' tmBeg '') - Время невидимости перед открытием;
 
−
:'''открытия''' ('' tmOpn '') - Время проявления от полной прозрачности к прозрачности, заданной в модификаторах;
 
−
:'''закрытия''' ('' tmCls '') - Время исчезания до полной прозрачности;
 
−
:'''изменения''' ('' tmChg '') - Время, за которое счетчик изменяется (inc, dec);
 
−
:'''шага изменения''' ('' tmChgIt '') - Скорость, с которой счетчик изменяется (inc, dec).
 
−
:'''скорость изменения''' ('' velChg'') - Время промежутков, через которые происходит обновление счетчика при изменении (inc, dec).
 
−
*'''сохранять в профиль''' ('' prof ''):
 
−
:'''1''' - значение будет сохранено в текущий профиль;
 
−
:'''0''' - сохранено глобально.
 
−
*'''игра''' ('' game '') - Имя игры (раздела в опциях), который надо вычитать для получения начального значения счетчика (например, для отображения результатов).
 
−
*'''уровень''' ('' level '') - Имя уровня (параметра в разделе игра - см.выше), который надо вычитать для получения начального значения счетчика (например, для отображения результатов). Раздел равен: game.level.
 
  
−
*'''Группа - шрифт''':
+
'''Цель:'''  
−
:'''имя''' ('' fn ''):
+
* Изучить настройки объектов [[HiddenList]], [[HiddenObject]] и  [[Table]] для типа механики Hidden Object Game на базе создания уровня из игры Travel.
−
::'''число, начиная с 0''' - порядковый номер шрифта (чтобы отобразился шрифт, нужно каунтеру задать ресурс (res), ресурс во вьювере отображён не будет);
+
−
::'''-1''' - рисовать каунтер клипами.
+
'''Задачи:'''  
−
:'''размер''' ('' fs '') - Размер шрифта в пикселях;
+
* Создать уровень игры содержащей 15 поисковых объектов.
−
:'''цвет 1''' ('' fc '') - Цвет текста.
+
* Обеспечить размещение 5 объектов для поиска.
 +
*  Создать окно, информирующее о победе или поражении, с указанием очков полученных и звёзд.
 +
 
 +
== Создание экрана и сцены в игровом проекте ==
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
Как и в предыдущих уроках первым делом создадим новый [[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>
 +
 
 +
<div style="display: flex; text-align: justify;">
 +
Если вы добавляете в ресурсы изображение с прозрачностью вокруг объекта, то в редакторе оно будет обрезано, но, при размещении объекта на сцене, прозрачность будет учитываться. Благодаря этому есть возможность размещения объектов на сцене обычным перетаскиванием, если художник позаботился о нас (''подготовил изображения для того, чтобы они располагались в местах для «прятанья»'').
 +
[[Файл:Lesson7_resize_template.png|350px|right]]
 +
</div>
 +
 
 +
<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>
 +
 
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
=== Настройка HiddenList ===
 +
[[HiddenList]] – это список поисковых объектов (Hidden), которые надо найти в хидден-сцене.
 +
Каждый поисковый объект на сцене связывают со списком. Объектов в списке может быть больше, чем будет показано в данной игровой сессии (поле "объектов"). В таком случае они будут выбраны случайным образом. Запоминаются те из них, по которым произошёл клик (''увеличивается счетчик их кликов''). При следующем заходе на сцену, поисковые слова сортируются по возрастанию числа кликов и снова активизируется количество спрятанных объектов, указанных в поле "количество".
 +
[[HiddenList]] определяет основные параметры для настройки [[HiddenObject]] (''например, скорость полета''). В дальнейшем, при необходимости, эти же параметры можно добавить в [[HiddenObject]], чтобы для данного объекта они "перебивали" общие значения для всех.
 +
Зададим основные параметры, такие как:  
 +
* num (поле «объектов») – максимальное количество объектов, участвующие в поиске.
 +
* table (поле «таблица») – идентификатор объекта [[Table]]. Необходим для вывода списка объектов для поиска.
 +
* counter (поле «счетчик») - счетчик, который записывает количество найденных объектов.
 +
* timer (поле «таймер (осталось)») - таймер, который показывает, сколько времени осталось.
  
−
<pre>
+
Также для коректной работы необходимо настроить параметры распределения. Для этого включим равномерное распределение, и выключим итерацеонное. Также необходимо включить новейшую адаптивность для того, чтобы всьо заработало.
−
Счетчик может отображать отрицательные чиста.
+
  </div>
−
Если для отображения используется графика, то 11-ым кадром в анимации должен быть символ "минус".
+
  <div>
−
Если счетчик отображается шрифтом, то можно указать цвет отрицательных чисел.
+
    [[Файл:Lesson7_hiddenlist_params.png|260px|right]]
−
</pre>
+
  </div>
 +
</div>
  
−
== Добавляемые параметры ==
 
  
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
  
−
[[Файл:Counte_1.png|right]]
+
=== Настройка Table ===
−
Меню выбора ''Добавляемые параметры'' к объектам активируется по нажатию правой кнопки мыши.
+
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_table_params.png|260px|right]]
 +
  </div>
 +
</div>
  
  
−
[[Файл:+.png]] '''dec: при уменьшении изменить объект''' ('' decChg '') - При уменьшении значения счетчика, изменить объект:
+
<div style="display: flex; text-align: justify;">
−
*'''объект''' ('' obj '') - При уменьшении значения счетчика, изменить этот объект;
+
  <div>
−
*'''состояние''' ('' obj '') - Состояние в которое переводится объект;
+
=== Настройка HiddenObject ===
−
*'''параметр''' ('' par '') - Параметр, который мы изменяем;
+
Как было сказано ранее, [[HiddenObject]] это наш «спрятанный» объект, который, возможно, предстоит найти. Для его настройки укажем следующие параметры:
−
*'''значение''' ('' st '') - Новое значение параметра.
+
* txtID (поле «текстID») – название хидден-объекта, которое будет отображаться в списке. Перетаскивается мышкой из текстового редактора;  
 +
* list (поле «list») – ссылка на [[HiddenList]], к которому будет подключен объект, для обеспечения связи между ними;  
 +
Параметр list можно задать выделив несколько [[HiddenObject]].
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_hiddenobj_params.png|260px|right]]
 +
  </div>
 +
</div>
  
 +
<blockquote>
 +
'''Внимание!''' [[HiddenList]] не будет работать без объекта Options, который вы должны были создать в предыдущем уроке, а так же без параметра id игры (Очковая система – id игры).
 +
</blockquote>
  
−
[[Файл:+.png]] '''условие при котором происходят изменения из раздела dec''' ('' decIf '') - Условие при выполнении которого происходят изменения из раздела dec. Их может быть несколько (логический AND):
+
== Упражнения ==
−
*'''объект''' ('' obj '') - Объект, свойства которого мы проверяем;
+
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
−
*'''состояние''' ('' st '') - Находится ли в этом состоянии объект;
+
<p>2. Установить для поиска 7 объектов вместо 5.</p>
−
*'''параметр''' ('' par '') - Имеет ли объект параметр в значении следующего поля;
+
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
−
*'''значение''' ('' val '') - Имеет ли объект параметр из следующего поля в этом значении;
+
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>
−
*'''куплено''' ('' val '') - Имя фичи для проверки её купленности;
 
−
*'''нет''' ('' not '') : Это условие должно не выполняться:
 
−
:'''1''' - если условие не выполняется, работает '''dec: при уменьшении изменить объект''';
 
−
:'''0''' - если условие выполняется, работает '''dec: при уменьшении изменить объект'''.
 
  
 +
== Настройка системы подсчета очков ==
 +
<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]]
  
−
[[Файл:+.png]] '''при опускании под min изменить объект''' ('' minChg '') - При уменьшении значения счетчика ниже min, изменить объект:
 
−
*'''объект''' ('' obj '') - При уменьшении значения счетчика ниже min, изменить этот объект;
 
−
*'''состояние''' ('' st '') - Состояние в которое переводится объект;
 
−
*'''параметр''' ('' par '') - Параметр, который мы изменяем;
 
−
*'''значение''' ('' val '') - Новое значение параметра.
 
  
 +
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
 +
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
  
−
[[Файл:+.png]] '''условие при котором происходят изменения из раздела min''' ('' minIf '') - Условие при выполнении которого происходят изменения из раздела min. Их может быть несколько (логический AND):
+
Настройки хидденлиста:  
−
*'''объект''' ('' obj '') - Объект, свойства которого мы проверяем;
 
−
*'''состояние''' ('' st '') - Находится ли в этом состоянии объект;
 
−
*'''параметр''' ('' par '') - Имеет ли объект параметр в значении следующего поля;
 
−
*'''значение''' ('' val '') - Имеет ли объект параметр из следующего поля в этом значении;
 
−
*'''куплено''' ('' buy '') - Имя фичи для проверки её купленности;
 
−
*'''нет''' ('' not '') : Это условие должно не выполняться:
 
−
:'''1''' - если условие не выполняется, работает '''при опускании под min изменить объект''';
 
−
:'''0''' - если условие выполняется, работает '''при опускании под min изменить объект'''.
 
  
 +
[[Файл:hiddenlist1.png]]
 +
[[Файл:hiddenlist2.png]]
 +
[[Файл:hiddenlist3.png]]
 +
[[Файл:hiddenlist4.png]]
 +
[[Файл:hiddenlist5.png]]
  
−
[[Файл:+.png]] '''inc: при увеличении изменить объект''' ('' incChg '') - При увеличении значения счетчика, изменить объект:
+
<div>Настройки таймера:</div>
−
*'''объект''' ('' obj '') - При уменьшении значения счетчика, изменить этот объект;
+
<div>[[Файл:Lesson7_timer_params.png]]</div>
−
*'''состояние''' ('' st '') - Состояние в которое переводится объект;
+
<div>Важно! Для правильного отображения таймера нужно правильно указать ресурсы, как и на изображении, которые будут отрисовываться. Также на таймере будем выводить и количество минут, для лучшей асоциации с часами.</div>
−
*'''параметр''' ('' par '') - Параметр, который мы изменяем;
 
−
*'''значение''' ('' val '') - Новое значение параметра.
 
  
 +
== Настройка системы комбо ==
 +
<div style="text-align: justify;">
 +
Для работы системы комбо нам понадобится объект [[Progress]]. Важно указать в нем тип линейный для коректной работы. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):
  
−
[[Файл:+.png]] '''условие при котором происходят изменения из раздела inc''' ('' incIf '') - Условие при выполнении которого происходят изменения из раздела inc. Их может быть несколько (логический AND):
+
[[Файл:progress_params.png]]
−
*'''объект''' ('' obj '') - Объект, свойства которого мы проверяем;
+
</div>
−
*'''состояние''' ('' st '') - Находится ли в этом состоянии объект;
+
<div style="display: flex; text-align: justify;">
−
*'''параметр''' ('' par '') - Имеет ли объект параметр в значении следующего поля;  
+
Для графики (заполнитель) можно использовать следующее изображение:
−
*'''значение''' ('' val '') - Имеет ли объект параметр из следующего поля в этом значении;
+
</div>
−
*'''куплено''' ('' buy '') - Имя фичи для проверки её купленности;
 
−
*'''нет''' ('' not '') : Это условие должно не выполняться:
 
−
:'''1''' - если условие не выполняется, работает '''inc: при увеличении изменить объект''';
 
−
:'''0''' - если условие выполняется,работает '''inc: при увеличении изменить объект''';
 
  
 +
[[Файл:666.png]]
  
−
[[Файл:+.png]] '''при превышении max изменить объект''' ('' maxChg '') - При увеличении значения счетчика более max, изменить объект:
+
<div style="display: flex; text-align: justify;">
−
*'''объект''' ('' obj '') - При увеличении значения счетчика более max, изменить этот объект;
+
  <div>
−
*'''состояние''' ('' st '') - Состояние в которое переводится объект;
+
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
−
*'''параметр''' ('' par '') - Параметр, который мы изменяем;
+
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
−
*'''значение''' ('' val '') - Новое значение параметра.
+
  </div>
 +
  <div>
 +
[[Файл:Lesson7_progress_score_1.png|right]]
 +
[[Файл:Lesson7_progress_score_2.png|right]]
 +
  </div>
 +
</div>
  
 +
<div style="text-align: justify;">
 +
Кроме поощрения игрока дополнительными очками существует также и способ «наказать» его за ошибочные клики (звёзды – лимит ложных кликов), после которых игровая сцена должна блокироваться. Для этого существует так называемая машина-блокатор.
 +
Создадим её и настроим следующим образом:
  
−
[[Файл:+.png]] '''условие при котором происходят изменения из раздела max''' ('' maxIf '') - Условие при выполнении которого происходят изменения из раздела max. Их может быть несколько (логический AND):
+
[[Файл:Lesson7_err_click_blocker.png]]
−
*'''объект''' ('' obj '') - Объект, свойства которого мы проверяем;
 
−
*'''состояние''' ('' st '') - Находится ли в этом состоянии объект;
 
−
*'''параметр''' ('' par '') - Имеет ли объект параметр в значении следующего поля;
 
−
*'''значение''' ('' val '') - Имеет ли объект параметр из следующего поля в этом значении;
 
−
*'''куплено''' ('' buy '') - Имя фичи для проверки её купленности;
 
−
*'''нет''' ('' not '') : Это условие должно не выполняться:
 
−
:'''1''' - если условие не выполняется, работает '''при превышении max изменить объект''';
 
−
:'''0''' - если условие выполняется,работает '''при превышении max изменить объект''';
 
  
−
== Состояния ==
+
а для того, чтобы машина именно блокировала сцену создадим внутри неё объект типа [[Rectangle]] закрывающий всю игровую сцену как маска (''высота и ширина объекта должна быть равна размерам сцены'').
 +
</div>
  
−
Объект '''Counter''' обладает рядом состояний:
+
<div style="display: flex; text-align: justify;">
−
*'''dec''' - Уменьшить значение счетчика на 1;
+
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
−
*'''inc''' - Увеличить значение счетчика на 1;
+
[[Файл:Lesson7_sel_blocker.png]]
−
*'''min''' - Установить счетчик в минимальное значение;
+
</div>
−
*'''max''' - Установить счетчик в максимальное значение;
 
−
*'''init''' - Переинициализировать счетчик;
 
−
*'''reset''' - Переустановить счетчик;
 
−
*'''read''' - Прочитать значение счетчика из опций;
 
−
*'''read_anim''' - Прочитать значение счетчика из поля в опциях; При этом: воспринимает параметры tmChg,  tmChgIt, velChg. Это значит, что счетчик при передаче ему этого состояния, "прокручивает" графику до значения, считанного из опций. Это заменяет используемую связку последовательного изменения dval, передачи init и inc.
 
−
*'''save''' - Сохранить значение счетчика в опции.
 
  
−
== Пример ==
+
== Создание окна с результатами игры ==
 +
<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>
  
 +
<div style="display: flex; text-align: justify;">
 +
Для всех счётчиков установим в качестве графического ресурса анимацию чисел созданную ранее, а для окна window и кнопки закрытия добавим новые. Можно использовать ресурсы представленные ниже:
 +
[[Файл:Lesson7_result_rect_params.png|right]]
 +
</div>
  
−
В качестве графического ресурса в счетчик перетаскивается анимационный клип из 10 кадров
+
‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
−
с цифрами от 0 до 9 (кадров может быть больше, но первые 10 - это цифры). Диапазон изменения задается в полях '''min''', '''max'''. Начальное значение в поле '''val'''. Счетчик можно увеличивать или уменьшать, меняя ему состояния '''inc''' (увеличить на 1) и '''dec''' (уменьшить на 1).
+
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]
  
−
Рассмотрим пример использования. Пусть есть счетчик и четыре кнопки. При помощи клика правой кнопки мыши, добавим каждой кнопке раздел "изменить состояние объекта", в котором при нажатии на кнопку будет вызываться состояние счетчика '''dec''', '''inc''', '''min''', '''max''' соответственно.
+
<div style="text-align: justify;">
−
<center>
+
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
−
[[Файл:test_cnt_1.png]]
+
</div>
−
</center>
 
−
В результате, при клике на кнопку '''inc''' будет происходить увеличение цифр 0 до 30 . После достижения максимальной границы, равной 30, счетчик перестанет увеличиваться. Аналогично, при клике на кнопку '''dec''', можно уменьшить значения счетчика. Клик на кнопку '''min''' и '''max''' переводят значение счетчика в минимальное и максимальное значение соответственно.
 
  
−
По умолчанию, разряды числа счетчика сдвигаются справа налево от его положения в редакторе (неподвижен правый край числа). Если в свойствах счетчика поле "'''выравнивание'''" установить в 1, то неподвижным будет левый край. При значении этого параметра 2, неподвижным будет центр числа. Параметр "'''dx между цифрами'''" задает дополнительное расстояние между цифрами в числе (если он меньше нуля, цифры будут ближе).
+
[[Файл:Lesson7_result_wnd_template.png|450px]]
  
  
−
'''Прямое изменение значения.'''
+
=== Настройка счётчиков ===
 +
<div style="text-align: justify;">
 +
Теперь, когда всё на своих местах, настроим счётчики и текстовые поля. Объект [[HiddenList]] сохраняет в объект [[Options]] некоторые данные о игре. Для того чтобы счётчик мог воспользоваться ими (''и не только счётчик'') необходимо в поле “Уровень” каждого счётчика указать строку вида [game.]level.param
 +
</div>
  
−
Значение счетчика можно изменить напрямую, например, их машины состояний:
+
<div style="text-align: justify;">
−
<pre>
+
Для нас важны следующие строки:
−
st = "wait"                        
+
* last_game.score30_total – Игровые очки. (счётчик game_points)
−
{
+
* last_game.score30_time -  Бонус за время. (time_points)
−
  click { go="change" }                  // при клике - идем в состояние "change"
+
* last_game.score30_accuracy -  Бонус за аккуратность (accuracy_points)
−
}
+
* last_game.ecmbRowMax -  Бонус за комбо (combo_points)
 +
* last_game.score30_level - Очки за уровень (game_points)
 +
</div>
  
−
st = "change"                           
+
<div style="text-align: justify;">
−
{
+
Укажите данные строки в соответствующих полях, а также описание (''игровые очки и т.д.'') в текстовых полях.
−
  set { obj=counter par="val"  val="5" } // меняем значение счетчика
+
</div>
−
  set { obj=counter st="reset" }        // переустанавливаем его
 
−
  wait{ go="wait" }
 
−
}
 
−
</pre>  
 
−
При клике на машину, она переходит в состояние "change".
 
−
В этом состоянии устанавливается параметр счетчика '''val''' в значение 5, после чего он перезапускается, переводясь в состояние "'''reset'''" (параметр '''val''' является строковым и счетчику его нужно перечитать, что и делается в состоянии "reset"). Аналогично счетчик можно было бы перевести в состояние "init", но тогда он бы полностью переинитился (обновились бы все его параметры из начальных настроек). В состоянии "reset" обновляется только поле "val".
 
  
  
−
'''Достижение границ.'''
+
=== Настройка звёзд ===
 +
<div style="text-align: justify;">
 +
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
 +
</div>
  
−
Пусть после серии уменьшений счетчика (состояния "dec") он достиг минимального значения '''min''' и попытался снизиться ниже. Этого не произойдет (ограничения не дают выйти за них).
+
Star1 (''Показать в любом случае'')
−
При достижении границ счетчика можно изменить состояния или параметры других объектов.
+
 
−
Для этого необходимо в свойствах при помощи правой кнопки мыши добавить раздел:
+
[[Файл:Lesson7_star1.png]]
−
+
 
−
[[Файл:+.png]] '''при опускании под min изменить объект''':
+
Star2 (''Если очки за аккуратность не равны 0'')
−
:'''объект''' - При уменьшении значения счетчика ниже min, изменить этот объект;
+
 
−
:'''состояние''' - Состояние в которое переводится объект;
+
[[Файл: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>
  
−
Подобных разделов может быть несколько. Если счетчик стал равным минимальному значению,
 
−
а его продолжают пытаться уменьшить, каждый раз будет вызываться изменение состояний (параметров) из этих разделов.
 
  
−
Пусть к примеру, разрешено 3 раза нажать на некоторую кнопку (например, хинт в игре). После 3-х изменений должно появляться окно с надписью "подсказки кончились" с кнопкой "close". При закрытии окна и повторной попытке нажать на кнопку, окно должно появляться снова.
+
=== Настройка отображения окна при победе/поражении ===
−
Это можно сделать при помощи счетчика, двух кнопок, и машины состояний в виде окна (верхняя таблица справа - это машина состояния окна, ниже - свойства кнопки и счетчика):
+
<div style="display: flex; text-align: justify;">
−
<center>
+
  <div>
−
[[Файл:counter3a.png]]
+
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
−
</center>
+
  </div>
 +
  <div>
 +
[[Файл:Lesson7_win_state.png|right]]
 +
[[Файл:Lesson7_lose_state.png|right]]
 +
  </div>
 +
</div>
  
 +
<div style="display: flex; text-align: justify;">
 +
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а  окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
 +
Проверяем на работоспособность игру.
 +
</div>
  
−
'''Значение из options.'''
+
[[Файл:final_result.png]]
  
−
Начальное значение счетчика можно задавать не только в редакторе (поле '''val'''), но и получать его сохраненное значение в [[Options|опциях игры]]. Пусть некоторая миниигра сохранила в опциях целое значение в переменной, например, с именем "scores". Тогда это значение будет присвоено счетчику, если в настройках счетчика в поле "уровень" написать "scores".
+
== Упражнения ==
 +
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
 +
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>
  
−
Если помимо поля "уровень" задано поле "игра", то значение для счетчика будет искаться
+
----
−
не в глобальных параметрах опций, а в разделе, определяемом полем "игра".
 
−
Если строка в поле "игра" разделено точками, то они определяют подразделы.
 
−
Так, если "уровень"="scores", а "игра"="puzzle.pack1", а xml файл options.xml
 
−
будет выглядеть примерно так:
 
−
<pre>
 
−
<obj nm="options" >
 
−
  <puzzle>
 
−
      <pack1 scores="3" />
 
−
  </puzzle>
 
−
</obj>
 
−
</pre>
 
−
то начальное значение счетчика будет равно 3. Если такого раздела или поля не окажется,
 
−
то счетчик будет невидимым.
 
  
−
Напомним, что объект [[Options]] в игре существует в единственном экземпляре и должен находиться на экране, помеченном как глобальный.
+
{| width="100%"  
 +
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
 +
! width="20%"|[[Learning|Оглавление]]
 +
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
 +
|}
  
−
[[Category:Main objects]]
+
[[Category:Learning]]

Версия 13:55, 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=Counter&oldid=10127»