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

Материал из wiki.appsalutecreator.com
(Различия между страницами)
Перейти к: навигация, поиск
 
(→‎Настройка системы комбо)
 
Строка 1: Строка 1:
−
'''Text''' - [[Object|объект]] для отображения текстовой информации с поддержкой многоязычности. Для управления текстовыми ресурсами используется [[TextEditor]]. <br>
+
{| width="100%" 
−
== Введение ==
+
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
−
[[Файл:2223.png]]<br>
+
! width="20%"|[[Learning|Оглавление]]
 +
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
 +
|}
 +
----
 +
{{TOC right}}
 +
 
 +
'''Цель:'''  
 +
* Изучить настройки объектов [[HiddenList]], [[HiddenObject]] и  [[Table]] для типа механики Hidden Object Game на базе создания уровня из игры Travel.
 +
 +
'''Задачи:'''
 +
* Создать уровень игры содержащей 15 поисковых объектов.
 +
* Обеспечить размещение 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>
  
−
Если необходимо разместить текст на сцене необходимо создать объект с типом text и перетащить на поле текстID текстовую строку из TextEditor. Также можно просто перенести их TextEditor выбранную текстовую запись, при этом автоматически создастся объект с типом Text.<br>
+
<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;">
−
(см. описание [[Object|Object]])
+
  <div>
 +
=== Настройка HiddenList ===
 +
[[HiddenList]] – это список поисковых объектов (Hidden), которые надо найти в хидден-сцене.
 +
Каждый поисковый объект на сцене связывают со списком. Объектов в списке может быть больше, чем будет показано в данной игровой сессии (поле "объектов"). В таком случае они будут выбраны случайным образом. Запоминаются те из них, по которым произошёл клик (''увеличивается счетчик их кликов''). При следующем заходе на сцену, поисковые слова сортируются по возрастанию числа кликов и снова активизируется количество спрятанных объектов, указанных в поле "количество".
 +
[[HiddenList]] определяет основные параметры для настройки [[HiddenObject]] (''например, скорость полета''). В дальнейшем, при необходимости, эти же параметры можно добавить в [[HiddenObject]], чтобы для данного объекта они "перебивали" общие значения для всех.
 +
Зададим основные параметры, такие как:
 +
* num (поле «объектов») – максимальное количество объектов, участвующие в поиске.
 +
* table (поле «таблица») – идентификатор объекта [[Table]]. Необходим для вывода списка объектов для поиска.
 +
* counter (поле «счетчик») - счетчик, который записывает количество найденных объектов.
 +
* timer (поле «таймер (осталось)») - таймер, который показывает, сколько времени осталось.
  
−
=== Основные параметры ===
+
Также для коректной работы необходимо настроить параметры распределения. Для этого включим равномерное распределение, и выключим итерацеонное. Также необходимо включить новейшую адаптивность для того, чтобы всьо заработало.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_hiddenlist_params_.png|260px|right]]
 +
  </div>
 +
</div>
  
−
*'''res''' - Графический ресурс подложки на которой выводится текст. Перетаскивается мышкой из редактора текста (поле должно находится в состоянии редактирования). Может отсутствовать.
 
