32428ca9

Компоненты App Inventor — Drawing and Animation

Анимация в App InventorГде те славные времена, когда все компьютеры и понятия не имели о графике, а тем более анимации! Перфокарты, м-м-м-мм!  Как было здорово, только чистая, ничем не замутненная информация! Хотя, я не настолько стар и застал уже DOS, где этой графики было предостаточно. Впрочем, без анимации — это скучно!
Поэтому и нам в наших приложениях не обойтись без графики и анимации, так же как и без медиа-компонентов и без компонентов-сенсоров.  Конечно, для статичной графики можно обойтись и компонентом Image, а для работы с анимацией служат специальные компоненты App Inventor — Drawing and Animation Components.


Кстати, чтобы в дальнейшем не путаться, я про элементы Drawing буду писать в терминологии App Inventor и спрайтом здесь называется компонент представляющих собой графическое изображение и размещаемый на холсте.
Итак, самый важный компонент:
Canvas
Компонент App Inventor CanvasГоворя по-русски – холст. Это то место, где будет разворачиваться ваше анимационное действо в android-приложении.
Canvas представляет собой двухмерное полотнище, координатная сетка которого начинается от левого верхнего угла и измеряется в пикселях.
Свойства
PaintColor
Пожалуй, единственное свойство, отличающееся от стандартных – цвет, которым рисуются линиии, точки и т.п.
События
События Canvas не самоценны, но позволяют получить данные для действий над спрайтами
Dragged(координата касания  X,  координата касания  Y, координата предыдущей точки prevX, координата предыдущей точки prevY, координата текущей точки currentX, координата текущей точки currentY,  draggedSprite)
Событие регистрируется, когда пользователь проводит пальцем по холсту. Тут необходимо сделать маленькое пояснение насчет draggedSprite: draggedSprite выдает истина/ложь, в зависимости от того, находится какой-либо спрайт в зоне касания или нет.
Flung(координата касания x, координата касания y, скорость speed, угол броска heading, координата направления вектора xvel, координата направления вектора yvel, flungSprite)
Бросок — данное событие похоже на предыдущее, но учитывает только резкое проведение по экрану. При этом учитывается скорость броска, угол к горизонтали (о-360), координаты направления вектора броска. flungSprite схож с draggedSprite
TouchDown(координата x, координата y)
Прикосновение к холсту
TouchUp(координата x, координата y)
Событие, возникающее. Когда пользователь убирает палец с холста
Touched(координата x, координата y, boolean touchedSprite)
Быстрое прикосновение (палец тут же убран) . touchedSprite опять же показывает, что рядом находится спрайт
Команды
Clear
Очистить холст от всего нарисованного
DrawCircle(координата центра x, координата центра y, радиус r)
Нарисовать окружность
DrawLine(начальная координата x1, начальная координата y1, конечная координата x2, конечная координата y2)
Нарисовать линию между начальными координатами и конечными.
DrawPoint( x, y)
Нарисовать точку. Используя событие Dragged (оттуда получаем текущие координаты) и эту команду можно рисовать, например, кривые.
DrawText(text, x, y)
Написать соответствующий текст с началом в соответствующих координатах
DrawTextAtAngle(text, x, y, величина угла angle)
Команда похожа на предыдущую, только добавляется угол, под которым должен появиться текст
number GetBackgroundPixelColor(x, y)
Возвращает цвет фона, точки, линии в точке касания, но не спрайта.
number GetPixelColor(number x, number y)
Возвращает цвет любой точки касания, в том числе и спрайта.
text Save
Сохраняет изображение холста в файле.  Аналогично команде «Сохранить» в любой другой программе
text SaveAs( fileName)
Соответствует команде «Сохранить как…». Сохраняет графический файл с именем fileName (можно задавать) и в задаваемых форматах .jpg, .jpeg, или .png
SetBackgroundPixelColor(x, y, color)
Команда похожа на DrawPoint, но здесь ест возможность задания цвета точки

Ball и ImageSprite
Компонент App Inventor SpriteЭти два компонента являются, собственно, графическими элементами, которые размещаются на холсте и над которыми производятся действия. Они практически идентичны: отличия только в том, что Ball представляет собой окружность заданного радиуса и цвета, мяч, проще говоря. А ImageSprite имеет прямоугольную форму и его вид определяется файлом с картинкой. В остальном – разницы нет
Свойства
Enabled
Включение возможности управления движением спрайта.
Heading
Задает угол движения спрайта, если в его свойствах задана скорость, отличная от нуля. Например, если Heading задан равным нулю, то спрайт при включении приложения начнет двигаться из своего начального положения к правому краю холста. Если задать 90 градусов, то – вниз, и так все 360 градусов.

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

PaintColor
Это свойство только для Ball – цвет
Picture
А это уже для ImageSprite – указание на файл с картинкой
Speed
Скорость в пикселях на интервал (см. выше Interval)
События
CollidedWith
Столкновение с другим спрайтом
Dragged(координата касания  X,  координата касания  Y, координата предыдущей точки prevX, координата предыдущей точки prevY, координата текущей точки currentX, координата текущей точки currentY)
Практически то же самое, что и Dragged для холста. Тут надо заметить, что это не является командой и спрайт будет двигаться, только если использовать команду MoveTo
EdgeReached (номер края)
Достижение одного из краев холста при движении. Причем, край здесь представлен в виде целого числа, которое указывает один из восьми направлений: на север (1), к северо-востоку (2), к востоку (3), к юго-востоку (4), юг (-1), юго-западный (-2), к западу (-3) и на северо-запад (-4). Севером считается верх холста.
Flung(координата касания x, координата касания y, скорость speed, угол броска heading, координата направления вектора xvel, координата направления вектора yvel)
Опять же отошлю к аналогичному событию холста.
NoLongerCollidingWith
Событие, указывающее, что пара спрайтов больше не сталкивалась.
TouchDown, TouchUp и Touched
И опять посмотрите про холст
Команды
Bounce(номер края)
Команда создает отскок от края
CollidingWith
Фиксирует факт столкновения с другим спрайтом и возвращает название этого спрайта
MoveIntoBounds
Возвращает спрайт в границы холста, если тот пытается вырваться за них.
MoveTo ( х, y)
Перемещение спрайта к точке с координатами х и у.
PointInDirection ( х, y)
Движение спрайта в направлении (х, у). Именно в направлении, а не «до». То есть, спрайт будет двигаться, пока не достигнет края холста.
PointTowards ( другой спрайт)
Движение спрайта в направлении другого указанного спрайта.

И еще, этот набор компонентов, при кажущейся простоте оказался для меня (может, туповат, конечно) одним из самых сложных. То есть, организовать какие-то простейшие действия на холсте не сложно, а вот замутить что-то эдакое – тут подумать надо. Дело в том, что тут необходимо неплохое знание геометрии и хорошо развитое пространственное мышление. С этими предметами у меня вроде в порядке, но настроить мозги в нужном направлении все же пришлось.
Например, из академического интереса озадачился я задачей создания тетриса для android с помощью App Inventor. Тут мне виделось основной проблемой то, что формой спрайта может быть только круг или прямоугольник. Таким образом, пришлось бы делать г-образный элемент тетриса из нескольких квадратов, делать один из них ведущим и создавать зависимости координат остальных квадратов от ведущего. Более того, я не нашел возможности генерить спрайты в ходе работы программы, а значит нужно еще при её написании заготовить кучу фигур и в случайном порядке включать их. В общем, морока.