wiki.appsalutecreator.com - Вклад участника [ru]

Создание игры «Hidden Object Game»

2021-08-30T13:36:32Z

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

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

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

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

[[Файл:hiddenlist1.png]]
[[Файл:hiddenlist2.png]]
[[Файл:hiddenlist3.png]]
[[Файл:hiddenlist4.png]]
[[Файл:hiddenlist5.png]]

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

[[Файл:Lesson7_timer_params.png]]

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress_params.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:star_accuracy.png]]

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

[[Файл:star_time.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:final_result.png]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Hiddenlist5.png

2021-08-30T13:35:58Z

Blymar:

Файл:Hiddenlist4.png

2021-08-30T13:35:33Z

Blymar:

Файл:Hiddenlist3.png

2021-08-30T13:35:10Z

Blymar:

Файл:Hiddenlist2.png

2021-08-30T13:34:44Z

Blymar:

Файл:Hiddenlist1.png

2021-08-30T13:34:23Z

Blymar:

Создание игры «Hidden Object Game»

2021-08-30T13:16:46Z

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

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

<div style="display: flex; text-align: justify;">
<div>
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
</div>
<div>
[[Файл:Lesson7_hiddenlist_sch_1.png|260px|right]]
[[Файл:Lesson7_hiddenlist_sch_2.png|260px|right]]
</div>
<div>
[[Файл:Lesson7_timer_params.png|260px|right]]
</div>
</div>

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress_params.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:star_accuracy.png]]

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

[[Файл:star_time.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:final_result.png]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Final result.png

2021-08-30T13:16:04Z

Blymar:

Создание игры «Hidden Object Game»

2021-08-30T13:13:21Z

Blymar: /* Настройка звёзд */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

<div style="display: flex; text-align: justify;">
<div>
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
</div>
<div>
[[Файл:Lesson7_hiddenlist_sch_1.png|260px|right]]
[[Файл:Lesson7_hiddenlist_sch_2.png|260px|right]]
</div>
<div>
[[Файл:Lesson7_timer_params.png|260px|right]]
</div>
</div>

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress_params.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:star_accuracy.png]]

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

[[Файл:star_time.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:Lesson7_test_results_1.png|400px]] [[Файл:Lesson7_test_results_2.png|400px]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Star time.png

2021-08-30T13:13:00Z

Blymar:

Создание игры «Hidden Object Game»

2021-08-30T13:10:45Z

Blymar: /* Настройка звёзд */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

<div style="display: flex; text-align: justify;">
<div>
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
</div>
<div>
[[Файл:Lesson7_hiddenlist_sch_1.png|260px|right]]
[[Файл:Lesson7_hiddenlist_sch_2.png|260px|right]]
</div>
<div>
[[Файл:Lesson7_timer_params.png|260px|right]]
</div>
</div>

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress_params.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:star_accuracy.png]]

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

[[Файл:Lesson7_star3.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:Lesson7_test_results_1.png|400px]] [[Файл:Lesson7_test_results_2.png|400px]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Star accuracy.png

2021-08-30T13:10:03Z

Blymar: Blymar загрузил новую версию Файл:Star accuracy.png

Создание игры «Hidden Object Game»

2021-08-30T13:09:42Z

Blymar: /* Настройка звёзд */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

<div style="display: flex; text-align: justify;">
<div>
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
</div>
<div>
[[Файл:Lesson7_hiddenlist_sch_1.png|260px|right]]
[[Файл:Lesson7_hiddenlist_sch_2.png|260px|right]]
</div>
<div>
[[Файл:Lesson7_timer_params.png|260px|right]]
</div>
</div>

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress_params.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:star2.png]]

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

[[Файл:Lesson7_star3.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:Lesson7_test_results_1.png|400px]] [[Файл:Lesson7_test_results_2.png|400px]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Star accuracy.png

2021-08-30T13:09:24Z

Blymar:

Файл:Star2 1.png

2021-08-30T13:07:52Z

Blymar:

Файл:Lesson7 star2.png

2021-08-30T13:06:19Z

Blymar: Blymar загрузил новую версию Файл:Lesson7 star2.png

Создание игры «Hidden Object Game»

2021-08-30T13:01:57Z

Blymar: /* Настройка системы комбо */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

<div style="display: flex; text-align: justify;">
<div>
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
</div>
<div>
[[Файл:Lesson7_hiddenlist_sch_1.png|260px|right]]
[[Файл:Lesson7_hiddenlist_sch_2.png|260px|right]]
</div>
<div>
[[Файл:Lesson7_timer_params.png|260px|right]]
</div>
</div>

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress_params.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:Lesson7_star2.png]]

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

[[Файл:Lesson7_star3.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:Lesson7_test_results_1.png|400px]] [[Файл:Lesson7_test_results_2.png|400px]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Progress params1.png

2021-08-30T12:58:42Z

Blymar:

Создание игры «Hidden Object Game»

2021-08-30T12:57:18Z

Blymar: /* Настройка системы комбо */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! 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>

<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]]. Необходим для вывода списка объектов для поиска.
</div>
<div>
[[Файл:Lesson7_hiddenlist_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<div>
=== Настройка Table ===
Объект [[Table]] предназначен для вывода данных в табличном виде. [[HiddenList]] использует его для вывода списка хидденов, которые необходимо найти. Настроим таблицу для вывода элементов в формате 3 на 3, указав в графе «таблица» параметры подходящие параметры, а также зададим ширину, высоту (''объект с нулевыми размерами не отображается'') и позицию таблицы. Учитывайте, что таблица может перекрывать искомые объекты, тем самым создавая трудности для игрока.
</div>
<div>
[[Файл:Lesson7_table_params.png|260px|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
<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>

== Упражнения ==
<p>1. Добавить 5 новых «спрятанных» объекта.</p>
<p>2. Установить для поиска 7 объектов вместо 5.</p>
<p>3. Сделайте так чтобы объекты быстро улетали(исчезали) со сцены.</p>
<p>4. Создайте аналогичный экран Lesson_7_1, на котором установите время игры в 20 секунд, паузу 2 секунды и переход на экран Lesson_7.</p>

== Настройка системы подсчета очков ==
<div style="display: flex; text-align: justify;">
Для начала настройки системы подсчёта очков создадим новую сцену stg_interface, на которой будет отображаться интерфейс пользователя.
Первым делом перетащим подложку для таблицы из редактора ресурсов (файл down) и внутрь него поместим объект [[Table]], после чего добавим два объекта типа [[Counter]] (счётчик) и один [[Timer]] (таймер).
Счётчик score отвечает за вывод информации о очках игрока, count – о количестве найденных объектов, а таймер – за оставшееся время игры.
Обратим внимание что ни таймер ни счётчики ничего не показывают. Это связано с тем, что для них не настроен ни графический ресурс, ни шрифты (''настраивается в поле «шрифт» и работает если не указан графический ресурс'').
Создайте в редакторе ресурсов анимацию и укажите её в поле res («графика – цифры нормальные» для таймера) каждого из созданных объектов. Для анимации скачайте изображения ниже, либо найдите в интернете. Кроме этого для значений счётчика можно установить минимальное (поле «min») и максимальное (поле «max») значения.
[[Файл:Lesson7_timer_counter.png|right]]
</div>
‎[[Файл:Count 0.png]] ‎[[Файл:Count 1.png]] [[Файл:Count 2.png]] [[Файл:Count 3.png]] ‎[[Файл:Count 4.png]] [[Файл:Count 5.png]] ‎[[Файл:Count 6.png]] ‎[[Файл:Count 7.png]] ‎‎[[Файл:Count 8.png]] ‎[[Файл:Count 9.png]] ‎[[‎Файл:Coun (5).png]]

<div style="display: flex; text-align: justify;">
<div>
После указания ресурса и размещения объектов на сцене свяжем их с [[HiddenList]]. Не забудем указать количество очков за найденный объект в поле «очковая система – очки», а также, обязательно, id игры (''например, hidden'').
Кроме этого установим у таймера в поле «значение» тоже число что и у [[HiddenList]] в поле «время – игры» так как данные объекты считают время независимо, что может привести к случаям когда игра закончилась раньше или позже чем показал таймер.
</div>
<div>
[[Файл:Lesson7_hiddenlist_sch_1.png|260px|right]]
[[Файл:Lesson7_hiddenlist_sch_2.png|260px|right]]
</div>
<div>
[[Файл:Lesson7_timer_params.png|260px|right]]
</div>
</div>

== Настройка системы комбо ==
<div style="text-align: justify;">
Для работы системы комбо нам понадобится объект [[Progress]]. Создадим его и настроим следующим образом (''не забываем указать размер объекта''):

[[Файл:progress.png]]
</div>
<div style="display: flex; text-align: justify;">
Для графики (заполнитель) можно использовать следующее изображение:
</div>

[[Файл:666.png]]

<div style="display: flex; text-align: justify;">
<div>
Созданный [[Progress]] необходимо связать с объектом [[HiddenList]]. Так как система комбо связана с системой очков, то и искать соответствующие поля мы будем в «очковой системе» и, неожиданно, в «звёздах».
В поле очки 3.0 выбираем аналогичное значение. Данное поле необходимо для работы системы комбо.
</div>
<div>
[[Файл:Lesson7_progress_score_1.png|right]]
[[Файл:Lesson7_progress_score_2.png|right]]
</div>
</div>

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

[[Файл:Lesson7_err_click_blocker.png]]

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

<div style="display: flex; text-align: justify;">
Машина-блокатор указывается в «очковой системе» объекта [[HiddenList]].
[[Файл:Lesson7_sel_blocker.png]]
</div>

== Создание окна с результатами игры ==
<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>

‎[[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]]
[[Файл:Lesson7_close_btn.png]][[Файл:00010.png]]

<div style="text-align: justify;">
Теперь, когда у нас есть видимое окно для вывода сообщения, расположим текст и счётчики таким образом, чтобы они соответствовали друг другу, а также установим одну звезду. Внешний вид текстовых полей и счётчиков красиво настроим самостоятельно:) (''попробуйте изменить значения в полях и посмотрите на что они влияют'')
</div>

[[Файл:Lesson7_result_wnd_template.png|450px]]

=== Настройка счётчиков ===
<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>

=== Настройка звёзд ===
<div style="text-align: justify;">
Создадим в имеющейся звезде два состояния init и check, а затем скопируем её чтобы получилось ещё две звезды, каждую из которых настроим отдельно.
</div>

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

[[Файл:Lesson7_star1.png]]

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

[[Файл:Lesson7_star2.png]]

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

[[Файл:Lesson7_star3.png]]

=== Настройка машины win ===
<div style="text-align: justify;">
Как было сказано ранее машина win отвечает за открытие/закрытие окна, а также за инициализацию всех данных. Благодаря тому что все компоненты окна расположены внутри машины для отображения/скрытия его достаточно изменить прозрачность(al) машины.
Настроим машину следующим образом:
</div>

<div style="display: flex;">
[[Файл:Lesson7_win_mch_states.png|700px]]
</div>

<div style="text-align: justify;">
Для того, чтобы машина закрывалась добавим у кнопки close_btn свойство «изменить состояние объекта» с значениями: объект – win, состояние – close.
</div>

=== Настройка отображения окна при победе/поражении ===
<div style="display: flex; text-align: justify;">
<div>
Для настройки отображения окна первым делом стоит подумать какие условия победы/поражения, а затем установить что: победа – игрок нашёл все объекты, поражение – истёк таймер.
</div>
<div>
[[Файл:Lesson7_win_state.png|right]]
[[Файл:Lesson7_lose_state.png|right]]
</div>
</div>

<div style="display: flex; text-align: justify;">
Настройка вывода окна при победе настраивается в [[HiddenList]] путём добавления «разбор: изменить состояние объекта», а окна поражения в [[Timer]] – «время истекло: изменить состояние объекта».
Проверяем на работоспособность игру.
</div>

[[Файл:Lesson7_test_results_1.png|400px]] [[Файл:Lesson7_test_results_2.png|400px]]

== Упражнения ==
<p>1. Добавьте на сцену победы/поражения текстовое поле, которое будет сообщать «Вы победили!» или «Вы проиграли!» для каждого из игровых исходов.</p>
<p>2. Сделайте так, чтобы при закрытии окна победы/поражения игра начиналась заново.</p>

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Progress params.png

2021-08-30T12:56:49Z

Blymar:

Редактор текстовых ресурсов

2021-08-09T09:55:04Z

Blymar: /* Создаем текстовую базу */

{| width="100%"
| width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
|}
----
{{TOC right}}
----
'''Цель:''' научится пользоваться редактором текстовых ресурсов на примере использования объекта типа "text"

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* Вывести на экран последовательно два текста с помощью двух текстовых объектов.
* Вывести на экран эти же тексты, но с помощью только одного текстового объекта.

== Объект Text ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_6
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[Файл:Lesson6_1.jpg|right]]
Поверх фона поместите на сцену картинку ввиде стрелки вправо. Назовите ее '''button_next'''. Выберите для нее тип '''machine'''. Кликая на сцене правой кнопкой мыши, выберете пункт из выпадающего меню "Создать объект в текущем элементе". Новый объект переименуйте в Text и выберите для него тип '''[[Text|Text]]''' (также нужно выставить размеры данному объекту, чтобы текст был виден).

=== Меняем текст машиной ===

Для того, чтобы было что менять, скопируем объект Text и вставим его в этой же сцене. Переименуем его в text2. Так как эти два объекта без графического ресурса, то на сцене мы можем их видеть как пустые рамки (зеленая рамка, если объет выделен, и красная - если не выделен).
[[Файл:Lesson6_2.jpg]]

[[Файл:Text_prop.png‎|right]]
Посмотрим на свойства объекта Text. В поле "текст" впишем "Первая часть текста". В поле "шрифт" в строке "цвет 1" выберем белый цвет. В свойствах объекта text2 в поле текст впишем "Вторая часть текста". Цвет шрифта поставим такой же. Таким образом, мы получили две текстовых надписей на сцене, которые располагаются одна поверх другой. Если мы сейчас сохраним проект и запустим, то обе надписи будут видны одновременно, что затруднит их читаемость. Для того, чтобы мы могли без проблем их прочитать, сделаем переключение текстов по нажатию на кнопку. На самом деле, '''button_next''' только выглядит как кнопка - это машина состояний. Пропишем для нее логику таким образом, чтобы при нажатии на машину, она по-очереди делала видимым то один текст, то другой. Создайте для этой машины следующие состояния.

[[Файл:Lesson6_4.jpg]]

За видимость объектов отвечает параметр '''vis'''. Если vis=0, то объект не видно, если 1 - видно. По клику осуществляется переход между состояниями. Сохраните проект и запустите этот экран. Вы видите, что по клику на кнопку текст изменяется.
[[Файл:Lesson6_5.jpg]]

Переключать текстовые объекты можно еще несколькими способами:

- менять параметр '''al''' (alpha); это позволит делать текст полупрозрачным (в отличии от '''vis''', параметр '''al''' может принимать промежуточные значения между 0 и 1);

- менять текстовому объекту состояние; как известно, у объекта [[Text#Состояния | text]] есть 3 состояния '''first''', '''next''', '''end''', чтобы текст стал видимым, достаточно передать ему состояние '''first''', чтобы текст исчез, достаточно передать ему состояние '''end'''.

== Создаем текстовую базу ==

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

Для вызова текстового редактора можно воспользоваться меню '''Tools -> [[Интерфейс TextEditor|Text Editor]]''', либо кнопкой быстрого запуска [[Файл:Text_base.png‎]]. После нажатия появляется предупреждение:

[[Файл:warning.png]]

Нажимаем на кнопку "Yes", выбираем папку, которая является базой ресурсов проекта и выбираем файл с расширением '''.sirx''' (также можно создать новую текстовую базу. Для этого заходите в пункт меню '''Project -> New''', либо кнопкой быстрого запуска [[Файл:new.png]]. Появляется пустая база ресурсов, по умолчанию названная '''Untitled'''. Ее можно переименовать как вам удобней.)

Появляется пустая база ресурсов, по умолчанию названная '''text.xml''. Ее можно переименовать как вам удобней. Аналогично как в редакторе ресурсов слева вы видите дерево текстовых объектов. Нажимаем правой кнопкой по названию базы text.xml и выбираем ''add folder'''. Таким образом мы создали новую папку. Назовем ее lesson_6. Нажимая по папке правой кнопкой выбираем '''Add record'''. Каждый раз при добавлении новой текстовой записи редактор просит нас написать ее имя. Это имя можно будет изменить в любой момент. Запишем имя first_part. Создавать папки и записи можно также с помощью кнопок быстрого доступа на панели. Выделим папку lesson_6 и нажмем на значок "Add record". Запишем имя новой текстовой записи second_part.

[[Файл:Именитый.png|600px]]

Пока эти текстовые записи пустые. Для того чтобы заполнить их, выделим первую запись. Справа мы видим столбцы '''word''', '''sentence1''', '''sentence2''' и '''voice'''. В данном уроке нам понадобится только первый столбец '''word'''. Об остальных подробнее узнаете в следующем уроке. В строках записывается текст на разных языках. Запишем текст на русском и его перевод на английский в соответствующие поля. Для first_part - Первая часть текста (The first part of the text), для second_part - Вторая часть текста (The second part of the text). Запись на разных языках позволяет, в зависимости от локализации мобильного устройства, выбирать язык текстовых объектов.

Для того что бы добавить какой-либо язык в базу данных необходимо выполнить следующие действия:
1) Проходим путь Project/Properties/Select languages…

[[Файл:Добавление языка (1).png|600px]]

2) После этого необходимо выбрать языки которые вы хотите добавить

[[Файл:Добавление_языка_(2).png|400px]]

3) Можете похвалить себя

Если вы добавили языки, но они не видны, проверьте, не создали ли вы случайно свою папку в папке Untranslatable.

Чтобы корректно пользоваться текстовой базой после каждого ее изменения, ее необходимо сохранять. Можно воспользоваться кнопками быстрого доступа и нажать на значок дискеты. [[Файл:disketa.png]]

Каждый объект текстовой базы имеет свой уникальный '''id'''. Мы можем вызывать текст из текстовой базы меняя текстовому объекту на сцене этот id с помощью кнопки или машины состояний.

Давайте сделаем это на примере нашего проекта.
Так как теперь мы будем пользоваться только одним текстовым объектом на сцене, то второй text2 можно удалить. В объекте text удалим из пункта текст запись "Первая часть текста". Перепишем также немного состояния нашей машины. В поле '''val_txt''' мы записываем id текста путем перетаскивания его из текстовой базы (перед перетаскиванием id текста нужно сохранять и переоткрывать текстовую базу).

[[Файл:Lesson6_7.jpg]]

Теперь в состояниях машины мы присваиваем нашему объекту text только текстовые id из текстовой базы. Сохраняем проект и запускаем. Результат тот же, что и в первом случае. Заметим, что на сцене стало на один объект меньше, а состояния машины сократились на одну строчку. Может это не существенно в таком маленьком проекте, но в больших проектах количество объектов и величина исполняемого файла может стать решающей причиной к упрощению кода.

== Упражнения ==

* Добавьте в текстовую базу еще несколько записей.
* Расширьте состояния машины, чтобы последовательно вывести на экран все текстовые записи.
* Поменяйте язык приложения, используя объект '''[[Options|Options]]'''.
До сих пор мы изучали объекты и их свойства для каждого определенного экрана. Рассмотрим возможность изменять параметры всего приложения.
Будем изменять язык приложения. Для этого необходимо ознакомится с объектом Options.

'''Options''' — объект, который используется для хранения и управления глобальными параметрами приложения. Также Options позволяет хранить и использовать параметры записанные в него другими объектами.

В проекте lessons создаем новый экран, для которого в свойствах устанавливаем глобальный

[[Файл:Глобальный.PNG]]

В экране '''opt''' создадим сцену '''opt'''. Создадим на сцене opt новый объект, переименуем его в '''Options'''. Поменяем ему тип на option (Option → option).

[[Файл:Опции.PNG]]

Создадим в проекте новый экран '''lessons_6_1''' со сценой '''6_1'''. В сцену из проекта '''lessons_6''' копируем объекты '''bg_1''', '''button_next''', Text не изменяя их параметры. Перенесем на сцену из редактора ресурсов, из папки lessons_2, объекты: '''arrow_lf_norm''' и '''arrow_rt_norm'''. Переименуем, arrow_lf_norm в '''en''', arrow_rt_norm в '''ru''', и сделаем их машинами. Добавляем ниже на сцену новый объект, изменяем ему тип на '''[[Groupset|Groupset]]''' и имя на '''groupset'''. Щелкаем в свойствах по имени правой кнопкой мыши, добавляем в свойства объект, из списка объектов выбираем Text.

[[Файл:Группа.PNG]]

'''Описание объекта Groupset'''

'''Groupset (группа)''' позволяет передавать состояния и параметры множеству объектов, которые являются участниками группы. Участником группы является любой объект, указанный в в объекте Groupset.

Groupset удобно использовать, когда необходимо обращаться к множеству объектов.
Если объекту Groupset передается состояние (например st_1), то все объекты принадлежащие объекту Groupset должны иметь состояние st_1, иначе возникнет ошибка.

Объекты принадлежащие одной группе могут быть разного типа и разноименными.

Команды применимые к группе:

• ''set'' — группе можно установить состояние st и параметр (значение) par(val);

• ''drop'' — на группу (объекты принадлежащие группе) можно отпустить объект.

Для каждой из добавленных машин запишем состояния.

Машина en:

[[Файл:En.PNG]]

Машина ru

[[Файл:Ru.PNG]]

Как видно, в состоянии on, каждой машины, задается lang (язык) в глобальном объекте Options. В состояние r Groupset передается состояние init (инициализация объекта).

Сохраняем и запускаем вьювер.

[[Файл:Вьювер.PNG]]

На экране расположено три кнопки и текст. При нажатие кнопки вперед язык текста меняется — на русский, при нажатие назад — на английский, желтая кнопка вперед меняет сам текст.
----
{| width="100%"
| width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
|}

[[Category:Learning]]

Файл:Disketa.png

2021-08-09T09:50:30Z

Blymar:

Файл:New.png

2021-08-09T09:34:31Z

Blymar:

Файл:Warning.png

2021-08-09T09:15:50Z

Blymar:

Работа с эффектами

2021-08-06T06:28:10Z

Blymar: /* Использование Видео */

{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}
----
{{TOC right}}

'''Цель:''' изучить возможности редактора на примере применения различных эффектов.

'''Задачи:'''
* Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
* Создать экран и настроить просмотр Видео
* Настроить появление сцены с проявлением по альфе, переходить на следующий экран с проявлением по альфе
* Настроить фоновую музыку.

== Партиклы (Particles) ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → lessons.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.3, создать экран Lesson_09.

4. В экране Lesson_09 создать новую сцену 09, в которую (через Resources Editor) добавить графические ресурсы из папки Sources\Lesson_09 (см. подготовка к работе «Создание проекта»).

[[Файл:Lesson9_1.jpg|350px]]

'''Настройка объектов, работа с маской'''

В этом уроке поработаем над использованием объекта flyer (Particles). Параллельно с этим научимся пользоваться хитрым приемом "маска". В редактор ресурсов вы подгрузили уже знакомую вам графику "лунного пейзажа" и две части слоненка.

1. Разместим их на сцене как показано на рисунке.

[[Файл:Lesson9_2.jpg|350px]]

2. Сделаем из головы слоненка машину состояний. Голова должна вертеться из стороны в сторону с интервалом в 1 секунду. Запишем в состояниях машины следующие параметры.

[[Файл:Lesson9_3.jpg|350px]]

3. Посмотрите результат с помощью программы viewer. Слоненок будет мотать головой.

4. Теперь мы хотим, чтобы клик на слоненка вызывал какое-то действие, например, чтобы шел снег. Можно сделать из туловища машину состояний, но туловище маленькое, а нам нужен именно весь слоненок. Для этого нам понадобится маска. Из редактора ресурсов перетащим на сцену графический ресурс mask и переместим ее на слоненка. Маска очень маленькая, чтобы закрывать всего слоненка, поэтому воспользуемся модификаторами. Увеличим маску и сделаем ей прозрачность (alpha) 0,01.

[[Файл:Lesson9_4.jpg|350px]]

На сцене вы можете увидеть вокруг слоненка рамку от маски. Саму маску не видно из-за прозрачности. Стоит обратить внимание на то, что прозрачность мы сделали 0,01. Если бы она была равна 0, то маска не воспринимала бы клик, а была бы полностью прозрачной.

5. Как вы уже догадались, маска у нас будет машиной состояний, включающей другой объект. Этим другим объектом будет flyer. Флаеры (патиклы) используются для создания эффектов, когда один маленький объект размножается и совершает какие-либо действия, при этом все его частички ведут себя подобно.

Перетащим из редактора ресурсов на сцену графический ресурс snow и разместим его на сцене посередине по оси x (x=0) и вверху, немного за сценой (y=-320). Сделайте объекту тип flyer.

6. Параметры флаера настроим немного позже, а сейчас вернемся к нашей маске. Сделайте маске тип machine. И введите следующие параметры.

[[Файл:Lesson9_5.jpg|350px]]

В первом состоянии (начальном) машина передает объекту snow состояние end, а во втором - beg. У флаера есть два состояния end и beg, в которых он выключен и включен соответственно. Чтобы без нашего желания флаер не запускался, в свойствах snow в поле "состояние" запишем его начальное состояние end.

[[Файл:Lesson9_6.jpg]]

Подробно о свойствах флаера можно почитать [[Flyer|тут]]. Для того чтобы из него получился снег запишите следующие свойства.

[[Файл:snow_fl.png]]

7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.

8. Следующей нашей задачей будет создание разлетающегося кольца из звездочек вокруг желтой звезды на сцене, при клике на эту звезду. Представьте, что эта сцена у вас сейчас на экране мобильного телефона, а вам нужно дотронуться до звезды. Звезда очень маленькая, как следствие - по ней трудно попасть. Здесь нам на помощь опять явится маска. Снова перетащите ресурс mask на сцену из редактора ресурсов, переименуйте его в star_mask и поместите точно над звездой.

9. Растягивать маску не нужно, она таких размеров, как нам нужно. В свойствах star_mask в модификаторах задайте alpha=0,01.

10. Добавьте на сцену ресурс star из редактора ресурсов и поместите его точно на звезду.

[[Файл:Lesson9_8.jpg]]

11. Объекту star_mask нужно изменить тип на machine, а объекту star на flyer.

[[Файл:Lesson9_9.jpg]]

12. Задайте машине star_mask следующие состояния.

[[Файл:Lesson9_10.jpg]]

13. Флаеру star пропишите следующие свойства.

[[Файл:star_fl.png]]

14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_09, создать новый экран Lesson_09.1

2. Создать новую сцену с названием .

3. Скопировать все объекты из сцены 09 (экрана Lesson_09).

4. Вставить скопированые объекты в новую сцену (экрана Lesson_09.1).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) снег шел при клике на любую область экрана;
b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь;
с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров;

== Использование Видео ==

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

1. Создайте еще один экран Lesson_9.2 после экрана Lesson_9.1.

2. Добавьте сцену 09.

3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).

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

'''''Если, в базе ресурсов урока, видео отсутствует, скачайте или добавьте любое, которое вам понравится(только без произвола).'''''

1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.

[[Файл:Lesson9_12.jpg|350px]]

2. Из ресурса play сделайте машину состояний. Пропишите машине следующие состояния.

[[Файл:Lesson9_13.jpg]]

3. Объекту video выставляем следующие параметры.

[[Файл:vid.png]]

Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.

4. Сохраните проект и посмотрите результат в программе viewer.

Стоит учесть, что объект Video принимает видео(извините за тавтологию) определенного формата - '''*.ogv'''
Также есть поддержка формата '''*.webm'''

Если видео без альфа-канала (прямоугольное и не содержит в себе прозрачности), то используется 1 файл, id которого нужно перетащить из базы ресурсов в поле '''id видео RGB'''.

Если видео с альфа-каналом, то дополнительно используется '''id видео Alpha'''.

== Звуки ==

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

1. Вернитесь к экрану Lesson_09.

2. Создайте на сцене 09 новый объект и назовите его music.

[[Файл:Lesson9_12.jpg]]

3. Сделайте из объекта music машину состояний и пропишите следующие состояния.

[[Файл:Lesson9_15.jpg]]

Согласно этих состояний, сразу после запуска экрана начинает играть музыка music_gaming_04. Через 60 секунд после начала машина идет в состояние stop, где дается команда mus_stop и проигрывание музыки останавливается. Музыку можно не останавливать, тогда она будет играть по кругу.

=== Упражнения ===

В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) после остановки проигрывания музыки можно кликом на слоненка снова ее запустить;

b) чтобы музыка останавливалась кликом на слоненка.

----
{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}

[[Category:Learning]]

Работа с эффектами

2021-08-05T15:30:59Z

Blymar: /* Использование Видео */

{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}
----
{{TOC right}}

'''Цель:''' изучить возможности редактора на примере применения различных эффектов.

'''Задачи:'''
* Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
* Создать экран и настроить просмотр Видео
* Настроить появление сцены с проявлением по альфе, переходить на следующий экран с проявлением по альфе
* Настроить фоновую музыку.

== Партиклы (Particles) ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → lessons.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.3, создать экран Lesson_09.

4. В экране Lesson_09 создать новую сцену 09, в которую (через Resources Editor) добавить графические ресурсы из папки Sources\Lesson_09 (см. подготовка к работе «Создание проекта»).

[[Файл:Lesson9_1.jpg|350px]]

'''Настройка объектов, работа с маской'''

В этом уроке поработаем над использованием объекта flyer (Particles). Параллельно с этим научимся пользоваться хитрым приемом "маска". В редактор ресурсов вы подгрузили уже знакомую вам графику "лунного пейзажа" и две части слоненка.

1. Разместим их на сцене как показано на рисунке.

[[Файл:Lesson9_2.jpg|350px]]

2. Сделаем из головы слоненка машину состояний. Голова должна вертеться из стороны в сторону с интервалом в 1 секунду. Запишем в состояниях машины следующие параметры.

[[Файл:Lesson9_3.jpg|350px]]

3. Посмотрите результат с помощью программы viewer. Слоненок будет мотать головой.

4. Теперь мы хотим, чтобы клик на слоненка вызывал какое-то действие, например, чтобы шел снег. Можно сделать из туловища машину состояний, но туловище маленькое, а нам нужен именно весь слоненок. Для этого нам понадобится маска. Из редактора ресурсов перетащим на сцену графический ресурс mask и переместим ее на слоненка. Маска очень маленькая, чтобы закрывать всего слоненка, поэтому воспользуемся модификаторами. Увеличим маску и сделаем ей прозрачность (alpha) 0,01.

[[Файл:Lesson9_4.jpg|350px]]

На сцене вы можете увидеть вокруг слоненка рамку от маски. Саму маску не видно из-за прозрачности. Стоит обратить внимание на то, что прозрачность мы сделали 0,01. Если бы она была равна 0, то маска не воспринимала бы клик, а была бы полностью прозрачной.

5. Как вы уже догадались, маска у нас будет машиной состояний, включающей другой объект. Этим другим объектом будет flyer. Флаеры (патиклы) используются для создания эффектов, когда один маленький объект размножается и совершает какие-либо действия, при этом все его частички ведут себя подобно.