−
*'''текстID''' - Выводимый текст перетаскивается из ресурса текстов, для перетягивания поле в объекте Text должно быть в режиме редактирования. Решетка (#) разделяет на страницы, черта (|) - принудительный переход на новую строку.
 
−
*'''текст''' - Выводимый текст без использования базы текстовых ресурсов. Решетка (#) разделяет на страницы, черта (|) - принудительный переход на новую строку.
 
−
*'''textCanBeOptionsKey''' - позволяет выключить проверку на ключ в опциях (Если в поле '''text''' указать "x" - то с включённым функционалом, текстовый объект покажет значение из опций параметра "x"; Если выключено - отобразит "x");
 
−
*'''состояние''' - в поле указывается состояние текстового объекта, в которое он перейдет при загрузке экрана (это поле часто оставляют пустым, а состояния задают машиной).
 
  
−
'''!!! - Необходимо обязательно сохранять любые изменения с текстом в редакторе TextEditor.'''
+
<div style="display: flex; text-align: justify;">
 +
  <div>
  
−
[[Файл:Text1.PNG|800px|thumb|center]]
+
=== Настройка Table ===
 +
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
 +
  </div>
 +
  <div>
 +
    [[Файл:Lesson7_table_params.png|260px|right]]
 +
  </div>
 +
</div>
  
−
=== Дополнительные параметры ===
 
  
−
[[Файл:Text2.PNG|800px|thumb|right]]  
+
<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>
 +
'''Внимание!''' [[HiddenList]] не будет работать без объекта Options, который вы должны были создать в предыдущем уроке, а так же без параметра id игры (Очковая система – id игры).
 +
</blockquote>
  
−
*'''dx''' - Бордюр (отступ текста слева и справа от границы прямоугольника объекта);
+
== Упражнения ==
−
*'''dy''' - Бордюр (отступ текста сверху и снизу от границы прямоугольника объекта);
+
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
−
*'''отступ''' - Вертикальное расстояние между строчками в пикселях;
+
<p>2. Установить для поиска 7 объектов вместо 5.</p>
−
*'''h align''' - Горизонтальное форматирование. Если (c) - центрирование по горизонтали, если (r) - прижатие вправо;
+
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
−
*'''v align''' - Вертикальное форматирование. Если (c) - центрирование по вертикали.
+
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>
−
[[Файл:2224.png|250px|center]]
 
−
[[Файл:Text11.png|250px|left]]
 
−
[[Файл:Text22.png|250px|center]]
 
  
−
<br>
+
== Настройка системы подсчета очков ==
−
*'''автоматическое уменьшение''' - Функция позволяет уменьшить размер шрифта, чтобы уместить текст внутри прямоугольника ( размеры текстового объекта).
+
<div style="display: flex; text-align: justify;">
−
*'''минимальный размер шрифта''' - Минимальный размер до которого уменьшит функция автоскейла.
+
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
−
*'''уменьшать до строк''' - Нужно для функционала автоматического уменьшения. Попытается строку преобразовать в n строк ( исп. для цен).
+
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
−
[[Файл:890a37f3ed.jpg|center]]
+
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
−
<br>
+
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
 +
Создайте в редакторе ресурсов анимацию и укажите её в поле 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]]
  
−
'''Группа - Параметры отображения текста'''
 
  
−
*'''время до открытия''' - Время перед началом проявления текста (от невидимого до заданной прозрачности);
+
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
−
*'''время открытия''' - Время проявления текста и подложки до alpha в начале;
+
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
−
*'''время закрытия''' - Время исчезновения текста и подложки от alpha до 0 в конце. Если отрицательно - текст не закрывается;
 
−
*'''буквы''' - Задержка в ms для перехода к новой букве при подсветке;
 
−
*'''слова''' - Задержка в ms перед подсветкой следующего слова;
 
−
*'''страницы''' - Задержка в ms перед переходом к следующей странице или увяданию по alpha-каналу.
 
  
−
'''Группа - Параметры используемого [[шрифт]]а'''
+
Настройки хидденлиста:
  
−
*'''имя''' - Номер [[шрифт]]а - целое число, начиная с 0 (порядковый номер шрифта).
+
[[Файл:hiddenlist1.png]]
−
*'''размер''' - Размер [[шрифт]]а в поинтах.
+
[[Файл:hiddenlist2.png]]
−
*'''цвет 1''' - Цвет текста начального вида (бледный).
+
[[Файл:hiddenlist3.png]]
−
*'''цвет 2''' - Цвет прочитанного текста (контрастный). Чтение делается по буквам.
+
[[Файл:hiddenlist4.png]]
−
   
+
[[Файл:hiddenlist5.png]]
−
'''Группа - Время'''
 
−
*'''до появления символов''' ( '''tmBefore''' ) - Время до появления символов по alpha-каналу. Только для режима спрятанных символов; Пауза перед стартом анимации (по сути отсрочка сост. "start");
 
