• Подписаться на свежие статьи на android-lamer.ru

Уроки App Inventor — первые шаги 2

Продолжение публикации мини уроков по App Inventor. Если вы еще не изучили первую часть — рекомендую это сделать, для лучшего понимания этой части публикации.

Рисование
Создание собственного цвета
Определение столкновения объектов


Рисование

Приложение в виде области в которой можно рисовать пальцем.

Участвующие компоненты:компоненты_рисование
• Canvas1 (область анимации  - для рисования)
• Button 1 (кнопка — будет стирать все нарисованное)

Зададим в свойствах компонента Canvas1 его размеры «Width» — «Fill parent…», «Height» — «250 pixels…»

Программирование в редакторе блоков:

Блоки в которых присутствуют имена компонентов (Canvas1 и Button 1)  берутся на вкладке »My Blocks» в соответствующих выпадающих меню.блоки_рисование

Остальные блоки берутся там же  - в разделе «My Definition».

Блок «Canvas1.Dragged» отвечает за рисование линии, он использует стартовые (start), текущие(current), предыдущие(prev) X, Y координаты прикосновения.

Блок »Button1.Click» обеспечивает очистку области рисования Canvas1 при нажатии кнопки Button1 (очистить).

Как результ мы видим при загрузке приложения чистое поле и кнопку «очистить». Если повозить пальцем по экрану — будет рисоваться линия вслед за ним. Нажимая на кнопку мы, соответственно, очищаем экран.


Создание собственного цвета

Это небольшое приложение будет менять цвет экрана на нестандартный цвет, заданный вами в цветовой модели  RGB.

Набираем компоненты в окне дизайна:
• Button1 — кнопка

компоненты_цвет

Конструкция в редакторе блоков:блоки_цвет

Создаем переменную «color» на вкладке «Bulit-in» раздел «Definition». Для этой переменной блок «make color», который мы берем на вкладке «Bulit-in» в разделе «color»,  и список «make a list» (из раздела  «List») задают цвет с помощью каналов RGB.  То есть в списке первые три числа сверху вниз  - это значения по каналам R, G и B соответственно (от 1 до 255), а четвертое число непрозрачность (1-100%).

Кнопка Button1 запускает изменение цвета фона экрана на заданный в переменной «color» цвет.

При запуске приложения мы видим белый экран и кнопку, при нажатии на которую фон экрана меняет цвет на заданный нами в описании переменной.


Определение столкновения объектов

Приложение будет состоять из кошки, которая будет гоняться за неуловимой мышкой.

В окне дизайна нам необходимо взять компоненты:компоненты_столкновение
• Canvas1 (область анимации)
• ImageSprite1  - переименовал в «cat» (спрайт изображение  - кошка)
• ImageSprite2  — переименовал в «mouse» (спрайт изображение — мышка)
• Button 1, Button 2, Button 3, Button 4 - переименовал в «Up_Button, Down_Button, Left_Button, Right_Button соответственно (кнопки управления движением кошки)
• Clock1, Clock2, Clock3, Clock4 — переименовал в Clock_up, Clock_down,  Clock_left,  Clock_right соответственно (таймеры формирующие движение кошки в разные стороны)
• HorizontalArrangement1, HorizontalArrangement2, HorizontalArrangement3 — контейнеры для выравнивания элементов. В данном случае служат для горизонтального выравнивания кнопок.

Загружаем в качестве источников изображения для спрайтов «cat» и «mouse» картинки кошки и мышки соответственно.

Для всех таймеров  в свойствах снимем галочки «TimerAlwaysFires» и «TimerEnabled» и выставим «TimerInterval» 50.

Конструкция в редакторе блоков:блоки_столкновение

Все блоки содержащие в имени названия компонентов берем на вкладке «My Blocks» в соответствующих разделах.

Остальные блоки (в данном случае блоки «number», «true/false»)  берем на вкладке «Bulit-in» в разделах «Math» и «Logic» соответственно.

При формировании блока «cat.CoCollideWith» не забудьте поменять имя блока «name» с «other» на «mouse».

Конструкции «Up_Button.Click, Down_Button.Click, Left_Button.Click, Right_Button.Click» отвечают за смену направления движения в соответствующую сторону. Конструкции «Clock_up.Timer, Clock_down.Timer,  Clock_left.Timer,  Clock_right.Timer» отвечают за  движение в соответствующую сторону.

Конструкция «cat.CoCollideWith» отвечает за обнаружение столкновения спрайтов «cat» и «mouse» и смену координат расположения спрайта»mouse» на случайные в пределах области «Canvas1″. Здесь  блок «random integer» берет произвольное число в пределах 1-300.

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


Скоро по этим трем примерам будет добавлено видео — для лучшего понимания процесса.

Не пропускйте новые статьи!

Введите свой E-mail
для уведомлений о новых статьях:

Метки , , . Закладка постоянная ссылка.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>