Создание экранов, сцен. Работа с кнопками

Материал из wiki.appsalutecreator.com
Версия от 12:26, 10 января 2013; Steps (обсуждение | вклад) (Создание кнопок)
Перейти к: навигация, поиск
Урок 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, которую мы превращали в кнопку. Зададим картинку для кнопки в состоянии нажатия. Для этого кликаем справа от поля down, чтобы оно стало редактируемым. Затем снова открываем редактор ресурсов и хватем картинку arrow_rt_down из папки lesson_2. Однако тащим её не на область редактирования сцены, а непосредственно в поле down свойства группы "внешний вид" кнопки next_scr. После того как мышка отпущена, кликаем в произвольное место вне поля редактирования, заканчивая тем самым процесс:

Lesson 2 btn dn.png


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

Чтобы кнопка выполнила полезную функцию, отредактируем у неё ещё одно поле перейти на. При клике справа от него выпадет список из доступных в проекте экранов. Выберем экран lesson_2_Sky.

Теперь можно протестировать, что у нас получилось. Проверяем, что в дереве проекта активным является экран lesson_2_Main. Сохраняем изменения в проекте 00 8.png. И запускаем вьювер 00 9.png. Нажимая на кнопку, убеждаемся, что происходит заданный переход из одного экрана на другой. Обращаем внимание, также на изменение вида кнопки в момент клика на неё мышки.

Как видно из списка свойств, кроме картинок up и down у кнопки есть еще поля для картинок over и disable. Первое соответствует внешнему виду в момент когда мышь находится над кнопкой (но не нажата). Если игра пректируется для мобильных устройств (телефоны, планшетники), то обычно это поле не используется. Внешний вид disable (недоступна) соответствует виду кнопки, когда в неё нельзя кликать.

Навигация по экранам

Повторим проделанные выше действия с двумя оставшимися экранами (lesson_2_Sky, lesson_2_Moon) этого урока. Поместим на lesson_2_Sky кнопку, по памяти, не подглядывая в предыдущие инструкции. Пусть при клике на неё происходит переход на экран lesson_2_Moon.

Третью кнопку на экране lesson_2_Moon мы создадим новым методом. Для этого наступим в дереве на уже существующую кнопку и нажмем правую кнопку мыши. В выпавшем меню выберем пункт "Copy". Можно также не пользуясь меню, при активном объекте на клавиатуре нажать клавиши Control и не отпуская её C.

Lesson 2 copy.png

Теперь кликнем на stg_main экрана lesson_2_Moon и нажав правую кнопку мыши выберем пункт меню "Paste into current object". Кнопка появится на экране и в дереве проекта.

Упражнения

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