−
         
 
−
'''Группа - Параметры поведения текста'''
 
  
−
*'''автопромотка''' - Автоматический переход на следующую страницу после завершения отображения текста;
+
<div>Настройки таймера:</div>
−
* '''зациклить''' - Зациклить страницы (после последней, перейти опять на первую);
+
<div>[[Файл:Lesson7_timer_params.png]]
−
*'''подсветка''' - Тип подсветки: 0-не подсвечивать, 1-по слову; 2-по букве слова (караоке); 3-по букве с начала страницы;
+
    [[Файл:Lesson7_timer_params_.png]]</div>
−
*'''звук''' - 1 - есть озвучка, 0 - нет;
+
<div>Важно! Для правильного отображения таймера нужно правильно указать ресурсы, как и на изображении, которые будут отрисовываться. Также на таймере будем выводить и количество минут, для лучшей асоциации с часами.</div>
−
*'''случайный выбор''' - 1 - при переключении страницы будет выбираться случайная, 0 - все страницы последовательно. Если выбрана 1 - в редакторе Texts Editor между страницами надо поставить знак #.
 
−
*'''прятать % символов''' ( ''' hidesymbols ''' ) - указанный процент символов которые будут спрятаны;
 
−
Тонкости исп. ''' hidesymbols ''':
 
−
    при сост. "init" - буквы будут выставленны моментально
 
−
    при изменение параметра и передаче сост. "start" - буквы будут проявляться за время "проявления одного символа" ("tmAppear");
 
−
    Добавленные буквы после сост. "start" записываются в текстовом объекте в поле "appearingChars" с разделителем "|" ;
 
−
    П.С. текстовый объект сохраняет маску спрятанных букв в опции ( до тех пор, пока не меняется количество символов - т.е. поменяв txtID или локализацию - маска перегенерируется);
 
  
 +
== Настройка системы комбо ==
 +
<div style="text-align: justify;">
 +
Для работы системы комбо нам понадобится объект [[Progress]]. Важно указать в нем тип линейный для коректной работы. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):
  
 +
[[Файл:progress_params.png]]
 +
</div>
 +
<div style="display: flex; text-align: justify;">
 +
Для графики (заполнитель) можно использовать следующее изображение:
 +
</div>
  
−
<br>Например:
+
[[Файл:666.png]]
  
−
[[Файл:Text3.PNG|800px|thumb|center]]
+
<div style="display: flex; text-align: justify;">
 +
  <div>
 +
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
 +
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
 +
  </div>
 +
  <div>
 +
[[Файл:Lesson7_progress_score_1.png]]
 +
[[Файл:Lesson7_progress_score_2.png]]
 +
  </div>
 +
</div>
  
−
*'''голос''' - голос для озвучки. Звуковой файл для одной реплики.
+
<div style="text-align: justify;">
−
*'''позиционирование текста'''
+
Кроме поощрения игрока дополнительными очками существует также и способ «наказать» его за ошибочные клики (звёзды – лимит ложных кликов), после которых игровая сцена должна блокироваться. Для этого существует так называемая машина-блокатор.
−
** горизонтальное -  0 - нет выравнивания; 1 - прижать к левому краю; 2 - центр; 3 - к правому;
+
Создадим её и настроим следующим образом:
−
** вертикальное  - 0 - нет выравнивания; 1 - прижать к верхнему краю; 2 - центр; 3 - к нижнему.
 
  
−
=== Добавляемые параметры ===
+
[[Файл:Lesson7_err_click_blocker.png]]
  
 +
а для того, чтобы машина именно блокировала сцену создадим внутри неё объект типа [[Rectangle]] закрывающий всю игровую сцену как маска (''высота и ширина объекта должна быть равна размерам сцены'').
 +
</div>
  
−
[[Файл:Menadd.png|300px|right]]
+
<div style="display: flex; text-align: justify;">
−
Меню выбора ''Добавляемые параметры'' к объектам активируется по правой кнопки мыши.
+
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
 +
[[Файл:Lesson7_sel_blocker.png]]
 +
</div>
  
−
[[Файл:+.png]] '''голос для озвучки''' - голос для озвучки 1 реплики. Следить за тем, чтобы количество звуков совпадало с количеством реплик.
+
== Создание окна с результатами игры ==
−
=== Состояния ===
+
<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>
  
