Создание игры «Hidden Object Game» — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Настройка системы комбо)
 
(не показаны 32 промежуточные версии 3 участников)
Строка 7: Строка 7:
 
{{TOC right}}
 
{{TOC right}}
  
'''Цель:''' Изучить настройки объектов [[HiddenList]], [[HiddenObject]] и  [[Table]] для типа механики Hidden Object Game на базе создания уровня из игры Travel.
+
'''Цель:'''  
 +
* Изучить настройки объектов [[HiddenList]], [[HiddenObject]] и  [[Table]] для типа механики Hidden Object Game на базе создания уровня из игры Travel.
 
   
 
   
'''Задача:''' Создать уровень игры содержащей 10 поисковых объектов расположенных на одном бэкграунде (фоне). При инициализации сцены обеспечить размещение 5 объектов для поиска.  
+
'''Задачи:'''  
 +
* Создать уровень игры содержащей 15 поисковых объектов.  
 +
* Обеспечить размещение 5 объектов для поиска.
 +
*  Создать окно, информирующее о победе или поражении, с указанием очков полученных и звёзд.
  
 
== Создание экрана и сцены в игровом проекте ==
 
== Создание экрана и сцены в игровом проекте ==
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
Как и в предыдущих уроках первым делом создадим новый [[Screen|экран]] Lesson_7 для создаваемой игры и игровую [[Scene|сцену]] stg_main.
 +
На созданной сцене добавим из редактора ресурсов фон (файл bg), 10 изображений из папки hiddenobj на выбор, которые спрячем в «подходящих» местах и изменим тип с [[Image]] на '''Game mechanic''' – [[HiddenObject]].
 +
Для того, чтобы при перемещении фона позиции «спрятанных» объектов не менялись их можно добавить внутрь объекта.
  
Откроем проект lessons. Создадим экран Lesson_7. [[Файл:Lesson7_textbase.png|right]]
+
[[Файл:Lesson7_bg_with_hiddens.png|400px]]
В экране Lesson_7 добавляем новую сцену* stg_7 с разрешением 960*640 (по умолчанию), в которую (через ResourcesEditor) добавим графические ресурсы из папки Lesson_7. (см. подготовка к работе [[Создание проекта]])
+
  </div>
 +
  <div>
 +
[[Файл:Lesson7_hidden_objects.png|right]]
 +
  </div>
 +
</div>
  
* Графические объекты должны разместиться точно на местах предназначенных для их «Прятанья». Перетягиваем сначала '''bg''', потом остальные объекты с папки ''hiddenObj''.
+
<div style="display: flex; text-align: justify;">
 +
Если вы добавляете в ресурсы изображение с прозрачностью вокруг объекта, то в редакторе оно будет обрезано, но, при размещении объекта на сцене, прозрачность будет учитываться. Благодаря этому есть возможность размещения объектов на сцене обычным перетаскиванием, если художник позаботился о нас (''подготовил изображения для того, чтобы они располагались в местах для «прятанья»'').
 +
[[Файл:Lesson7_resize_template.png|350px|right]]
 +
</div>
  
Создадим папку Lesson_7  в базе текстовых описаний с помощью TextEditor. Добавим в неё 10 текстовых записей, соответствующих именам поисковых объектов. Заполним для каждой текстовой записи 2 значения, один из которых называет сам предмет, а второе - является его синонимом или ассоцией, которая укажет на него ([[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Word]], [[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Sentence-En]]), добавим графическое отображение поискового объекта. Сделать это можно вручную, перетащив картинку соответствующего объекта из редактора ресурсов и, по нажатию на картинке правой кнопкой мыши, выберем тип "icon1". Или же более быстрым [[Интерфейс TextEditor#Добавление иконок в текстовый элемент | способом]].
+
<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>
  
1. Для всех поисковых графических объектов изменяем тип с image на [[HiddenObject]]: выделяем первый и последний элементы, удерживая кнопку Shift, в окне Property выбраем соответствующий параметр.
+
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
=== Настройка HiddenList ===
 +
[[HiddenList]] – это список поисковых объектов (Hidden), которые надо найти в хидден-сцене.
 +
Каждый поисковый объект на сцене связывают со списком. Объектов в списке может быть больше, чем будет показано в данной игровой сессии (поле "объектов"). В таком случае они будут выбраны случайным образом. Запоминаются те из них, по которым произошёл клик (''увеличивается счетчик их кликов''). При следующем заходе на сцену, поисковые слова сортируются по возрастанию числа кликов и снова активизируется количество спрятанных объектов, указанных в поле "количество".
 +
[[HiddenList]] определяет основные параметры для настройки [[HiddenObject]] (''например, скорость полета''). В дальнейшем, при необходимости, эти же параметры можно добавить в [[HiddenObject]], чтобы для данного объекта они "перебивали" общие значения для всех.
 +
Зададим основные параметры, такие как:  
 +
* num (поле «объектов») – максимальное количество объектов, участвующие в поиске.
 +
* table (поле «таблица») – идентификатор объекта [[Table]]. Необходим для вывода списка объектов для поиска.
 +
* counter (поле «счетчик») - счетчик, который записывает количество найденных объектов.
 +
* timer (поле «таймер (осталось)») - таймер, который показывает, сколько времени осталось.
  
[[Файл:Lesson7_hidden_obj.png]]
+
Также для коректной работы необходимо настроить параметры распределения. Для этого включим равномерное распределение, и выключим итерацеонное. Также необходимо включить новейшую адаптивность для того, чтобы всьо заработало.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_hiddenlist_params_.png|260px|right]]
 +
  </div>
 +
