Создание экранов, сцен. Работа с кнопками — различия между версиями

Материал из wiki.appsalutecreator.com
Перейти к: навигация, поиск
(Создание кнопок)
(Создание кнопок)
Строка 50: Строка 50:
 
Для этого кликаем справа от этого поля, чтобы оно стало редактируемым.
 
Для этого кликаем справа от этого поля, чтобы оно стало редактируемым.
 
Затем снова открываем редактор ресурсов и хватем картинку arrow_rt_down из папки lesson_2.
 
Затем снова открываем редактор ресурсов и хватем картинку arrow_rt_down из папки lesson_2.
Однако тащим её не на область редактирования сцены, а непосредственно в поле '''down''' свойства группы "внешний вид" кнопки next_scr:
+
Однако тащим её не на область редактирования сцены, а непосредственно в поле '''down''' свойства группы "внешний вид" кнопки next_scr. После того как мышка отпущена, кликаем в произвольное место вне поля редактирования, заканчивая тем самым процесс.
  
 
[[Файл:lesson_2_btn_dn.png|600px]]
 
[[Файл:lesson_2_btn_dn.png|600px]]
 +
 +
 +
Сделаем одно замечание. Поле редактирования должно быть активно в момент перетаскивания в него картинки. Поэтому, если редактор ресурсов еще не запущен, его необходимо сначала запустить, сделать поверх стальных окон (Always on Top), а только затем кликать в значение поля down и тащить в него картинку.
  
 
== Создание кнопок ==
 
== Создание кнопок ==

Версия 10:27, 10 января 2013

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

Цель: научиться создавать экраны, сцены и кнопки.

Задачи:

  • Создать три экрана с одной сценой на каждом из них
  • На экраны поместить кнопки, перехода между экранами


Создание экранов и сцен

Запускаем SceneEditor и загружаем проект lessons (см. предыдущий урок). Кликаем на первый экран проекта (lesson_1) в панели Layout мышью и нажимаем её правую кнопку. В выпадающем меню выбираем "Создать экран после текущего элемента":

Lesson2 screen.png

В выскочившем диалоговом окошке вводим имя экрана: lesson_2_Main (помним об осмысленности имен объектов?) и нажимаем Ok. В результате этот экран появится в дереве проектов (Layout).

Lesson2 layout1.png

Повторяя эти действия, создадим еще 2 экрана с именами lesson_2_Sky и lesson_2_Moon. При этом, каждый раз правую кнопку мыши необходимо нажимать на предыдущем экране. Если же произошла ошибка, экраны всегда можно перетащить по дереву проекта или удалить, как это было описано в предыдущем уроке.

Теперь в каждом экране необходимо создать по одной сцене. Назовем их одинаково: stg_main. Приставка stg обозначает stage (сцена). Впрочем, она необязательна так как тип объекта в дереве помечается соответствующей иконкой. То, что сцены имеют одинаковые имена не существенно, так как в дереве они находятся внутри разных экранов, имена которых говорят о назначении всего, что в них находится.

Lesson2 layout2.png

Создание сцены происходит аналогично созданию экрана. Кликнем мышкой на экран lesson_2_Main и нажмем её правую кнопку. В выпавшем меню выбираем "Создать сцену в текущем элементе" и в появившемся окошке вводим имя stg_main, соглашаясь с размерами сцены (в пикселях), предложенных по умолчанию. Повторям эту операцию, нажимая последовательно на экраны lesson_2_Sky и lesson_2_Moon. В результате получится панель проекта, приведенная на картинке справа.

Таким образом, проект этого урока будет состоять из трех экранов Main, Sky и Moon. Заметим, что над ними остался экран первого урока. Он нам не будет мешать. Постепенно в этом проекте добавятся экраны других уроков. Напомним, что при запуске вьювера мы указываем какой экран начать проигрывать. Если с этого экрана переходов на другие экраны нет, то вьювер не относящиеся к делу экраны не заметит.

Чтобы завершить процесс подготовки сцен, поместим на каждую из них соответствующий фон. Для этого открываем редактор ресурсов 012.JPG, в котором кликаем на папку lesson_2. Последние три картинки bg_1, bg_2, bg_3 по очереди перетаскиваем на сцены в соответствующих экранах. Соответствие между фоном и экраном предлагается определить в качестве упражнения :).