−
*'''beg''' - по прохождению времени из поля время->до открытия переходит в состояние ''open'';
+
‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
−
*'''start''' - форматирует текст, после чего переходит в состояние ''beg'';
+
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]
−
*'''open''' - проявляет текст по альфе за время, указанное в поле время->открытия и переходит в состояние ''first'';
 
−
*'''run''' - выводит текст из поля txt/txtID по правилам из группы "Подсветка";
 
−
*'''pause''' - остановка вывода текста в обьект на подсвеченом слове;
 
−
*'''wait''' - показ последней напечатанной страницы, ожидание следующей команды;
 
−
*'''first''' - запустить показ первой страницы текста (страницы отделяются в текстовом ID символами #) в соответствии с правилами подсветки;
 
−
*'''last''' - запустить показ последней страницы текста (страницы отделяются в текстовом ID символами #) в соответствии с правилами подсветки;
 
−
*'''next''' - запустить показ следующей страницы текста в соответствии с правилами подсветки (если текущая страница - последняя, то в этом состоянии ничего не произойдет);
 
−
*'''prev''' - запустить показ предыдущей страницы текста в соответствии с правилами подсветки (если текущая страница - первая, то в этом состоянии ничего не произойдет);
 
−
*'''close''' - плавно растворяет текст по альфе в течении времени, указанном в поле время->закрытия, после чего переходит в состояние ''end'';
 
−
*'''cross''' - зачеркнуть текст;
 
−
*'''end''' - убрать текст из текстового обьекта.
 
  
−
=== Параметры ===
+
<div style="text-align: justify;">
 +
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
 +
</div>
  
−
*'''txtID''' - меняет объекту текстовый id. Перетягиваем из текстового редактора в поле ''val_txt'' необходимый текстовый id.
+
[[Файл:Lesson7_result_wnd_template.png|450px]]
−
*'''fc1'''  -  предоставляет возможность изменить цвет шрифта текстового объекта. В поле ''val'' вписывается цвет в виде 16-го кода.
 
−
*'''sense''' -  позволяет отображать разные поля текстового id. Если установить значение 0 - у текстового объекта будет отображаться поле ''word'', если 1 - ''sentence1'', если 2 - ''sentence2''.
 
−
*'''textWidth''' - ширина текущего текста в текстовом объекте в px (с учетом параметров форматирования текстового объекта).
 
−
*'''textHeight''' - высота текущего текста в текстовом объекте в px.
 
  
−
== Пример применения ==
 
  
−
[[Файл:Text3.PNG|800px|thumb|center]]
+
=== Настройка счётчиков ===
 +
<div style="text-align: justify;">
 +
Теперь, когда всё на своих местах, настроим счётчики и текстовые поля. Объект [[HiddenList]] сохраняет в объект [[Options]] некоторые данные о игре. Для того чтобы счётчик мог воспользоваться ими (''и не только счётчик'') необходимо в поле “Уровень” каждого счётчика указать строку вида [game.]level.param
 +
</div>
  
−
[[Файл:Ex3.PNG|800px|thumb|center]]
+
<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>
  
−
* Если у одного текстового ID слишком много страниц или же они должны меняться в запутанном порядке, то лучше создать несколько тестовых ID и по очереди присваивать их одному текстовому объекту с помощью машины состояний: команда ''set'', параметры ''obj''(текстовый объект), ''par''(txtID), ''val_txt''(текстовый ID, перетаскивается кнопкой мыши из редактора текстов).
 
−
* Отображать и делать невидимым текст можно несколькими способами, например, менять общие параметры vis или al, но целесообразней использовать состояния текстового объекта ''start'' и ''close''.
 
−
* Разделение строк в текстовой базе символом ''#'' можно использовать, если страниц 2(3). В этом случае для смены страниц используют состояние ''next''. Если страниц больше 2(3), лучше создать несколько текстовых ID и присваивать их текстовому объекту с помощью машины состояний.
 
−
* Значения временных параметров по умолчанию:
 
−
:время до открытия - 0,
 
−
:время открытия - 500,
 
−
:время закрытия - 500,
 
−
:буквы - 30,
 
−
:слова - 30,
 
−
:страницы - 500.
 
−
:Другими словами такие значения параметров равносильны нулю.
 
−
'''Для постепенного открытия (закрытия) текста следует указывать временные параметры отличные от значений по умолчанию.'''
 
  
 +
=== Настройка звёзд ===
 +
<div style="text-align: justify;">
 +
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно. Обратите внимание, что при вызове полей счетчиков мы перед last_game возможно нужно будет дописать p0, потому-что у нас очки сохраняются локально, и p0 - это имя пользователя.
 +
</div>
  
−
=== Картинка в тексте ===
+
Star1 (''Показать в любом случае'')
  
−
----
+
[[Файл:Lesson7_star1.png]]
  
−
:Иконка будет вставлена в текст, если будет символы - $id167$al0.5$dx5.
+
Star2 (''Если очки за аккуратность не равны 0'')
  
−
:Расшифровка:
+
[[Файл:star_accuracy.png]]
−
::$ - карявка для определения, что впереди что-то есть
 
−
::id167 - указываем отрисовать картинку с id==167 ( картинка должна присутствовать на этом экране, иначе не покажется; Если картинки нету в ресурсной базе - будет выполнено два пробела);
 
−
::$al0.5 - указываем альфу картинки;
 
−
::$dx5 - указываем что картинку смещаем на 5-ть пикселей вправо от точки вставки;
 
  
−
:Примечание:
+
Star3 (''Если очки за время не равны 0'')
−
::1) Если не указываем $al0.5 или $dx5, то берём стандартное значение ( к примеру $id167 - означает картинка 167 с альфой==1 и без смещения (dx==0));
 
−
::2) al и dx могут могут быть в любом порядке.
 
