Взаимодействие машин: «Лампочка» и «Светофор» — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Лампочка и выключатель)
(Лампочка и выключатель)
Строка 47: Строка 47:
 
Сделайте из него чекбокс:
 
Сделайте из него чекбокс:
  
[[Файл:lesson_4_switch_state1a.png]]
+
[[Файл:lesson_4_switch_state1_new.png]]
  
 
В лампочке пока у нас только по команде рисования draw:
 
В лампочке пока у нас только по команде рисования draw:

Версия 15:02, 11 января 2013

Урок 3 << Оглавление >> Урок 5

Steps: Убрать детали создания состояний и команд, сосредоточившись на логике состояний.

Цель: изучить взаимодействие машин состояний.

Задачи:

  • создать экран тумблером, включающим лампочку
  • создать уличный светофор
  • включать и выключать светофор при помощи кнопки.


Лампочка и выключатель

Создайте в учебном проекте новый экран lesson_4 и сцену stg_mian. Перетащите на сцену из редактора ресурсов выключатель и лампочку:

Lesson4 switch lamp.png


Поменяйте обоим объектам тип, сделав их машинами состояний. Переименуйте (поле свойств "имя") выключатель в switch, а лампочку в lamp.

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

Lesson 4 state1.png


Верхние красные кружочки относятся к выключателю. Он может находиться в двух состояниях on и off. Лампочка (синие кружочки), также имеет два состояния, которые мы назовем dark и light.

Так как это было описано в предыдущем уроке, создайте эти состояния в машинах. Добавьте в каждое команду 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

Старое

4. Кликнув правой кнопкой мыши по экрану, создать сцену 04, в которую (через ResourcesEditor) добавить графические ресурсы из папки Sources\Lesson_04 (см. подготовка к работе «Создание проекта»).

04 2.png 04 3.png

§2. Создание машин состояний

1. Графические ресурсы перевести в машины. Для этого нужно, прокликивая по всем объектам, в свойстве элемента изменить тип изображения на тип maсhine.

04 4.png 04 5.png


Ниже описаны логика и состояния всех машин, используемые в SceneEditor для выполнения урока 4.

04 6.png

2. В машине lamp_off прописать два состояния light и dark, которые будут соответствовать состояниям горящей и погасшей лампочки. Для этого левой кнопкой мыши кликнуть по машине lamp_off и в свойствах элемента войти в состояния states.

04 7.png 04 8.png

3. Изначально лампочка задается горящей, но через 2000 мсек. гаснет. Прописать это состояние так: в списке состояний добавить состояние и присвоить имя dark.

4. Левой кнопкой мыши кликнуть по имени и выбрать из появившегося списка команду draw (внешний вид).

04 9.png

5. Кликнуть левой кнопкой мыши по команде draw и выбрать из списка графический ресурс, в который через ResourcesEditor добавить картинку lamp_off.

04 10.png

6. Кликнуть правой кнопкой мыши по команде draw и выбрать команду click (переход при нажатии мыши).

7. Щелкнув левой кнопкой мыши по команде, выбрать из списка go – переход на новое состояние (в нашем случае, light) и if – условие перехода.

04 11.png

8. Кликая правой кнопкой мыши по команде click, создать команду if (условие).

9. Щелкнув левой кнопкой мыши по команде, выбрать из списка obj – объект и st — состояние этого объекта.

04 12.png

10. Добавить новое состояние с именем light.

11. Прописать уже известную команду draw, но с графическим ресурсом lamp_on.

12. Кликая правой кнопкой мыши по команде draw, создать команду wait (временная пауза).

13. Щелчком левой кнопки мыши по команде wait выбрать из списка t – длительность и go – переход на новое состояние (в нашем случае, dark).

04 13.png

Изначально тумблер находится во включенном состоянии on и если кликнуть на него, то он перейдет в выключенное состояние off (даже если в этот момент лампочка горела, она погаснет – за счет условия перехода if) и не даст лампочке гореть.

Аналогично создаются новые состояния (и команды в этих состояниях) для всех объектов (машин). Конечный результат см. ниже.

04 14.png

Подробнее о командах состояний:

draw — управление внешним видом машины, определение её графического ресурса (команда инициализации); Если в состоянии машины таковой команды нет, то автоматически устанавливается графический ресурс, указанный в свойствах элемента данной машины;

set – установка состояния другого объекта (команда инициализации);

click – что делать при клике на объект (команда воздействия); В нашем случае переход в другое состояние той же машины;

if – логическое условие перехода (команда перехода);

wait – длительность выполнения команды в одном состоянии и переход в другое состояние (исчисляется в миллисекундах).

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

§3. Задание к уроку

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

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

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

4. Вставить скопированые объекты в новую сцену 04.1.

04 15.png

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

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

b) длительность горения лампочки составляла 500 миллисекунд.

Светофор

Цель: изучить настройки объектов (машин), находящихся в одной сцене, и понять их взаимосвязь.

Задача: создать сцену, где при перемещении ключа с область саквояжа, саквояж должен исчезнуть по альфе, жук начнать двигаться вверх, а сам ключ уменьшиться в размерах и также исчезнуть. Установить цикличность выполнения задания.

План выполнения:

  • Добавить графические ресурсы в сцену проекта из базы ResourcesEditor;
  • Настроить сцены в экранах проекта.

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

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

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

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

05 1.png

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

05 2.png 05 3.png

§2. Создание машин состояний

1. Графические ресурсы перевести в машины. Для этого нужно, прокликивая по всем объектам, в свойстве элемента изменить тип изображения на тип maсhine.

2. Для всех объектов (машин) в сцене прописать такие состояния:

для саквояжа

05 4.png

для жука

05 5.png

для ключа

05 6.png

Подробнее о командах состояний:

init – инициализация состояния (координаты, прозрачность и т.п.);

alpha – изменение прозрачности объекта (команда процессов). Меняется от 0 (полностью прозрачен) до 1 (непрозрачен);

move – движение объекта по сцене (команда процессов);

drag – команда, позволяющая перетаскивать объект в диапазоне x1, x2, y1, y2 (команда процессов);

drop – команда, указывающая на запуск состояния другого объекта, если отпустить объект в диапазоне x1, x2, y1, y2 (команда процессов);

scale – вращение объекта вокруг точки пивота с координатами px, py (команда процессов). Эти координаты задаются в общих свойствах элемента (объекта) или командой init в данном состоянии.

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

§3. Задание к уроку

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

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

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

4. Вставить скопированые объекты в новую сцену 05.1.

05 7.png

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

a) изначально за время 1 секунда саквояж уменьшился от первоначальных размеров до 0, а затем увеличился до 1 (первоначальных размеров);

b) при перетаскивании ключа в область саквояжа, жук развернулся на 180 градусов и двигался вниз.


Урок 3 << Оглавление >> Урок 5