</div>
  
2. Создаем новую сцену, которую называем 7_1 и добавляем на нее специальные объекты [[Table]] и [[HiddenList]]. Для этого переносим графическое изображение table и изменяем его тип с image на Table. Название объекта изменить на table**
 
  
[[Файл:07 5.png]]
+
<div style="display: flex; text-align: justify;">
 +
  <div>
  
3. Для объекта HiddenList создаем  новый объект и меняем его тип с image на HiddenList. Для данного типа объекта не требуется графический ресурс. Название объекта изменить на HiddenList**
+
=== Настройка Table ===
 +
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_table_params.png|260px|right]]
 +
  </div>
 +
</div>
  
[[Файл:Lesson7_HiddenList.png]]
 
 
 
'''**''' Имена для специальных объектов могут использоваться любые.
 
 
== Детальная настройка объектов ==
 
 
'''1. Описание HiddenObject.'''
 
 
''HiddenObject'' - это поисковый объект, взаимодействующий со списком HiddenList. Каждому поисковому объекту необходимо указать графический ресурс (картинку), идентификатор объекта HiddenList и идентификатор текстового ресурса (строки описания) в HiddenList.[[Файл:Photo01.png|right]]
 
 
Необходимо выбрать используемый объект с именем HiddenList (тип HiddenObjectList) в поле list.
 
 
 
''текстID'' – название хидден-объекта, которое будет отображаться в списке. Перетаскивается мышкой из текстового редактора;
 
 
''текст'' – обычный текст (будет отображаться в таблице при отсутствии ТекстID, для быстрых экспериментов);
 
 
''list'' – ссылка на HiddenList, к которому будет подключен объект, для обеспечения связи между ними;
 
 
''flyer'' – объект типа flyer, который запустится в работу при нахождении поискового объекта. Неудачный клик обрабатывает HiddenList. Если параметр не задан, используется fly_ok объекта HiddenList.(objid);
 
 
''actor'' – объект, который отображает анимацию спрятанного объекта после удачного клика на него (обычно это машина состояния). Парметр необязателен. Актёры нужны тогда, когда отличается графика объекта, который непосредственно находится на сцене и который летит к таблице. Это может быть случай, когда на сцене лежит часть объекта, а летит целый. Или же на сцене - с тенью, а летит - без.
 
 
''тип'' – номер типа объекта, используется для логического разделения объектов при обработке HiddenList
 
 
 
 
'''2. Описание HiddenObjectList.'''
 
 
HiddenList - это список поисковых объектов (Hidden), которые надо найти в хидден-сцене. [[Файл:Photo02.png|right]] Каждый поисковый объект на сцене связывают со списком. Объектов может быть больше, чем будет показано в данной игровой сессии (поле "объектов"). В этом случае они выбираются случайным образом. Запоминаются те из них, по которым произошёл клик (увеличивается счетчик их кликов). При следующем заходе на сцену, поисковые слова сортируются по возрастанию числа кликов и снова активизируется количество спрятанных объектов, указанных в поле "количество".
 
 
HiddenList определяет основные параметры для настройки HiddenObject (скорость полета и т.п.). В дальнейшем, при необходимости, эти же параметры можно добавить в HiddenObject, чтобы для данного объекта они "перебивали" общие значения для всех.
 
 
 