Перетащим из редактора ресурсов на сцену графический ресурс snow и разместим его на сцене посередине по оси x (x=0) и вверху, немного за сценой (y=-320). Сделайте объекту тип flyer.

6. Параметры флаера настроим немного позже, а сейчас вернемся к нашей маске. Сделайте маске тип machine. И введите следующие параметры.

[[Файл:Lesson9_5.jpg|350px]]

В первом состоянии (начальном) машина передает объекту snow состояние end, а во втором - beg. У флаера есть два состояния end и beg, в которых он выключен и включен соответственно. Чтобы без нашего желания флаер не запускался, в свойствах snow в поле "состояние" запишем его начальное состояние end.

[[Файл:Lesson9_6.jpg]]

Подробно о свойствах флаера можно почитать [[Flyer|тут]]. Для того чтобы из него получился снег запишите следующие свойства.

[[Файл:snow_fl.png]]

7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.

8. Следующей нашей задачей будет создание разлетающегося кольца из звездочек вокруг желтой звезды на сцене, при клике на эту звезду. Представьте, что эта сцена у вас сейчас на экране мобильного телефона, а вам нужно дотронуться до звезды. Звезда очень маленькая, как следствие - по ней трудно попасть. Здесь нам на помощь опять явится маска. Снова перетащите ресурс mask на сцену из редактора ресурсов, переименуйте его в star_mask и поместите точно над звездой.

9. Растягивать маску не нужно, она таких размеров, как нам нужно. В свойствах star_mask в модификаторах задайте alpha=0,01.

10. Добавьте на сцену ресурс star из редактора ресурсов и поместите его точно на звезду.

[[Файл:Lesson9_8.jpg]]

11. Объекту star_mask нужно изменить тип на machine, а объекту star на flyer.

[[Файл:Lesson9_9.jpg]]

12. Задайте машине star_mask следующие состояния.

[[Файл:Lesson9_10.jpg]]

13. Флаеру star пропишите следующие свойства.

[[Файл:star_fl.png]]

14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_09, создать новый экран Lesson_09.1

2. Создать новую сцену с названием .

3. Скопировать все объекты из сцены 09 (экрана Lesson_09).

4. Вставить скопированые объекты в новую сцену (экрана Lesson_09.1).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) снег шел при клике на любую область экрана;
b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь;
с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров;

== Использование Видео ==

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

1. Создайте еще один экран Lesson_9.2 после экрана Lesson_9.1.

2. Добавьте сцену 09.

3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).

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

'''''Если, в базе ресурсов урока, видео отсутствует, скачайте или добавьте любое, которое вам понравится(только без произвола).'''''

1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.

[[Файл:Lesson9_12.jpg|350px]]

2. Из ресурса play сделайте машину состояний. Пропишите машине следующие состояния.

[[Файл:Lesson9_13.jpg]]

3. Объекту video выставляем следующие параметры.

[[Файл:vid.png]]

Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.

4. Сохраните проект и посмотрите результат в программе viewer.

'''Внимание!!!'''
В более новой версии движка, окно свойств объекта выглядит так :

[[Файл:lesson_9_0_new_ui_screen.png]]

Стоит учесть, что объект Video принимает видео(извините за тавтологию) определенного формата - '''*.ogv'''
Также есть поддержка формата '''*.webm'''

Если видео без альфа-канала (прямоугольное и не содержит в себе прозрачности), то используется 1 файл, id которого нужно перетащить из базы ресурсов в поле '''id видео RGB'''.

Если видео с альфа-каналом, то дополнительно используется '''id видео Alpha'''.

== Звуки ==

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

1. Вернитесь к экрану Lesson_09.

2. Создайте на сцене 09 новый объект и назовите его music.

[[Файл:Lesson9_12.jpg]]

3. Сделайте из объекта music машину состояний и пропишите следующие состояния.

[[Файл:Lesson9_15.jpg]]

Согласно этих состояний, сразу после запуска экрана начинает играть музыка music_gaming_04. Через 60 секунд после начала машина идет в состояние stop, где дается команда mus_stop и проигрывание музыки останавливается. Музыку можно не останавливать, тогда она будет играть по кругу.

=== Упражнения ===

В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) после остановки проигрывания музыки можно кликом на слоненка снова ее запустить;

b) чтобы музыка останавливалась кликом на слоненка.

----
{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}

[[Category:Learning]]

Файл:Vid.png

2021-08-05T15:29:15Z

Blymar:

Настройка миниигр

2021-08-05T14:59:05Z

Blymar: /* Настройка объектов, создание машин состояний */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

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

Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.

Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.

На экране кнопочкам подбираем симпатичное и удобное расположение.

[[Файл:801.png]]

=== Настройка объектов, создание машин состояний ===

Меняем тип картинки '''level_01''' с '''image''' на [[Puzzle|puzzle]] (в папке Game mechanic) и устанавливаем следующие настройки:

[[Файл:802.png]]

В сцене '''08''' создаём ещё один объект. Даём ему имя '''applause''', тип '''machine''' (прописываем 3 состояния '''init''', '''on''' и '''off''').

В состоянии '''on''' добавляем команду '''play''' (проиграть звук) и в списке выбираем '''snd''' (короткий звук), который подгружаем с помощью базы ресурсов (если подходящего звукового файла в уроке не обнаружилось, его необходимо добавить самостоятельно; при добавлении звука в базу ресурсов, ее нужно сохранить и переоткрыть).Также добавляем команду '''wait'''

Возвращаемся к общим настройкам.

[[Файл:applause (2).png]]

Переходим к сцене '''Buttons''' и меняем тип обоих графических файлов на '''button'''. Общий вид лейаута на этом этапе получится примерно следующий:

[[Файл:804.png]]

В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.

[[Файл:805.png]]

Кнопка '''ico_R_normal2''' (переиграть) — кнопка, запускающая игру Puzzle сначала.

Нам необходимо, чтобы кнопка '''ico_R_normal2''' перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем '''клик:изменить состояние объекта'''. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл ('''level_01''') и состояние '''mix''', которое перемешает части исходной картинки.

[[Файл:806.png]]

Пусть кнопка '''hint_normal''' (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки '''клик:изменить состояние объекта''', только теперь для кнопки '''hint_normal'''. Выбираем объектом наш '''level_01''' и состояние для него '''hint'''.

<pre>
На заметку. Если возникает необходимость добавить 2 и более настройки при помощи правой кнопки мыши,
то лучше из кнопки сделать машину состояний и все состояния создать уже там.
</pre>

Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.

=== Упражнения ===

Копируем экран '''lesson_8''' и переименовываем его в '''lesson_8_1''', а сцену '''08''' в '''08_01'''.

[[Файл:807.png]]

В новом экране вносим все изменения самостоятельно. Необходимо:

a) добавить другой аудиофайл, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

=== Store ===

В реальной игре нам может понадобиться счётчик подсказок, который даёт возможность совершать покупки подсказок за реальные деньги. Для его реализации необходим объект '''[[Store|Store]]'''.

Создадим новый экран '''lesson_8_1_1'''. Добавим в него сцены '''08_1''' и '''Button_8_1'''. В сцену '''08_1''' поместим из экрана '''lesson_8_1''' объекты '''level_01''' и '''applause''', оставим их без изменения.

В сцену '''Button_8_1''' скопируем из '''lesson_08_1''' кнопки '''hint_normal''' и '''ico_R_normal2''' и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и назовём его '''hint'''. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик '''hint''' будет считывать купленные подсказки.

[[Файл:808.png]]

В '''hint_normal''' добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щёлкнув правой кнопкой мыши на сцену '''Button_8_1''' создадим новые сцены '''store''' и '''error''', которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:809.PNG]]

В машине '''store''' зададим считывания со счётчика и прозрачность экрана:

[[Файл:810.png]]

Машина '''error''' будет отвечать за вывод ошибки при неудачной покупке, то есть задаёт прозрачность экрана с ошибкой.

[[Файл:811.PNG]]

Для машины '''buy''' зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.

[[Файл:812.PNG]]

Вернёмся к машине '''hint_m''' сцены '''Button_8_1''' и пропишем для неё состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:813.PNG]]

Для того, чтобы вызывать машину '''hint_m''' в нашей игре, откроем кнопку '''hint_normal''' и в добавляемом свойстве '''изменить состояние объекта''' в качестве объекта выберем машину '''hint_m''', и пропишем ей состояние '''check'''.

'''Совершение покупки (настройка Store)'''

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

<pre>
На заметку. Store в проекте может быть только один.
</pre>

[[Файл:814.PNG]]

Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек '''store'''.

[[Файл:815.PNG]]

Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.

[[Файл:Photo12.png]]

И тут должен возникнуть вопрос. Почему среди перечня доступных объектов нет необходимого нам '''buy'''? Прежде чем читать дальше, предлагаю попробовать найти ответ на этот вопрос самостоятельно.

Для удобства использования, а также во избежание различных ошибок, в объектах экрана можно обращаться только к объектам этого же экрана. Исключением будут объекты глобальных экранов (вспоминаем прошлые уроки и смотрим на наш глобальный экран '''opt''').

Поэтому, чтобы получить доступ к объекту '''buy''', мы временно делаем экран '''lesson_8_1_1''' глобальным и завершаем настройку объекта '''store'''. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана '''lesson_8_1_1''' снова поставим '''нет'''.

<pre>
На заметку. Когда мы обращаемся к объекту, то в layout.xml
прописывается ссылка на этот объект в виде его id.
Когда убираем глобальность экрана и делаем его снова обычным,
выбранный объект мы в редакторе больше не видим,
но его id в лэйауте всё равно остаётся.
</pre>

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда; если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдём к оформлению. Для того чтобы на экране появлялось окно с предложением о покупке подсказки, необходимо его создать. В начальный момент окно должно быть невидимым и прокликиваем, это состояние задано в машине '''store'''. Создадим в ней 5 подобъектов.

Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект '''black''', пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.

Для объекта '''rec''' зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры. Настройки '''rec''' (имена файлов могут отличаться):

[[Файл:817.PNG]]

Третьему элементу поменяем тип на '''text''' с текстом "Купить подсказку?"

Четвёртый объект сделаем машиной и назовём её '''ok'''. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в '''res''' перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать '''scale''' по х и по у 0.5.
Опишем следующие состояния машины:

[[Файл:818.PNG]]

Все действия, связанные с совершением и провалом покупки, управляемые этой машиной, мы уже указали в '''store'''.

Пятый объект будет кнопкой '''no'''. Она по клику изменяет состояние ('''close''') объекта ('''store'''). Для внешнего вида кнопки в '''res''' перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать '''scale''' по х и по у 0.5.

Так же поступим со сценой '''error'''. В ней создадим четыре объекта: два '''rectangle''': '''rec_error''' – пустой, '''black_error''' — их можно скопировать из предыдущей сцены; кнопку '''buy''', которая будет переводить '''error''' в состояние '''i'''; текстовый объект '''text_error''' с текстом «error!». Общий вид этого задания в лейауте примерно следующий:

[[Файл:819.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в '''app.icf'''), поэтому вывод ошибки мы не получим.

== Patchwork ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 0х0 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на экран" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

[[Файл:Lesson8.3.Fin.png]]

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Файл:Applause (2).png

2021-08-05T14:57:32Z

Blymar:

Файл:Applause.png

2021-08-05T14:55:44Z

Blymar:

Файл:Photo11.png

2021-08-05T14:53:27Z

Blymar: Blymar загрузил новую версию Файл:Photo11.png

Настройка миниигр

2021-08-05T14:47:21Z

Blymar: /* Настройка объектов, создание машин состояний */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

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

Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.

Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.

На экране кнопочкам подбираем симпатичное и удобное расположение.

[[Файл:801.png]]

=== Настройка объектов, создание машин состояний ===

Меняем тип картинки '''level_01''' с '''image''' на [[Puzzle|puzzle]] (в папке Game mechanic) и устанавливаем следующие настройки:

[[Файл:802.png]]

В сцене '''08''' создаём ещё один объект. Даём ему имя '''applause''', тип '''machine''' (прописываем 3 состояния '''init''', '''on''' и '''off''').

В состоянии '''on''' добавляем команду '''play''' (проиграть звук) и в списке выбираем '''snd''' (короткий звук), который подгружаем с помощью базы ресурсов (если подходящего звукового файла в уроке не обнаружилось, его необходимо добавить самостоятельно; при добавлении звука в базу ресурсов, ее нужно сохранить и переоткрыть).Также добавляем команду '''wait'''

Возвращаемся к общим настройкам.

[[Файл:Photo11.png]]

Переходим к сцене '''Buttons''' и меняем тип обоих графических файлов на '''button'''. Общий вид лейаута на этом этапе получится примерно следующий:

[[Файл:804.png]]

В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.

[[Файл:805.png]]

Кнопка '''ico_R_normal2''' (переиграть) — кнопка, запускающая игру Puzzle сначала.

Нам необходимо, чтобы кнопка '''ico_R_normal2''' перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем '''клик:изменить состояние объекта'''. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл ('''level_01''') и состояние '''mix''', которое перемешает части исходной картинки.

[[Файл:806.png]]

Пусть кнопка '''hint_normal''' (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки '''клик:изменить состояние объекта''', только теперь для кнопки '''hint_normal'''. Выбираем объектом наш '''level_01''' и состояние для него '''hint'''.

<pre>
На заметку. Если возникает необходимость добавить 2 и более настройки при помощи правой кнопки мыши,
то лучше из кнопки сделать машину состояний и все состояния создать уже там.
</pre>

Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.

=== Упражнения ===

Копируем экран '''lesson_8''' и переименовываем его в '''lesson_8_1''', а сцену '''08''' в '''08_01'''.

[[Файл:807.png]]

В новом экране вносим все изменения самостоятельно. Необходимо:

a) добавить другой аудиофайл, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

=== Store ===

В реальной игре нам может понадобиться счётчик подсказок, который даёт возможность совершать покупки подсказок за реальные деньги. Для его реализации необходим объект '''[[Store|Store]]'''.

Создадим новый экран '''lesson_8_1_1'''. Добавим в него сцены '''08_1''' и '''Button_8_1'''. В сцену '''08_1''' поместим из экрана '''lesson_8_1''' объекты '''level_01''' и '''applause''', оставим их без изменения.

В сцену '''Button_8_1''' скопируем из '''lesson_08_1''' кнопки '''hint_normal''' и '''ico_R_normal2''' и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и назовём его '''hint'''. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик '''hint''' будет считывать купленные подсказки.

[[Файл:808.png]]

В '''hint_normal''' добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щёлкнув правой кнопкой мыши на сцену '''Button_8_1''' создадим новые сцены '''store''' и '''error''', которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:809.PNG]]

В машине '''store''' зададим считывания со счётчика и прозрачность экрана:

[[Файл:810.png]]

Машина '''error''' будет отвечать за вывод ошибки при неудачной покупке, то есть задаёт прозрачность экрана с ошибкой.

[[Файл:811.PNG]]

Для машины '''buy''' зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.

[[Файл:812.PNG]]

Вернёмся к машине '''hint_m''' сцены '''Button_8_1''' и пропишем для неё состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:813.PNG]]

Для того, чтобы вызывать машину '''hint_m''' в нашей игре, откроем кнопку '''hint_normal''' и в добавляемом свойстве '''изменить состояние объекта''' в качестве объекта выберем машину '''hint_m''', и пропишем ей состояние '''check'''.

'''Совершение покупки (настройка Store)'''

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

<pre>
На заметку. Store в проекте может быть только один.
</pre>

[[Файл:814.PNG]]

Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек '''store'''.

[[Файл:815.PNG]]

Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.

[[Файл:Photo12.png]]

И тут должен возникнуть вопрос. Почему среди перечня доступных объектов нет необходимого нам '''buy'''? Прежде чем читать дальше, предлагаю попробовать найти ответ на этот вопрос самостоятельно.

Для удобства использования, а также во избежание различных ошибок, в объектах экрана можно обращаться только к объектам этого же экрана. Исключением будут объекты глобальных экранов (вспоминаем прошлые уроки и смотрим на наш глобальный экран '''opt''').

Поэтому, чтобы получить доступ к объекту '''buy''', мы временно делаем экран '''lesson_8_1_1''' глобальным и завершаем настройку объекта '''store'''. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана '''lesson_8_1_1''' снова поставим '''нет'''.

<pre>
На заметку. Когда мы обращаемся к объекту, то в layout.xml
прописывается ссылка на этот объект в виде его id.
Когда убираем глобальность экрана и делаем его снова обычным,
выбранный объект мы в редакторе больше не видим,
но его id в лэйауте всё равно остаётся.
</pre>

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда; если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдём к оформлению. Для того чтобы на экране появлялось окно с предложением о покупке подсказки, необходимо его создать. В начальный момент окно должно быть невидимым и прокликиваем, это состояние задано в машине '''store'''. Создадим в ней 5 подобъектов.

Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект '''black''', пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.

Для объекта '''rec''' зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры. Настройки '''rec''' (имена файлов могут отличаться):

[[Файл:817.PNG]]

Третьему элементу поменяем тип на '''text''' с текстом "Купить подсказку?"

Четвёртый объект сделаем машиной и назовём её '''ok'''. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в '''res''' перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать '''scale''' по х и по у 0.5.
Опишем следующие состояния машины:

[[Файл:818.PNG]]

Все действия, связанные с совершением и провалом покупки, управляемые этой машиной, мы уже указали в '''store'''.

Пятый объект будет кнопкой '''no'''. Она по клику изменяет состояние ('''close''') объекта ('''store'''). Для внешнего вида кнопки в '''res''' перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать '''scale''' по х и по у 0.5.

Так же поступим со сценой '''error'''. В ней создадим четыре объекта: два '''rectangle''': '''rec_error''' – пустой, '''black_error''' — их можно скопировать из предыдущей сцены; кнопку '''buy''', которая будет переводить '''error''' в состояние '''i'''; текстовый объект '''text_error''' с текстом «error!». Общий вид этого задания в лейауте примерно следующий:

[[Файл:819.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в '''app.icf'''), поэтому вывод ошибки мы не получим.

== Patchwork ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 0х0 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на экран" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

[[Файл:Lesson8.3.Fin.png]]

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Движение машин: жучки, ключи и многое другое

2021-08-05T12:47:48Z

Blymar: /* Вращение вокруг пивота */

{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}
----
{{TOC right}}

'''Цель:''' изучить процессы движения и способы взаимодействия машин.

'''Задачи:'''
* реализовать разными методами "ход конем";
* организовать циклическое движение по квадрату;
* разобраться с понятием точки пивота;
* научиться согласовывать поступательное и вращательное движение;
* рассмотреть способ применения одного предмета на другой.

== Процессы и движение ==

До сих пор мы ограничивались только одной командой процессов - '''wait''' (ожидание).
В этом уроке мы рассмотрим другие процессы. Существуют следующие команды движения (изменения объекта):
* '''move''' - движение по прямой
* '''rot''' - вращение
* '''scale''' - изменение размера
* '''alpha''' - изменение прозрачности
* '''phys''' - движение в силовом поле.

В каждой команде достаточно много параметров. Например, можно сдвинуться (move)
по горизонтали на '''dx''' пикселей за время '''t'''. Вместо времени можно указать скорость '''v''' в пикселях в секунду.
Можно двигаться в определенную целевую точку с координатами ('''tx''', '''ty''') и т.д.

=== Ход конем ===

[[файл:lady_bug_64.png|right]]
Рассмотрим простой пример в котором объект движется сначала вверх на 100 пикселей, а затем вправо на 200.
В качестве такого объекта будем использовать ladybug (божья коровка или для краткости жучок),
картинку которой можно найти в редакторе ресурсов в папке этого урока.
Как обычно, перетаскиваем её на сцену, переименовываем и превращаем в машину состояний.
Организуем сначала движние нашего жучка при помощи трёх состояний:

[[файл:lesson_5_bug1.png]]

Первое, стартовое состояние является запускающим. Если кликнуть на жучка, то он начнет своё движение.
Когда перемещение по вертикали заканчивается (состояние up), жучок переходит в третье состояние (right), в котором движется вправо.
Закончив движение, он возвращается в стартовое состояние и ждет очередного клика.

Координатная ось Y (вертикальная) на сцене направлена вниз, а ось X (горизонтальная) -- вправо.
Поэтому, чтобы жучок начал двигаться вверх, его смещение должно быть отрицательным.
В нашем случае это dy=-100. Эти 100 пикселей объект должен пройти за одну секунду (t=1000).
В конце выполнения команды move происходит переход в следующее состояние, имя которого задается в поле "'''go'''".

При движении вправо, происходит смещение на 200 пикселей.
Чтобы скорость движения вверх и вправо была постоянной, необходимо соответственно увеличить
время движения (t=2000).

Точно такое же движение можно организовать в рамках одного, а не двух состояний.
Поместите на сцену еще одного жучка, дайте ему другое имя и задайте следующую машину состояний:

[[файл:lesson_5_bug2.png]]

Команды move в состоянии way выполняются последовательно.
Сначала отрабатывает нулевой move, а затем первый.

Протестируйте получившийся результат. Оба жучка должны двигаться одинаковым образом.
Не забывайте при тестировании включать отладочную информацию о текущих состояниях.

=== Последовательно и параллельно ===

И так, в рамках данного состояния все команды процессов с одинаковым названием выполняются '''последовательно'''.
При этом команды с разными именами выполняются '''параллельно'''.

[[файл:Def_procesess1.png|right]]
Пусть в состянии есть несколько команд move и несколько команд rot (вращения):
* move0 move1 rot0 move2 rot1 rot2
Независимо от их чередования, они выстраиваются в параллельные списки процессов:
* move0 rot0
* move1 rot1
* move2 rot2
Эти списки начинают одновременно выполняться сверху вниз:
отрабатывают команды move и одновременно с ними комананды rot.

Заставим нашего жучка при совершении хода конем поворачиваться на 360 градусов.
Для этого поместим третью машину со следующими состояниями:

[[файл:lesson_5_bug3.png]]

Запустите проект во вьювере.
Одновременно с выполнением двух команд move будет выполняться одна команда rot.
Время выполнения rot равно суммарному времени двух команд move (t=3000=1000+2000).
В результате, к концу движения, жучок поворачивается на da=360 градусов ('''da''' - изменение угла).

Переход в следующее состояние '''go''' в данном случае можно было бы поставить не в команду '''rot''',
а в последнюю команду '''move'''. Однако приведенное решение лучше, так как
гарантирует, что переход произойдет только, когда жучок полностью развернется.
Хотя суммарное время move совпадает с временем rot, реальное компьютерное время
выполнения этих команд может немного отличаться. В результате, если выйти из
состояния по окончанию движения, можно получить не до конца развернувшегося жучка.

=== Циклическое движение ===

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

[[файл:lesson_5_bug4.png]]

Четыре команды move выполняются одна за одной.
Затем вьювер натыкается на параметр loop=1 и еще раз выполняет
это движение с самого начала. Последняя команда move служит для перехода в стартовое состояние
ожидания клика.

Заметим, что нельзя было для перехода использовать '''wait'''.
Она, как и остальные команды процессов, запустилась бы параллельно с командами
и сработала бы сразу. В результате ни какого движения не получилось бы!

Если параметр loop=-1, то движение будет бесконечным.
Этого же можно было добиться, поставив вместо loop=-1 параметр go с переходом в это же состояние (перезапустить состояние).

=== Управление командами ===

Кроме команды зацикливания данного процесса, можно из одних команд запускать другие (начинать процессы другого типа). Например, пусть жучок движется вправо в течении 1 секунды и вращается 2 секунды.
Команда move закончится раньше команды rot.
Пусть затем, закончив полный оборот (на уже остановившемся объекте), он начинает снова двигаться вправо. Реализуется это так:

[[файл:lesson_5_move_rot.png]]

Команда '''rot''' зациклена (loop=-1). Кроме этого, она имеет параметр move=0
в котором задается номер команды move которую надо запустить на выполнение после окончания вращения.

Вызов одних команд процессов из других очень мощный, но одновременно и опасный инструмент.
Множественные вызовы различных команд превращают состояние в спагетти переходов,
логику которого часто сложно понять. Более того, иногда можно получить зависание вьювера
при неудачной перекрестной ссылке двух команд друг на друга.
По этой причине запрещено вызывать из данной команды другие команды этого же типа
(из rot вызывать rot и т.д.). Однако это, к сожалению, не снимает полностью проблему зависания.
Так, что готовьтесь...

=== Вращение вокруг пивота ===

При вращении (команда '''rot''') машина вращается вокруг, так называемой,
'''точки пивота''' (''pivot'' - штырь, болт; опорная точка).
В примерах выше эта точка находилась в центре картинки.
Изменим теперь её положение и посмотрим к какому эффекту это приведет.

Откроем редактор ресурсов и в папке этого урока найдем солнышко.
Сделаем четыре действий:
# Кликнем на имя солнышка (sun_1) в дереве на левой панели
# Под этой панелью поставим галочку в чекбоксе ''Edit''.
# Схватимся мышкой за красный крестик в центре солнышка на правой панели и перетащим этот крестик влево (либо выставить координаты под графой "source:").
# Уберем галочку в чекбоксе ''Save''
800
[[Файл:Vot-tak-vot.png|800px]]
Теперь перетащим солнышко на сцену этого урока (лучше для него создать отдельный экран и также закроем базу ресурсов).
Уменьшим его размеры модификаторами scale x и scale y, поставив там значение 0.5.
Превратим солнышко в такую машину:

[[файл:lesson_5_pivot2.png]]

Сохранив проект и запустив вьювер, мы увидим, что солнышко начало вращаться
по окружности. Машина по прежнему вращается вокруг точки пивота.
Однако теперь эта точка смещена в центр окружности.

В качестве упражнения попробуйте организовать вращение, подобное вращению Земли и Луны
(Земля вращается по окружности, а Луна вращается по окружности меньшего радиуса вокруг Земли).
Для этого Вам потребуется "Луну" сделать подобъектом "Земли" и правильно выставить
положение "Луны" относительно "Земли".
<blockquote>
[[файл:Ok.png|right|32px]]
'''Внимание!''' Если объект помещен в группу, то координаты его пивота изменяются относительно точки пивота того объекта, чьим подобъектом он является.
</blockquote>
Поэкспериментируйте. Можно использовать следующие картинки:

[[файл:eath.png]] [[файл:moon.png]]

== Как ездят кареты ==

=== Подготовка ===

Если Вы уже организовали движение Земли и Луны, то сложное движение,
возникающие при наличие подобъектов, не должно вызывать затруднений.
В этом примере мы покажем как согласовывать поступательное и
вращательное движение на примере кареты с двумя колёсами.
Разместим все три объекта (карету и её два колеса) на сцене
и сделаем колеса подобъектами кареты.
Превратим их все в машины состояний:

[[файл:lesson_5_kareta1.png]]

Пусть при клике на карету она проезжает некоторое расстояние по горизонтали и останавливается.
Сделайте самостоятельно такую машину и протестируйте её.
Карета должна перемещаться, а колеса, являясь её подобъектами, двигаться вместе с ней.
Однако, они пока не вращаются. Если в ресурсах не окажется колеса и кареты,
можно загрузить их непосредственно из этого урока:

[[файл:kareta.png]] [[файл:koleso.png]]

=== Немного математики ===

Разберемся как согласовать ''поступательную'' скорость кареты и ''угловую'' скорость вращения колес. Последняя должна быть подобрана таким образом, чтобы движение
выглядело естественным (колеса не проскальзывали вперед или назад).

Посмотрите на формулы возле рисунка кареты. В первой из них приводится связь длины окружности L колеса и его радиуса r. Ниже - коэффициент 57.3 перевода числа пи из углов в радианы (пи - это 3.1415.. в радианах или 180 градусов). Во второй колонке даны определения поступательной и угловой скорости (изменение расстояния или угла за некоторое время t).
Наконец, в третей колонке дана ключевая для нашей задачи формула, связывающая радиус '''r''', линейную '''v''' и угловую скорости '''w'''. Попробуйте её самостоятельно вывести, из предположения, что за одно и тоже время длина смещения кареты должна совпадать с длиной окружности обода колеса.
При этом поступательная скорость '''v''' измеряется в пикселях за секунду, а угловая скорость '''w''' в градусах за секунду.

=== Машины ===

Запрограммируем теперь карету и колеса так, что бы после клика начинала двигаться карета
и вращаться колеса. Когда карета останавливается, то и колеса должны переставать крутится.
Колеса сделаем одинаковыми простыми машинами с двумя состояниями, которые назовем '''off''' (неподвижны) и '''on''' (крутятся):

[[файл:lesson_5_kareta2.png]]

Заметим, что в состояниях колес нет команды draw, так как колесо всегда рисуется при помощи одной картинки, она берется по умолчанию, из той, которая была перетащена на сцену (свойство '''res''').
Угловая скорость '''v''' (в формулах она была обозначена как w) в команде rot измеряется в градусах в секунду. Поэтому v=180 означает, что колесо будет делать полный оборот (360 градусов) за 2 секунды.

Обратим внимание, что раньше вращение мы задавали двумя параметрами: изменением угла '''da''' за время '''t'''. Так как сейчас время вращения колеса не фиксируется (этим занимается карета),
то указан только один параметр: угловая скорость v.

Так как колеса одинаковые, то имеет смысл создать сначала одно колесо, запрограммировать его, а затем скопировать, получив готовое второе колесо. Его надо будет только затем мышкой перетащить на нужное место.
Не забываем также переименовать машины (в нашем случае это '''koleso1''' и '''koleso2''').

Карета должна при клике запускать на вращение колеса (переводя в состояние on),
а при остановке их останавливать:

[[файл:lesson_5_kareta3.png]]

Проверьте что параметр v=66 в команде move состояния run кареты, угловая скорость колес v=180 в команде rot состояния on согласуются с радиусом колеса r=21. Радиус колеса равен половине ширины его картинки (свойство "размер"). Если Ваше колесо имеет другой размер, пересчитайте поступательную скорость по приведенной выше формуле.

== Как открыть замок ключом ==

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

=== Постановка задачи ===

Рассмотрим простой пример подобного взаимодействия объектов.
Создайте новый экран и сцену на нём, так как предыдущий экран должен быть уже
забит различными насекомыми.
Перетащите на сцену из редактора ресурсов очередного жука, саквояж и ключ.
Лучше их перетаскивать именно в таком порядке.
Если порядок получился другой, мышкой в дереве проекта упорядочите
эти объекты, так чтобы последовательность рисования была: жук, затем саквояж, затем ключ.
Расположите эти объекты примерно в центре сцены и сделайте их машинами состояний.
Поменяйте их имена на '''ladybug''' (божья коровка), '''bag''' (саквояж) и '''key''' (ключ).

[[файл:lesson_5_key1.png|300px]]

Наша задача состоит в организации взаимодействия ключа, саквояжа и жука при котором,
работают такие правила:
* если схватить ключ мышкой, он будет таскаться по сцене в определенных границах;
* если отпустить ключ над саквояжем, саквояж должен "растаять", уменьшив свою прозрачность, а ключ уменьшиться в размерах, сжавшись в точку;
* одновременно с этим, из-под саквояжа начинает вверх бежать жук;
* когда жук заканчивает движение, саквояж появляется на своем месте, ключ также появляется на исходном месте, увеличившись из точки до начального размера, а жук исчезает, спрятавшись под саквояж.

=== Ключ ===

Запрограммируем сначала машину для ключа:

[[файл:lesson_5_key3.png]]

Три состояния соответствуют трём режимам функционирования ключа:
* '''drag''' - в этом, стартовом состоянии мы таскаем ключ по экрану
* '''open''' - открываем саквояж и уменьшаемся до 0
* '''back''' - восстанавливаем размер и возвращаемся в исходное положение на экране

Второе состояние состояние '''open''' не должно вызвать особых затруднений.
В команде '''set''' меняется состояние объекта '''bag''' (саквояж) на open.
В этот момент саквояж должен изобразить своё открытие.
В команде процессов '''scale''' происходит за время t=500 миллисекунд уменьшение масштаба рисования
ключа (его размера) до ''целевых значений'' tx, ty которые выбраны близкими к нулю.
После этого ключ переходит в третье состояние back.

В состоянии back он снова меняет свой масштаб, но уже к исходному значению 1
по ширине и высоте.
Кроме этого появилась новая команда '''init'''. Это команда инициализации
или переустановки свойств данной машины. В нашем случае, мы меняем её координаты
на значения x=0 и y=250 пикселей. Как и команда '''set''', команда '''init''' выполняется сразу при входе в состояние, поэтому ключ начнет увеличиваться уже с исходной позиции.
Желательно, на сцене ему сразу задать в свойствах положение x=0, y=250,
чтобы туда в дальнейшем он и возвращался.

Разберемся теперь с системой координат на сцене.

=== Координаты на сцене ===

Если сцена создавалась по умолчанию, то она имеет ширину 960 пикселей,
а высоту - 640. Начало отсчёта координат на сцене расположено в её центре.
Ось x, по которой откладывается горизонтальная координата объекта направлена вправо,
а ось Y для вертикальной координаты - вниз:

[[файл:lesson_5_key2.png|600px]]

Стоит раскрыть координаты любого объекта (свойство положение) на панели Properties.
Затем потаскать объект по сцене, наблюдая как эти координаты меняются.
Если '''x''' стало отрицательным, значит объект находится левее центра сцены.
Если же отрицательный '''y''', то объект расположен выше центра.

Заметим, что координата объекта определяется его точкой пивота.
Для трех объектов, находящихся сейчас на сцене точка пивота должна
совпадать с центрами картинок.

Таким образом, когда мы задали в команде init положение для ключа x=0, y=250,
мы поместили его по середине, в нижней части сцены.

=== Драг энд дроп ===

[[файл:lesson_5_key3_drag.png|right]]
Осталось разобраться с ещё двумя новыми командами,
которые появились в состоянии drag.
Первая команда '''drag''' (таскать) означает, что данную машину в этом состоянии
разрешено мышкой таскать по экрану.
При этом могут быть заданы координаты области за которую объект вытащить нельзя.
Эта область определяется двумя точками - верхним левым углом с координатами (x1,y1)
и правым нижним углом с координатами (x2,y2).

В нашем случае эти точки почти совпадают с углами сцены.
На самом деле область разрешенного таскания чуть меньше размера сцены.
Сделано это для того, чтобы ключ нельзя было даже краешком вытащить за сцену.
Правый нижний угол сцены имеет координаты (x2, y2)=(480, 320)=(960/2, 640/2).
Ширина ключа 128 пикселей (см. свойство размер).
Поэтому, чтобы правая сторона ключа не выехала за сцену, для координаты y1
мы берем значение 416 = 480-128/2 (сужаем границу таскания на половину ширины ключа). Аналогично считаются остальные координаты области разрешенного таскания.

Наконец, команда '''drop''' (бросить), регулирует, что должно произойти при бросании ключа
(отпускания мышки) если оно произошло на объекте '''obj'''.
В данном случае происходит переход в новое состояние (поле '''go''').

=== Саквояж и жук ===

Создадим теперь машину для саквояжа.
Она будет иметь два состояния open и close:

[[файл:lesson_5_key4.png]]

В состоянии close в команде '''init''' саквояж переустанавливает свою прозрачность в единичное значение (непрозрачен) al=1.00. Это необходимо, что бы появиться на экране после исчезновения.
Сам процесс исчезновения задается командой процесса '''alpha''' в состоянии open.
Эта команда меняет текущую прозрачность объекта до целевого значения ta=0 (полностью прозрачен) за время t=500 миллисекунд (пол секунды).
Кроме этого в этом состоянии меняется состояние жука (команда '''set'''), который должен из под саквояжа начать бежать.

'''Внимание!!!''' Если в параметре '''ta''' команды '''alpha''' установлено значение 0, то, помимо того что объект станет полностью прозрачен, стоить иметь ввиду, что он также станет невосприимчив к кликам. Для того, чтобы прозрачный объект считывал клики, стоит задать для '''ta''' следующее значение '''ta=0.02'''

Осталось создать два состояния для жука, который будет выбегать из под саквояжа.
Ничего сложного в его поведении нет:

[[файл:lesson_5_key5.png]]

Теперь самое время протестировать результат наших действий.
Потаскайте сначала ключ по сцене, убедившись, что он за неё не входит.
Затем наведите ключом на саквояж и отпустите мышку.
Всё должно прийти в движение.
Включите отладку (кнопка S и потом кнопка C) и понаблюдайте как изменяются состояния объектов.
В момент выполнения процессов можно несколько раз понажимать на пробел,
чтобы приостановить их выполнение и запустить снова.

== Что дальше? ==

Мы разобрали много команд и их параметров.
Однако это далеко не все возможности машин состояний.
Стоит прочитать документ [[Machine]] в котором описан весь язык машин.
Чем больше Вы создадите машин с различным поведением, тем увереннее будете с ними работать.

В заключение приведем несколько общих советов:
* Проектируйте сначала логику поведения машин на бумаге.
* Давайте осмысленные названия для машин и их состояний.
* Обязательно документируйте машины, описывая их поведение на естественном языке.
* Копируйте однотипные машины для сокращения времени по их программированию.
* При сложном взаимодействии нескольких машин, вводите управляющую машину (возможно невидимую), в которой концентрируйте основную логику поведения.
* Не увлекайтесь длинными состояниями с множеством команд процессов. Иногда поведение становится понятнее, если состояние разбить на несколько последовательных состояний.
* Смело спрашивайте совета у более опытных дизайнеров. Они в своё время поступали именно так.

== Упражнения ==

* создайте движение Земли по окружности, а Луны также по окружности, но вокруг Земли;
* сделайте движение кареты бесконечным так, что после того как она уезжает за правый край экрана, она появлялась из-за левого края;
* заставьте жука начинать бежать, только когда саквояж полностью уменьшится (set на выходе из состояния).
* организуйте так, чтобы при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз, обратно под саквояж.

----
{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}

[[Category:Learning]]

Работа с эффектами

2021-08-05T12:33:55Z

Blymar: /* Партиклы (Particles) */

{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}
----
{{TOC right}}

'''Цель:''' изучить возможности редактора на примере применения различных эффектов.

'''Задачи:'''
* Создать экран, на котором можно освоить работу с патиклами (объект flyer) и масками ;
* Создать экран и настроить просмотр Видео
* Настроить появление сцены с проявлением по альфе, переходить на следующий экран с проявлением по альфе
* Настроить фоновую музыку.

== Партиклы (Particles) ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → lessons.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.3, создать экран Lesson_09.

4. В экране Lesson_09 создать новую сцену 09, в которую (через Resources Editor) добавить графические ресурсы из папки Sources\Lesson_09 (см. подготовка к работе «Создание проекта»).

[[Файл:Lesson9_1.jpg|350px]]

'''Настройка объектов, работа с маской'''

В этом уроке поработаем над использованием объекта flyer (Particles). Параллельно с этим научимся пользоваться хитрым приемом "маска". В редактор ресурсов вы подгрузили уже знакомую вам графику "лунного пейзажа" и две части слоненка.

1. Разместим их на сцене как показано на рисунке.

[[Файл:Lesson9_2.jpg|350px]]

2. Сделаем из головы слоненка машину состояний. Голова должна вертеться из стороны в сторону с интервалом в 1 секунду. Запишем в состояниях машины следующие параметры.

[[Файл:Lesson9_3.jpg|350px]]

3. Посмотрите результат с помощью программы viewer. Слоненок будет мотать головой.

4. Теперь мы хотим, чтобы клик на слоненка вызывал какое-то действие, например, чтобы шел снег. Можно сделать из туловища машину состояний, но туловище маленькое, а нам нужен именно весь слоненок. Для этого нам понадобится маска. Из редактора ресурсов перетащим на сцену графический ресурс mask и переместим ее на слоненка. Маска очень маленькая, чтобы закрывать всего слоненка, поэтому воспользуемся модификаторами. Увеличим маску и сделаем ей прозрачность (alpha) 0,01.

[[Файл:Lesson9_4.jpg|350px]]

На сцене вы можете увидеть вокруг слоненка рамку от маски. Саму маску не видно из-за прозрачности. Стоит обратить внимание на то, что прозрачность мы сделали 0,01. Если бы она была равна 0, то маска не воспринимала бы клик, а была бы полностью прозрачной.

5. Как вы уже догадались, маска у нас будет машиной состояний, включающей другой объект. Этим другим объектом будет flyer. Флаеры (патиклы) используются для создания эффектов, когда один маленький объект размножается и совершает какие-либо действия, при этом все его частички ведут себя подобно.

Перетащим из редактора ресурсов на сцену графический ресурс snow и разместим его на сцене посередине по оси x (x=0) и вверху, немного за сценой (y=-320). Сделайте объекту тип flyer.

6. Параметры флаера настроим немного позже, а сейчас вернемся к нашей маске. Сделайте маске тип machine. И введите следующие параметры.

[[Файл:Lesson9_5.jpg|350px]]

В первом состоянии (начальном) машина передает объекту snow состояние end, а во втором - beg. У флаера есть два состояния end и beg, в которых он выключен и включен соответственно. Чтобы без нашего желания флаер не запускался, в свойствах snow в поле "состояние" запишем его начальное состояние end.

[[Файл:Lesson9_6.jpg]]

Подробно о свойствах флаера можно почитать [[Flyer|тут]]. Для того чтобы из него получился снег запишите следующие свойства.

[[Файл:snow_fl.png]]

7. Сохраните проект и проверьте его выполнение в программе viewer. При клике на слоненка начинает идти снег, а при повторном клике снег исчезает.

8. Следующей нашей задачей будет создание разлетающегося кольца из звездочек вокруг желтой звезды на сцене, при клике на эту звезду. Представьте, что эта сцена у вас сейчас на экране мобильного телефона, а вам нужно дотронуться до звезды. Звезда очень маленькая, как следствие - по ней трудно попасть. Здесь нам на помощь опять явится маска. Снова перетащите ресурс mask на сцену из редактора ресурсов, переименуйте его в star_mask и поместите точно над звездой.

9. Растягивать маску не нужно, она таких размеров, как нам нужно. В свойствах star_mask в модификаторах задайте alpha=0,01.

10. Добавьте на сцену ресурс star из редактора ресурсов и поместите его точно на звезду.

[[Файл:Lesson9_8.jpg]]

11. Объекту star_mask нужно изменить тип на machine, а объекту star на flyer.

[[Файл:Lesson9_9.jpg]]

12. Задайте машине star_mask следующие состояния.

[[Файл:Lesson9_10.jpg]]

13. Флаеру star пропишите следующие свойства.

[[Файл:star_fl.png]]

14. Сохраните проект и проверьте его выполнение в программе viewer. При клике на звезду флаер будет вести себя как взрыв сверхновой (или салют).

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_09, создать новый экран Lesson_09.1

2. Создать новую сцену с названием .

3. Скопировать все объекты из сцены 09 (экрана Lesson_09).

4. Вставить скопированые объекты в новую сцену (экрана Lesson_09.1).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) снег шел при клике на любую область экрана;
b) изменить параметры флаера snow таким образом, чтобы он выглядел как дождь;
с) поиграйтесь с параметрами флаера, чтобы прочувствовать зависимость поведения флаера от его параметров;