Создание кнопок

Создадим теперь кнопку. Для этого сделаем активным сцену stg_main в экране lesson_2_Main. Затем откроем редактор редактор ресурсов и перетащим на сцену картинку arrow_rt_normal из папки lesson2. Эта картинка появится на сцене и в дереве проекта под картинкой фона bg_3. При помощи мышки, разместим её на сцене в правом нижнем углу фона.

Чтобы превратить картинку в кнопку, необходимо в её свойствах (Properties) поменять тип с image на button. Для этого кликаем справа от поля тип и в появившейся выпадалке выбираем button. Стоит обратить внимание на разнообразие игровых объектов. Часть из них будет описана в этих уроках, описание остальных можно найти в документации.

Следуя правилам хорошего тона переименуем объект, заменим его имя arrow_rt_normal на next_scr (следующий экран). Для этого редактируем поле имя (нажав после окончания Enter).

Откроем в свойствах группу внешний вид. Первые два поля up и down соответствуют картинкам изображающим отжатую и нажатую кнопку. Поле up уже заполнено картинкой arrow_rt_normal которую мы превращали в кнопку. Теперь необходимо задать картинку для кнопки в состоянии нажатия. Для этого кликаем справа от этого поля, чтобы оно стало редактируемым. Затем снова открываем редактор ресурсов и хватем картинку arrow_rt_down из папки lesson_2. Однако тащим её не на область редактирования сцены, а непосредственно в поле down свойства группы "внешний вид" кнопки next_scr. После того как мышка отпущена, кликаем в произвольное место вне поля редактирования, заканчивая тем самым процесс.

Lesson 2 btn dn.png


Сделаем одно замечание. Поле редактирования должно быть активно в момент перетаскивания в него картинки. Поэтому, если редактор ресурсов еще не запущен, его необходимо сначала запустить, сделать поверх стальных окон (Always on Top), а только затем кликать в значение поля down и тащить в него картинку.

Создание кнопок

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

01 6.png 01 7.png

2. В сцене 01 в общих настройках свойства элемента кнопке arrow_rt_norm в параметре внешний вид (down, over) через ResourcesEditor добавляем графический ресурс arrow_rt_down.

01 8.png

3. В общих настройках свойства элемента кнопке arrow_rt_norm в параметре перейти на указываем перейти на экран Lesson_01.1.

01 9.png

4. В сцене 01.1. в общих настройках свойства элемента кнопке arrow_lf_norm в параметре внешний вид (down, over) через ResourcesEditor добавляем графический ресурс arrow_lf_down.

01 10.png

5. В общих настройках свойства элемента кнопке arrow_lf_norm в параметре перейти на указываем перейти на экран Lesson_01.

01 11.png

button – тип объекта, который имеет стандартное кнопочное поведение, подгружающий из редактора ресурсов от одного до трех графических ресурсов (up, down, over) для изменения своего состояния. Кнопка может быть дверью: задаётся имя экрана и способ перехода на него (модальный или полный переход); Кнопка может содержать вместо имени экрана web адрес http://..., тогда при клике на кнопку запускается браузер по умолчанию.

Параметры:

up – графический ресурс для отображения отжатой кнопки. Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования); down – графический ресурс для отображения нажатой кнопки. Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования). Может отсутствовать; over – графический ресурс для отображения кнопки c мышкой над ней. Перетаскивается мышкой из редактора ресурсов (поле должно находится в состоянии редактирования). Может отсутствовать.

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

Упражнения

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

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

3. Через редактор ресурсов ResourcesEditor загрузить в сцену 01.2 графический ресурс bg_3 и arrow_lf_norm.

4. В сцене 01.1 удалить кнопку arrow_lf_norm и через редактор ресурсов ResourcesEditor добавить графический ресурс arrow_rt_norm, изменить его на тип кнопка.

5. В сцене 01.1 внешний вид кнопки установить такой же, как у кнопки в сцене 01.

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

a) при нажатии на кнопку первый экран переходил на второй;

b) при нажатии на кнопку второй экран переходил на третий;

с) при нажатии на кнопку третий экран переходил на первый.


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