Подготовка спрятанных объектов:
 
 
''num'' (поле "объектов") – максимальное количество объектов, участвующие в поиске. (int)
 
 
''hide'' (поле "прятать") – если 1, то делать невидимыми объекты, не участвующие в поиске. (int)
 
 
Визуальные параметры списка:
 
 
''table'' (поле "таблица") – идентификатор объекта Table. (objid)
 
 
''kind'' (внешний вид - поле "тип списка") – тип отображения объекта в списке (0-слово,1-ассоциация, 2-иконка, 3-иконка). (int)
 
 
''cross'' (внешний вид - поле "вычеркнуть") – зачеркивать найденный элемент списка. Eсли 0 (по умолчанию), то найденный элемент удаляется, иначе "зачеркивается".(int).
 
 
 
 
'''3. Настройка Table'''
 
 
 
[[Файл:Photo03.png]]
 
 
Хотелось бы напомнить , что вы можете “поиграться” с вкладкой “таблица”, чтобы настроить внешний вид , вспомогательную область для поиска предметов.
 
 
'''4. Параметры, общие для всех спрятанных объектов:'''
 
 
''die'' –  тип исчезания при удачном клике на объект (если нет актера) (int):
 
 
0: просто исчезает;
 
 
1: летит к пункту с описанием в списке HiddenList;
 
 
2: улетает в случайном направлении;
 
 
3: улетает к заданным координатам (fx, fy).
 
 
vm - скорость движения при полете к списку предметов после клика в px/sec (float)
 
 
vr - скорость вращения при полете к списку предметов после клик в град/sec (float)
 
 
fw - финальная ширина к которой надо уменьшится при подлете к финальной точке (int)
 
 
fh - финальная высота к которой надо уменьшится при подлете к финальной точке (int). Объект не должен изменять своих пропорций, поэтому fw или fh (или оба) всегда отрицательны.
 
 
fx - финальная координата x, к которой объект должен перелететь, при удачном клике (см. тип исчезания). (int)
 
 
fy - финальная координата x, к которой объект должен перелететь, при удачном клике (см. тип исчезания). (int)
 
  
 +
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
=== Настройка HiddenObject ===
 +
Как было сказано ранее, [[HiddenObject]] это наш «спрятанный» объект, который, возможно, предстоит найти. Для его настройки укажем следующие параметры:
 +
* txtID (поле «текстID») – название хидден-объекта, которое будет отображаться в списке. Перетаскивается мышкой из текстового редактора;
 +
* list (поле «list») – ссылка на [[HiddenList]], к которому будет подключен объект, для обеспечения связи между ними;
 +
Параметр list можно задать выделив несколько [[HiddenObject]].
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_hiddenobj_params.png|260px|right]]
 +
  </div>
 +
</div>
  
 
<blockquote>
 
<blockquote>
[[файл:wrong.png|right|32px]]
+
'''Внимание!''' [[HiddenList]] не будет работать без объекта Options, который вы должны были создать в предыдущем уроке, а так же без параметра id игры (Очковая система id игры).  
        '''Внимание!''' HiddenList не будет работать без объекта [[Редактор текстовых ресурсов#Упражнения|Options]], который вы должны были создать в предыдущем уроке, а так же без параметра ''id игры'' (Очковая система -> id игры; для теста заполним его любой строкой).
 
 
</blockquote>
 
</blockquote>
  
 
== Упражнения ==
 
== Упражнения ==
 +
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
 +
<p>2. Установить для поиска 7 объектов вместо 5.</p>
 +
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
 +
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>
  
1. Щелкнув правой кнопкой мыши по экрану Lesson_7, создать новый экран Lesson_7_1.
+
== Настройка системы подсчета очков ==
 
+
<div style="display: flex; text-align: justify;">
2. Создать новую сцену (с названием stg_7_1).
+
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
 
+
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
3. Скопировать все объекты из сцены stg_7 (экрана Lesson_7). (Одновременно можно выделять или копировать только объекты одного типа)
+
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
 
+
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
4. Вставить скопированные объекты в новую сцену stg_7_1.
+
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
 
+
[[Файл:Lesson7_timer_counter.png|right]]
[[Файл:Screenshot 1.png]]
+
</div>
 
 
5. В новой сцене:
 
 
 
a) добавить еще 3 графических ресурса и перевести в тип HiddenObject;
 
 
 
b) разместить на местах предназначенных для их «Прятанья»;
 
 
 
c) добавить текстовое описание в TextEditor;
 
 
 
e) установить время игры 20 секунд, паузу 2 секунды с переходом на экран Lesson_7_1.
 
 
 