== Использование Видео ==

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

1. Создайте еще один экран Lesson_9.2 после экрана Lesson_9.1.

2. Добавьте сцену 09.

3. Загрузите на сцену ресурсы к этому уроку из редактора ресурсов (bg, play).

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

'''''Если, в базе ресурсов урока, видео отсутствует, скачайте или добавьте любое, которое вам понравится(только без произвола).'''''

1. Создайте на сцене новый объект и сделайте ему тип video. Переименуйте его в video.

[[Файл:Lesson9_12.jpg|350px]]

2. Из ресурса play сделайте машину состояний. Пропишите машине следующие состояния.

[[Файл:Lesson9_13.jpg]]

3. Объекту video выставляем следующие параметры.

[[Файл:Lesson9_14.jpg]]

Обратите внимание, что id видео перетаскивается мышкой из редактора ресурсов.

4. Сохраните проект и посмотрите результат в программе viewer.

'''Внимание!!!'''
В более новой версии движка, окно свойств объекта выглядит так :

[[Файл:lesson_9_0_new_ui_screen.png]]

Стоит учесть, что объект Video принимает видео(извините за тавтологию) определенного формата - '''*.ogv'''
Также есть поддержка формата '''*.webm'''

Если видео без альфа-канала (прямоугольное и не содержит в себе прозрачности), то используется 1 файл, id которого нужно перетащить из базы ресурсов в поле '''id видео RGB'''.

Если видео с альфа-каналом, то дополнительно используется '''id видео Alpha'''.

== Звуки ==

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

1. Вернитесь к экрану Lesson_09.

2. Создайте на сцене 09 новый объект и назовите его music.

[[Файл:Lesson9_12.jpg]]

3. Сделайте из объекта music машину состояний и пропишите следующие состояния.

[[Файл:Lesson9_15.jpg]]

Согласно этих состояний, сразу после запуска экрана начинает играть музыка music_gaming_04. Через 60 секунд после начала машина идет в состояние stop, где дается команда mus_stop и проигрывание музыки останавливается. Музыку можно не останавливать, тогда она будет играть по кругу.

=== Упражнения ===

В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) после остановки проигрывания музыки можно кликом на слоненка снова ее запустить;

b) чтобы музыка останавливалась кликом на слоненка.

----
{| width="100%"
| width="40%"|[[Настройка миниигр|Урок 8]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Экспорт, импорт и релиз проекта|Урок 10]]
|}

[[Category:Learning]]

Файл:Star fl.png

2021-08-05T12:32:47Z

Blymar:

Файл:Snow fl.png

2021-08-05T12:28:21Z

Blymar:

Настройка миниигр

2021-08-05T12:15:48Z

Blymar: /* Настройка объектов */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

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

Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.

Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.

На экране кнопочкам подбираем симпатичное и удобное расположение.

[[Файл:801.png]]

=== Настройка объектов, создание машин состояний ===

Меняем тип картинки '''level_01''' с '''image''' на [[Puzzle|puzzle]] (в папке Game mechanic) и устанавливаем следующие настройки:

[[Файл:802.png]]

В сцене '''08''' создаём ещё один объект. Даём ему имя '''applause''', тип '''machine''' (прописываем 3 состояния '''init''', '''on''' и '''off''').

В состоянии '''on''' добавляем команду '''play''' (проиграть звук) и в списке выбираем '''snd''' (короткий звук), который подгружаем с помощью базы ресурсов (если подходящего звукового файла в уроке не обнаружилось, его необходимо добавить самостоятельно; при добавлении звука в базу ресурсов, ее нужно сохранить и переоткрыть).Также добавляем команду '''wait'''

Возвращаемся к общим настройкам и устанавливаем стартовое состояние '''init'''.

[[Файл:Photo11.png]]

Переходим к сцене '''Buttons''' и меняем тип обоих графических файлов на '''button'''. Общий вид лейаута на этом этапе получится примерно следующий:

[[Файл:804.png]]

В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.

[[Файл:805.png]]

Кнопка '''ico_R_normal2''' (переиграть) — кнопка, запускающая игру Puzzle сначала.

Нам необходимо, чтобы кнопка '''ico_R_normal2''' перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем '''клик:изменить состояние объекта'''. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл ('''level_01''') и состояние '''mix''', которое перемешает части исходной картинки.

[[Файл:806.png]]

Пусть кнопка '''hint_normal''' (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки '''клик:изменить состояние объекта''', только теперь для кнопки '''hint_normal'''. Выбираем объектом наш '''level_01''' и состояние для него '''hint'''.

<pre>
На заметку. Если возникает необходимость добавить 2 и более настройки при помощи правой кнопки мыши,
то лучше из кнопки сделать машину состояний и все состояния создать уже там.
</pre>

Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.

=== Упражнения ===

Копируем экран '''lesson_8''' и переименовываем его в '''lesson_8_1''', а сцену '''08''' в '''08_01'''.

[[Файл:807.png]]

В новом экране вносим все изменения самостоятельно. Необходимо:

a) добавить другой аудиофайл, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

=== Store ===

В реальной игре нам может понадобиться счётчик подсказок, который даёт возможность совершать покупки подсказок за реальные деньги. Для его реализации необходим объект '''[[Store|Store]]'''.

Создадим новый экран '''lesson_8_1_1'''. Добавим в него сцены '''08_1''' и '''Button_8_1'''. В сцену '''08_1''' поместим из экрана '''lesson_8_1''' объекты '''level_01''' и '''applause''', оставим их без изменения.

В сцену '''Button_8_1''' скопируем из '''lesson_08_1''' кнопки '''hint_normal''' и '''ico_R_normal2''' и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и назовём его '''hint'''. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик '''hint''' будет считывать купленные подсказки.

[[Файл:808.png]]

В '''hint_normal''' добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щёлкнув правой кнопкой мыши на сцену '''Button_8_1''' создадим новые сцены '''store''' и '''error''', которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:809.PNG]]

В машине '''store''' зададим считывания со счётчика и прозрачность экрана:

[[Файл:810.png]]

Машина '''error''' будет отвечать за вывод ошибки при неудачной покупке, то есть задаёт прозрачность экрана с ошибкой.

[[Файл:811.PNG]]

Для машины '''buy''' зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.

[[Файл:812.PNG]]

Вернёмся к машине '''hint_m''' сцены '''Button_8_1''' и пропишем для неё состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:813.PNG]]

Для того, чтобы вызывать машину '''hint_m''' в нашей игре, откроем кнопку '''hint_normal''' и в добавляемом свойстве '''изменить состояние объекта''' в качестве объекта выберем машину '''hint_m''', и пропишем ей состояние '''check'''.

'''Совершение покупки (настройка Store)'''

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

<pre>
На заметку. Store в проекте может быть только один.
</pre>

[[Файл:814.PNG]]

Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек '''store'''.

[[Файл:815.PNG]]

Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.

[[Файл:Photo12.png]]

И тут должен возникнуть вопрос. Почему среди перечня доступных объектов нет необходимого нам '''buy'''? Прежде чем читать дальше, предлагаю попробовать найти ответ на этот вопрос самостоятельно.

Для удобства использования, а также во избежание различных ошибок, в объектах экрана можно обращаться только к объектам этого же экрана. Исключением будут объекты глобальных экранов (вспоминаем прошлые уроки и смотрим на наш глобальный экран '''opt''').

Поэтому, чтобы получить доступ к объекту '''buy''', мы временно делаем экран '''lesson_8_1_1''' глобальным и завершаем настройку объекта '''store'''. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана '''lesson_8_1_1''' снова поставим '''нет'''.

<pre>
На заметку. Когда мы обращаемся к объекту, то в layout.xml
прописывается ссылка на этот объект в виде его id.
Когда убираем глобальность экрана и делаем его снова обычным,
выбранный объект мы в редакторе больше не видим,
но его id в лэйауте всё равно остаётся.
</pre>

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда; если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдём к оформлению. Для того чтобы на экране появлялось окно с предложением о покупке подсказки, необходимо его создать. В начальный момент окно должно быть невидимым и прокликиваем, это состояние задано в машине '''store'''. Создадим в ней 5 подобъектов.

Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект '''black''', пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.

Для объекта '''rec''' зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры. Настройки '''rec''' (имена файлов могут отличаться):

[[Файл:817.PNG]]

Третьему элементу поменяем тип на '''text''' с текстом "Купить подсказку?"

Четвёртый объект сделаем машиной и назовём её '''ok'''. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в '''res''' перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать '''scale''' по х и по у 0.5.
Опишем следующие состояния машины:

[[Файл:818.PNG]]

Все действия, связанные с совершением и провалом покупки, управляемые этой машиной, мы уже указали в '''store'''.

Пятый объект будет кнопкой '''no'''. Она по клику изменяет состояние ('''close''') объекта ('''store'''). Для внешнего вида кнопки в '''res''' перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать '''scale''' по х и по у 0.5.

Так же поступим со сценой '''error'''. В ней создадим четыре объекта: два '''rectangle''': '''rec_error''' – пустой, '''black_error''' — их можно скопировать из предыдущей сцены; кнопку '''buy''', которая будет переводить '''error''' в состояние '''i'''; текстовый объект '''text_error''' с текстом «error!». Общий вид этого задания в лейауте примерно следующий:

[[Файл:819.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в '''app.icf'''), поэтому вывод ошибки мы не получим.

== Patchwork ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 0х0 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на экран" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

[[Файл:Lesson8.3.Fin.png]]

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Настройка миниигр

2021-08-05T12:11:48Z

Blymar: /* Упражнения */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

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

Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.

Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.

На экране кнопочкам подбираем симпатичное и удобное расположение.

[[Файл:801.png]]

=== Настройка объектов, создание машин состояний ===

Меняем тип картинки '''level_01''' с '''image''' на [[Puzzle|puzzle]] (в папке Game mechanic) и устанавливаем следующие настройки:

[[Файл:802.png]]

В сцене '''08''' создаём ещё один объект. Даём ему имя '''applause''', тип '''machine''' (прописываем 3 состояния '''init''', '''on''' и '''off''').

В состоянии '''on''' добавляем команду '''play''' (проиграть звук) и в списке выбираем '''snd''' (короткий звук), который подгружаем с помощью базы ресурсов (если подходящего звукового файла в уроке не обнаружилось, его необходимо добавить самостоятельно; при добавлении звука в базу ресурсов, ее нужно сохранить и переоткрыть).Также добавляем команду '''wait'''

Возвращаемся к общим настройкам и устанавливаем стартовое состояние '''init'''.

[[Файл:Photo11.png]]

Переходим к сцене '''Buttons''' и меняем тип обоих графических файлов на '''button'''. Общий вид лейаута на этом этапе получится примерно следующий:

[[Файл:804.png]]

В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.

[[Файл:805.png]]

Кнопка '''ico_R_normal2''' (переиграть) — кнопка, запускающая игру Puzzle сначала.

Нам необходимо, чтобы кнопка '''ico_R_normal2''' перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем '''клик:изменить состояние объекта'''. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл ('''level_01''') и состояние '''mix''', которое перемешает части исходной картинки.

[[Файл:806.png]]

Пусть кнопка '''hint_normal''' (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки '''клик:изменить состояние объекта''', только теперь для кнопки '''hint_normal'''. Выбираем объектом наш '''level_01''' и состояние для него '''hint'''.

<pre>
На заметку. Если возникает необходимость добавить 2 и более настройки при помощи правой кнопки мыши,
то лучше из кнопки сделать машину состояний и все состояния создать уже там.
</pre>

Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.

=== Упражнения ===

Копируем экран '''lesson_8''' и переименовываем его в '''lesson_8_1''', а сцену '''08''' в '''08_01'''.

[[Файл:807.png]]

В новом экране вносим все изменения самостоятельно. Необходимо:

a) добавить другой аудиофайл, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

=== Store ===

В реальной игре нам может понадобиться счётчик подсказок, который даёт возможность совершать покупки подсказок за реальные деньги. Для его реализации необходим объект '''[[Store|Store]]'''.

Создадим новый экран '''lesson_8_1_1'''. Добавим в него сцены '''08_1''' и '''Button_8_1'''. В сцену '''08_1''' поместим из экрана '''lesson_8_1''' объекты '''level_01''' и '''applause''', оставим их без изменения.

В сцену '''Button_8_1''' скопируем из '''lesson_08_1''' кнопки '''hint_normal''' и '''ico_R_normal2''' и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и назовём его '''hint'''. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик '''hint''' будет считывать купленные подсказки.

[[Файл:808.png]]

В '''hint_normal''' добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щёлкнув правой кнопкой мыши на сцену '''Button_8_1''' создадим новые сцены '''store''' и '''error''', которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:809.PNG]]

В машине '''store''' зададим считывания со счётчика и прозрачность экрана:

[[Файл:810.png]]

Машина '''error''' будет отвечать за вывод ошибки при неудачной покупке, то есть задаёт прозрачность экрана с ошибкой.

[[Файл:811.PNG]]

Для машины '''buy''' зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.

[[Файл:812.PNG]]

Вернёмся к машине '''hint_m''' сцены '''Button_8_1''' и пропишем для неё состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:813.PNG]]

Для того, чтобы вызывать машину '''hint_m''' в нашей игре, откроем кнопку '''hint_normal''' и в добавляемом свойстве '''изменить состояние объекта''' в качестве объекта выберем машину '''hint_m''', и пропишем ей состояние '''check'''.

'''Совершение покупки (настройка Store)'''

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

<pre>
На заметку. Store в проекте может быть только один.
</pre>

[[Файл:814.PNG]]

Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек '''store'''.

[[Файл:815.PNG]]

Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.

[[Файл:Photo12.png]]

И тут должен возникнуть вопрос. Почему среди перечня доступных объектов нет необходимого нам '''buy'''? Прежде чем читать дальше, предлагаю попробовать найти ответ на этот вопрос самостоятельно.

Для удобства использования, а также во избежание различных ошибок, в объектах экрана можно обращаться только к объектам этого же экрана. Исключением будут объекты глобальных экранов (вспоминаем прошлые уроки и смотрим на наш глобальный экран '''opt''').

Поэтому, чтобы получить доступ к объекту '''buy''', мы временно делаем экран '''lesson_8_1_1''' глобальным и завершаем настройку объекта '''store'''. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана '''lesson_8_1_1''' снова поставим '''нет'''.

<pre>
На заметку. Когда мы обращаемся к объекту, то в layout.xml
прописывается ссылка на этот объект в виде его id.
Когда убираем глобальность экрана и делаем его снова обычным,
выбранный объект мы в редакторе больше не видим,
но его id в лэйауте всё равно остаётся.
</pre>

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда; если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдём к оформлению. Для того чтобы на экране появлялось окно с предложением о покупке подсказки, необходимо его создать. В начальный момент окно должно быть невидимым и прокликиваем, это состояние задано в машине '''store'''. Создадим в ней 5 подобъектов.

Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект '''black''', пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.

Для объекта '''rec''' зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры. Настройки '''rec''' (имена файлов могут отличаться):

[[Файл:817.PNG]]

Третьему элементу поменяем тип на '''text''' с текстом "Купить подсказку?"

Четвёртый объект сделаем машиной и назовём её '''ok'''. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в '''res''' перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать '''scale''' по х и по у 0.5.
Опишем следующие состояния машины:

[[Файл:818.PNG]]

Все действия, связанные с совершением и провалом покупки, управляемые этой машиной, мы уже указали в '''store'''.

Пятый объект будет кнопкой '''no'''. Она по клику изменяет состояние ('''close''') объекта ('''store'''). Для внешнего вида кнопки в '''res''' перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать '''scale''' по х и по у 0.5.

Так же поступим со сценой '''error'''. В ней создадим четыре объекта: два '''rectangle''': '''rec_error''' – пустой, '''black_error''' — их можно скопировать из предыдущей сцены; кнопку '''buy''', которая будет переводить '''error''' в состояние '''i'''; текстовый объект '''text_error''' с текстом «error!». Общий вид этого задания в лейауте примерно следующий:

[[Файл:819.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в '''app.icf'''), поэтому вывод ошибки мы не получим.

== Patchwork ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

[[Файл:Lesson8.3.Fin.png]]

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Настройка миниигр

2021-08-05T12:08:36Z

Blymar: /* Настройка объектов, создание машин состояний */

{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}
----
{{TOC right}}

'''Цель:''' изучить настройки объектов, реализующих различные минигры.

'''Задачи:'''
* создать уровень игры с объектом, содержащим тип механики Puzzle
* создать уровень игры с объектом, содержащим тип механики Patchwork

== Puzzle ==

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

Запускаем SceneEditor. Открываем наш учебный проект lessons.seproj.

Создаём экран lesson_8, а в нём сцены 08 и Buttons (стараемся делать это по памяти или подсматриваем в прошлых уроках), куда добавляем необходимые графические ресурсы из папки этого урока в Resources Editor: в экран 08 отправляем картинку level_01 (наш будущий пазл), а в Buttons (думаю, уже догадались) - будущие кнопки - hint_normal и ico_r_normal2.

На экране кнопочкам подбираем симпатичное и удобное расположение.

[[Файл:801.png]]

=== Настройка объектов, создание машин состояний ===

Меняем тип картинки '''level_01''' с '''image''' на [[Puzzle|puzzle]] (в папке Game mechanic) и устанавливаем следующие настройки:

[[Файл:802.png]]

В сцене '''08''' создаём ещё один объект. Даём ему имя '''applause''', тип '''machine''' (прописываем 3 состояния '''init''', '''on''' и '''off''').

В состоянии '''on''' добавляем команду '''play''' (проиграть звук) и в списке выбираем '''snd''' (короткий звук), который подгружаем с помощью базы ресурсов (если подходящего звукового файла в уроке не обнаружилось, его необходимо добавить самостоятельно; при добавлении звука в базу ресурсов, ее нужно сохранить и переоткрыть).Также добавляем команду '''wait'''

Возвращаемся к общим настройкам и устанавливаем стартовое состояние '''init'''.

[[Файл:Photo11.png]]

Переходим к сцене '''Buttons''' и меняем тип обоих графических файлов на '''button'''. Общий вид лейаута на этом этапе получится примерно следующий:

[[Файл:804.png]]

В настройках кнопок перетянем из базы ресурсов картинки с внешним видом нажатых и отжатых кнопок.

[[Файл:805.png]]

Кнопка '''ico_R_normal2''' (переиграть) — кнопка, запускающая игру Puzzle сначала.

Нам необходимо, чтобы кнопка '''ico_R_normal2''' перемешивала части нашего пазла. Для этого в настройках кликаем правой кнопкой мыши и выбираем '''клик:изменить состояние объекта'''. В появившейся в настройках вкладке выбираем в качестве объекта наш пазл ('''level_01''') и состояние '''mix''', которое перемешает части исходной картинки.

[[Файл:806.png]]

Пусть кнопка '''hint_normal''' (подсказка) по клику показывает нам картинку в собранном виде. Для этого повторяем процедуру с добавлением настройки '''клик:изменить состояние объекта''', только теперь для кнопки '''hint_normal'''. Выбираем объектом наш '''level_01''' и состояние для него '''hint'''.

<pre>
На заметку. Если возникает необходимость добавить 2 и более настройки при помощи правой кнопки мыши,
то лучше из кнопки сделать машину состояний и все состояния создать уже там.
</pre>

Любуемся результатом своих стараний, сохранив проект и запустив его с помощью Viewer`а.

=== Упражнения ===

Копируем экран '''lesson_8''' и переименовываем его в '''lesson_8_1''', а сцену '''08''' в '''08_01'''.

[[Файл:807.png]]

В новом экране вносим все изменения самостоятельно. Необходимо:

a) заменить звук аплодисментов другим аудиофайлом, имеющимся в базе ресурсов;

b) в пазле изменить количество разбиваемых частей на шесть (3х2), добавить сетку, изменить перестановку ячеек на смешивание по alpha, изменить время смешивания на 500 миллисекунд;

c) при нажатии hint (подсказки) изменить время показа подсказки на 2 секунды, изменить время финального показа пазла на 3 секунды, установить время закрытия пазла 500 миллисекунд.

=== Store ===

В реальной игре нам может понадобиться счётчик подсказок, который даёт возможность совершать покупки подсказок за реальные деньги. Для его реализации необходим объект '''[[Store|Store]]'''.

Создадим новый экран '''lesson_8_1_1'''. Добавим в него сцены '''08_1''' и '''Button_8_1'''. В сцену '''08_1''' поместим из экрана '''lesson_8_1''' объекты '''level_01''' и '''applause''', оставим их без изменения.

В сцену '''Button_8_1''' скопируем из '''lesson_08_1''' кнопки '''hint_normal''' и '''ico_R_normal2''' и создадим новый объект, поменяв ему тип на '''counter''' (счетчик) и назовём его '''hint'''. Добавим ресурс из базы ресурсов – анимацию c цифрами из прошлого урока. Счётчик '''hint''' будет считывать купленные подсказки.

[[Файл:808.png]]

В '''hint_normal''' добавим подобъект, сделаем его машиной и назовем '''hint_m'''.

Щёлкнув правой кнопкой мыши на сцену '''Button_8_1''' создадим новые сцены '''store''' и '''error''', которые, соответственно, будут предназначены для совершения покупок — начисления подсказок и окна с ошибкой при невозможности купить подсказку.

В сцену store добавим две машины: '''buy''' и '''store'''; в error - машину '''error'''.

[[Файл:809.PNG]]

В машине '''store''' зададим считывания со счётчика и прозрачность экрана:

[[Файл:810.png]]

Машина '''error''' будет отвечать за вывод ошибки при неудачной покупке, то есть задаёт прозрачность экрана с ошибкой.

[[Файл:811.PNG]]

Для машины '''buy''' зададим состояния, при которых она начисляет купленную подсказку либо вызывает окно ошибки.

[[Файл:812.PNG]]

Вернёмся к машине '''hint_m''' сцены '''Button_8_1''' и пропишем для неё состояния. Машина отвечает за начисление подсказки при удачной покупке

[[Файл:813.PNG]]

Для того, чтобы вызывать машину '''hint_m''' в нашей игре, откроем кнопку '''hint_normal''' и в добавляемом свойстве '''изменить состояние объекта''' в качестве объекта выберем машину '''hint_m''', и пропишем ей состояние '''check'''.

'''Совершение покупки (настройка Store)'''

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

<pre>
На заметку. Store в проекте может быть только один.
</pre>

[[Файл:814.PNG]]

Дважды клацнув на объект (так же, как на машину состояний), мы попадаем в окно настроек '''store'''.

[[Файл:815.PNG]]

Нажимаем на плюсик и создаём покупку. Вводим для неё id и изменяем указанные настройки, как на картинке.

[[Файл:Photo12.png]]

И тут должен возникнуть вопрос. Почему среди перечня доступных объектов нет необходимого нам '''buy'''? Прежде чем читать дальше, предлагаю попробовать найти ответ на этот вопрос самостоятельно.

Для удобства использования, а также во избежание различных ошибок, в объектах экрана можно обращаться только к объектам этого же экрана. Исключением будут объекты глобальных экранов (вспоминаем прошлые уроки и смотрим на наш глобальный экран '''opt''').

Поэтому, чтобы получить доступ к объекту '''buy''', мы временно делаем экран '''lesson_8_1_1''' глобальным и завершаем настройку объекта '''store'''. Позже, на этапе проверки при помощи Viewer`а можем поэкспериментировать и проверить, будет ли работать проект корректно, когда мы в настройках глобальности экрана '''lesson_8_1_1''' снова поставим '''нет'''.

<pre>
На заметку. Когда мы обращаемся к объекту, то в layout.xml
прописывается ссылка на этот объект в виде его id.
Когда убираем глобальность экрана и делаем его снова обычным,
выбранный объект мы в редакторе больше не видим,
но его id в лэйауте всё равно остаётся.
</pre>

'''Описание объекта Store'''

Объект '''Store''' необходим для описания InApp покупок (позволяют продавать отдельные бонусы, паки и т.п.) в игре.

Основные параметры объекта Store

''id покупки'' – внутренний id покупки.

''расходуемая'' – 1 – покупка расходуемая, 0 – покупка раз и навсегда; если параметр не указан, по-умолчанию покупка – одноразовая.

''объект (restore)'' – объект - Слушатель восстановления покупки. Этому объекту будет сообщено об успехе восстановления этой покупки покупки.
состояние (restore) – это состояние будет установлено объекту при успешном восстановлении этой покупки.

'''Для того, чтобы объект Store работал во Viewer, необходимо подкорректировать файл app.icf'''

1. Найти файл app.icf в папке с вашим проектом.

2. Открыть его и найти тег [Game].

3. В теге Game добавить строку purchaseEverything=1.

4. Сохранить файл

<pre>

[Game]
purchaseEverything=1
DispFixRot="Landscape"
# comments and whitespace stripped by deployment tool
debug="Absolutist-2253"
show_build_date=1
AppTitle="Viewer"
DebuggerIP="127.0.0.1"
DebuggerPort=5322

</pre>

'''Оформление'''

Теперь перейдём к оформлению. Для того чтобы на экране появлялось окно с предложением о покупке подсказки, необходимо его создать. В начальный момент окно должно быть невидимым и прокликиваем, это состояние задано в машине '''store'''. Создадим в ней 5 подобъектов.

Первые два переименуем в '''black''' и '''rec''', изменим им тип на '''[[Rectangle|Rectangle]]'''.

Откроем объект '''black''', пропишем ему свойства, оставив пустой рамку, цвет фона – чёрный.

Для объекта '''rec''' зададим рамку и текстуру заливки. Для этого из базы ресурсов мышкой перетащим соответствующие элементы. Ресурсы для графики находятся в предыдущем уроке. Чтобы прямоугольник отображался правильно, задайте ему ненулевые размеры. Настройки '''rec''' (имена файлов могут отличаться):

[[Файл:817.PNG]]

Третьему элементу поменяем тип на '''text''' с текстом "Купить подсказку?"

Четвёртый объект сделаем машиной и назовём её '''ok'''. Она будет в глазах пользователя совершать покупку. Для внешнего вида машины в '''res''' перетянем изображение зелёного света светофора из 4 урока. В модификаторах можно задать '''scale''' по х и по у 0.5.
Опишем следующие состояния машины:

[[Файл:818.PNG]]

Все действия, связанные с совершением и провалом покупки, управляемые этой машиной, мы уже указали в '''store'''.

Пятый объект будет кнопкой '''no'''. Она по клику изменяет состояние ('''close''') объекта ('''store'''). Для внешнего вида кнопки в '''res''' перетянем изображение красного света светофора из 4 урока. В модификаторах тоже можно задать '''scale''' по х и по у 0.5.

Так же поступим со сценой '''error'''. В ней создадим четыре объекта: два '''rectangle''': '''rec_error''' – пустой, '''black_error''' — их можно скопировать из предыдущей сцены; кнопку '''buy''', которая будет переводить '''error''' в состояние '''i'''; текстовый объект '''text_error''' с текстом «error!». Общий вид этого задания в лейауте примерно следующий:

[[Файл:819.PNG]]

Разместим все объекты так, что бы картинка хорошо смотрелась. Сохраним все изменения и запустим Viewer. Сейчас при покупке подсказки количество покупок не имеет лимита (благодаря нашим изменениям в '''app.icf'''), поэтому вывод ошибки мы не получим.

== Patchwork ==

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

1. Запустить SceneEditor.

2. В меню Проект → Загрузить → Learning.seproj.

3. Кликнув правой кнопкой мыши по ранее созданному экрану Lesson_08.1, создать экран Lesson_08.2.

[[Файл:Lesson8_1.jpg|right]]

4. В экране Lesson_08.2 создать новую сцену 08, в которую (через ResourcesEditor) добавить графические ресурсы (bg_game, panel_down, btb_replay_normal) из папки Sources\Lesson_08 (см. подготовка к работе «Создание проекта»). В редактор ресурсов добавить графику нашего будущего Patchwork: level_17, level_17_mask.

Если в папке урока отсутствует изображение panel_down, то скачать любое изображение боковой панели самостоятельно и использовать ее в проекте.

=== Настройка объектов ===

1. Создадим на сцене 08 еще два объекта. Для этого нажмем правой кнопкой мыши по сцене и выберем "Создать объект в текущем элементе".

[[Файл:Lesson8_2.jpg]]

2. Переименуем один из созданных объектов в Patchwork, а другой в table.

[[Файл:Lesson8_3.jpg]]

[[Файл:Lesson8_4.jpg|right]]

3. Теперь будем изменять тип объектов на сцене, чтобы получить нужные нам элементы. Графические ресурсы bg_game и panel_down оставляем без изменений. Ресурсу btb_replay_normal изменяем тип на button. Объекту Patchwork меняем тип на patchwork, table изменяем на тип table.
4. Теперь объекты нужно разместить на сцене. Обратим внимание на то, что два последних объекта которые мы добавили без графического ресурса. По умолчанию, создаваемые на сцене объекты имеют размер 100х100 пикселей. Увеличим размер таблицы по высоте до 450 пикселей и перетащим ее влево, поместив над объектом panel_down.

[[Файл:Lesson8_5.jpg]]

Кнопку поместим в левый нижний угол. Добиваемся такого расположения объектов, как показанно на рисунке.

[[Файл:Lesson8_6.jpg]]

5. Настроим наши объекты. Для кнопки btb_replay_normal в поле "перейти на" укажите текущий экран Lesson_8.2.

[[Файл:правка_намба_1.png|200px]]

Для таблицы измените следующие параметры

[[Файл:lesson8_table_setup.png|200px]]

Для Patchwork устанавливаем следующие настройки. Обратите внимание, что поля "карт.спереди" и "шаблон" заполняются перетаскиванием графического ресурса из редактора ресурсов.

[[Файл:Lesson8_9.jpg]]

6. Для корректной работы вашего Patchwork необходимо, чтобы таблица находилась выше Patchwork по дереву объектов.

[[Файл:Lesson8_10.jpg]]

7. Проверьте выполнение задачи с помощью проигрывателя сцен Viewer.

[[Файл:Lesson8.3.Fin.png]]

=== Упражнения ===

1. Щелкнув правой кнопкой мыши по экрану Lesson_08.2, создать новый экран Lesson_08.3

2. Создать новую сцену с названием game.

3. Скопировать все объекты из сцены 08 (экрана Lesson_08.2).

4. Вставить скопированые объекты в новую сцену game (экрана Lesson_08.3).

5. В новой сцене постарайтесь сами прописать состояния и команды в измененную задачу. Сделайте так, чтобы:

a) заменить картинку пэчворка и маски на другую, имеющуюся в базе ресурсов;

b) изменить настройки кнопки рестарта таким образом, чтобы не переходить на экран Lesson_08.3, а сразу передавать пэчворку состояние mix.
----
{| width="100%"
| width="40%"|[[Создание игры «Hidden Object Game»|Урок 7]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Работа с эффектами|Урок 9]]
|}

[[Category:Learning]]

Создание игры «Hidden Object Game»

2021-08-05T11:54:22Z

Blymar: /* Прогресс */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}
----
{{TOC right}}

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

'''Задача:''' Создать уровень игры содержащей 10 поисковых объектов расположенных на одном бэкграунде (фоне). При инициализации сцены обеспечить размещение 5 объектов для поиска.

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

Откроем проект lessons. Создадим экран Lesson_7. [[Файл:Lesson7_textbase.png|right]]
В экране Lesson_7 добавляем новую сцену* stg_7 с разрешением 960*640 (по умолчанию), в которую (через ResourcesEditor) добавим графические ресурсы из папки Lesson_7. (см. подготовка к работе [[Создание проекта]])

* Графические объекты должны разместиться точно на местах предназначенных для их «Прятанья». Перетягиваем сначала '''bg''', потом остальные объекты с папки ''hiddenObj''.

Создадим папку Lesson_7 в базе текстовых описаний с помощью TextEditor. Добавим в неё 10 текстовых записей, соответствующих именам поисковых объектов. Заполним для каждой текстовой записи 2 значения, один из которых называет сам предмет, а второе - является его синонимом или ассоцией, которая укажет на него ([[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Word]], [[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Sentence-En]]), добавим графическое отображение поискового объекта. Сделать это можно вручную, перетащив картинку соответствующего объекта из редактора ресурсов и, по нажатию на картинке правой кнопкой мыши, выберем тип "icon1" (текстовая база должна быть подвязана к базе ресурсов). Или же более быстрым [[Интерфейс TextEditor#Добавление иконок в текстовый элемент | способом]].

== Общая настройка объектов ==

1. Для всех поисковых графических объектов изменяем тип с image на [[HiddenObject]]: выделяем первый и последний элементы, удерживая кнопку Shift, в окне Property выбраем соответствующий параметр.

[[Файл:Lesson7_hidden_obj.png]]

2. Создаем новую сцену, которую называем 7_1 и добавляем на нее специальные объекты [[Table]] и [[HiddenList]]. Для этого переносим графическое изображение table и изменяем его тип с image на Table. Название объекта изменить на table**

[[Файл:07 5.png]]

3. Для объекта HiddenList создаем новый объект и меняем его тип с image на HiddenList. Для данного типа объекта не требуется графический ресурс. Название объекта изменить на HiddenList**

[[Файл: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)

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' HiddenList не будет работать без объекта [[Редактор текстовых ресурсов#Упражнения|Options]], который вы должны были создать в предыдущем уроке, а так же без параметра ''id игры'' (Очковая система -> id игры; для теста заполним его любой строкой).
</blockquote>

== Упражнения ==

1. Щелкнув правой кнопкой мыши по экрану Lesson_7, создать новый экран Lesson_7_1.

2. Создать новую сцену (с названием stg_7_1).

3. Скопировать все объекты из сцены stg_7 (экрана Lesson_7). (Одновременно можно выделять или копировать только объекты одного типа)

4. Вставить скопированные объекты в новую сцену stg_7_1.

[[Файл:Screenshot 1.png]]

5. В новой сцене:

a) добавить еще 3 графических ресурса и перевести в тип HiddenObject;

b) разместить на местах предназначенных для их «Прятанья»;

c) добавить текстовое описание в TextEditor;

e) установить время игры 20 секунд, паузу 2 секунды с переходом на экран Lesson_7_1.

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

Экран lesson_7 необходимо модифицировать в полноценный уровень с выводом количества очков, игрой на время и графикой.

Для этого создаем еще одну сцену 7_3 в первом экране с объектами, которые сделают игру полноценной: первый экран дополняем 2 счетчиками ([[counter]]), таймером ([[timer]]), машиной-блокатором ([[machine]]), прогрессом ([[progress]]), таблица (table, перенесите данный объект со сцены 7_1 в 7_3) и подложкой (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]]

Создаем объект сцены с типом «[[counter]]», в поле res перетаскиваем анимацию с цифрами от 0 до 9, разделитель уже указан в настройках. Настройки для счетчика:

[[Файл:243.png]]

=== Таймер ===

В свойствах таймера «[[timer]]» необходимо указать «значение» с которого начнется отсчет времени (20000 = 20 сек.).
В свойство «графика» из графического редактора перетаскиваем анимацию которую делали для счетчика и двоеточие или делаем его обычным шрифтом, редактируя в свойствах параметр '''шрифт'''. Настройки для таймера:

[[Файл:Photo05.png]]

Также стоит обновить настройки в HiddenObjectList , т.к. если мы их не укажем, то отсчет времени просто не начнется. Время таймера и время указанное в HiddenObjectList должны совпадать, иначе отсчет времени будет идти от меньшего времени вне зависимости указано оно в HiddenList или в таймере.
[[Файл:Photo06.png]]

=== Прогресс ===

[[Progress]] используют для отображения каких либо ачивментов, например когда игрок проходит уровень он может получить 1,2,3 звезды или бронзовую, серебряную, золотую или совершая необходимые действия в игре, например комбо.
Настройки для '''прогресса''' :

[[Файл:555.png]]

Графика для Progress: [[Файл:666.png]]

Настройки для машины-блокатора «ban_H» (machine) (подобъектe '''black''' изменяем тип на rectangle, более подробно о нем дальше):

[[Файл:ban_h.png]]
[[Файл:9.png]]

Настройки для '''hiddenList''':

[[Файл:HOL Final.png]]

Группа - звезды combo num =1 - количество быстро найденных объектов, нужное для получения звезды Combo. Combo time = 3000 - интервал между кликами, считающимися быстрыми. Combo accuracy = 0,85 - точность кликов для получения звезды Accuracy (1 = 100%, все клики должны быть только удачные). Лимит ложных кликов = 5 - количество неверных кликов. Формула расчета его: количество верных кликов делим на общее количество получаем коэффициент, если он равен или больше указного нами, то в опции пишем параметр, если нет то не пишем.

В HiddenList в разделе очковая система для сохранения данных в профиль необходимо указать '''id игры''' (например "hidden").
Для HiddenList и Counter пункт "сохранить в профиль" должен совпадать. Если в HiddenList указано "глобально", то и в Counter также необходимо установить "глобально".

Машина ''win_lose_1'' помогает определить победителя и вызывает соответствующее окно ''win'' после победы или поражения.
[[Файл:Photo07.png]]

Добавим правой кнопкой мыши функцию "разбор: изменить состояние объекта" и укажем там машину ''win_lose_1'' состояние win. Состояние lose укажем в таймере timer_H также через добавление функции правой копкой мыши "время истекло: изменить состояние объекта".

== Настройка окна вывода ==

Создаем новую сцену '''w''' и создаем в ней объект c типом machine ''win'', на которой формируем окно вывода результатов из ректангла ([[Rectangle]]), текстовых объектов и счетчиков. Окно
должно открываться по окончанию игры и при выигрыше показывать набранные очки и надпись об удаче, при проигрыше - нулевые очки и надпись о неудаче. Также названия фотографий в рамке и в фоне могут отличатся!

[[Файл:Example.jpg]]

Графика для Rectangle rec: [[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]] [[Файл:00010.png]]

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Rectangle black (Цвет задается в свойстве фон->цвет заливки) используется в качестве фона, на котором будет размещаться всплывающие окно с показаниями результата пройденной игры.
</blockquote>

[[Файл:1012.png]] [[Файл:0102.png]]

Далее копируем Rectangle "black" и делаем подобъектом блокатора ban_H, а также меняем размеры rectangle black (устанавливаем не нулевые!), устанавливаем параметр фон и alpha на свое усмотрение.

Создадим еще 5 счетчиков. Они нам понадобятся в конце игры для выведения бонусного счета.

В свойствах счетчиков необходимо прописать уровень!

1) счетчик 7_4_1 — игровые очки;

уровень: last_game.score30_total

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'''.

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

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Файл:Ban h.png

2021-08-05T11:53:41Z

Blymar:

Создание игры «Hidden Object Game»

2021-08-05T11:43:20Z

Blymar: /* Настройка полноценной системы подсчета очков */

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}
----
{{TOC right}}

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

'''Задача:''' Создать уровень игры содержащей 10 поисковых объектов расположенных на одном бэкграунде (фоне). При инициализации сцены обеспечить размещение 5 объектов для поиска.

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

Откроем проект lessons. Создадим экран Lesson_7. [[Файл:Lesson7_textbase.png|right]]
В экране Lesson_7 добавляем новую сцену* stg_7 с разрешением 960*640 (по умолчанию), в которую (через ResourcesEditor) добавим графические ресурсы из папки Lesson_7. (см. подготовка к работе [[Создание проекта]])

* Графические объекты должны разместиться точно на местах предназначенных для их «Прятанья». Перетягиваем сначала '''bg''', потом остальные объекты с папки ''hiddenObj''.

Создадим папку Lesson_7 в базе текстовых описаний с помощью TextEditor. Добавим в неё 10 текстовых записей, соответствующих именам поисковых объектов. Заполним для каждой текстовой записи 2 значения, один из которых называет сам предмет, а второе - является его синонимом или ассоцией, которая укажет на него ([[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Word]], [[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Sentence-En]]), добавим графическое отображение поискового объекта. Сделать это можно вручную, перетащив картинку соответствующего объекта из редактора ресурсов и, по нажатию на картинке правой кнопкой мыши, выберем тип "icon1" (текстовая база должна быть подвязана к базе ресурсов). Или же более быстрым [[Интерфейс TextEditor#Добавление иконок в текстовый элемент | способом]].

== Общая настройка объектов ==

1. Для всех поисковых графических объектов изменяем тип с image на [[HiddenObject]]: выделяем первый и последний элементы, удерживая кнопку Shift, в окне Property выбраем соответствующий параметр.

[[Файл:Lesson7_hidden_obj.png]]

2. Создаем новую сцену, которую называем 7_1 и добавляем на нее специальные объекты [[Table]] и [[HiddenList]]. Для этого переносим графическое изображение table и изменяем его тип с image на Table. Название объекта изменить на table**

[[Файл:07 5.png]]

3. Для объекта HiddenList создаем новый объект и меняем его тип с image на HiddenList. Для данного типа объекта не требуется графический ресурс. Название объекта изменить на HiddenList**

[[Файл: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)

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' HiddenList не будет работать без объекта [[Редактор текстовых ресурсов#Упражнения|Options]], который вы должны были создать в предыдущем уроке, а так же без параметра ''id игры'' (Очковая система -> id игры; для теста заполним его любой строкой).
</blockquote>

== Упражнения ==

1. Щелкнув правой кнопкой мыши по экрану Lesson_7, создать новый экран Lesson_7_1.

2. Создать новую сцену (с названием stg_7_1).

3. Скопировать все объекты из сцены stg_7 (экрана Lesson_7). (Одновременно можно выделять или копировать только объекты одного типа)

4. Вставить скопированные объекты в новую сцену stg_7_1.

[[Файл:Screenshot 1.png]]

5. В новой сцене:

a) добавить еще 3 графических ресурса и перевести в тип HiddenObject;

b) разместить на местах предназначенных для их «Прятанья»;

c) добавить текстовое описание в TextEditor;

e) установить время игры 20 секунд, паузу 2 секунды с переходом на экран Lesson_7_1.

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

Экран lesson_7 необходимо модифицировать в полноценный уровень с выводом количества очков, игрой на время и графикой.

Для этого создаем еще одну сцену 7_3 в первом экране с объектами, которые сделают игру полноценной: первый экран дополняем 2 счетчиками ([[counter]]), таймером ([[timer]]), машиной-блокатором ([[machine]]), прогрессом ([[progress]]), таблица (table, перенесите данный объект со сцены 7_1 в 7_3) и подложкой (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]]

Создаем объект сцены с типом «[[counter]]», в поле res перетаскиваем анимацию с цифрами от 0 до 9, разделитель уже указан в настройках. Настройки для счетчика:

[[Файл:243.png]]

=== Таймер ===

В свойствах таймера «[[timer]]» необходимо указать «значение» с которого начнется отсчет времени (20000 = 20 сек.).
В свойство «графика» из графического редактора перетаскиваем анимацию которую делали для счетчика и двоеточие или делаем его обычным шрифтом, редактируя в свойствах параметр '''шрифт'''. Настройки для таймера:

[[Файл:Photo05.png]]

Также стоит обновить настройки в HiddenObjectList , т.к. если мы их не укажем, то отсчет времени просто не начнется. Время таймера и время указанное в HiddenObjectList должны совпадать, иначе отсчет времени будет идти от меньшего времени вне зависимости указано оно в HiddenList или в таймере.
[[Файл:Photo06.png]]

=== Прогресс ===

[[Progress]] используют для отображения каких либо ачивментов, например когда игрок проходит уровень он может получить 1,2,3 звезды или бронзовую, серебряную, золотую или совершая необходимые действия в игре, например комбо.
Настройки для '''прогресса''' :

[[Файл:555.png]]

Графика для Progress: [[Файл:666.png]]

Настройки для машины-блокатора «ban_H» (machine) (подобъектe '''black''' изменяем тип на rectangle, более подробно о нем дальше):

[[Файл:Ban h na max.png]]
[[Файл:9.png]]

Настройки для '''hiddenList''':

[[Файл:HOL Final.png]]

Группа - звезды combo num =1 - количество быстро найденных объектов, нужное для получения звезды Combo. Combo time = 3000 - интервал между кликами, считающимися быстрыми. Combo accuracy = 0,85 - точность кликов для получения звезды Accuracy (1 = 100%, все клики должны быть только удачные). Лимит ложных кликов = 5 - количество неверных кликов. Формула расчета его: количество верных кликов делим на общее количество получаем коэффициент, если он равен или больше указного нами, то в опции пишем параметр, если нет то не пишем.

В HiddenList в разделе очковая система для сохранения данных в профиль необходимо указать '''id игры''' (например "hidden").
Для HiddenList и Counter пункт "сохранить в профиль" должен совпадать. Если в HiddenList указано "глобально", то и в Counter также необходимо установить "глобально".

Машина ''win_lose_1'' помогает определить победителя и вызывает соответствующее окно ''win'' после победы или поражения.
[[Файл:Photo07.png]]

Добавим правой кнопкой мыши функцию "разбор: изменить состояние объекта" и укажем там машину ''win_lose_1'' состояние win. Состояние lose укажем в таймере timer_H также через добавление функции правой копкой мыши "время истекло: изменить состояние объекта".

== Настройка окна вывода ==

Создаем новую сцену '''w''' и создаем в ней объект c типом machine ''win'', на которой формируем окно вывода результатов из ректангла ([[Rectangle]]), текстовых объектов и счетчиков. Окно
должно открываться по окончанию игры и при выигрыше показывать набранные очки и надпись об удаче, при проигрыше - нулевые очки и надпись о неудаче. Также названия фотографий в рамке и в фоне могут отличатся!

[[Файл:Example.jpg]]

Графика для Rectangle rec: [[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]] [[Файл:00010.png]]

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Rectangle black (Цвет задается в свойстве фон->цвет заливки) используется в качестве фона, на котором будет размещаться всплывающие окно с показаниями результата пройденной игры.
</blockquote>

[[Файл:1012.png]] [[Файл:0102.png]]

Далее копируем Rectangle "black" и делаем подобъектом блокатора ban_H, а также меняем размеры rectangle black (устанавливаем не нулевые!), устанавливаем параметр фон и alpha на свое усмотрение.

Создадим еще 5 счетчиков. Они нам понадобятся в конце игры для выведения бонусного счета.

В свойствах счетчиков необходимо прописать уровень!

1) счетчик 7_4_1 — игровые очки;

уровень: last_game.score30_total

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'''.

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

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Создание игры «Hidden Object Game»

2021-08-05T11:36:18Z

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

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}
----
{{TOC right}}

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

'''Задача:''' Создать уровень игры содержащей 10 поисковых объектов расположенных на одном бэкграунде (фоне). При инициализации сцены обеспечить размещение 5 объектов для поиска.

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

Откроем проект lessons. Создадим экран Lesson_7. [[Файл:Lesson7_textbase.png|right]]
В экране Lesson_7 добавляем новую сцену* stg_7 с разрешением 960*640 (по умолчанию), в которую (через ResourcesEditor) добавим графические ресурсы из папки Lesson_7. (см. подготовка к работе [[Создание проекта]])

* Графические объекты должны разместиться точно на местах предназначенных для их «Прятанья». Перетягиваем сначала '''bg''', потом остальные объекты с папки ''hiddenObj''.