−
::3) Записывать в текст спец. символы можно и через переменную;
 
−
::4) Текст по высоте будет смещён на половину высоты самой большой картинки в строке ( если половина высоты больше размера шрифта);
 
−
::5) иконка вставляемая в текст должна быть без лишней альфы ( при отступах учитывается ширина и высота картинки).
 
  
−
:Пример:
+
[[Файл:star_time.png]]
  
−
[[Файл:Viewer 2.jpg]]
+
=== Настройка машины win ===
 +
<div style="text-align: justify;">
 +
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
 +
Настроим машину следующим образом:
 +
</div>
  
 +
<div style="display: flex;">
 +
[[Файл:Lesson7_win_mch_states.png|700px]]
 +
</div>
  
−
[[Файл:Viewer 3.jpg]]
+
<div style="text-align: justify;">
 +
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
 +
</div>
  
−
[[Файл:Viewer.jpg]]
 
  
 +
=== Настройка отображения окна при победе/поражении ===
 +
<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>
  
−
:Текстовый объект, если встретит в тексте символы $c0xFF46FF26 ( обязательно пробел до символов и после), то последующий текст будет перекрашен в указанный цвет.  
+
[[Файл:final_result.png]]
−
'''!!! Нельзя указывать вначале текстовой ячейки или сразу после #.'''
 
−
'''После перекрашивания не ставим пробел, должен быть символ  ( нельзя так : "текст $c0xFF46FF26 текст2")'''
 
  
−
:Расшифровка:
+
== Упражнения ==
−
::$c0xFF46FF26
+
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
−
::$ - карявка для определения, что впереди что-то есть
+
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>
−
::с - типа color
 
−
::0xFF46FF26 - код цвета 0xFF46FF26 ( 0x - обязательно ( указываем 16-тиричную систему исчисления), FF - альфа, 46 - число по Red каналу, FF - Green канал, 26 - Blue канал).
 
−
[[Файл:Select Color.jpg]]
 
  
−
:Пример:
+
----
−
::Текст_1 $c0xFF46FF26 Текст_2
 
−
::Текст_1 - будет цветом указанным в текстовом объекте, а Текст_2 - будет зелёным.
 
−
[[Файл:Viewer 4.jpg]]
 
  
 +
{| width="100%" 
 +
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
 +
! width="20%"|[[Learning|Оглавление]]
 +
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
 +
|}
  
−
[[Category:Main objects]]
+
[[Category:Learning]]

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

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

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.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 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
Источник — «https://wiki.appsalutecreator.com/index.php?title=Text&oldid=10146»