== Настройка полноценной системы подсчета очков ==
 
 
 
Экран lesson_7  необходимо модифицировать в полноценный уровень с выводом количества очков, игрой на время и графикой.
 
 
 
Для этого создаем еще одну сцену 7_3 в первом экране с объектами, которые сделают игру полноценной: первый экран дополняем  2 счетчиками ([[counter]]), таймером ([[timer]]), машиной-блокатором ([[machine]]), прогрессом ([[progress]]), таблица (table) и подложкой (image). Второй экран с выводом очков составим позже.
 
 
 
[[Файл:Photo04.png]]  
 
 
 
Счетчик «amt» ([[counter]]) показывает сколько объектов найдено. Счетчик «score_H» ([[counter]]) насчитывает баллы за собранные объекты. Таймер ([[timer]]) запускается при старте игры и отсчитывает заданное время на игру, машина-блокатор «ban_H» блокирует сцену при серии ошибочных кликов. Прогресс «prog» ([[progress]]) активируется во время комбо.
 
 
 
Чтобы всё заработало необходимо указать счетчики, таймер, машину-блокатор и прогресс в свойствах HiddenList ([[hiddenList]]).
 
 
 
=== Счетчик ===
 
 
 
В редакторе ресурсов выбираем анимацию и добавляем графику для счетчика.  
 
 
 
<blockquote>
 
[[файл:wrong.png|right|32px]]
 
'''Внимание!'''  Если в редакторе ресурсов нету анимации, то [[Интерфейс_ResourceEditor#Анимация|создайте]] её -  это просто). Анимация создается с названием папки, в которой хранились картинки, избегайте кириллицы в названии  папок.
 
</blockquote>
 
 
 
 
  ‎[[Файл: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]]
 
  ‎[[Файл: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]]
  
Создаем объект сцены с типом «[[counter]]», в поле res перетаскиваем анимацию с цифрами от 0 до 9, разделитель уже указан в настройках. Настройки для счетчика:
 
 
[[Файл:243.png]]
 
  
=== Таймер ===
+
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
 +
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
  
В свойствах таймера «[[timer]]» необходимо указать «значение» с которого начнется отсчет времени (20000 = 20 сек.).
+
Настройки хидденлиста:  
В свойство «графика» из графического редактора перетаскиваем анимацию которую делали для счетчика и двоеточие или делаем его обычным шрифтом, редактируя в свойствах параметр '''шрифт'''. Настройки для таймера:
 
  
[[Файл:Photo05.png]]
+
[[Файл:hiddenlist1.png]]
 +
[[Файл:hiddenlist2.png]]
 +
[[Файл:hiddenlist3.png]]
 +
[[Файл:hiddenlist4.png]]
 +
[[Файл:hiddenlist5.png]]
  
Также стоит обновить настройки в HiddenObjectList , т.к. если мы их не укажем, то отсчет времени просто не начнется. Время таймера и время указанное в HiddenObjectList должны совпадать, иначе отсчет времени будет идти от меньшего времени вне зависимости указано оно в HiddenList или в таймере.
+
<div>Настройки таймера:</div>
  [[Файл:Photo06.png]]
+
<div>[[Файл:Lesson7_timer_params.png]]
 +
    [[Файл:Lesson7_timer_params_.png]]</div>
 +
<div>Важно! Для правильного отображения таймера нужно правильно указать ресурсы, как и на изображении, которые будут отрисовываться. Также на таймере будем выводить и количество минут, для лучшей асоциации с часами.</div>
  
=== Прогресс ===
+
== Настройка системы комбо ==
 +
<div style="text-align: justify;">
 +
Для работы системы комбо нам понадобится объект [[Progress]]. Важно указать в нем тип линейный для коректной работы. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):
 +
</div>
 +
<div>
 +
[[Файл:progress_params.png]]
 +
</div>
 +
<div style="display: flex; text-align: justify;">
 +
Для графики (заполнитель) можно использовать следующее изображение:
 +
</div>
  
[[Progress]] используют для отображения каких либо ачивментов, например когда игрок проходит уровень он может получить 1,2,3 звезды или бронзовую, серебряную, золотую или совершая необходимые действия в игре, например комбо.
+
[[Файл:666.png]]
Настройки для '''прогресса''' :
 
  
[[Файл:555.png]]
+
<div style="display: flex; text-align: justify;">
 +
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
 +
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
 +
  </div>
 +
  <div>
 +
[[Файл:Lesson7_progress_score_1.png]]
 +
[[Файл:Lesson7_progress_score_2.png]]
 +
  </div>
  
Графика для Progress: [[Файл:666.png]]
+
<div style="text-align: justify;">
 +
Кроме поощрения игрока дополнительными очками существует также и способ «наказать» его за ошибочные клики (звёзды – лимит ложных кликов), после которых игровая сцена должна блокироваться. Для этого существует так называемая машина-блокатор.
 +
Создадим её и настроим следующим образом:
  
Настройки для машины-блокатора «ban_H» (machine) (подобъектe '''black''' изменяем тип на rectangle, более подробно о нем дальше):
+
[[Файл:Lesson7_err_click_blocker.png]]
  
[[Файл:Ban h na max.png]]
+
а для того, чтобы машина именно блокировала сцену создадим внутри неё объект типа [[Rectangle]] закрывающий всю игровую сцену как маска (''высота и ширина объекта должна быть равна размерам сцены'').
[[Файл:9.png]]
+
</div>
  
Настройки для '''hiddenList''':
+
<div style="display: flex; text-align: justify;">
 +
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
 +
</div>
 +
<div>
 +
[[Файл:Lesson7_sel_blocker.png]]
 +
</div>
  
[[Файл:HOL Final.png]]
+
== Создание окна с результатами игры ==
 +
<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>
  
Группа - звезды combo num =1 - количество быстро найденных объектов, нужное для получения звезды Combo. Combo time = 3000 - интервал между кликами, считающимися быстрыми. Combo accuracy = 0,85 - точность кликов для получения звезды Accuracy (1 = 100%, все клики должны быть только удачные). Лимит ложных кликов = 5 - количество неверных кликов. Формула расчета его: количество верных кликов делим на общее количество получаем коэффициент, если он равен или больше указного нами, то в опции пишем параметр, если нет то не пишем.
+
<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]]
  