Создадим папку Lesson_7 в базе текстовых описаний с помощью TextEditor. Добавим в неё 10 текстовых записей, соответствующих именам поисковых объектов. Заполним для каждой текстовой записи 2 значения, один из которых называет сам предмет, а второе - является его синонимом или ассоцией, которая укажет на него ([[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Word]], [[Интерфейс TextEditor#Создание и заполнение текстовой базы проекта | Sentence-En]]), добавим графическое отображение поискового объекта. Сделать это можно вручную, перетащив картинку соответствующего объекта из редактора ресурсов и, по нажатию на картинке правой кнопкой мыши, выберем тип "icon1" (текстовая база должна быть подвязана к базе ресурсов). Или же более быстрым [[Интерфейс TextEditor#Добавление иконок в текстовый элемент | способом]].

== Общая настройка объектов ==

1. Для всех поисковых графических объектов изменяем тип с image на [[HiddenObject]]: выделяем первый и последний элементы, удерживая кнопку Shift, в окне Property выбраем соответствующий параметр.

[[Файл:Lesson7_hidden_obj.png]]

2. Создаем новую сцену, которую называем 7_1 и добавляем на нее специальные объекты [[Table]] и [[HiddenList]]. Для этого переносим графическое изображение table и изменяем его тип с image на Table. Название объекта изменить на table**

[[Файл:07 5.png]]

3. Для объекта HiddenList создаем новый объект и меняем его тип с image на HiddenList. Для данного типа объекта не требуется графический ресурс. Название объекта изменить на HiddenList**

[[Файл: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)

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' HiddenList не будет работать без объекта [[Редактор текстовых ресурсов#Упражнения|Options]], который вы должны были создать в предыдущем уроке, а так же без параметра ''id игры'' (Очковая система -> id игры; для теста заполним его любой строкой).
</blockquote>

== Упражнения ==

1. Щелкнув правой кнопкой мыши по экрану Lesson_7, создать новый экран Lesson_7_1.

2. Создать новую сцену (с названием stg_7_1).

3. Скопировать все объекты из сцены stg_7 (экрана Lesson_7). (Одновременно можно выделять или копировать только объекты одного типа)

4. Вставить скопированные объекты в новую сцену stg_7_1.

[[Файл:Screenshot 1.png]]

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]]

Создаем объект сцены с типом «[[counter]]», в поле res перетаскиваем анимацию с цифрами от 0 до 9, разделитель уже указан в настройках. Настройки для счетчика:

[[Файл:243.png]]

=== Таймер ===

В свойствах таймера «[[timer]]» необходимо указать «значение» с которого начнется отсчет времени (20000 = 20 сек.).
В свойство «графика» из графического редактора перетаскиваем анимацию которую делали для счетчика и двоеточие или делаем его обычным шрифтом, редактируя в свойствах параметр '''шрифт'''. Настройки для таймера:

[[Файл:Photo05.png]]

Также стоит обновить настройки в HiddenObjectList , т.к. если мы их не укажем, то отсчет времени просто не начнется. Время таймера и время указанное в HiddenObjectList должны совпадать, иначе отсчет времени будет идти от меньшего времени вне зависимости указано оно в HiddenList или в таймере.
[[Файл:Photo06.png]]

=== Прогресс ===

[[Progress]] используют для отображения каких либо ачивментов, например когда игрок проходит уровень он может получить 1,2,3 звезды или бронзовую, серебряную, золотую или совершая необходимые действия в игре, например комбо.
Настройки для '''прогресса''' :

[[Файл:555.png]]

Графика для Progress: [[Файл:666.png]]

Настройки для машины-блокатора «ban_H» (machine) (подобъектe '''black''' изменяем тип на rectangle, более подробно о нем дальше):

[[Файл:Ban h na max.png]]
[[Файл:9.png]]

Настройки для '''hiddenList''':

[[Файл:HOL Final.png]]

Группа - звезды combo num =1 - количество быстро найденных объектов, нужное для получения звезды Combo. Combo time = 3000 - интервал между кликами, считающимися быстрыми. Combo accuracy = 0,85 - точность кликов для получения звезды Accuracy (1 = 100%, все клики должны быть только удачные). Лимит ложных кликов = 5 - количество неверных кликов. Формула расчета его: количество верных кликов делим на общее количество получаем коэффициент, если он равен или больше указного нами, то в опции пишем параметр, если нет то не пишем.

В HiddenList в разделе очковая система для сохранения данных в профиль необходимо указать '''id игры''' (например "hidden").
Для HiddenList и Counter пункт "сохранить в профиль" должен совпадать. Если в HiddenList указано "глобально", то и в Counter также необходимо установить "глобально".

Машина ''win_lose_1'' помогает определить победителя и вызывает соответствующее окно ''win'' после победы или поражения.
[[Файл:Photo07.png]]

Добавим правой кнопкой мыши функцию "разбор: изменить состояние объекта" и укажем там машину ''win_lose_1'' состояние win. Состояние lose укажем в таймере timer_H также через добавление функции правой копкой мыши "время истекло: изменить состояние объекта".

== Настройка окна вывода ==

Создаем новую сцену '''w''' и создаем в ней объект c типом machine ''win'', на которой формируем окно вывода результатов из ректангла ([[Rectangle]]), текстовых объектов и счетчиков. Окно
должно открываться по окончанию игры и при выигрыше показывать набранные очки и надпись об удаче, при проигрыше - нулевые очки и надпись о неудаче. Также названия фотографий в рамке и в фоне могут отличатся!

[[Файл:Example.jpg]]

Графика для Rectangle rec: [[Файл:0001.png]] [[Файл:0002.png]] [[Файл:0003.png]] [[Файл:0004.png]] [[Файл:0005.png]] [[Файл:0006.png]] [[Файл:0007.png]] [[Файл:0008.png]] [[Файл:0009.png]] [[Файл:00010.png]]

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Rectangle black (Цвет задается в свойстве фон->цвет заливки) используется в качестве фона, на котором будет размещаться всплывающие окно с показаниями результата пройденной игры.
</blockquote>

[[Файл:1012.png]] [[Файл:0102.png]]

Далее копируем Rectangle "black" и делаем подобъектом блокатора ban_H, а также меняем размеры rectangle black (устанавливаем не нулевые!), устанавливаем параметр фон и alpha на свое усмотрение.

Создадим еще 5 счетчиков. Они нам понадобятся в конце игры для выведения бонусного счета.

В свойствах счетчиков необходимо прописать уровень!

1) счетчик 7_4_1 — игровые очки;

уровень: last_game.score30_total

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'''.

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

----

{| width="100%"
| width="40%"|[[Редактор текстовых ресурсов|Урок 6]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Настройка миниигр|Урок 8]]
|}

[[Category:Learning]]

Редактор текстовых ресурсов

2021-08-04T12:50:11Z

Blymar: /* Создаем текстовую базу */

{| width="100%"
| width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
|}
----
{{TOC right}}
----
'''Цель:''' научится пользоваться редактором текстовых ресурсов на примере использования объекта типа "text"

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* Вывести на экран последовательно два текста с помощью двух текстовых объектов.
* Вывести на экран эти же тексты, но с помощью только одного текстового объекта.

== Объект Text ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_6
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[Файл:Lesson6_1.jpg|right]]
Поверх фона поместите на сцену картинку ввиде стрелки вправо. Назовите ее '''button_next'''. Выберите для нее тип '''machine'''. Кликая на сцене правой кнопкой мыши, выберете пункт из выпадающего меню "Создать объект в текущем элементе". Новый объект переименуйте в Text и выберите для него тип '''[[Text|Text]]''' (также нужно выставить размеры данному объекту, чтобы текст был виден).

=== Меняем текст машиной ===

Для того, чтобы было что менять, скопируем объект Text и вставим его в этой же сцене. Переименуем его в text2. Так как эти два объекта без графического ресурса, то на сцене мы можем их видеть как пустые рамки (зеленая рамка, если объет выделен, и красная - если не выделен).
[[Файл:Lesson6_2.jpg]]

[[Файл:Text_prop.png‎|right]]
Посмотрим на свойства объекта Text. В поле "текст" впишем "Первая часть текста". В поле "шрифт" в строке "цвет 1" выберем белый цвет. В свойствах объекта text2 в поле текст впишем "Вторая часть текста". Цвет шрифта поставим такой же. Таким образом, мы получили две текстовых надписей на сцене, которые располагаются одна поверх другой. Если мы сейчас сохраним проект и запустим, то обе надписи будут видны одновременно, что затруднит их читаемость. Для того, чтобы мы могли без проблем их прочитать, сделаем переключение текстов по нажатию на кнопку. На самом деле, '''button_next''' только выглядит как кнопка - это машина состояний. Пропишем для нее логику таким образом, чтобы при нажатии на машину, она по-очереди делала видимым то один текст, то другой. Создайте для этой машины следующие состояния.

[[Файл:Lesson6_4.jpg]]

За видимость объектов отвечает параметр '''vis'''. Если vis=0, то объект не видно, если 1 - видно. По клику осуществляется переход между состояниями. Сохраните проект и запустите этот экран. Вы видите, что по клику на кнопку текст изменяется.
[[Файл:Lesson6_5.jpg]]

Переключать текстовые объекты можно еще несколькими способами:

- менять параметр '''al''' (alpha); это позволит делать текст полупрозрачным (в отличии от '''vis''', параметр '''al''' может принимать промежуточные значения между 0 и 1);

- менять текстовому объекту состояние; как известно, у объекта [[Text#Состояния | text]] есть 3 состояния '''first''', '''next''', '''end''', чтобы текст стал видимым, достаточно передать ему состояние '''first''', чтобы текст исчез, достаточно передать ему состояние '''end'''.

== Создаем текстовую базу ==

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

Для вызова текстового редактора можно воспользоваться меню '''Tools -> [[Интерфейс TextEditor|Text Editor]]''', либо кнопкой быстрого запуска [[Файл:Text_base.png‎]].
Сначала текстовая база будет отсутствовать, поэтому ее нужно создать. Заходите в пункт меню '''Project -> New'''. Появляется пустая база ресурсов, по умолчанию названная '''Untitled'''. Ее можно переименовать как вам удобней. Аналогично как в редакторе ресурсов слева вы видите дерево текстовых объектов. Нажимаем правой кнопкой по названию базы Untitled и выбираем ''add folder'''. Таким образом мы создали новую папку. Назовем ее lesson_6. Нажимая по папке правой кнопкой выбираем '''Add record'''. Каждый раз при добавлении новой текстовой записи редактор просит нас написать ее имя. Это имя можно будет изменить в любой момент. Запишем имя first_part. Создавать папки и записи можно также с помощью кнопок быстрого доступа на панели. Выделим папку lesson_6 и нажмем на значок "Add record". Запишем имя новой текстовой записи second_part.
[[Файл:Именитый.png|600px]]

Пока эти текстовые записи пустые. Для того чтобы заполнить их, выделим первую запись. Справа мы видим столбцы '''word''', '''sentence1''', '''sentence2''' и '''voice'''. В данном уроке нам понадобится только первый столбец '''word'''. Об остальных подробнее узнаете в следующем уроке. В строках записывается текст на разных языках. Запишем текст на русском и его перевод на английский в соответствующие поля. Для first_part - Первая часть текста (The first part of the text), для second_part - Вторая часть текста (The second part of the text). Запись на разных языках позволяет, в зависимости от локализации мобильного устройства, выбирать язык текстовых объектов.

Для того что бы добавить какой-либо язык в базу данных необходимо выполнить следующие действия:
1) Проходим путь Project/Properties/Select languages…

[[Файл:Добавление языка (1).png|600px]]

2) После этого необходимо выбрать языки которые вы хотите добавить

[[Файл:Добавление_языка_(2).png|400px]]

3) Можете похвалить себя

Если вы добавили языки, но они не видны, проверьте, не создали ли вы случайно свою папку в папке Untranslatable.

Чтобы корректно пользоваться текстовой базой после каждого ее изменения, ее необходимо сохранять. Можно воспользоваться кнопками быстрого доступа и нажать на значок дискеты. При первом сохранении текстовый редактор просит вас выбрать место сохранения и имя файла. Сохраним его в папку с проектом lessons и назовем text_base. Также текстовую базу нужно подвязать к базе ресурсов. Для этого заходим в пункт меню '''Resource -> Choose Resource File'''. Выбираем папку, в которая является базой ресурсов проекта и выбираем файл с расширением '''.sirx''' . Вернемся теперь к редактору сцен.
В пункте меню '''Project -> Project options''' выбираем вкладку '''Text database''' и указываем путь к нашей текстовой базе '''text_base.xml''' .

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Во время роботы в редакторе, когда вы создаете новый проект, автоматически создается и текстовая база. В данном уроке вам лишь нужно внести изменения в уже существующую базу '''File -> Open -> \\....\\text.xml'''.
</blockquote>

Каждый объект текстовой базы имеет свой уникальный '''id'''. Мы можем вызывать текст из текстовой базы меняя текстовому объекту на сцене этот id с помощью кнопки или машины состояний.

Давайте сделаем это на примере нашего проекта.
Так как теперь мы будем пользоваться только одним текстовым объектом на сцене, то второй text2 можно удалить. В объекте text удалим из пункта текст запись "Первая часть текста". Перепишем также немного состояния нашей машины. В поле '''val_txt''' мы записываем id текста путем перетаскивания его из текстовой базы (перед перетаскиванием id текста нужно сохранять и переоткрывать текстовую базу).

[[Файл:Lesson6_7.jpg]]

Теперь в состояниях машины мы присваиваем нашему объекту text только текстовые id из текстовой базы. Сохраняем проект и запускаем. Результат тот же, что и в первом случае. Заметим, что на сцене стало на один объект меньше, а состояния машины сократились на одну строчку. Может это не существенно в таком маленьком проекте, но в больших проектах количество объектов и величина исполняемого файла может стать решающей причиной к упрощению кода.

== Упражнения ==

* Добавьте в текстовую базу еще несколько записей.
* Расширьте состояния машины, чтобы последовательно вывести на экран все текстовые записи.
* Поменяйте язык приложения, используя объект '''[[Options|Options]]'''.
До сих пор мы изучали объекты и их свойства для каждого определенного экрана. Рассмотрим возможность изменять параметры всего приложения.
Будем изменять язык приложения. Для этого необходимо ознакомится с объектом Options.

'''Options''' — объект, который используется для хранения и управления глобальными параметрами приложения. Также Options позволяет хранить и использовать параметры записанные в него другими объектами.

В проекте lessons создаем новый экран, для которого в свойствах устанавливаем глобальный

[[Файл:Глобальный.PNG]]

В экране '''opt''' создадим сцену '''opt'''. Создадим на сцене opt новый объект, переименуем его в '''Options'''. Поменяем ему тип на option (Option → option).

[[Файл:Опции.PNG]]

Создадим в проекте новый экран '''lessons_6_1''' со сценой '''6_1'''. В сцену из проекта '''lessons_6''' копируем объекты '''bg_1''', '''button_next''', Text не изменяя их параметры. Перенесем на сцену из редактора ресурсов, из папки lessons_2, объекты: '''arrow_lf_norm''' и '''arrow_rt_norm'''. Переименуем, arrow_lf_norm в '''en''', arrow_rt_norm в '''ru''', и сделаем их машинами. Добавляем ниже на сцену новый объект, изменяем ему тип на '''[[Groupset|Groupset]]''' и имя на '''groupset'''. Щелкаем в свойствах по имени правой кнопкой мыши, добавляем в свойства объект, из списка объектов выбираем Text.

[[Файл:Группа.PNG]]

'''Описание объекта Groupset'''

'''Groupset (группа)''' позволяет передавать состояния и параметры множеству объектов, которые являются участниками группы. Участником группы является любой объект, указанный в в объекте Groupset.

Groupset удобно использовать, когда необходимо обращаться к множеству объектов.
Если объекту Groupset передается состояние (например st_1), то все объекты принадлежащие объекту Groupset должны иметь состояние st_1, иначе возникнет ошибка.

Объекты принадлежащие одной группе могут быть разного типа и разноименными.

Команды применимые к группе:

• ''set'' — группе можно установить состояние st и параметр (значение) par(val);

• ''drop'' — на группу (объекты принадлежащие группе) можно отпустить объект.

Для каждой из добавленных машин запишем состояния.

Машина en:

[[Файл:En.PNG]]

Машина ru

[[Файл:Ru.PNG]]

Как видно, в состоянии on, каждой машины, задается lang (язык) в глобальном объекте Options. В состояние r Groupset передается состояние init (инициализация объекта).

Сохраняем и запускаем вьювер.

[[Файл:Вьювер.PNG]]

На экране расположено три кнопки и текст. При нажатие кнопки вперед язык текста меняется — на русский, при нажатие назад — на английский, желтая кнопка вперед меняет сам текст.
----
{| width="100%"
| width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
|}

[[Category:Learning]]

Редактор текстовых ресурсов

2021-08-04T12:34:45Z

Blymar: /* Объект Text */

{| width="100%"
| width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
|}
----
{{TOC right}}
----
'''Цель:''' научится пользоваться редактором текстовых ресурсов на примере использования объекта типа "text"

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* Вывести на экран последовательно два текста с помощью двух текстовых объектов.
* Вывести на экран эти же тексты, но с помощью только одного текстового объекта.

== Объект Text ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_6
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[Файл:Lesson6_1.jpg|right]]
Поверх фона поместите на сцену картинку ввиде стрелки вправо. Назовите ее '''button_next'''. Выберите для нее тип '''machine'''. Кликая на сцене правой кнопкой мыши, выберете пункт из выпадающего меню "Создать объект в текущем элементе". Новый объект переименуйте в Text и выберите для него тип '''[[Text|Text]]''' (также нужно выставить размеры данному объекту, чтобы текст был виден).

=== Меняем текст машиной ===

Для того, чтобы было что менять, скопируем объект Text и вставим его в этой же сцене. Переименуем его в text2. Так как эти два объекта без графического ресурса, то на сцене мы можем их видеть как пустые рамки (зеленая рамка, если объет выделен, и красная - если не выделен).
[[Файл:Lesson6_2.jpg]]

[[Файл:Text_prop.png‎|right]]
Посмотрим на свойства объекта Text. В поле "текст" впишем "Первая часть текста". В поле "шрифт" в строке "цвет 1" выберем белый цвет. В свойствах объекта text2 в поле текст впишем "Вторая часть текста". Цвет шрифта поставим такой же. Таким образом, мы получили две текстовых надписей на сцене, которые располагаются одна поверх другой. Если мы сейчас сохраним проект и запустим, то обе надписи будут видны одновременно, что затруднит их читаемость. Для того, чтобы мы могли без проблем их прочитать, сделаем переключение текстов по нажатию на кнопку. На самом деле, '''button_next''' только выглядит как кнопка - это машина состояний. Пропишем для нее логику таким образом, чтобы при нажатии на машину, она по-очереди делала видимым то один текст, то другой. Создайте для этой машины следующие состояния.

[[Файл:Lesson6_4.jpg]]

За видимость объектов отвечает параметр '''vis'''. Если vis=0, то объект не видно, если 1 - видно. По клику осуществляется переход между состояниями. Сохраните проект и запустите этот экран. Вы видите, что по клику на кнопку текст изменяется.
[[Файл:Lesson6_5.jpg]]

Переключать текстовые объекты можно еще несколькими способами:

- менять параметр '''al''' (alpha); это позволит делать текст полупрозрачным (в отличии от '''vis''', параметр '''al''' может принимать промежуточные значения между 0 и 1);

