Просмотр исходного текста страницы Checkbox как машина состояний

{| width="100%"  
 | width="40%"|[[Создание экранов, сцен. Работа с кнопками|Урок 2]] << 
 ! width="20%"|[[Learning|Оглавление]] 
 | width="40%" align="right"| >> [[Создание простой машины состояний «Лампочка»|Урок 4]]
|}
----

'''Цель:''' изучить понятие машины состояний на примере объекта Checkbox

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


== Checkbox ==

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

[[файл:lesson_3_chk1.png|right]]
Поверх фона перетащите из редактора ресурсов тело слонёнка (ресурс '''body''')
и затем его голову '''head1'''. Расположите их так, чтобы получился примерно целый слонёнок.
Переименуйте эти 2 объекта в '''elephant_body''' и '''elephant_head_chk'''
(помним о необходимости осмысленных имен в объектах?). Чтобы голова и тело стали "целым" существом, стоит в дереве проекта (Layout) перетащить голову на тело, сделав её подобъектом.
Теперь, если на сцене начать таскать тело слоненка, то голова будет послушно следовать за ним.
Хотя, если схватить за голову, то её легко можно оторвать. Так, что будьте со слоненком поаккуратнее. 

[[файл:lesson_3_chk.png|right]]
Зайдем в свойство головы '''elephant_head_chk''' и изменим её тип на '''checkbox'''.
Раскроем треугольнички возле свойств "'''не отмечена (внешний вид)'''" и "'''не отмечена (внешний вид)'''". Разместим поверх окна редактор ресурсов и перетащим в поле '''up''' первой группы (не отмечена) картинку '''head_1''', а в такое же поле второй группы (отмечена) картинку '''head_2'''.

Сохраняем проект и запускаем вьювер. При клике на голову слонёнка она должна туда-сюда поворачиваться.

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

== Машины состояний ==

=== Немного теории ===

''Машина состояний (state machine)'' является универсальным инструментом для программирования в редакторе сцен сложного поведения объектов.  Логика поведения машины состояний разбивается на отдельные узлы (состояния). Объект всегда находится строго в одном состоянии. Переход из одного состояния в другое происходит либо в результате внешнего воздействия на объект, либо в результате окончания некоторых процессов протекающих внутри объекта. 

Любая машина состояний может быть изображена в виде графа с кружочками и стрелками. Настоятельно рекомендуется рисовать такие графы в процессе проектирования машины, а лишь затем переходить к их описанию в окне редактора состояний. У машины всегда активно строго одно состояние (ниже это изображено на левом рисунке темным кружком):
<center>
[[Файл:def_states.png]]
</center>
Машина состояний не обладает памятью. Это означает, что для анализа того, что произойдет в данном состоянии, неважно как мы в него попали, и какова была предыстория переходов. Важно, только, что мы находимся в этом состоянии. Такое отсутствие памяти упрощает анализ логики машины, так как каждый раз мы концентрируемся на одном конкретном состоянии, а всю логику работы разбиваем на отдельные кирпичики-состояния.

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

=== Проектирование машины ===

Перейдем теперь от нудной теории к веселой практике. Посмотрим внимательно на поведение головы слоненка, которая является чекбоксом. На самом деле это типичная машина состояний с двумя состояниями. Назовём их '''left''' и '''right''' по направлению ориентации головы слонёнка. Сначала слоненок находится в состоянии  left (смотрит влево). Когда мы кликаем в голову, машина переходит в новое состояние right (голова поворачивается вправо). Это поведение жестко запрограммированно внутри объекта checkbox. Попробуем добиться того же эффекта, используя универсальный игровой объект "машина состояний". 

Прежде всего не поленимся нарисовать весёлый граф состояний и переходов между ними:

[[файл:lesson_3_states.png|center]]

Теперь, когда на бумаге всё стало ясно :), необходимо эту машину создать в редакторе.

=== Создание машины ===

Чтобы не тратить время на редактор ресурсов, скопируем уже существующего слонёнка. 
Для этого станем в дереве проекта на его тело (elephant_body) и правой кнопкой мыши вызовем меню.
В нём выбираем пункт Copy. Затем повторяем операцию, но выбираем уже пункт вставить ("''Paste after curent object''"). В дереве проекта появятся два слоненка. Причем оба будут иерархичной веткой,
состоящей из "тела" (elephant_body) и подобъекта "голова" (elephant_head).
А вот на сцене редактора видимых изменений не произойдет.
Мы помним, что при копировании объектов копируются также все их свойства.
Поэтому на сцене на самом деле два слоненка, но они имеют одинаковые координаты.
Поэтому хватаемся за тело и тащим его левее на свободное место:

[[файл:lesson_3_2elephants.png|600px]]


Левого слона оставим чекбоксом, а голову правого превратим в машину состояний.
Для этого кликаем в голову и меняем её тип с checkbox на '''machine''' (поле '''тип''' в панели Properties). Поменяем также имя головы, укоротив его до "'''elephant_head'''".

Можно попробовать посмотреть, что у нас получилось. Сохраняем проект и запускаем вьювер.
Упс... Голова исчезла, а вверху экрана появилось малопонятное ругательство,
из которого можно заключить, что у объекта elephant_head состояний то и нет.

Таким образом, не достаточно создать машину, её еще необходимо научить ездить.
Поэтому закрываем окно вьювера и начинаем заниматься программированием.

=== Программирование состояний ===

Сделаем активной голову правого слонёнка, которая стала машиной состояний.
В панели её свойств кликаем на поле '''states''', а затем на появившиеся в нём три точки (помним первый урок?). В результате этих действий, выскочит окошко в котором мы будем создавать состояния 
и их программировать. Два раза нажмём кнопку '''Добавить состояние''' в правом нижнем углу окна:

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


В результате появилось две области, каждая из которых будущее состояние головы.
Зададим имена состояний, введя их имена left и right в полях '''имя''' каждой области.
Затем станем мышкой на поле '''имя''' левого состояния и нажмём правую кнопку мышки.
Появится большое меню, в котором кликнем на первый пункт "''draw - внешний вид''":

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


В левом состояни под его именем добавится команда '''draw'''.
Эта команда управляет способом отрисовки машины в данном состоянии.
Нам потребуется ещё одна команда '''click''', которую добавим аналогичным
образом (правая кнопка мыши на команде draw).

В команды необходимо добавить параметры, определяющие их свойства.
Для этого кликнем слева от draw и затем ещё раз на появившиеся три точки.
В появившемся диалоговом окне поставим галочку возле пункта "''графический ресурс''"
и нажмем кнопку Ok.
Аналогично кликаем на команду '''click''' и помечаем "''go - новое состояние''".
Те же действие проделываем с правым состоянием. В результате должно получиться:

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


Осталось заполнить поля команд. В поле go команды click левого состояния пишем '''right''',
а в тоже поле правого состояния пишем '''left'''. Это означает, что при клике машина должна перейти  в то состояние, которое указано в поле go. Имена состояний вводятся с клавиатуры руками,
поэтому необходимо следить за правильностью их написания.

Теперь откроем окно редактора ресурсов. Сделав активным значение поля '''res''' команды draw левого состояния, перетащим в него из ресурсов картинку '''head_1'''. В аналогичное поле правого состояния перетащим картинку '''head_2'''. Делается это точно так, как мы задавали поля внешнего вида кнопки или чекбокса в панели Properties. финальный результат наших действий
приводит к следующей машине:

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


Насладимся результатами нашей работы. Закроем окно с состояниями (крестик в левом верхнем углу).
Сохраним проект и запустим вьювер. Оба слоненка должны вести себя абсолютно одинаково.


=== Ускорение работы ===

При программировании состояний машины можно использовать некоторые приёмы
ускоряющие процесс. Например, в примере с головой, команды обоих состояний выглядят одинаково.
Поэтому имеет смысл сначала создать одно состояние (left) и
наполнить его командами и параметрами. Затем нажать кнопку "Скопировать состояние".
Оно продублируется и останется только подправить его параметры.

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

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

=== Непослушный слоненок ===

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

Для реализации этого поведения добавим в состояние '''right''' команду '''wait''' c параметром '''t''', равным 1000 миллисекундам (что равно одной секунде) и параметром '''go'''=left
В результате должна получиться такая машина:

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


----
{| width="100%"  
 | width="40%"|[[Создание экранов, сцен. Работа с кнопками|Урок 2]] << 
 ! width="20%"|[[Learning|Оглавление]] 
 | width="40%" align="right"| >> [[Создание простой машины состояний «Лампочка»|Урок 4]]
|}