В HiddenList в разделе очковая система для сохранения данных в профиль необходимо указать '''id игры''' (например "hidden").
+
<div style="text-align: justify;">
Для HiddenList и Counter пункт "сохранить в профиль" должен совпадать. Если в HiddenList указано "глобально", то и в Counter также необходимо установить "глобально".
+
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
 +
</div>
  
 +
[[Файл:Lesson7_result_wnd_template.png|450px]]
  
Машина ''win_lose_1'' помогает определить победителя и вызывает соответствующее окно ''win'' после победы или поражения.
 
[[Файл:Photo07.png]]
 
  
Добавим правой кнопкой мыши функцию "разбор: изменить состояние объекта" и укажем там машину ''win_lose_1'' состояние win. Состояние lose укажем в таймере timer_H также через добавление функции правой копкой мыши "время истекло: изменить состояние объекта".
+
=== Настройка счётчиков ===
 +
<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>
  
 +
<div style="text-align: justify;">
 +
Укажите данные строки в соответствующих полях, а также описание (''игровые очки и т.д.'') в текстовых полях.
 +
</div>
  
Создаем новую сцену '''w''' и создаем в ней объект c типом machine ''win'', на которой формируем окно вывода результатов из ректангла ([[Rectangle]]), текстовых объектов и счетчиков. Окно
 
должно открываться по окончанию игры и при выигрыше показывать набранные очки и надпись об удаче, при проигрыше - нулевые очки и надпись о неудаче. Также названия фотографий в рамке и в фоне могут отличатся!
 
  
[[Файл:Example.jpg]]
+
=== Настройка звёзд ===
 +
<div style="text-align: justify;">
 +
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно. Обратите внимание, что при вызове полей счетчиков мы перед last_game возможно нужно будет дописать p0, потому-что у нас очки сохраняются локально, и p0 - это имя пользователя.
 +
</div>
  
Графика для Rectangle rec: [[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]] [[Файл:00010.png]]   
+
Star1 (''Показать в любом случае'')
  
<blockquote>
+
[[Файл:Lesson7_star1.png]]
[[файл:wrong.png|right|32px]]
 
'''Внимание!''' Rectangle black (Цвет задается в свойстве фон->цвет заливки) используется в качестве фона, на котором будет размещаться всплывающие окно с показаниями результата пройденной игры.
 
</blockquote>
 
  
[[Файл:1012.png]] [[Файл:0102.png]]
+
Star2 (''Если очки за аккуратность не равны 0'')
  
 +
[[Файл:star_accuracy.png]]
  
Далее копируем Rectangle "black" и делаем подобъектом блокатора ban_H, а также меняем размеры rectangle black (устанавливаем не нулевые!), устанавливаем параметр фон и alpha на свое усмотрение.
+
Star3 (''Если очки за время не равны 0'')
  