- менять текстовому объекту состояние; как известно, у объекта [[Text#Состояния | text]] есть 3 состояния '''first''', '''next''', '''end''', чтобы текст стал видимым, достаточно передать ему состояние '''first''', чтобы текст исчез, достаточно передать ему состояние '''end'''.

== Создаем текстовую базу ==

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

Для вызова текстового редактора можно воспользоваться меню '''Tools -> [[Интерфейс TextEditor|Text Editor]]''', либо кнопкой быстрого запуска [[Файл:Text_base.png‎]].
Сначала текстовая база будет отсутствовать, поэтому ее нужно создать. Заходите в пункт меню '''file -> New'''. Появляется пустая база ресурсов, по умолчанию названная '''Untitled'''. Ее можно переименовать как вам удобней. Аналогично как в редакторе ресурсов слева вы видите дерево текстовых объектов. Нажимаем правой кнопкой по названию базы Untitled и выбираем ''add folder'''. Таким образом мы создали новую папку. Назовем ее lesson_6. Нажимая по папке правой кнопкой выбираем '''Add record'''. Каждый раз при добавлении новой текстовой записи редактор просит нас написать ее имя. Это имя можно будет изменить в любой момент. Запишем имя first_part. Создавать папки и записи можно также с помощью кнопок быстрого доступа на панели. Выделим папку lesson_6 и нажмем на значок "Add record". Запишем имя новой текстовой записи second_part.
[[Файл:Именитый.png|600px]]

Пока эти текстовые записи пустые. Для того чтобы заполнить их, выделим первую запись. Справа мы видим столбцы '''word''', '''sentence1''', '''sentence2''' и '''voice'''. В данном уроке нам понадобится только первый столбец '''word'''. Об остальных подробнее узнаете в следующем уроке. В строках записывается текст на разных языках. Запишем текст на русском и его перевод на английский в соответствующие поля. Для first_part - Первая часть текста (The first part of the text), для second_part - Вторая часть текста (The second part of the text). Запись на разных языках позволяет, в зависимости от локализации мобильного устройства, выбирать язык текстовых объектов.

Для того что бы добавить какой-либо язык в базу данных необходимо выполнить следующие действия:
1) Проходим путь Project/Properties/Select languages…

[[Файл:Добавление языка (1).png|600px]]

2) После этого необходимо выбрать языки которые вы хотите добавить

[[Файл:Добавление_языка_(2).png|400px]]

3) Можете похвалить себя

Если вы добавили языки, но они не видны, проверьте, не создали ли вы случайно свою папку в папке Untranslatable.

Чтобы корректно пользоваться текстовой базой после каждого ее изменения, ее необходимо сохранять. Можно воспользоваться кнопками быстрого доступа и нажать на значок дискеты. При первом сохранении текстовый редактор просит вас выбрать место сохранения и имя файла. Сохраним его в папку с проектом lessons и назовем text_base. Также текстовую базу нужно подвязать к базе ресурсов. Для этого заходим в пункт меню '''Resource -> Choose Resource File'''. Выбираем папку, в которая является базой ресурсов проекта и выбираем файл с расширением '''.sirx''' . Вернемся теперь к редактору сцен.
В пункте меню '''Project -> Project options''' выбираем вкладку '''Text database''' и указываем путь к нашей текстовой базе '''text_base.xml''' .

<blockquote>
[[файл:wrong.png|right|32px]]
'''Внимание!''' Во время роботы в редакторе, когда вы создаете новый проект, автоматически создается и текстовая база. В данном уроке вам лишь нужно внести изменения в уже существующую базу '''File -> Open -> \\....\\text.xml'''.
</blockquote>

Каждый объект текстовой базы имеет свой уникальный '''id'''. Мы можем вызывать текст из текстовой базы меняя текстовому объекту на сцене этот id с помощью кнопки или машины состояний.

Давайте сделаем это на примере нашего проекта.
Так как теперь мы будем пользоваться только одним текстовым объектом на сцене, то второй text2 можно удалить. В объекте text удалим из пункта текст запись "Первая часть текста". Перепишем также немного состояния нашей машины. В поле '''val_txt''' мы записываем id текста путем перетаскивания его из текстовой базы.

[[Файл:Lesson6_7.jpg]]

Теперь в состояниях машины мы присваиваем нашему объекту text только текстовые id из текстовой базы. Сохраняем проект и запускаем. Результат тот же, что и в первом случае. Заметим, что на сцене стало на один объект меньше, а состояния машины сократились на одну строчку. Может это не существенно в таком маленьком проекте, но в больших проектах количество объектов и величина исполняемого файла может стать решающей причиной к упрощению кода.

== Упражнения ==

* Добавьте в текстовую базу еще несколько записей.
* Расширьте состояния машины, чтобы последовательно вывести на экран все текстовые записи.
* Поменяйте язык приложения, используя объект '''[[Options|Options]]'''.
До сих пор мы изучали объекты и их свойства для каждого определенного экрана. Рассмотрим возможность изменять параметры всего приложения.
Будем изменять язык приложения. Для этого необходимо ознакомится с объектом Options.

'''Options''' — объект, который используется для хранения и управления глобальными параметрами приложения. Также Options позволяет хранить и использовать параметры записанные в него другими объектами.

В проекте lessons создаем новый экран, для которого в свойствах устанавливаем глобальный

[[Файл:Глобальный.PNG]]

В экране '''opt''' создадим сцену '''opt'''. Создадим на сцене opt новый объект, переименуем его в '''Options'''. Поменяем ему тип на option (Option → option).

[[Файл:Опции.PNG]]

Создадим в проекте новый экран '''lessons_6_1''' со сценой '''6_1'''. В сцену из проекта '''lessons_6''' копируем объекты '''bg_1''', '''button_next''', Text не изменяя их параметры. Перенесем на сцену из редактора ресурсов, из папки lessons_2, объекты: '''arrow_lf_norm''' и '''arrow_rt_norm'''. Переименуем, arrow_lf_norm в '''en''', arrow_rt_norm в '''ru''', и сделаем их машинами. Добавляем ниже на сцену новый объект, изменяем ему тип на '''[[Groupset|Groupset]]''' и имя на '''groupset'''. Щелкаем в свойствах по имени правой кнопкой мыши, добавляем в свойства объект, из списка объектов выбираем Text.

[[Файл:Группа.PNG]]

'''Описание объекта Groupset'''

'''Groupset (группа)''' позволяет передавать состояния и параметры множеству объектов, которые являются участниками группы. Участником группы является любой объект, указанный в в объекте Groupset.

Groupset удобно использовать, когда необходимо обращаться к множеству объектов.
Если объекту Groupset передается состояние (например st_1), то все объекты принадлежащие объекту Groupset должны иметь состояние st_1, иначе возникнет ошибка.

Объекты принадлежащие одной группе могут быть разного типа и разноименными.

Команды применимые к группе:

• ''set'' — группе можно установить состояние st и параметр (значение) par(val);

• ''drop'' — на группу (объекты принадлежащие группе) можно отпустить объект.

Для каждой из добавленных машин запишем состояния.

Машина en:

[[Файл:En.PNG]]

Машина ru

[[Файл:Ru.PNG]]

Как видно, в состоянии on, каждой машины, задается lang (язык) в глобальном объекте Options. В состояние r Groupset передается состояние init (инициализация объекта).

Сохраняем и запускаем вьювер.

[[Файл:Вьювер.PNG]]

На экране расположено три кнопки и текст. При нажатие кнопки вперед язык текста меняется — на русский, при нажатие назад — на английский, желтая кнопка вперед меняет сам текст.
----
{| width="100%"
| width="40%"|[[Движение машин: жучки, ключи и многое другое|Урок 5]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Создание игры «Hidden Object Game»|Урок 7]]
|}

[[Category:Learning]]

Движение машин: жучки, ключи и многое другое

2021-08-04T12:29:13Z

Blymar: /* Саквояж и жук */

{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}
----
{{TOC right}}

'''Цель:''' изучить процессы движения и способы взаимодействия машин.

'''Задачи:'''
* реализовать разными методами "ход конем";
* организовать циклическое движение по квадрату;
* разобраться с понятием точки пивота;
* научиться согласовывать поступательное и вращательное движение;
* рассмотреть способ применения одного предмета на другой.

== Процессы и движение ==

До сих пор мы ограничивались только одной командой процессов - '''wait''' (ожидание).
В этом уроке мы рассмотрим другие процессы. Существуют следующие команды движения (изменения объекта):
* '''move''' - движение по прямой
* '''rot''' - вращение
* '''scale''' - изменение размера
* '''alpha''' - изменение прозрачности
* '''phys''' - движение в силовом поле.

В каждой команде достаточно много параметров. Например, можно сдвинуться (move)
по горизонтали на '''dx''' пикселей за время '''t'''. Вместо времени можно указать скорость '''v''' в пикселях в секунду.
Можно двигаться в определенную целевую точку с координатами ('''tx''', '''ty''') и т.д.

=== Ход конем ===

[[файл:lady_bug_64.png|right]]
Рассмотрим простой пример в котором объект движется сначала вверх на 100 пикселей, а затем вправо на 200.
В качестве такого объекта будем использовать ladybug (божья коровка или для краткости жучок),
картинку которой можно найти в редакторе ресурсов в папке этого урока.
Как обычно, перетаскиваем её на сцену, переименовываем и превращаем в машину состояний.
Организуем сначала движние нашего жучка при помощи трёх состояний:

[[файл:lesson_5_bug1.png]]

Первое, стартовое состояние является запускающим. Если кликнуть на жучка, то он начнет своё движение.
Когда перемещение по вертикали заканчивается (состояние up), жучок переходит в третье состояние (right), в котором движется вправо.
Закончив движение, он возвращается в стартовое состояние и ждет очередного клика.

Координатная ось Y (вертикальная) на сцене направлена вниз, а ось X (горизонтальная) -- вправо.
Поэтому, чтобы жучок начал двигаться вверх, его смещение должно быть отрицательным.
В нашем случае это dy=-100. Эти 100 пикселей объект должен пройти за одну секунду (t=1000).
В конце выполнения команды move происходит переход в следующее состояние, имя которого задается в поле "'''go'''".

При движении вправо, происходит смещение на 200 пикселей.
Чтобы скорость движения вверх и вправо была постоянной, необходимо соответственно увеличить
время движения (t=2000).

Точно такое же движение можно организовать в рамках одного, а не двух состояний.
Поместите на сцену еще одного жучка, дайте ему другое имя и задайте следующую машину состояний:

[[файл:lesson_5_bug2.png]]

Команды move в состоянии way выполняются последовательно.
Сначала отрабатывает нулевой move, а затем первый.

Протестируйте получившийся результат. Оба жучка должны двигаться одинаковым образом.
Не забывайте при тестировании включать отладочную информацию о текущих состояниях.

=== Последовательно и параллельно ===

И так, в рамках данного состояния все команды процессов с одинаковым названием выполняются '''последовательно'''.
При этом команды с разными именами выполняются '''параллельно'''.

[[файл:Def_procesess1.png|right]]
Пусть в состянии есть несколько команд move и несколько команд rot (вращения):
* move0 move1 rot0 move2 rot1 rot2
Независимо от их чередования, они выстраиваются в параллельные списки процессов:
* move0 rot0
* move1 rot1
* move2 rot2
Эти списки начинают одновременно выполняться сверху вниз:
отрабатывают команды move и одновременно с ними комананды rot.

Заставим нашего жучка при совершении хода конем поворачиваться на 360 градусов.
Для этого поместим третью машину со следующими состояниями:

[[файл:lesson_5_bug3.png]]

Запустите проект во вьювере.
Одновременно с выполнением двух команд move будет выполняться одна команда rot.
Время выполнения rot равно суммарному времени двух команд move (t=3000=1000+2000).
В результате, к концу движения, жучок поворачивается на da=360 градусов ('''da''' - изменение угла).

Переход в следующее состояние '''go''' в данном случае можно было бы поставить не в команду '''rot''',
а в последнюю команду '''move'''. Однако приведенное решение лучше, так как
гарантирует, что переход произойдет только, когда жучок полностью развернется.
Хотя суммарное время move совпадает с временем rot, реальное компьютерное время
выполнения этих команд может немного отличаться. В результате, если выйти из
состояния по окончанию движения, можно получить не до конца развернувшегося жучка.

=== Циклическое движение ===

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

[[файл:lesson_5_bug4.png]]

Четыре команды move выполняются одна за одной.
Затем вьювер натыкается на параметр loop=1 и еще раз выполняет
это движение с самого начала. Последняя команда move служит для перехода в стартовое состояние
ожидания клика.

Заметим, что нельзя было для перехода использовать '''wait'''.
Она, как и остальные команды процессов, запустилась бы параллельно с командами
и сработала бы сразу. В результате ни какого движения не получилось бы!

Если параметр loop=-1, то движение будет бесконечным.
Этого же можно было добиться, поставив вместо loop=-1 параметр go с переходом в это же состояние (перезапустить состояние).

=== Управление командами ===

Кроме команды зацикливания данного процесса, можно из одних команд запускать другие (начинать процессы другого типа). Например, пусть жучок движется вправо в течении 1 секунды и вращается 2 секунды.
Команда move закончится раньше команды rot.
Пусть затем, закончив полный оборот (на уже остановившемся объекте), он начинает снова двигаться вправо. Реализуется это так:

[[файл:lesson_5_move_rot.png]]

Команда '''rot''' зациклена (loop=-1). Кроме этого, она имеет параметр move=0
в котором задается номер команды move которую надо запустить на выполнение после окончания вращения.

Вызов одних команд процессов из других очень мощный, но одновременно и опасный инструмент.
Множественные вызовы различных команд превращают состояние в спагетти переходов,
логику которого часто сложно понять. Более того, иногда можно получить зависание вьювера
при неудачной перекрестной ссылке двух команд друг на друга.
По этой причине запрещено вызывать из данной команды другие команды этого же типа
(из rot вызывать rot и т.д.). Однако это, к сожалению, не снимает полностью проблему зависания.
Так, что готовьтесь...

=== Вращение вокруг пивота ===

При вращении (команда '''rot''') машина вращается вокруг, так называемой,
'''точки пивота''' (''pivot'' - штырь, болт; опорная точка).
В примерах выше эта точка находилась в центре картинки.
Изменим теперь её положение и посмотрим к какому эффекту это приведет.

Откроем редактор ресурсов и в папке этого урока найдем солнышко.
Сделаем четыре действий:
# Кликнем на имя солнышка (sun_1) в дереве на левой панели
# Под этой панелью поставим галочку в чекбоксе ''Edit''.
# Схватимся мышкой за красный крестик в центре солнышка на правой панели и перетащим этот крестик влево.
# Уберем галочку в чекбоксе ''Save''
800
[[Файл:Vot-tak-vot.png|800px]]
Теперь перетащим солнышко на сцену этого урока (лучше для него создать отдельный экран).
Уменьшим его размеры модификаторами scale x и scale y, поставив там значение 0.5.
Превратим солнышко в такую машину:

[[файл:lesson_5_pivot2.png]]

Сохранив проект и запустив вьювер, мы увидим, что солнышко начало вращаться
по окружности. Машина по прежнему вращается вокруг точки пивота.
Однако теперь эта точка смещена в центр окружности.

В качестве упражнения попробуйте организовать вращение, подобное вращению Земли и Луны
(Земля вращается по окружности, а Луна вращается по окружности меньшего радиуса вокруг Земли).
Для этого Вам потребуется "Луну" сделать подобъектом "Земли" и правильно выставить
положение "Луны" относительно "Земли".
<blockquote>
[[файл:Ok.png|right|32px]]
'''Внимание!''' Если объект помещен в группу, то координаты его пивота изменяются относительно точки пивота того объекта, чьим подобъектом он является.
</blockquote>
Поэкспериментируйте. Можно использовать следующие картинки:

[[файл:eath.png]] [[файл:moon.png]]

== Как ездят кареты ==

=== Подготовка ===

Если Вы уже организовали движение Земли и Луны, то сложное движение,
возникающие при наличие подобъектов, не должно вызывать затруднений.
В этом примере мы покажем как согласовывать поступательное и
вращательное движение на примере кареты с двумя колёсами.
Разместим все три объекта (карету и её два колеса) на сцене
и сделаем колеса подобъектами кареты.
Превратим их все в машины состояний:

[[файл:lesson_5_kareta1.png]]

Пусть при клике на карету она проезжает некоторое расстояние по горизонтали и останавливается.
Сделайте самостоятельно такую машину и протестируйте её.
Карета должна перемещаться, а колеса, являясь её подобъектами, двигаться вместе с ней.
Однако, они пока не вращаются. Если в ресурсах не окажется колеса и кареты,
можно загрузить их непосредственно из этого урока:

[[файл:kareta.png]] [[файл:koleso.png]]

=== Немного математики ===

Разберемся как согласовать ''поступательную'' скорость кареты и ''угловую'' скорость вращения колес. Последняя должна быть подобрана таким образом, чтобы движение
выглядело естественным (колеса не проскальзывали вперед или назад).

Посмотрите на формулы возле рисунка кареты. В первой из них приводится связь длины окружности L колеса и его радиуса r. Ниже - коэффициент 57.3 перевода числа пи из углов в радианы (пи - это 3.1415.. в радианах или 180 градусов). Во второй колонке даны определения поступательной и угловой скорости (изменение расстояния или угла за некоторое время t).
Наконец, в третей колонке дана ключевая для нашей задачи формула, связывающая радиус '''r''', линейную '''v''' и угловую скорости '''w'''. Попробуйте её самостоятельно вывести, из предположения, что за одно и тоже время длина смещения кареты должна совпадать с длиной окружности обода колеса.
При этом поступательная скорость '''v''' измеряется в пикселях за секунду, а угловая скорость '''w''' в градусах за секунду.

=== Машины ===

Запрограммируем теперь карету и колеса так, что бы после клика начинала двигаться карета
и вращаться колеса. Когда карета останавливается, то и колеса должны переставать крутится.
Колеса сделаем одинаковыми простыми машинами с двумя состояниями, которые назовем '''off''' (неподвижны) и '''on''' (крутятся):

[[файл:lesson_5_kareta2.png]]

Заметим, что в состояниях колес нет команды draw, так как колесо всегда рисуется при помощи одной картинки, она берется по умолчанию, из той, которая была перетащена на сцену (свойство '''res''').
Угловая скорость '''v''' (в формулах она была обозначена как w) в команде rot измеряется в градусах в секунду. Поэтому v=180 означает, что колесо будет делать полный оборот (360 градусов) за 2 секунды.

Обратим внимание, что раньше вращение мы задавали двумя параметрами: изменением угла '''da''' за время '''t'''. Так как сейчас время вращения колеса не фиксируется (этим занимается карета),
то указан только один параметр: угловая скорость v.

Так как колеса одинаковые, то имеет смысл создать сначала одно колесо, запрограммировать его, а затем скопировать, получив готовое второе колесо. Его надо будет только затем мышкой перетащить на нужное место.
Не забываем также переименовать машины (в нашем случае это '''koleso1''' и '''koleso2''').

Карета должна при клике запускать на вращение колеса (переводя в состояние on),
а при остановке их останавливать:

[[файл:lesson_5_kareta3.png]]

Проверьте что параметр v=66 в команде move состояния run кареты, угловая скорость колес v=180 в команде rot состояния on согласуются с радиусом колеса r=21. Радиус колеса равен половине ширины его картинки (свойство "размер"). Если Ваше колесо имеет другой размер, пересчитайте поступательную скорость по приведенной выше формуле.

== Как открыть замок ключом ==

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

=== Постановка задачи ===

Рассмотрим простой пример подобного взаимодействия объектов.
Создайте новый экран и сцену на нём, так как предыдущий экран должен быть уже
забит различными насекомыми.
Перетащите на сцену из редактора ресурсов очередного жука, саквояж и ключ.
Лучше их перетаскивать именно в таком порядке.
Если порядок получился другой, мышкой в дереве проекта упорядочите
эти объекты, так чтобы последовательность рисования была: жук, затем саквояж, затем ключ.
Расположите эти объекты примерно в центре сцены и сделайте их машинами состояний.
Поменяйте их имена на '''ladybug''' (божья коровка), '''bag''' (саквояж) и '''key''' (ключ).

[[файл:lesson_5_key1.png|300px]]

Наша задача состоит в организации взаимодействия ключа, саквояжа и жука при котором,
работают такие правила:
* если схватить ключ мышкой, он будет таскаться по сцене в определенных границах;
* если отпустить ключ над саквояжем, саквояж должен "растаять", уменьшив свою прозрачность, а ключ уменьшиться в размерах, сжавшись в точку;
* одновременно с этим, из-под саквояжа начинает вверх бежать жук;
* когда жук заканчивает движение, саквояж появляется на своем месте, ключ также появляется на исходном месте, увеличившись из точки до начального размера, а жук исчезает, спрятавшись под саквояж.

=== Ключ ===

Запрограммируем сначала машину для ключа:

[[файл:lesson_5_key3.png]]

Три состояния соответствуют трём режимам функционирования ключа:
* '''drag''' - в этом, стартовом состоянии мы таскаем ключ по экрану
* '''open''' - открываем саквояж и уменьшаемся до 0
* '''back''' - восстанавливаем размер и возвращаемся в исходное положение на экране

Второе состояние состояние '''open''' не должно вызвать особых затруднений.
В команде '''set''' меняется состояние объекта '''bag''' (саквояж) на open.
В этот момент саквояж должен изобразить своё открытие.
В команде процессов '''scale''' происходит за время t=500 миллисекунд уменьшение масштаба рисования
ключа (его размера) до ''целевых значений'' tx, ty которые выбраны близкими к нулю.
После этого ключ переходит в третье состояние back.

В состоянии back он снова меняет свой масштаб, но уже к исходному значению 1
по ширине и высоте.
Кроме этого появилась новая команда '''init'''. Это команда инициализации
или переустановки свойств данной машины. В нашем случае, мы меняем её координаты
на значения x=0 и y=250 пикселей. Как и команда '''set''', команда '''init''' выполняется сразу при входе в состояние, поэтому ключ начнет увеличиваться уже с исходной позиции.
Желательно, на сцене ему сразу задать в свойствах положение x=0, y=250,
чтобы туда в дальнейшем он и возвращался.

Разберемся теперь с системой координат на сцене.

=== Координаты на сцене ===

Если сцена создавалась по умолчанию, то она имеет ширину 960 пикселей,
а высоту - 640. Начало отсчёта координат на сцене расположено в её центре.
Ось x, по которой откладывается горизонтальная координата объекта направлена вправо,
а ось Y для вертикальной координаты - вниз:

[[файл:lesson_5_key2.png|600px]]

Стоит раскрыть координаты любого объекта (свойство положение) на панели Properties.
Затем потаскать объект по сцене, наблюдая как эти координаты меняются.
Если '''x''' стало отрицательным, значит объект находится левее центра сцены.
Если же отрицательный '''y''', то объект расположен выше центра.

Заметим, что координата объекта определяется его точкой пивота.
Для трех объектов, находящихся сейчас на сцене точка пивота должна
совпадать с центрами картинок.

Таким образом, когда мы задали в команде init положение для ключа x=0, y=250,
мы поместили его по середине, в нижней части сцены.

=== Драг энд дроп ===

[[файл:lesson_5_key3_drag.png|right]]
Осталось разобраться с ещё двумя новыми командами,
которые появились в состоянии drag.
Первая команда '''drag''' (таскать) означает, что данную машину в этом состоянии
разрешено мышкой таскать по экрану.
При этом могут быть заданы координаты области за которую объект вытащить нельзя.
Эта область определяется двумя точками - верхним левым углом с координатами (x1,y1)
и правым нижним углом с координатами (x2,y2).

В нашем случае эти точки почти совпадают с углами сцены.
На самом деле область разрешенного таскания чуть меньше размера сцены.
Сделано это для того, чтобы ключ нельзя было даже краешком вытащить за сцену.
Правый нижний угол сцены имеет координаты (x2, y2)=(480, 320)=(960/2, 640/2).
Ширина ключа 128 пикселей (см. свойство размер).
Поэтому, чтобы правая сторона ключа не выехала за сцену, для координаты y1
мы берем значение 416 = 480-128/2 (сужаем границу таскания на половину ширины ключа). Аналогично считаются остальные координаты области разрешенного таскания.

Наконец, команда '''drop''' (бросить), регулирует, что должно произойти при бросании ключа
(отпускания мышки) если оно произошло на объекте '''obj'''.
В данном случае происходит переход в новое состояние (поле '''go''').

=== Саквояж и жук ===

Создадим теперь машину для саквояжа.
Она будет иметь два состояния open и close:

[[файл:lesson_5_key4.png]]

В состоянии close в команде '''init''' саквояж переустанавливает свою прозрачность в единичное значение (непрозрачен) al=1.00. Это необходимо, что бы появиться на экране после исчезновения.
Сам процесс исчезновения задается командой процесса '''alpha''' в состоянии open.
Эта команда меняет текущую прозрачность объекта до целевого значения ta=0 (полностью прозрачен) за время t=500 миллисекунд (пол секунды).
Кроме этого в этом состоянии меняется состояние жука (команда '''set'''), который должен из под саквояжа начать бежать.

'''Внимание!!!''' Если в параметре '''ta''' команды '''alpha''' установлено значение 0, то, помимо того что объект станет полностью прозрачен, стоить иметь ввиду, что он также станет невосприимчив к кликам. Для того, чтобы прозрачный объект считывал клики, стоит задать для '''ta''' следующее значение '''ta=0.02'''

Осталось создать два состояния для жука, который будет выбегать из под саквояжа.
Ничего сложного в его поведении нет:

[[файл:lesson_5_key5.png]]

Теперь самое время протестировать результат наших действий.
Потаскайте сначала ключ по сцене, убедившись, что он за неё не входит.
Затем наведите ключом на саквояж и отпустите мышку.
Всё должно прийти в движение.
Включите отладку (кнопка S и потом кнопка C) и понаблюдайте как изменяются состояния объектов.
В момент выполнения процессов можно несколько раз понажимать на пробел,
чтобы приостановить их выполнение и запустить снова.

== Что дальше? ==

Мы разобрали много команд и их параметров.
Однако это далеко не все возможности машин состояний.
Стоит прочитать документ [[Machine]] в котором описан весь язык машин.
Чем больше Вы создадите машин с различным поведением, тем увереннее будете с ними работать.

В заключение приведем несколько общих советов:
* Проектируйте сначала логику поведения машин на бумаге.
* Давайте осмысленные названия для машин и их состояний.
* Обязательно документируйте машины, описывая их поведение на естественном языке.
* Копируйте однотипные машины для сокращения времени по их программированию.
* При сложном взаимодействии нескольких машин, вводите управляющую машину (возможно невидимую), в которой концентрируйте основную логику поведения.
* Не увлекайтесь длинными состояниями с множеством команд процессов. Иногда поведение становится понятнее, если состояние разбить на несколько последовательных состояний.
* Смело спрашивайте совета у более опытных дизайнеров. Они в своё время поступали именно так.

== Упражнения ==

* создайте движение Земли по окружности, а Луны также по окружности, но вокруг Земли;
* сделайте движение кареты бесконечным так, что после того как она уезжает за правый край экрана, она появлялась из-за левого края;
* заставьте жука начинать бежать, только когда саквояж полностью уменьшится (set на выходе из состояния).
* организуйте так, чтобы при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз, обратно под саквояж.

----
{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}

[[Category:Learning]]

Движение машин: жучки, ключи и многое другое

2021-08-04T12:28:12Z

Blymar: /* Саквояж и жук */

{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}
----
{{TOC right}}

'''Цель:''' изучить процессы движения и способы взаимодействия машин.

'''Задачи:'''
* реализовать разными методами "ход конем";
* организовать циклическое движение по квадрату;
* разобраться с понятием точки пивота;
* научиться согласовывать поступательное и вращательное движение;
* рассмотреть способ применения одного предмета на другой.

== Процессы и движение ==

До сих пор мы ограничивались только одной командой процессов - '''wait''' (ожидание).
В этом уроке мы рассмотрим другие процессы. Существуют следующие команды движения (изменения объекта):
* '''move''' - движение по прямой
* '''rot''' - вращение
* '''scale''' - изменение размера
* '''alpha''' - изменение прозрачности
* '''phys''' - движение в силовом поле.

В каждой команде достаточно много параметров. Например, можно сдвинуться (move)
по горизонтали на '''dx''' пикселей за время '''t'''. Вместо времени можно указать скорость '''v''' в пикселях в секунду.
Можно двигаться в определенную целевую точку с координатами ('''tx''', '''ty''') и т.д.

=== Ход конем ===

[[файл:lady_bug_64.png|right]]
Рассмотрим простой пример в котором объект движется сначала вверх на 100 пикселей, а затем вправо на 200.
В качестве такого объекта будем использовать ladybug (божья коровка или для краткости жучок),
картинку которой можно найти в редакторе ресурсов в папке этого урока.
Как обычно, перетаскиваем её на сцену, переименовываем и превращаем в машину состояний.
Организуем сначала движние нашего жучка при помощи трёх состояний:

[[файл:lesson_5_bug1.png]]

Первое, стартовое состояние является запускающим. Если кликнуть на жучка, то он начнет своё движение.
Когда перемещение по вертикали заканчивается (состояние up), жучок переходит в третье состояние (right), в котором движется вправо.
Закончив движение, он возвращается в стартовое состояние и ждет очередного клика.

Координатная ось Y (вертикальная) на сцене направлена вниз, а ось X (горизонтальная) -- вправо.
Поэтому, чтобы жучок начал двигаться вверх, его смещение должно быть отрицательным.
В нашем случае это dy=-100. Эти 100 пикселей объект должен пройти за одну секунду (t=1000).
В конце выполнения команды move происходит переход в следующее состояние, имя которого задается в поле "'''go'''".

При движении вправо, происходит смещение на 200 пикселей.
Чтобы скорость движения вверх и вправо была постоянной, необходимо соответственно увеличить
время движения (t=2000).

Точно такое же движение можно организовать в рамках одного, а не двух состояний.
Поместите на сцену еще одного жучка, дайте ему другое имя и задайте следующую машину состояний:

[[файл:lesson_5_bug2.png]]

Команды move в состоянии way выполняются последовательно.
Сначала отрабатывает нулевой move, а затем первый.

Протестируйте получившийся результат. Оба жучка должны двигаться одинаковым образом.
Не забывайте при тестировании включать отладочную информацию о текущих состояниях.

=== Последовательно и параллельно ===

И так, в рамках данного состояния все команды процессов с одинаковым названием выполняются '''последовательно'''.
При этом команды с разными именами выполняются '''параллельно'''.

[[файл:Def_procesess1.png|right]]
Пусть в состянии есть несколько команд move и несколько команд rot (вращения):
* move0 move1 rot0 move2 rot1 rot2
Независимо от их чередования, они выстраиваются в параллельные списки процессов:
* move0 rot0
* move1 rot1
* move2 rot2
Эти списки начинают одновременно выполняться сверху вниз:
отрабатывают команды move и одновременно с ними комананды rot.

Заставим нашего жучка при совершении хода конем поворачиваться на 360 градусов.
Для этого поместим третью машину со следующими состояниями:

[[файл:lesson_5_bug3.png]]

Запустите проект во вьювере.
Одновременно с выполнением двух команд move будет выполняться одна команда rot.
Время выполнения rot равно суммарному времени двух команд move (t=3000=1000+2000).
В результате, к концу движения, жучок поворачивается на da=360 градусов ('''da''' - изменение угла).

Переход в следующее состояние '''go''' в данном случае можно было бы поставить не в команду '''rot''',
а в последнюю команду '''move'''. Однако приведенное решение лучше, так как
гарантирует, что переход произойдет только, когда жучок полностью развернется.
Хотя суммарное время move совпадает с временем rot, реальное компьютерное время
выполнения этих команд может немного отличаться. В результате, если выйти из
состояния по окончанию движения, можно получить не до конца развернувшегося жучка.

=== Циклическое движение ===

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

[[файл:lesson_5_bug4.png]]

Четыре команды move выполняются одна за одной.
Затем вьювер натыкается на параметр loop=1 и еще раз выполняет
это движение с самого начала. Последняя команда move служит для перехода в стартовое состояние
ожидания клика.

Заметим, что нельзя было для перехода использовать '''wait'''.
Она, как и остальные команды процессов, запустилась бы параллельно с командами
и сработала бы сразу. В результате ни какого движения не получилось бы!

Если параметр loop=-1, то движение будет бесконечным.
Этого же можно было добиться, поставив вместо loop=-1 параметр go с переходом в это же состояние (перезапустить состояние).

=== Управление командами ===

Кроме команды зацикливания данного процесса, можно из одних команд запускать другие (начинать процессы другого типа). Например, пусть жучок движется вправо в течении 1 секунды и вращается 2 секунды.
Команда move закончится раньше команды rot.
Пусть затем, закончив полный оборот (на уже остановившемся объекте), он начинает снова двигаться вправо. Реализуется это так:

[[файл:lesson_5_move_rot.png]]

Команда '''rot''' зациклена (loop=-1). Кроме этого, она имеет параметр move=0
в котором задается номер команды move которую надо запустить на выполнение после окончания вращения.

Вызов одних команд процессов из других очень мощный, но одновременно и опасный инструмент.
Множественные вызовы различных команд превращают состояние в спагетти переходов,
логику которого часто сложно понять. Более того, иногда можно получить зависание вьювера
при неудачной перекрестной ссылке двух команд друг на друга.
По этой причине запрещено вызывать из данной команды другие команды этого же типа
(из rot вызывать rot и т.д.). Однако это, к сожалению, не снимает полностью проблему зависания.
Так, что готовьтесь...

=== Вращение вокруг пивота ===

При вращении (команда '''rot''') машина вращается вокруг, так называемой,
'''точки пивота''' (''pivot'' - штырь, болт; опорная точка).
В примерах выше эта точка находилась в центре картинки.
Изменим теперь её положение и посмотрим к какому эффекту это приведет.

Откроем редактор ресурсов и в папке этого урока найдем солнышко.
Сделаем четыре действий:
# Кликнем на имя солнышка (sun_1) в дереве на левой панели
# Под этой панелью поставим галочку в чекбоксе ''Edit''.
# Схватимся мышкой за красный крестик в центре солнышка на правой панели и перетащим этот крестик влево.
# Уберем галочку в чекбоксе ''Save''
800
[[Файл:Vot-tak-vot.png|800px]]
Теперь перетащим солнышко на сцену этого урока (лучше для него создать отдельный экран).
Уменьшим его размеры модификаторами scale x и scale y, поставив там значение 0.5.
Превратим солнышко в такую машину:

[[файл:lesson_5_pivot2.png]]

Сохранив проект и запустив вьювер, мы увидим, что солнышко начало вращаться
по окружности. Машина по прежнему вращается вокруг точки пивота.
Однако теперь эта точка смещена в центр окружности.

В качестве упражнения попробуйте организовать вращение, подобное вращению Земли и Луны
(Земля вращается по окружности, а Луна вращается по окружности меньшего радиуса вокруг Земли).
Для этого Вам потребуется "Луну" сделать подобъектом "Земли" и правильно выставить
положение "Луны" относительно "Земли".
<blockquote>
[[файл:Ok.png|right|32px]]
'''Внимание!''' Если объект помещен в группу, то координаты его пивота изменяются относительно точки пивота того объекта, чьим подобъектом он является.
</blockquote>
Поэкспериментируйте. Можно использовать следующие картинки:

[[файл:eath.png]] [[файл:moon.png]]

== Как ездят кареты ==

=== Подготовка ===

Если Вы уже организовали движение Земли и Луны, то сложное движение,
возникающие при наличие подобъектов, не должно вызывать затруднений.
В этом примере мы покажем как согласовывать поступательное и
вращательное движение на примере кареты с двумя колёсами.
Разместим все три объекта (карету и её два колеса) на сцене
и сделаем колеса подобъектами кареты.
Превратим их все в машины состояний:

[[файл:lesson_5_kareta1.png]]

Пусть при клике на карету она проезжает некоторое расстояние по горизонтали и останавливается.
Сделайте самостоятельно такую машину и протестируйте её.
Карета должна перемещаться, а колеса, являясь её подобъектами, двигаться вместе с ней.
Однако, они пока не вращаются. Если в ресурсах не окажется колеса и кареты,
можно загрузить их непосредственно из этого урока:

[[файл:kareta.png]] [[файл:koleso.png]]

=== Немного математики ===

Разберемся как согласовать ''поступательную'' скорость кареты и ''угловую'' скорость вращения колес. Последняя должна быть подобрана таким образом, чтобы движение
выглядело естественным (колеса не проскальзывали вперед или назад).

Посмотрите на формулы возле рисунка кареты. В первой из них приводится связь длины окружности L колеса и его радиуса r. Ниже - коэффициент 57.3 перевода числа пи из углов в радианы (пи - это 3.1415.. в радианах или 180 градусов). Во второй колонке даны определения поступательной и угловой скорости (изменение расстояния или угла за некоторое время t).
Наконец, в третей колонке дана ключевая для нашей задачи формула, связывающая радиус '''r''', линейную '''v''' и угловую скорости '''w'''. Попробуйте её самостоятельно вывести, из предположения, что за одно и тоже время длина смещения кареты должна совпадать с длиной окружности обода колеса.
При этом поступательная скорость '''v''' измеряется в пикселях за секунду, а угловая скорость '''w''' в градусах за секунду.

=== Машины ===

Запрограммируем теперь карету и колеса так, что бы после клика начинала двигаться карета
и вращаться колеса. Когда карета останавливается, то и колеса должны переставать крутится.
Колеса сделаем одинаковыми простыми машинами с двумя состояниями, которые назовем '''off''' (неподвижны) и '''on''' (крутятся):

[[файл:lesson_5_kareta2.png]]

Заметим, что в состояниях колес нет команды draw, так как колесо всегда рисуется при помощи одной картинки, она берется по умолчанию, из той, которая была перетащена на сцену (свойство '''res''').
Угловая скорость '''v''' (в формулах она была обозначена как w) в команде rot измеряется в градусах в секунду. Поэтому v=180 означает, что колесо будет делать полный оборот (360 градусов) за 2 секунды.

Обратим внимание, что раньше вращение мы задавали двумя параметрами: изменением угла '''da''' за время '''t'''. Так как сейчас время вращения колеса не фиксируется (этим занимается карета),
то указан только один параметр: угловая скорость v.

Так как колеса одинаковые, то имеет смысл создать сначала одно колесо, запрограммировать его, а затем скопировать, получив готовое второе колесо. Его надо будет только затем мышкой перетащить на нужное место.
Не забываем также переименовать машины (в нашем случае это '''koleso1''' и '''koleso2''').

Карета должна при клике запускать на вращение колеса (переводя в состояние on),
а при остановке их останавливать:

[[файл:lesson_5_kareta3.png]]

Проверьте что параметр v=66 в команде move состояния run кареты, угловая скорость колес v=180 в команде rot состояния on согласуются с радиусом колеса r=21. Радиус колеса равен половине ширины его картинки (свойство "размер"). Если Ваше колесо имеет другой размер, пересчитайте поступательную скорость по приведенной выше формуле.

== Как открыть замок ключом ==

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

=== Постановка задачи ===

Рассмотрим простой пример подобного взаимодействия объектов.
Создайте новый экран и сцену на нём, так как предыдущий экран должен быть уже
забит различными насекомыми.
Перетащите на сцену из редактора ресурсов очередного жука, саквояж и ключ.
Лучше их перетаскивать именно в таком порядке.
Если порядок получился другой, мышкой в дереве проекта упорядочите
эти объекты, так чтобы последовательность рисования была: жук, затем саквояж, затем ключ.
Расположите эти объекты примерно в центре сцены и сделайте их машинами состояний.
Поменяйте их имена на '''ladybug''' (божья коровка), '''bag''' (саквояж) и '''key''' (ключ).

[[файл:lesson_5_key1.png|300px]]

Наша задача состоит в организации взаимодействия ключа, саквояжа и жука при котором,
работают такие правила:
* если схватить ключ мышкой, он будет таскаться по сцене в определенных границах;
* если отпустить ключ над саквояжем, саквояж должен "растаять", уменьшив свою прозрачность, а ключ уменьшиться в размерах, сжавшись в точку;
* одновременно с этим, из-под саквояжа начинает вверх бежать жук;
* когда жук заканчивает движение, саквояж появляется на своем месте, ключ также появляется на исходном месте, увеличившись из точки до начального размера, а жук исчезает, спрятавшись под саквояж.

=== Ключ ===

Запрограммируем сначала машину для ключа:

[[файл:lesson_5_key3.png]]

Три состояния соответствуют трём режимам функционирования ключа:
* '''drag''' - в этом, стартовом состоянии мы таскаем ключ по экрану
* '''open''' - открываем саквояж и уменьшаемся до 0
* '''back''' - восстанавливаем размер и возвращаемся в исходное положение на экране

Второе состояние состояние '''open''' не должно вызвать особых затруднений.
В команде '''set''' меняется состояние объекта '''bag''' (саквояж) на open.
В этот момент саквояж должен изобразить своё открытие.
В команде процессов '''scale''' происходит за время t=500 миллисекунд уменьшение масштаба рисования
ключа (его размера) до ''целевых значений'' tx, ty которые выбраны близкими к нулю.
После этого ключ переходит в третье состояние back.

В состоянии back он снова меняет свой масштаб, но уже к исходному значению 1
по ширине и высоте.
Кроме этого появилась новая команда '''init'''. Это команда инициализации
или переустановки свойств данной машины. В нашем случае, мы меняем её координаты
на значения x=0 и y=250 пикселей. Как и команда '''set''', команда '''init''' выполняется сразу при входе в состояние, поэтому ключ начнет увеличиваться уже с исходной позиции.
Желательно, на сцене ему сразу задать в свойствах положение x=0, y=250,
чтобы туда в дальнейшем он и возвращался.

Разберемся теперь с системой координат на сцене.

=== Координаты на сцене ===

Если сцена создавалась по умолчанию, то она имеет ширину 960 пикселей,
а высоту - 640. Начало отсчёта координат на сцене расположено в её центре.
Ось x, по которой откладывается горизонтальная координата объекта направлена вправо,
а ось Y для вертикальной координаты - вниз:

[[файл:lesson_5_key2.png|600px]]

Стоит раскрыть координаты любого объекта (свойство положение) на панели Properties.
Затем потаскать объект по сцене, наблюдая как эти координаты меняются.
Если '''x''' стало отрицательным, значит объект находится левее центра сцены.
Если же отрицательный '''y''', то объект расположен выше центра.

Заметим, что координата объекта определяется его точкой пивота.
Для трех объектов, находящихся сейчас на сцене точка пивота должна
совпадать с центрами картинок.

Таким образом, когда мы задали в команде init положение для ключа x=0, y=250,
мы поместили его по середине, в нижней части сцены.

=== Драг энд дроп ===

[[файл:lesson_5_key3_drag.png|right]]
Осталось разобраться с ещё двумя новыми командами,
которые появились в состоянии drag.
Первая команда '''drag''' (таскать) означает, что данную машину в этом состоянии
разрешено мышкой таскать по экрану.
При этом могут быть заданы координаты области за которую объект вытащить нельзя.
Эта область определяется двумя точками - верхним левым углом с координатами (x1,y1)
и правым нижним углом с координатами (x2,y2).

В нашем случае эти точки почти совпадают с углами сцены.
На самом деле область разрешенного таскания чуть меньше размера сцены.
Сделано это для того, чтобы ключ нельзя было даже краешком вытащить за сцену.
Правый нижний угол сцены имеет координаты (x2, y2)=(480, 320)=(960/2, 640/2).
Ширина ключа 128 пикселей (см. свойство размер).
Поэтому, чтобы правая сторона ключа не выехала за сцену, для координаты y1
мы берем значение 416 = 480-128/2 (сужаем границу таскания на половину ширины ключа). Аналогично считаются остальные координаты области разрешенного таскания.

Наконец, команда '''drop''' (бросить), регулирует, что должно произойти при бросании ключа
(отпускания мышки) если оно произошло на объекте '''obj'''.
В данном случае происходит переход в новое состояние (поле '''go''').

=== Саквояж и жук ===

Создадим теперь машину для саквояжа.
Она будет иметь два состояния open и close:

[[файл:lesson_5_key4.png]]

В состоянии close в команде '''init''' саквояж переустанавливает свою прозрачность в единичное значение (непрозрачен) al=1.00. Это необходимо, что бы появиться на экране после исчезновения.
Сам процесс исчезновения задается командой процесса '''alpha''' в состоянии open.
Эта команда меняет текущую прозрачность объекта до целевого значения ta=0 (полностью прозрачен) за время t=500 миллисекунд (пол секунды).
Кроме этого в этом состоянии меняется состояние жука (команда '''set'''), который должен из под саквояжа начать бежать.

'''Внимание!!!''' Если в параметре '''ta''' команды '''alpha''' установлено значение 0, то, помимо того что объект станет полностью прозрачен, стоить иметь ввиду, что он также станет невосприимчив к кликам. Для того, чтобы прозрачный объект считывал клики, стоит задать для '''ta''' следующее значение '''ta=0.02'''

Осталось создать два состояния для жука, который будет выбегать из под саквояжа.
Ничего сложного в его поведении нет:

[[файл:lesson_5_key5.png]]

Теперь самое время протестировать результат наших действий.
Потаскайте сначала ключ по сцене, убедившись, что он за неё не входит.
Затем наведите ключом на саквояж и отпустите мышку.
Всё должно прийти в движение.
Включите отладку (кнопка S и потом кнопку C) и понаблюдайте как изменяются состояния объектов.
В момент выполнения процессов можно несколько раз понажимать на пробел,
чтобы приостановить их выполнение и запустить снова.

== Что дальше? ==

Мы разобрали много команд и их параметров.
Однако это далеко не все возможности машин состояний.
Стоит прочитать документ [[Machine]] в котором описан весь язык машин.
Чем больше Вы создадите машин с различным поведением, тем увереннее будете с ними работать.

В заключение приведем несколько общих советов:
* Проектируйте сначала логику поведения машин на бумаге.
* Давайте осмысленные названия для машин и их состояний.
* Обязательно документируйте машины, описывая их поведение на естественном языке.
* Копируйте однотипные машины для сокращения времени по их программированию.
* При сложном взаимодействии нескольких машин, вводите управляющую машину (возможно невидимую), в которой концентрируйте основную логику поведения.
* Не увлекайтесь длинными состояниями с множеством команд процессов. Иногда поведение становится понятнее, если состояние разбить на несколько последовательных состояний.
* Смело спрашивайте совета у более опытных дизайнеров. Они в своё время поступали именно так.

== Упражнения ==

* создайте движение Земли по окружности, а Луны также по окружности, но вокруг Земли;
* сделайте движение кареты бесконечным так, что после того как она уезжает за правый край экрана, она появлялась из-за левого края;
* заставьте жука начинать бежать, только когда саквояж полностью уменьшится (set на выходе из состояния).
* организуйте так, чтобы при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз, обратно под саквояж.

----
{| width="100%"
| width="40%"|[[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Редактор текстовых ресурсов|Урок 6]]
|}

[[Category:Learning]]

Взаимодействие машин: «Лампочка» и «Светофор»

2021-08-04T12:19:36Z

Blymar: /* Мигание как цикл */

{| width="100%"
| width="40%"|[[Checkbox как машина состояний|Урок 3]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Движение машин: жучки, ключи и многое другое|Урок 5]]
|}
----
{{TOC right}}

'''Цель:''' изучить взаимодействие машин состояний и организацию циклов.

'''Задачи:'''
* создать переключатель, включающий и выключающий лампочку;
* сделать лампу активной, знающей о состоянии переключателя;
* создать простой светофор, переключающий по кругу три лампы;
* создать уличный светофор с "правильным" поведением на основе управляющей машины;
* включать и выключать светофор при помощи кнопки.

== Лампочка и выключатель ==

=== Создание машин ===

Создайте в учебном проекте новый экран lesson_4 и сцену stg_main.
Перетащите на сцену из редактора ресурсов переключатель и лампочку:

[[Файл:lesson4_switch_lamp.png|300px|center]]

Поменяйте обоим объектам тип, сделав их [[Machine|машинами состояний]].
Переименуйте (поле свойств "'''имя'''") переключатель в '''switch''', а лампочку в '''lamp'''.

Наша задача состоит в организации взаимодействия переключателя и лампочки.
Переключатель, как ему и положено, включает и выключает свет.
Поэтому, связанная с ним машина состояний, должна воздействовать на вторую
машину, которой является лампочка.
Нарисуем сначала граф машин состояний:

[[Файл:lesson_4_state1.png|300px|center]]

Верхние красные кружочки относятся к переключателю.
Он может находиться в двух состояниях '''on''' и '''off'''.
Лампочка (синие кружочки), также имеет два состояния, которые мы
назовем '''dark''' и '''light'''.

Cоздайте эти состояния в машинах так, как это было описано в предыдущем уроке. Добавьте в каждое состояние команду draw с параметром res, в которые перетащите
картинки из редактора ресурсов.
Затем в переключателе добавьте команду '''click''' с параметром '''go'''.
Сделайте из него "чекбокс":

[[Файл:lesson_4_switch_state1_new.png]]

В лампочке создайте пока только по команде рисования draw:

[[Файл:lesson_4_lamp_state1.png]]

Протестируйте получившийся результат.
Переключатель должен переключаться, тогда как лампочка на это ни как не реагирует.

=== Подключаем провода ===

Теперь самое время подключить к лампочке и выключателю провода.
Этими проводами будет служить команда '''set'''.
Вспомним теорию. '''При входе''' в состояние происходит выполнение
команд инициализации, которые сразу выполняются, как только машина поменяла своё состояние.
К таким командам и относится команда '''set'''.
С её помощью происходит изменение состояния других машин.
Добавим в каждое из состояний переключателя по команде set с параметрами '''obj''' и '''st'''.
Для параметра obj из выпадалки выберем объект '''lamp'''.
В параметре st зададим руками требуемые состояния лампочки.
В результате должно получиться:

[[Файл:lesson_4_switch_state2.png]]

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

=== Активная лампочка ===

Давайте усложним поведение лампочки.
Пусть она, независимо от переключателя, может включаться,
если на неё кликнули в состоянии '''dark'''.
Перейдя в горящее состояние '''light''' она горит 2 секунды,
а затем сама выключается, возвращаясь в '''dark''':

[[файл:lesson_4_states2.png|300px|center]]

Не подглядывая на следующую картинку, запрограммируйте такое поведение лампочки.

У Вас, конечно, должен был получиться следующий результат:

[[файл:lesson_4_lamp2.png]]

=== Условия переходов ===

Потребуем теперь, чтобы лампочка, при клике на неё, могла включаться только,
если в этот момент включен переключатель.
Таким образом, необходимо заблокировать команду click если переключатель находится
в состоянии off. Делается это при помощи команды '''if''',
которую необходимо добавить в состояние dark лампочки:

[[файл:lesson_4_lamp3.png]]

Обратим внимание, что кроме команды if, было добавлено одноименное поле
в команде '''click''' с параметром 0. Разберемся, как работают эти команды.
В состоянии может быть несколько команд-условий if.
Все они нумеруются начиная с нуля. Т.е. первая сверху в списке команда if
имеет номер 0, следующая 1 и т.д.
Однако сами по себе условия ещё ничего не делают.
Запуск их на проверку выполнимости осуществляют другие команды.
В нашем случае это делает команда click.
В её поле if стоит ноль. Это означает, что при клике на лампочку
переход go произойдет только, если выполняется условие под номером 0.
В этом условии происходит проверка того, находится ли объект '''obj''' в состоянии '''st'''.
Если находится, то условие срабатывает и клик приводит к требуемой смене состояния.
Все просто :).

Протестируйте получившийся результат.
Сначала на выключенном переключателе кликните на лампочку.
Она не загорится. Теперь, включите переключатель.
Лампа загорится и после 2-х секунд погаснет.
Теперь, если кликнуть на лампочку, она снова загорится,
так как переключатель находится в состоянии on.
Стоит, как обычно, в процессе этих экспериментов понаблюдать за отладочной информацией.

=== Начальное состояние ===

[[файл:lesson_4_prop.png|right]]
Каждая машина в момент начала работы находится в определённом состоянии.
По умолчанию, это первое состояние в линейке состояний, в соответствующем окне редактирования.
Однако его можно изменить.
Сделаем так, чтобы в начальный момент времени переключатель
был включен, а не выключен. Для этого необходимо в его свойствах (панель Properties) в поле '''состояние''' задать имя начального состояния '''on'''.

Запустим вьювер. Обратим внимание, что лампочка сразу загорелась.
Так и должно быть, так как машина переключателя начала работать из
состояния on, а, следовательно, запустила команаду '''set''',
меняющую состояние лампочки.

Если лампочка сразу не загорелась, это означает, что в дереве проекта
она находится ниже переключателя. Поменяйте их местами, перетащив мышкой, и все заработает как описано выше.
С чем связаны такие магические действия, мы выясним ниже, при рассмотрении простого светофора.

=== Подробнее о командах ===

Подытожим информацию о командах, работающих в состояниях внутри машин.
Существует четыре типа команд:
* '''инициализаций''' (draw, set) - выполняется сразу как только машина оказалась в данном состоянии. Это "мгновенные" команды, т.к. их действие не растянуто во времени;
* '''воздействий''' (click) - выполняются, если на машину было оказано внешнее воздействие, например, в неё кликнули мышкой;
* '''процессов''' (wait) - эти команды начинают выполняться, когда произошел переход в данное состояние. В отличии от команд инициализации, их действие растянуто во времени. К этому типу команд относится также команда move, которая встречалась в машинах первого урока;
* '''условий''' (if) - описание различных логических условий, которые могут использовать другие команды данного состояния.

К настоящему моменту нам уже известны следующие команды:

* '''draw''' — управление внешним видом машины, определение её графического ресурса. Эта команда, как и set является командой инициализации, т.е. выполняется в момент попадания машины в данное состояние. Если в состоянии машины такой команды нет, то автоматически устанавливается графический ресурс, указанный в свойствах данной машины (поле '''res''');

* '''set''' – установка состояния другого объекта (команда инициализации);

* '''click''' – что делать при клике на объект (команда воздействия). В нашем случае - переход в другое состояние той же машины;

* '''wait''' – временная пауза, после которой происходит переход в другое состояние (время исчисляется в миллисекундах, где 1 сек = 1000 миллисекунд). Это команда процессов, т.е. её выполнение длится во времени;

* '''if''' – логическое условие перехода (команда перехода).

== Светофор ==

[[файл:lesson_4_lights1.png|right]]
Рассмотрим теперь обычный уличный светофор. Вспомним как он работает:
* сначала обычно (к сожалению) горит красная лампа, остальные выключены;
* затем, при горящей красной лампе, загорается ещё и желтая;
* затем желтая и красная лампы гаснут и загорается зеленая;
* в конце горения зеленой лампы она три раза мигает и выключается;
* затем включается желтая лампа, горит и гаснет
* затем включается красный, чтобы повторить весь процесс с самого начала.

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

[[файл:lessons_4_tree.png|right]]
Разместим на сцене подложку для светофора. Она останется статической картинкой.
Затем поместим поверх неё три лампы разного цвета и сделаем их подобъектами подложки.
Обложку назовем lights, а лампы '''light_R''', '''light_Y''', '''light_G'''.
Изменяя тип у ламп, превратим их в машины.

=== Простой светофор ===

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

[[файл:lesson_4_R1.png]]

[[файл:lesson_4_Y1.png]]

[[файл:lesson_4_G1.png]]

Хотя "простой светофор" будет работать вполне корректно,
приведенные выше машины не очень хороши.
Все лампы находятся в своем стартовом состоянии '''off'''.
В них есть команда инициализации '''set''', которая устанавливает состояние горения
следующей лампы. Что должно произойти в начальный момент запуска проекта?
Машины работают также как и рисуются - сверху вниз по дереву проекта.
Сначала инициализируется красная лампа. Это её первое попадание в состояние '''off''',
поэтому она пытается включить желтую лампу. Однако этого не происходит,
так как желтая лампа еще "не существует". Когда до неё доходит очередь, она создается
и пытается включить зеленую лампу которой также "ещё нет",
поэтому этого тоже не происходит. И только когда доходит дело до создания зеленой
лампы, она включает (уже существующую и находящуюся в состоянии '''off''') красную лампу.

С этого момента всё начинает работать вполне логично. При входе в состояние '''on'''
выключается предыдущая лампа, а при входе в состояние '''off''' включается следующая.

Стоит теперь вспомнить, отмеченную выше, важность порядка переключателя и лампы в дереве проекта.
Если там лампа не зажигалась при запуске проекта, это значит, что она была ниже
по дереву. В момент запуска проекта сначала создавался переключатель, который пытался зажечь
еще не существующую лампу.

Почему же "простой светофор" плох, если он верно работает?
Потому, что держать в голове детали последовательного создания машин состояний
не стоит, т.к. это усложняет логику понимания их функционирования.
Если что-либо в этом разделе показалось неясным - нестрашно:
<blockquote>
'''Надо по-возможности проектировать машины так, чтобы их стартовое состояние было максимально простым и не вызывало из себя цепочки изменений состояний других машин.'''
</blockquote>
Тогда не возникнет непредсказуемости в поведении проекта.

=== Промежуточные состояния ===

Исправить ситуацию можно, добавив в каждую лампу промежуточное состояние next,
в котором собственно происходит управление переключением следующей лампы.
Приведем пример такой машины для красной лампы. Остальные сделайте по её образу и подобию:

[[файл:lesson_4_R2.png]]

Как мы видим, в добавленное состояние '''next''' переехала команда '''set''',
которая раньше была в состоянии '''off'''.

[[файл:lesson_4_R2_prop.png|right]]
Зададим в свойствах (Properties) стартовое состояние красной лампы в '''on''', а остальным лампам поставим состояние '''off''' (этого можно не делать, если состояние off в линейках состояний стоит первым).

В выключенных состояниях ничего не происходит кроме рисования серой картинки для выключенной лампы.
Поэтому,теперь ни каких попыток изменить состояния других ламп у light_Y и light_G не будет.
Красная лампа light_R начнет работать из состояния on. Прогорев 1 сек, она перейдет
в состояние next, в котором переустановит состояние следующей лампы.
В состоянии next красная лампа и останется (рисуя серую картинку), пока её не включит
на очередном цикле зеленая лампа.

Подчеркнем еще раз, что команда '''set''' является командой инициализации состояния.
Она запускается при '''входе''' в состояние. Если бы она запускалась при выходе,
дополнительное состояние next не потребовалось бы и set можно было бы вставить в on.
Именно из-за "стартовости" выполнения set нам потребовалось ещё одно состояние.

=== Управляющая машина ===

Продолжая аналогичным образом, можно превратить простой светофор в светофор реалистичный.
Однако, мы пойдем другим путём.

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

Обычно, более удобным является создание одной управляющей машины, в которой сконцентрирована
вся логика. Продемонстрируем, как это сделать на примере светофора.
Для этого превратим подложку светофора (серый прямоугольник) в машину и создадим
в ней состояния со следующими командами:

[[файл:lesson_4_lights.png]]

Каждое состояние является этапом функционирования светофора, между которыми происходят переходы.
Красная и желая лампы - это простые машины с двумя состояниями '''on''' и '''off'''
в которых только рисуются соответствующие картинки:

[[файл:lesson_4_R3.png]]

[[файл:lesson_4_Y3.png]]

Зеленая лампа пока состоит из 3-х состояний '''on''', '''off''' и '''blink'''.
Первые два аналогичны предыдущим лампам. В состоянии мигания blink
временно поставим рисование картинки желтого цвета (draw) и команду wait,
после действия которой происходит переход в состояние off.
Дальше мы это состояние подправим.

[[файл:lesson_4_G3.png]]

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

Анализ поведения управляющей машины не должен составить труда.
Прокомментируем только состояние '''G_blink'''.
В этом состоянии зеленая лампа переводится в состояние мигания ('''blink''').
Предполагается, что когда мигание закончится, зеленая лампа должна перейти в состояние '''off'''.
В управляющей машине в команде wait мы ждем этого перехода при помощи проверки условия if.

На выходе у нас должен получится светофор, лампочки которого загораются в таком порядке :

1. Загорается красная лампочка.

2. Загорается желтая лампочка.

3. Загорается зеленая лампочка, остальные гаснут.

4. Процесс мигания зеленой лампы представлено при помощи рисования на её месте желтой лампы.

5. Все возвращается на исходную в обратном порядке.

Обратим внимание, что сама команда wait вызвана без параметра t. Если время ожидания t не указано, это означает, что
wait должен выполниться "мгновенно" и произойти переход в следующее состояние (go=Y).
Однако это случится только, если выполнится условие '''if''' (зеленая лампа отмигает).
Иначе идет переход к следующей команде wait. В ней находится единственный параметр '''loop'''
со значением -1. Это означает, что все команды wait нужно зациклить,
повторяя сверху вниз (до loop) бесконечное число раз,
пока условие не выполнится и машина совершит переход go=Y.
Подробнее использование циклов в командах мы разберем чуть ниже.

=== Мигание как цепочка состояний ===

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

[[файл:lesson_4_G4.png]]

Начиная с состояния blink происходит последовательный переход в состояния blink1, blink2, blink3.
Из последнего состояния blink3 мы прыгаем в состояние off, где процесс мигания заканчивается.

Почему такая машина не удобна? Если нам необходимо изменить период мигания,
прийдётся менять параметр t в каждой команде wait всех 4-х состояний.
А если надо мигнуть не 2, а 10 раз?
Понятно, что для решения такой задачи необходимо использовать другие механизмы.

=== Мигание как цикл ===

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

[[Файл:lesson_4_G5.png]]

Запустим вьювер, убедившись, что всё работает правильно.
Теперь разберемся с функционированием состояния '''blink'''.

Напомним, что команды set и draw -- это команды инициализации.
Сколько бы их не было в состоянии, они все сразу выполнятся сверху вниз, как только машина переходит в это состояние.
Последовательное выполнение нескольких команд draw - достаточно бессмысленное мероприятие.
Эта команда задает ресурс рисования, поэтому в последовательности команд draw реально сработает только последняя,
которая "перебьет" ресурс рисования предыдущих команд draw.

Последовательность выполнения инициализационных команд с одинаковым именем можно прервать, если добавить в некоторые из
них параметр '''break''' (прервать). В примере выше есть 2 команды draw.
Нулевая из них имеет в своих параметрах break
(напоминаем, что нумерация всех команд, как и if-ов начинается с нуля).
Поэтому, в момент запуска состояния, выполнится эта нулевая команда и следующая (первая) команда draw выполняться не будет.
В нулевом draw мы гасим лампочку (res=light_D).

Посмотрим теперь на последовательность команд wait.
Это команды процессов и, в отличии от команд инициализации, их выполнение занимает некоторое время.
Команды процессов с одним названием выполняются '''последовательно''' друг за другом.
В нашем случае начнет выполняться нулевая команда wait и только после t=500ms будет передано управление следующему wait-у.

В нулевой команде команде wait появился новый параметр draw со значением 1.
Этот параметр означает, что когда wait закончит работать она перезапустит команду draw под номером 1 (которая еще не выполнялась).
В этой команде установится картинка рисования включенной зеленой лампы (res=light_G).

Теперь настало время следующей команды wait.
Отработав, она также перезапустит команду draw, но уже под номером 0 (т.е. лампочка погаснет).
Если бы в этой команде wait не было параметра loop произошла бы передача управления последней команде wait.

Параметр loop в командах процессов означает, что цепочку команд с данным именем надо повторить loop раз (в нашем случае еще 2 раза).
Фактически, когда вьювер пробегается по командам wait, он каждый раз уменьшает loop на 1.
Если в поле loop ещё не получился ноль, он запускает по новой выполнение последовательности команд wait.

Таким образом, первые 2 команды wait выполнятся при первом прохождении по ним сверху вниз,
а затем ещё два раза. В результате и получится три мигания.

Когда цикл отработает, он передаст управление последней команде wait без параметра t.
Она сработает мгновенно, осуществляя переход из состояния blink в состояние off.

Заметим, что если в параметре loop стоит значение -1, то такой цикл будет длится бесконечное число раз. Он может быть прерван только в результате срабатывания условия при наличие параметра go
(посмотрите еще раз на состояние blink_G управляющей машины светофора).

=== Инициализация на выходе ===

Команды '''set''' (как команды инициализации) выполняются при входе в состояние.
Выше нам потребовалось еще одно состояние,
для реализации простого светофора, чтобы осуществить инициализацию на выходе.
При помощи параметров запуска команд, введение дополнительного состояния можно избежать.
Для этого надо сделать команду-пустышку set, которая никого не меняет и на ней прервать
выполнение set-команд.
Затем, при выходе из состояния вызвать нужную последовательность set-ов.
Так, машина зеленой лампы простого светофора может выглядеть следующим образом:

[[файл:lesson_4_set.png]]

=== Случайные мигания ===

В заключение урока cделаем отдельную машину '''flasher''' (мигалка), которую заставим случайно гореть одним из трех цветов. Для этого перетащим на сцену из редактора ресурсов
одну из ламп светофора и превратим её в машину состояний.
Введем следующие команды в четырех состояниях этой машины:

[[файл:lesson_4_flash1.png]]

Последние три состояния - это просто рисование того или иного цвета
в течении секунды, после чего переход в стартовое состояние switch.
В этом состоянии происходит случайный выбор следующего состояния.
Делается это при помощи трех команд wait не имеющих временной задержки.
В первых двух командах стоит параметр "'''p'''".
Это вероятность с которой осуществляется переход в состояние, определяемое параметром "'''go'''".
Если "'''p'''" отсутствует, то переход по "'''go'''" происходит в любом случае.
Иначе только с вероятностью p. С вероятностью же 1-p передается управление следующей команде
wait.

Таким образом, в нулевом wait-e состояния switch с вероятностью 0.33 машина перейдет в состояние R (красная лампа).
С вероятностью 0.67=1-0.33 перехода не будет и запустится следующий wait.
Из него с вероятностью 0.50 загорится желтая лампа (итоговая вероятность её горения будет равна 0.67*0.50=0.33). Наконец, если и этого не произойдет, то включится зеленый цвет.
Все три цвета будут зажигаться с одинаковой вероятностью.

В общем случае, если есть n случайных переходов, чтобы добиться их равновероятности,
необходимо использовать следующие вероятности:
p1=1/n, p2=1/(n-1), p3=1/(n-2),....
Ниже в таблице приведены значения вероятностей для некоторых n:
{| border="1"
! n
! p1
! p2
! p3
! p4
|-
| 2 || 0.50
|-
| 3 || 0.33 || 0.50
|-
| 4 || 0.25 || 0.33 || 0.50
|-
| 5 || 0.20 || 0.25 || 0.33 || 0.50
|}

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

== Упражнения ==

* Создать машину состояний, имитирующую поведение обычной кнопки.
* Сделать так, чтобы нажатием на кнопку (машину) светофор из любого состояния переводился в стартовое горение красной лампы.
* Сделать то-же при помощи обычной кнопки, используя добавляемое при помощи правой кнопки мыши свойство "изменить состояние объекта".
* Добавить в светофор состояние off, сделав его стартовым. В этом состоянии все лампы должны быть серыми. При помощи чекбокса (с любыми картинками, например, скопируйте голову слоненка из [[Checkbox как машина состояний|третьего урока]]) включайте и выключайте светофор (для этого правой кнопкой мыши в панели свойств добавьте свойства "''при включении изменить состояние объекта''" и "''при выключении изменить состояние объекта''").
* Сделать предыдущую задачу при помощи машины состояний вместо чекбокса. Какое решение у Вас получилось быстрее?

----
{| width="100%"
| width="40%"|[[Checkbox как машина состояний|Урок 3]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Движение машин: жучки, ключи и многое другое|Урок 5]]
|}

[[Category:Learning]]

Взаимодействие машин: «Лампочка» и «Светофор»

2021-08-04T12:15:38Z

Blymar: /* Управляющая машина */

{| width="100%"
| width="40%"|[[Checkbox как машина состояний|Урок 3]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Движение машин: жучки, ключи и многое другое|Урок 5]]
|}
----
{{TOC right}}

'''Цель:''' изучить взаимодействие машин состояний и организацию циклов.

'''Задачи:'''
* создать переключатель, включающий и выключающий лампочку;
* сделать лампу активной, знающей о состоянии переключателя;
* создать простой светофор, переключающий по кругу три лампы;
* создать уличный светофор с "правильным" поведением на основе управляющей машины;
* включать и выключать светофор при помощи кнопки.

== Лампочка и выключатель ==

=== Создание машин ===

Создайте в учебном проекте новый экран lesson_4 и сцену stg_main.
Перетащите на сцену из редактора ресурсов переключатель и лампочку:

[[Файл:lesson4_switch_lamp.png|300px|center]]

Поменяйте обоим объектам тип, сделав их [[Machine|машинами состояний]].
Переименуйте (поле свойств "'''имя'''") переключатель в '''switch''', а лампочку в '''lamp'''.

Наша задача состоит в организации взаимодействия переключателя и лампочки.
Переключатель, как ему и положено, включает и выключает свет.
Поэтому, связанная с ним машина состояний, должна воздействовать на вторую
машину, которой является лампочка.
Нарисуем сначала граф машин состояний:

[[Файл:lesson_4_state1.png|300px|center]]

Верхние красные кружочки относятся к переключателю.
Он может находиться в двух состояниях '''on''' и '''off'''.
Лампочка (синие кружочки), также имеет два состояния, которые мы
назовем '''dark''' и '''light'''.

Cоздайте эти состояния в машинах так, как это было описано в предыдущем уроке. Добавьте в каждое состояние команду draw с параметром res, в которые перетащите
картинки из редактора ресурсов.
Затем в переключателе добавьте команду '''click''' с параметром '''go'''.
Сделайте из него "чекбокс":

[[Файл:lesson_4_switch_state1_new.png]]

В лампочке создайте пока только по команде рисования draw:

[[Файл:lesson_4_lamp_state1.png]]

Протестируйте получившийся результат.
Переключатель должен переключаться, тогда как лампочка на это ни как не реагирует.

=== Подключаем провода ===

Теперь самое время подключить к лампочке и выключателю провода.
Этими проводами будет служить команда '''set'''.
Вспомним теорию. '''При входе''' в состояние происходит выполнение
команд инициализации, которые сразу выполняются, как только машина поменяла своё состояние.
К таким командам и относится команда '''set'''.
С её помощью происходит изменение состояния других машин.
Добавим в каждое из состояний переключателя по команде set с параметрами '''obj''' и '''st'''.
Для параметра obj из выпадалки выберем объект '''lamp'''.
В параметре st зададим руками требуемые состояния лампочки.
В результате должно получиться:

[[Файл:lesson_4_switch_state2.png]]

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

=== Активная лампочка ===

Давайте усложним поведение лампочки.
Пусть она, независимо от переключателя, может включаться,
если на неё кликнули в состоянии '''dark'''.
Перейдя в горящее состояние '''light''' она горит 2 секунды,
а затем сама выключается, возвращаясь в '''dark''':

[[файл:lesson_4_states2.png|300px|center]]

Не подглядывая на следующую картинку, запрограммируйте такое поведение лампочки.

У Вас, конечно, должен был получиться следующий результат:

[[файл:lesson_4_lamp2.png]]

=== Условия переходов ===

Потребуем теперь, чтобы лампочка, при клике на неё, могла включаться только,
если в этот момент включен переключатель.
Таким образом, необходимо заблокировать команду click если переключатель находится
в состоянии off. Делается это при помощи команды '''if''',
которую необходимо добавить в состояние dark лампочки:

[[файл:lesson_4_lamp3.png]]

Обратим внимание, что кроме команды if, было добавлено одноименное поле
в команде '''click''' с параметром 0. Разберемся, как работают эти команды.
В состоянии может быть несколько команд-условий if.
Все они нумеруются начиная с нуля. Т.е. первая сверху в списке команда if
имеет номер 0, следующая 1 и т.д.
Однако сами по себе условия ещё ничего не делают.
Запуск их на проверку выполнимости осуществляют другие команды.
В нашем случае это делает команда click.
В её поле if стоит ноль. Это означает, что при клике на лампочку
переход go произойдет только, если выполняется условие под номером 0.
В этом условии происходит проверка того, находится ли объект '''obj''' в состоянии '''st'''.
Если находится, то условие срабатывает и клик приводит к требуемой смене состояния.
Все просто :).

Протестируйте получившийся результат.
Сначала на выключенном переключателе кликните на лампочку.
Она не загорится. Теперь, включите переключатель.
Лампа загорится и после 2-х секунд погаснет.
Теперь, если кликнуть на лампочку, она снова загорится,
так как переключатель находится в состоянии on.
Стоит, как обычно, в процессе этих экспериментов понаблюдать за отладочной информацией.

=== Начальное состояние ===

[[файл:lesson_4_prop.png|right]]
Каждая машина в момент начала работы находится в определённом состоянии.
По умолчанию, это первое состояние в линейке состояний, в соответствующем окне редактирования.
Однако его можно изменить.
Сделаем так, чтобы в начальный момент времени переключатель
был включен, а не выключен. Для этого необходимо в его свойствах (панель Properties) в поле '''состояние''' задать имя начального состояния '''on'''.

Запустим вьювер. Обратим внимание, что лампочка сразу загорелась.
Так и должно быть, так как машина переключателя начала работать из
состояния on, а, следовательно, запустила команаду '''set''',
меняющую состояние лампочки.

Если лампочка сразу не загорелась, это означает, что в дереве проекта
она находится ниже переключателя. Поменяйте их местами, перетащив мышкой, и все заработает как описано выше.
С чем связаны такие магические действия, мы выясним ниже, при рассмотрении простого светофора.

=== Подробнее о командах ===

Подытожим информацию о командах, работающих в состояниях внутри машин.
Существует четыре типа команд:
* '''инициализаций''' (draw, set) - выполняется сразу как только машина оказалась в данном состоянии. Это "мгновенные" команды, т.к. их действие не растянуто во времени;
* '''воздействий''' (click) - выполняются, если на машину было оказано внешнее воздействие, например, в неё кликнули мышкой;
* '''процессов''' (wait) - эти команды начинают выполняться, когда произошел переход в данное состояние. В отличии от команд инициализации, их действие растянуто во времени. К этому типу команд относится также команда move, которая встречалась в машинах первого урока;
* '''условий''' (if) - описание различных логических условий, которые могут использовать другие команды данного состояния.

К настоящему моменту нам уже известны следующие команды:

* '''draw''' — управление внешним видом машины, определение её графического ресурса. Эта команда, как и set является командой инициализации, т.е. выполняется в момент попадания машины в данное состояние. Если в состоянии машины такой команды нет, то автоматически устанавливается графический ресурс, указанный в свойствах данной машины (поле '''res''');

* '''set''' – установка состояния другого объекта (команда инициализации);

* '''click''' – что делать при клике на объект (команда воздействия). В нашем случае - переход в другое состояние той же машины;

* '''wait''' – временная пауза, после которой происходит переход в другое состояние (время исчисляется в миллисекундах, где 1 сек = 1000 миллисекунд). Это команда процессов, т.е. её выполнение длится во времени;

* '''if''' – логическое условие перехода (команда перехода).

== Светофор ==

[[файл:lesson_4_lights1.png|right]]
Рассмотрим теперь обычный уличный светофор. Вспомним как он работает:
* сначала обычно (к сожалению) горит красная лампа, остальные выключены;
* затем, при горящей красной лампе, загорается ещё и желтая;
* затем желтая и красная лампы гаснут и загорается зеленая;
* в конце горения зеленой лампы она три раза мигает и выключается;
* затем включается желтая лампа, горит и гаснет
* затем включается красный, чтобы повторить весь процесс с самого начала.

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

[[файл:lessons_4_tree.png|right]]
Разместим на сцене подложку для светофора. Она останется статической картинкой.
Затем поместим поверх неё три лампы разного цвета и сделаем их подобъектами подложки.
Обложку назовем lights, а лампы '''light_R''', '''light_Y''', '''light_G'''.
Изменяя тип у ламп, превратим их в машины.

=== Простой светофор ===

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

[[файл:lesson_4_R1.png]]

[[файл:lesson_4_Y1.png]]

[[файл:lesson_4_G1.png]]

Хотя "простой светофор" будет работать вполне корректно,
приведенные выше машины не очень хороши.
Все лампы находятся в своем стартовом состоянии '''off'''.
В них есть команда инициализации '''set''', которая устанавливает состояние горения
следующей лампы. Что должно произойти в начальный момент запуска проекта?
Машины работают также как и рисуются - сверху вниз по дереву проекта.
Сначала инициализируется красная лампа. Это её первое попадание в состояние '''off''',
поэтому она пытается включить желтую лампу. Однако этого не происходит,
так как желтая лампа еще "не существует". Когда до неё доходит очередь, она создается
и пытается включить зеленую лампу которой также "ещё нет",
поэтому этого тоже не происходит. И только когда доходит дело до создания зеленой
лампы, она включает (уже существующую и находящуюся в состоянии '''off''') красную лампу.

С этого момента всё начинает работать вполне логично. При входе в состояние '''on'''
выключается предыдущая лампа, а при входе в состояние '''off''' включается следующая.

Стоит теперь вспомнить, отмеченную выше, важность порядка переключателя и лампы в дереве проекта.
Если там лампа не зажигалась при запуске проекта, это значит, что она была ниже
по дереву. В момент запуска проекта сначала создавался переключатель, который пытался зажечь
еще не существующую лампу.

Почему же "простой светофор" плох, если он верно работает?
Потому, что держать в голове детали последовательного создания машин состояний
не стоит, т.к. это усложняет логику понимания их функционирования.
Если что-либо в этом разделе показалось неясным - нестрашно:
<blockquote>
'''Надо по-возможности проектировать машины так, чтобы их стартовое состояние было максимально простым и не вызывало из себя цепочки изменений состояний других машин.'''
</blockquote>
Тогда не возникнет непредсказуемости в поведении проекта.

=== Промежуточные состояния ===

Исправить ситуацию можно, добавив в каждую лампу промежуточное состояние next,
в котором собственно происходит управление переключением следующей лампы.
Приведем пример такой машины для красной лампы. Остальные сделайте по её образу и подобию:

[[файл:lesson_4_R2.png]]

Как мы видим, в добавленное состояние '''next''' переехала команда '''set''',
которая раньше была в состоянии '''off'''.

[[файл:lesson_4_R2_prop.png|right]]
Зададим в свойствах (Properties) стартовое состояние красной лампы в '''on''', а остальным лампам поставим состояние '''off''' (этого можно не делать, если состояние off в линейках состояний стоит первым).

В выключенных состояниях ничего не происходит кроме рисования серой картинки для выключенной лампы.
Поэтому,теперь ни каких попыток изменить состояния других ламп у light_Y и light_G не будет.
Красная лампа light_R начнет работать из состояния on. Прогорев 1 сек, она перейдет
в состояние next, в котором переустановит состояние следующей лампы.
В состоянии next красная лампа и останется (рисуя серую картинку), пока её не включит
на очередном цикле зеленая лампа.

Подчеркнем еще раз, что команда '''set''' является командой инициализации состояния.
Она запускается при '''входе''' в состояние. Если бы она запускалась при выходе,
дополнительное состояние next не потребовалось бы и set можно было бы вставить в on.
Именно из-за "стартовости" выполнения set нам потребовалось ещё одно состояние.

=== Управляющая машина ===

Продолжая аналогичным образом, можно превратить простой светофор в светофор реалистичный.
Однако, мы пойдем другим путём.

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

Обычно, более удобным является создание одной управляющей машины, в которой сконцентрирована
вся логика. Продемонстрируем, как это сделать на примере светофора.
Для этого превратим подложку светофора (серый прямоугольник) в машину и создадим
в ней состояния со следующими командами:

[[файл:lesson_4_lights.png]]

Каждое состояние является этапом функционирования светофора, между которыми происходят переходы.
Красная и желая лампы - это простые машины с двумя состояниями '''on''' и '''off'''
в которых только рисуются соответствующие картинки:

[[файл:lesson_4_R3.png]]

[[файл:lesson_4_Y3.png]]

Зеленая лампа пока состоит из 3-х состояний '''on''', '''off''' и '''blink'''.
Первые два аналогичны предыдущим лампам. В состоянии мигания blink
временно поставим рисование картинки желтого цвета (draw) и команду wait,
после действия которой происходит переход в состояние off.
Дальше мы это состояние подправим.

[[файл:lesson_4_G3.png]]

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

Анализ поведения управляющей машины не должен составить труда.
Прокомментируем только состояние '''G_blink'''.
В этом состоянии зеленая лампа переводится в состояние мигания ('''blink''').
Предполагается, что когда мигание закончится, зеленая лампа должна перейти в состояние '''off'''.
В управляющей машине в команде wait мы ждем этого перехода при помощи проверки условия if.

На выходе у нас должен получится светофор, лампочки которого загораются в таком порядке :

1. Загорается красная лампочка.

2. Загорается желтая лампочка.

3. Загорается зеленая лампочка, остальные гаснут.

4. Процесс мигания зеленой лампы представлено при помощи рисования на её месте желтой лампы.

5. Все возвращается на исходную в обратном порядке.

Обратим внимание, что сама команда wait вызвана без параметра t. Если время ожидания t не указано, это означает, что
wait должен выполниться "мгновенно" и произойти переход в следующее состояние (go=Y).
Однако это случится только, если выполнится условие '''if''' (зеленая лампа отмигает).
Иначе идет переход к следующей команде wait. В ней находится единственный параметр '''loop'''
со значением -1. Это означает, что все команды wait нужно зациклить,
повторяя сверху вниз (до loop) бесконечное число раз,
пока условие не выполнится и машина совершит переход go=Y.
Подробнее использование циклов в командах мы разберем чуть ниже.

=== Мигание как цепочка состояний ===

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

[[файл:lesson_4_G4.png]]

Начиная с состояния blink происходит последовательный переход в состояния blink1, blink2, blink3.
Из последнего состояния blink3 мы прыгаем в состояние off, где процесс мигания заканчивается.

Почему такая машина не удобна? Если нам необходимо изменить период мигания,
прийдётся менять параметр t в каждой команде wait всех 4-х состояний.
А если надо мигнуть не 2, а 10 раз?
Понятно, что для решения такой задачи необходимо использовать другие механизмы.

=== Мигание как цикл ===

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

[[Файл:lesson_4_G5.png]]

Запустим вьювер, убедившись, что всё работает правильно.
Теперь разберемся с функционированием состояния '''blink'''.

Напомним, что команды set и draw -- это команды инициализации.
Сколько бы их не было в состоянии, они все сразу выполнятся сверху вниз, как только машина переходит в это состояние.
Последовательное выполнение нескольких команд draw - достаточно бессмысленное мероприятие.
Эта команда задает ресурс рисования, поэтому в последовательности команд draw реально сработает только последняя,
которая "перебьет" ресурс рисования предыдущих команд draw.

Последовательность выполнения инициализационных команд с одинаковым именем можно прервать, если добавить в некоторые из
них параметр '''break''' (прервать). В примере выше есть 2 команды draw.
Нулевая из них имеет в своих параметрах break
(напоминаем, что нумерация всех команд, как и if-ов начинается с нуля).
Поэтому, в момент запуска состояния, выполнится эта нулевая команда и следующая (первая) команда draw выполняться не будет.
В нулевом draw мы гасим лампочку (res=light_D).

Посмотрим теперь на последовательность команд wait.
Это команды процессов и, в отличии от команд инициализации, их выполнение занимает некоторое время.
Команды процессов с одним названием выполняются '''последовательно''' друг за другом.
В нашем случае начнет выполняться нулевая команда wait и только после t=500ms будет передано управление следующему wait-у.

В нулевой команде команде wait появился новый параметр draw со значением 1.
Этот параметр означает, что когда wait закончит работать она перезапустит команду draw под номером 1 (которая еще не выполнялась).
В этой команде установится картинка рисования включенной зеленой лампы (res=light_D).

Теперь настало время следующей команды wait.
Отработав, она также перезапустит команду draw, но уже под номером 0 (т.е. лампочка погаснет).
Если бы в этой команде wait не было параметра loop произошла бы передача управления последней команде wait.

Параметр loop в командах процессов означает, что цепочку команд с данным именем надо повторить loop раз (в нашем случае еще 2 раза).
Фактически, когда вьювер пробегается по командам wait, он каждый раз уменьшает loop на 1.
Если в поле loop ещё не получился ноль, он запускает по новой выполнение последовательности команд wait.

Таким образом, первые 2 команды wait выполнятся при первом прохождении по ним сверху вниз,
а затем ещё два раза. В результате и получится три мигания.

Когда цикл отработает, он передаст управление последней команде wait без параметра t.
Она сработает мгновенно, осуществляя переход из состояния blink в состояние off.

Заметим, что если в параметре loop стоит значение -1, то такой цикл будет длится бесконечное число раз. Он может быть прерван только в результате срабатывания условия при наличие параметра go
(посмотрите еще раз на состояние blink_G управляющей машины светофора).

=== Инициализация на выходе ===

Команды '''set''' (как команды инициализации) выполняются при входе в состояние.
Выше нам потребовалось еще одно состояние,
для реализации простого светофора, чтобы осуществить инициализацию на выходе.
При помощи параметров запуска команд, введение дополнительного состояния можно избежать.
Для этого надо сделать команду-пустышку set, которая никого не меняет и на ней прервать
выполнение set-команд.
Затем, при выходе из состояния вызвать нужную последовательность set-ов.
Так, машина зеленой лампы простого светофора может выглядеть следующим образом:

[[файл:lesson_4_set.png]]

=== Случайные мигания ===

В заключение урока cделаем отдельную машину '''flasher''' (мигалка), которую заставим случайно гореть одним из трех цветов. Для этого перетащим на сцену из редактора ресурсов
одну из ламп светофора и превратим её в машину состояний.
Введем следующие команды в четырех состояниях этой машины:

[[файл:lesson_4_flash1.png]]

Последние три состояния - это просто рисование того или иного цвета
в течении секунды, после чего переход в стартовое состояние switch.
В этом состоянии происходит случайный выбор следующего состояния.
Делается это при помощи трех команд wait не имеющих временной задержки.
В первых двух командах стоит параметр "'''p'''".
Это вероятность с которой осуществляется переход в состояние, определяемое параметром "'''go'''".
Если "'''p'''" отсутствует, то переход по "'''go'''" происходит в любом случае.
Иначе только с вероятностью p. С вероятностью же 1-p передается управление следующей команде
wait.

Таким образом, в нулевом wait-e состояния switch с вероятностью 0.33 машина перейдет в состояние R (красная лампа).
С вероятностью 0.67=1-0.33 перехода не будет и запустится следующий wait.
Из него с вероятностью 0.50 загорится желтая лампа (итоговая вероятность её горения будет равна 0.67*0.50=0.33). Наконец, если и этого не произойдет, то включится зеленый цвет.
Все три цвета будут зажигаться с одинаковой вероятностью.

В общем случае, если есть n случайных переходов, чтобы добиться их равновероятности,
необходимо использовать следующие вероятности:
p1=1/n, p2=1/(n-1), p3=1/(n-2),....
Ниже в таблице приведены значения вероятностей для некоторых n:
{| border="1"
! n
! p1
! p2
! p3
! p4
|-
| 2 || 0.50
|-
| 3 || 0.33 || 0.50
|-
| 4 || 0.25 || 0.33 || 0.50
|-
| 5 || 0.20 || 0.25 || 0.33 || 0.50
|}

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

== Упражнения ==

* Создать машину состояний, имитирующую поведение обычной кнопки.
* Сделать так, чтобы нажатием на кнопку (машину) светофор из любого состояния переводился в стартовое горение красной лампы.
* Сделать то-же при помощи обычной кнопки, используя добавляемое при помощи правой кнопки мыши свойство "изменить состояние объекта".
* Добавить в светофор состояние off, сделав его стартовым. В этом состоянии все лампы должны быть серыми. При помощи чекбокса (с любыми картинками, например, скопируйте голову слоненка из [[Checkbox как машина состояний|третьего урока]]) включайте и выключайте светофор (для этого правой кнопкой мыши в панели свойств добавьте свойства "''при включении изменить состояние объекта''" и "''при выключении изменить состояние объекта''").
* Сделать предыдущую задачу при помощи машины состояний вместо чекбокса. Какое решение у Вас получилось быстрее?

----
{| width="100%"
| width="40%"|[[Checkbox как машина состояний|Урок 3]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Движение машин: жучки, ключи и многое другое|Урок 5]]
|}

[[Category:Learning]]

Checkbox как машина состояний

2021-08-04T12:10:51Z

Blymar: /* Ускорение работы и отладка */

{| width="100%"
| width="40%"|[[Создание экранов, сцен. Работа с кнопками|Урок 2]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]]
|}
----
{{TOC right}}

'''Цель:''' изучить понятие машины состояний на примере объекта Checkbox

'''Задачи:'''
* Cоздать новый экран и сцену для этого урока.
* При помощи объекта Checkbox заставит слонёнка поворачивать голову.
* Воспроизвести этого же слонёнка при помощи машины состояний.
* Добавить разнообразия в поведении слонёнка.
* Создать эмоциональную рожицу.

== Checkbox ==

=== Подготовка ===

Начнём урок, как обычно, с открытия проекта lessons. В нём добавим новый экран lesson_3
со сценой stg_main, так как это было описано в предыдущем [[Создание экранов, сцен. Работа с кнопками|уроке]]. Поместим из редактора ресурсов на сцену любой фон из папки этого или предыдущего урока. Для примера далее используется "лунный пейзаж" (картинка '''bg''').

[[файл:lesson_3_chk1.png|right]]
Поверх фона перетащите из редактора ресурсов тело слонёнка (ресурс '''body''')
и затем его голову '''head_1'''. Расположите их так, чтобы получился примерно целый слонёнок.
Переименуйте эти 2 объекта в '''elephant_body''' и '''elephant_head_chk'''
(помним о необходимости осмысленности в именах объектов?). Чтобы голова и тело стали "целым" существом, стоит в дереве проекта (Layout) перетащить голову на тело, сделав её подобъектом.
Теперь, если на сцене начать таскать тело слоненка, то голова будет послушно следовать за ним.
Хотя, если схватить за голову, то её легко можно оторвать. Так, что будьте со слоненком поласковее.

'''Внимание!!!''' Подобъект наследует все модификации своего родителя. Если, к примеру, изменить '''scale x''' и '''scale y''' родительскому объекту, у дочернего точно также изменится '''scale x''' и '''scale y'''.
Более того, изменения могут накладываться друг на друга. Если дочерний объект был, как вариант, уменьшен с помощью тех же '''scale x''' и '''scale y''', а потом вы уменьшили родительский, то дочерний объект рискует уменьшиться еще сильнее. '''Будьте внимательны!'''

=== Создание чекбокса ===

[[файл:lesson_3_chk.png|right]]
Зайдем в свойство головы '''elephant_head_chk''' и изменим её тип на '''[[Checkbox|checkbox]]'''.
Раскроем треугольнички возле свойств "'''не отмечена (внешний вид)'''" и "'''отмечена (внешний вид)'''". Поля '''не отмечена (внешний вид)''' и '''отмечена (внешний вид)''' содержат по три ресурса (<tt>up, down и over</tt>).

'''Не отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, пока мы на него не нажали;
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в не нажатом состоянии;
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в не нажатом состоянии.

'''Отмечена (внешний вид):'''
<tt>up</tt> - так выглядит чекбокс, когда мы на него нажали;
<tt>down</tt> - так выглядит чекбокс, если мы на него нажмём, но не откликнем в нажатом состоянии;
<tt>over</tt> – так выглядит чекбокс, если мы на него наведём мышкой, в нажатом состоянии.
Разместим поверх окна редактор ресурсов и перетащим в поле '''up''' первой группы (не отмечена) картинку '''head_1''', а в такое же поле второй группы (отмечена) картинку '''head_2'''.
Делается это также, как и формирование внешнего вида кнопки из предыдущего [[Создание экранов, сцен. Работа с кнопками|урока]].

Сохраняем проект и запускаем вьювер. При клике на голову слонёнка она должна туда-сюда поворачиваться. Вы узнали в этом поведении чекбокс?
Обычно чекбоксы (сheckbox) это такие квадратики в которых ставят или убирают галочку.
Конечно и в игровом приложении может понадобиться подобный чекбокс.
В этом случае необходимо будет подготовить соответствующие картинки.
Простые игровые объекты (типа подобной головы) часто могут находиться в двух состояниях (выбран, не выбран). Они не похожи на чекбокс внешним видом, но являются им в силу правил своего поведения.

Теперь наша задача состоит в воспроизведении поведения чекбокса при помощи объекта
другого типа - '''[[Machine|машины состояний]]'''. Мы не только повторим вращающего головой слоненка,
но и придадим его поведению новые функции.

== Машины состояний ==

=== Немного теории ===

''Машина состояний (state machine)'' является универсальным инструментом для программирования в редакторе сцен сложного поведения объектов. Логика поведения машины состояний разбивается на отдельные узлы (состояния). Объект всегда находится строго в одном состоянии. Переход из одного состояния в другое происходит либо в результате внешнего воздействия на объект, либо в результате окончания некоторых процессов протекающих внутри объекта.

Любая машина состояний может быть изображена в виде графа с кружочками и стрелками. Настоятельно рекомендуется рисовать такие графы в процессе проектирования машины, а лишь затем переходить к их описанию в окне редактора состояний. У машины всегда активно строго одно состояние (ниже это изображено на левом рисунке темным кружком):
<center>
[[Файл:def_states.png]]
</center>
Машина состояний не обладает памятью. Это означает, что для анализа того, что произойдет в данном состоянии, неважно как мы в него попали, и какова была предыстория переходов. Важно, только, что мы находимся в этом состоянии. Такое отсутствие памяти упрощает анализ логики машины, так как каждый раз мы концентрируемся на одном конкретном состоянии, а всю логику работы разбиваем на отдельные кирпичики-состояния.

Выше на правом рисунке изображено некоторое состояние. При входе в него, происходит инициализация состояния. Если на объект оказываются внешние воздействия, то он может покинуть состояние. Наконец, внутри состояния могут работать различные процессы.

=== Проектирование машины ===

Перейдем теперь от нудной теории к веселой практике. Посмотрим внимательно на поведение головы слоненка, которая является чекбоксом. На самом деле это типичная машина состояний с двумя состояниями. Назовём их '''left''' и '''right''' по направлению ориентации головы слонёнка. Сначала слоненок находится в состоянии left (смотрит влево). Когда мы кликаем в голову, машина переходит в новое состояние right (голова поворачивается вправо). Это поведение жестко запрограммированно внутри объекта checkbox. Попробуем добиться того же эффекта, используя универсальный игровой объект "машина состояний".

Прежде всего не поленимся нарисовать весёлый граф состояний и переходов между ними:

[[файл:lesson_3_states.png|center|300px]]

Теперь, когда на бумаге всё стало ясно :), необходимо эту машину создать в редакторе.

=== Создание машины ===

Чтобы не тратить время на редактор ресурсов, скопируем уже существующего слонёнка.
Для этого станем в дереве проекта на его тело (elephant_body) и правой кнопкой мыши вызовем меню.
В нём выбираем пункт Copy. Затем повторяем операцию, но выбираем уже пункт вставить ("''Paste after curent object''"). В дереве проекта появятся два слоненка. Причем оба будут иерархичной веткой,
состоящей из "тела" (elephant_body) и подобъекта "голова" (elephant_head).
А вот на сцене редактора видимых изменений не произойдет.
Мы помним, что при копировании объектов копируются также все их свойства.
Поэтому на сцене, на самом деле, два слоненка, но они имеют одинаковые координаты.
Поэтому хватаемся за тело и тащим его правее на свободное место:

[[файл:lesson_3_2elephants.png|600px]]

Левого слона оставим чекбоксом, а голову правого превратим в [[Machine|машину состояний]].
Для этого кликаем в голову и меняем её тип с checkbox на '''machine''' (поле '''тип''' в панели Properties). Поменяем также имя головы, укоротив его до "'''elephant_head'''".

Можно попробовать посмотреть, что у нас получилось. Сохраняем проект и запускаем вьювер.
Упс... Голова исчезла, а вверху экрана появилось малопонятное ругательство,
из которого можно заключить, что у объекта elephant_head состояний то и нет.

Таким образом, не достаточно создать машину, её еще необходимо научить ездить.
Поэтому закрываем окно вьювера и начинаем заниматься программированием.

=== Программирование состояний ===

Сделаем активной голову правого слонёнка, которая стала машиной состояний.
В панели её свойств кликаем на поле '''states''', а затем на появившиеся в нём три точки (помним [[Введение в AppSalute Сreator|первый урок]]?). Также открыть машину состояний, можно двойным щелчком левой клавиши мыши. В результате этих действий, выскочит окошко в котором мы будем создавать состояния
и их программировать. Два раза нажмём кнопку '''Добавить состояние''' в левом нижнем углу окна:

[[файл:lesson_3_states1.png]]

В результате появилось две области, каждая из которых будущее состояние головы.
Зададим имена состояний, введя названия left и right в полях '''имя''' каждой области.
Затем станем мышкой на поле '''имя''' левого состояния и нажмём правую кнопку мышки.
Появится большое меню, в котором кликнем на первый пункт "''draw - внешний вид''":

[[файл:lesson_3_states2.png]]

В левом состояни под его именем добавится команда '''draw'''.
Эта команда управляет способом отрисовки машины в данном состоянии.
Нам потребуется ещё одна команда '''click''', которую добавим аналогичным
образом (правая кнопка мыши на команде draw).

В команды необходимо добавить параметры, определяющие их свойства.
Для этого кликнем справа от draw и затем ещё раз на появившиеся три точки.
В выскочившем диалоговом окне поставим галочку возле пункта "''графический ресурс''"
и нажмем кнопку Ok:

[[файл:lesson_3_states_dlg.png]]

Аналогично кликаем на команду '''click''' и добавляем ей параметр "''go - новое состояние''".
Те же действие проделываем с правым состоянием. В результате должно получиться:

[[файл:lesson_3_states3.png]]

Осталось заполнить поля команд. В поле go команды click левого состояния пишем '''right''',
а в тоже поле правого состояния пишем '''left'''. Это означает, что при клике машина должна перейти в то состояние, которое указано в поле go. Имена состояний вводятся с клавиатуры руками,
поэтому необходимо следить за правильностью их написания.

Теперь откроем окно редактора ресурсов. Сделав активным значение поля '''res''' команды draw левого состояния, перетащим в него из ресурсов картинку '''head_1'''. В аналогичное поле правого состояния перетащим картинку '''head_2'''. Делается это точно так, как мы задавали поля внешнего вида кнопки или чекбокса в панели Properties. Финальный результат наших действий
приводит к следующей машине (мы не будем больше приводить всё окно редактирования состояний):

[[файл:lesson_3_states4.png]]

Насладимся результатами нашей работы. Закроем окно с состояниями (крестик в правом верхнем углу).
Сохраним проект и запустим вьювер (для ускорения можно не закрывать окно состояний, а кликнуть на иконки сохранения и запуска вьювера внизу этого окна).
В результате, во вьювере оба слоненка должны вести себя абсолютно одинаково.

=== Ускорение работы и отладка ===

При программировании состояний машины можно использовать некоторые приёмы
ускоряющие процесс. Так, в примере с головой, команды обоих состояний выглядят одинаково.
Поэтому имеет смысл сначала создать одно состояние (left),
наполнить его командами и параметрами. Затем нажать кнопку "Скопировать состояние".
Состояние продублируется и останется только подправить его параметры.

Машины состояний, как и другие объекты, можно копировать вместе со всеми их состояниями. Поэтому, если уже есть машина, похожая на ту, которую надо создать, мы её просто копируем и подправляем команды и их параметры.

Если машина создается из картинки, изменением типа, то не стоит глазами искать слово '''machine''' в списке типов. Необходимо на клавиатуре нажать клавишу '''M''' и затем '''Enter'''.
Вообще, активнее пользуйтесь горячими клавишами. Например, если в дереве проекта (Layout)
активна машина, то нажатие '''Ctrl+M''' приведет к открытию окна редактирования состояний.

При запуске проекта во вьювере можно следить за отладочной информацией о состояниях объектов.
Это помогает понять почему что-то работает не так как надо.

:'''Важно''' !!! Чтобы отладочная информация отображалась нужно для каждого наблюдаемого объекта (машины), поставить в поле отладка значение '''вкл''' и включить "Debug enabled". Для этого нужно зайти в пункте меню Project -> Project Options -> Debug Options и напротив Debug enabled поставить галочку.

Запустим вьювер и нажмём кнопку "'''F1'''". Появится небольшое меню с командами, которое гасится повторным нажатием F1. Кнопка "'''S'''" (на клавиатуре) выводит список всех активных объектов на сцене. Если текст информации совпадает с текстом фона, то эта информация будет плохо видна. В этом случае необходимо несколько раз нажать клавишу "'''C'''", меняя по кругу цвет текста.

Первые две колонки отладочной информации, это имя сцены и объекта. В колонке state видно текущее состояние. Понажимайте на голову слоненка, наблюдая как его состояние меняется с left на right и наоборот.

Запустите теперь во вьювере экран первого урока и нажмите "'''S'''" потом на клавишу "'''С'''".
Покликайте на слоненка, его голову и солнышко, наблюдая как изменяется информация об этих машинах.
Так как внутри состояний могут происходить некоторые процессы, их
можно затормозить, нажав '''пробел''' (в этот момент солнышко остановится). Повторное нажатие пробела, снова запустит все процессы.

=== Немного нравоучений ===

Освоив машины состояний, дизайнеры обычно применяют их там где надо и там где не надо.
Например, в этом уроке быстрее оформить голову слонёнка как чекбокс,
а не как машину состояний. Поэтому прежде чем хвататься за шестеренку, стоит сначала подумать
о том, каким игровым объектом можно реализовать данное поведение.

При работе над проектами, некоторые машины иногда повторяются. Их конечно можно копировать, подправляя соответствующие поля команд. Однако, на определенном этапе, возможно, стоит начать дергать руководство и С++ программистов, чтобы они оформили эту "типовую" машину в виде отдельного игрового объекта. Как это, например, сделано с чекбоксом или кнопкой.

Если Вы пытаетесь сделать что-то при помощи машины состояний, но получается очень громоздкий объект (куча состояний, переходов, команд), значит Вы делаете что-то не так.
Либо машина плохо спроектирована, либо вообще эту задачу не стоит решать при помощи машин.
Возможно это уже миниигра и необходимо подключать C++ программистов для её реализации.

Стоит также помнить, что работа над проектом это коллективный процесс.
Спустя некоторое время Вашу работу может подправлять другой человек.
Да и Вы к этому моменту станете другим человеком и все забудете.
Поэтому относитесь максимально ответственно к процессу документирования.
Это означает выбор осмысленных имен объектов и заполнение поля "'''описание'''",
находящееся у большинства сложных объектов в Properties.
Для машин это поле находится в окне редактирования состояний, сразу под состояниями.
Например, в нашем случае текст документации может выглядеть примерно так: "''При клике на голову она поворачивается влево или в право''".
<blockquote>
'''Правильно работающий незадокументированный проект - это плохой проект.'''
</blockquote>

== Усложняем машину ==

=== Непослушный слоненок ===

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

Для реализации этого поведения добавим в состояние '''right''' команду '''wait''' c параметром '''t''', равным 1000 миллисекундам (что равно одной секунде) и параметром '''go'''=left
В результате должна получиться такая машина:

[[файл:lesson_3_states5.png]]

До сих пор, переход из одного состояния в другое происходил в результате клика на машину.
Это было внешнее воздействие.
Однако, переход между состояниями может происходить в результате некоторых процессов внутри состояния.
В нашем случае, при заходе в правое состояние начинает работать команда '''wait'''. Она
ждет в течении времени, определяемом полем '''t'''. Затем, если задано поле '''go''', машина сама инициирует переход в соответствующее состояние.

Сохраните и запустите во вьювере этот проект. Кликая на головы обоих слонят,
сравните их поведение.

=== Сумашедший слоненок ===

В заключение, поиздеваемся немного над слоненком, сделав его голове
такую машину состояний:

[[файл:lesson_3_states6.png]]

В результате слонёнок начнет нерегулярно крутит головой то влево, то вправо.
В каждом состоянии он будет находиться случайное время от 1-й до 3-х секунд.
Это определяется параметрами '''t''' и '''dt''', которые задают
интервал времени от t-dt до t+dt.

Заметим, что, не смотря на самовольное вращение головой,
слоненок по-прежнему реагирует на клики мышки.

== Машина эмоций ==

Выше мы рассмотрели несколько машин состояний, не сильно отличающихся
от бездушного чекбокса.
Приведем теперь пример машины, которую и машиной неловко назвать.
Это существо, обладающее целым спектром эмоций и реакций на внешнее воздействие:

[[файл:smiles.png]]

Разберемся, что нарисовано на картинке. Каждая рожица - это отдельное состояние,
отражающее настроение нашего существа. Стрелки - переходы между состояниями
по командам '''click''' и '''wait'''.

Начинает работать существо из состояния [[файл:s1.png|24px]].
Как и любые существа, Оно любит внимание.
Поэтому, при клике переходит в более жизнерадостное состояние [[файл:s2.png|24px]].
Если больше на него не кликать, Оно опять вернется в начальное состояние,
а спустя еще какое то время начнет плакать [[файл:s5.png|24px]], из-за полного отсутствия
внимания. Впрочем, небольшой клик - и Оно снова довольно жизнью.

Обратим внимание на последовательность состояний [[файл:s3.png|24px]], переходящих в
недовольную гримасу [[файл:s4.png|24px]]. Излишнее внимание также вредно, как
и его отсутствие.

В качестве упражнения, попробуйте создать такую машину состояний,
самостоятельно найдя в интернете или нарисовав соответствующие картинки.
Вы можете также вытащить картинки рожиц из этого урока, кликнув на них для увеличения, а затем нажав правую кнопку мышки, сохранить их на диске.
Как загрузить картинки в редактор ресурсов было описано в конце предыдущего [[Введение в AppSalute Сreator|урока]].
Естественно, Вы можете изменить эмоциональное поведение, сделав его более реалистичным :).

В заключение, несколько общих замечаний:
* Если машина имеет более двух состояний, её необходимо сначала проектировать на бумаге. Именно на диаграмме состояний отчетливо проявляется логика поведения машины.
* Обычно не должно быть тупиковых состояний, из которых ни куда попасть нельзя. В эмоциональной машине с рожицами таких состояний нет.
* Всегда необходимо выделять начальное состояние в котором машина начинает своё существование.
* Памятью машины состояний не обладают, однако имитация памяти может быть реализована при помощи цепочки состояний, как было сделано выше с состояниями счастливой рожицы.

== Упражнения ==

* Уменьшите в 2 раза размер слонят (параметр scale в модификаторах свойств). Для этого достаточно поменять масштаб у тела, т.е. его scale распространится и на подобъект.
* Копированием создайте третьего слонёнка.
* Запрограммируйте его голову как машину, состоящую из 3-х состояний. В качестве картинки третьего состояния возьмите солнышко из первого урока. Пусть состояния при клике прокручиваются по кругу (left, right, sun,left,...)
* Добавьте четвертого слонёнка с тремя состояниями и сделайте с ним что хотите.
* Создайте эмоциональную рожицу
* Посмотрите снова на описание машин состояний из первого урока. Стало ли понятнее их поведение?

----
{| width="100%"
| width="40%"|[[Создание экранов, сцен. Работа с кнопками|Урок 2]] <<
! width="20%"|[[Learning|Оглавление]]
| width="40%" align="right"| >> [[Взаимодействие машин: «Лампочка» и «Светофор»|Урок 4]]
|}

[[Category:Learning]]