Создадим еще 5 счетчиков. Они нам понадобятся в конце игры для выведения бонусного счета.
+
[[Файл:star_time.png]]
  
В свойствах счетчиков необходимо прописать уровень!
+
=== Настройка машины win ===
 +
<div style="text-align: justify;">
 +
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
 +
Настроим машину следующим образом:
 +
</div>
  
1) счетчик 7_4_1 — игровые очки;
+
<div style="display: flex;">
 
+
[[Файл:Lesson7_win_mch_states.png|700px]]
уровень: last_game.score30_total
+
</div>
 
 
2) счетчик 7_4_2 — бонус за время;
 
 
 
уровень: last_game.score30_time
 
 
 
3) счетчик 7_4_3 — бонус за аккуратность;
 
 
 
уровень: last_game.score30_accuracy
 
 
 
4) счетчик 7_4_4 — бонус за комбо;
 
 
 
уровень: last_game.ecmbRowMax
 
 
 
5) счетчик 7_4_5 — очки за уровень;
 
 
 
уровень: last_game.score30_level
 
 
 
[[Файл:Counters.png]]
 
 
 
Важный аспект: после того как вы добавили last.game.xxx в графу уровень в каждом счетчике , графа игра должна остаться пустой и так же не стоит эти счетчики закидывать в HOL , т.к. одни и те же данные могут конфликтовать между собой. Также обязательным условием является включение графы “очки 3.0” в HOL`e.
 
 
 
После создания счетчиков и установки уровней добавляем 5 текстовых объектов, которые описывают значения, выводящиеся счетчиками в конце игры в окне результатов (игровые очки, бонус за время и т.д.).
 
 
 
=== Вывод итогов ===
 
 
 
Настройки для машины — '''star1'''
 
(проверка в опциях параметра last_game.last_star_accuracy0,
 
last_game.last_star_time0, )
 
 
 
[[Файл:Photo08.png]]
 
 
 
Настройки для машины — '''star2'''
 
(если параметр accuracy=0)
 
 
 
[[Файл:Photo09.png]]
 
 
 
Настройки для машины — '''star3'''
 
(если игра пройдена за указанное время)
 
 
 
[[Файл:Photo10.png]]
 
 
 
Настройки для машины — '''win'''
 
 
 
[[Файл:0306.png]]
 
 
 
 
 
Машина '''win''' считывает «read» показания счетчика и запускает star1 если игра пройдена.
 
 
 
Также создаем кнопку ''close'' (button), которая должна закрывать окно результатов. Добавляем "изменить состояние объекта"; объект win, состояние close.
 
 
 
'''(Подсказка)''' Для того, чтобы перезагрузить сцену с '''hiddenList''' и начать игру заново, в машине можно использовать команду '''set''' с параметром '''next_scr'''.
 
 
 
 
 
Включаем вьювер и наблюдаем как автоматически включается таймер, за каждый собранный предмет вам начисляются очки, прогресс показывает прохождение игры, в конце игры появляется окно с выводом результатов набранных очков с звездами.
 
  
 +
<div style="text-align: justify;">
 +
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
 +
</div>
  
  
 +
=== Настройка отображения окна при победе/поражении ===
 +
<div style="display: flex; text-align: justify;">
  
 +
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
 +
  </div>
 +
  <div>
 +
[[Файл:Lesson7_win_state.png]]
 +
[[Файл:Lesson7_lose_state.png]]
 +
</div>
  
  
 +
<div style="display: flex; text-align: justify;">
 +
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а  окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
 +
Проверяем на работоспособность игру.
 +
</div>
  
 +
[[Файл:final_result.png]]
  
 +
== Упражнения ==
 +
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
 +
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>
  
 
----
 
----

Текущая версия на 14:49, 13 октября 2023

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

Цель:

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

Задачи:

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

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

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

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 (поле «таймер (осталось)») - таймер, который показывает, сколько времени осталось.

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

Lesson7 hiddenlist params .png


Настройка 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.pngCount 1.png Count 2.png Count 3.pngCount 4.png Count 5.pngCount 6.pngCount 7.png ‎‎Count 8.pngCount 9.pngCoun (5).png


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

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

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

Настройки таймера:
Lesson7 timer params.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, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно. Обратите внимание, что при вызове полей счетчиков мы перед last_game возможно нужно будет дописать p0, потому-что у нас очки сохраняются локально, и p0 - это имя пользователя.

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