Игра “Лабиринт”

В данной игре мы познакомимся с такими объектами как Холст, Спрайты, научимся управлять движением с помощью кнопок, а также добавим еще один экран. 

Дизайн-макет

Добавляем в игру картинки: фон игрового поля (назовем его fon.jpg), изображение игрока (igrok.png) и финишного портала (finish.png), изображение стены (wall.png) и фоновое изображение для второго экрана (final.jpg). Картинки можно найти в Интернете или нарисовать самим. 

В игре будет два экрана — один с непосредственно игрой, второй — с финишной картинкой и кнопкой перезапуска.

Первый экран

Настроим Screen1:

• Название приложения “Лабиринт”.
• Отключаем показ заголовка и статус бара.
• Выравнивание по горизонтали и вертикали — по центру.
• Можно поставить иконку приложения из уже загруженных (например, изображение игрока).
• Ориентация экрана- альбомный режим.
• Самое важное — сделать экран фиксированным, чтобы наша игра не разъезжалась на разных устройствах. Чуть позже, когда вы сделаете на App Inventor побольше приложений, вы сможете адаптировать данную игру  под различные устройства. 

Добавляем на экран Холст. Его можно найти во вкладке “Рисование и анимация”. Почему именно там? Потому что Холст — это область на экране, восприимчивая к перемещению объектов касанием. То есть на нем можно рисовать и перемещать объекты — спрайты. Спрайты — особые объекты, которые можно запрограммировать на движение по экрану или иные действия. Спрайты можно размещать только на Холсте! 

Итак, мы добавили Холст, настроим его:

• Высота 280 пикселей.
• Ширина — “Наполнить родительский”, т.е. вся ширина экрана.
• Фоновый рисунок — fon.jpg.

Холст настроен. Вы можете заметить, что он не занимает весь экран, это специально предусмотрено, в области ниже мы будем размещать кнопки управления. Сейчас он располагается по центру, но это только пока. 

Теперь нам требуется добавить игрока — персонажа, за которого мы будем играть. Возьмем Изображение Спрайта и перетащим на Холст. Переименуем Спрайт в “Игрок”, зададим размер  30 на 30 пикселей и присвоим ему картинку igrok.png.

Разместим его (можно перетащить мышкой по Холсту) в верхнем левом углу — там у нас будет старт. 

Теперь добавим Спрайт финишного портала. Переименуем компонент в “Финиш”, присвоим картинку finish.png, если картинка большая, можно сделать размер примерно 60 на 30 пикселей, если маленькая, как у меня, то можно оставить размеры автоматические. 

Разместим портал в правом нижнем углу. 

Получится примерно вот так:

Теперь между стартом и финишем не хватает только одного — самого лабиринта. Сделать лабиринт можно несколькими способами:

• Для каждой стены нарисовать свою картинку и добавить в игру, затем выставить спрайты в нужных местах.
• Использовать одно изображение стены, чтобы из нескольких спрайтов, как из кусочков, собрать лабиринт. 

Я остановлюсь на втором варианте, так как рисовать для каждой стены свою картинку — дело длительное. Но вы, если есть желание, можете сделать игру с оригинальным дизайном.

Оговорюсь, что стены лабиринта обязательно должны быть спрайтами, если вы просто нарисуете их на фоне — игру сделать не получится!

Добавляю первый спрайт стены:

• Переименовываю компонент в “Стена1”
• Устанавливаю изображение wall.png.
• Мышкой перетаскиваю стену в нужное мне место. 

Так мне нужно сделать еще 8 раз, чтобы получить вот такой макет:

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

Поле игры готово. Теперь нужно добавить кнопки управления. Чтобы сделать их расположение удобным, поэтому придется немного помучится с горизонтальными расположениями. 

Добавляем горизонтальное расположение — это будет отступ от Холста. Делаем его высотой 20 пикселей, остальное можно оставить по умолчанию. Здесь нам важна именно высота, которая является промежутком между Холстом и Кнопками.

Добавляем второе горизонтальное расположение — здесь будет одна кнопка. Выравнивание делаем по Центру, остальные свойства по умолчанию.

Внутрь данного расположения размещаем Кнопку. Важно, чтобы кнопка разместилась именно внутри, а не рядом, в противном случае все наши потуги с расположениями ничего не стоят. Компонент Кнопки переименовываем в “Вверх”. Текст кнопки тоже “Вверх”. оформление кнопки (цвет, шрифт, форма) может быть любое. Например, такое:

Добавляем третье горизонтальное расположение под второе. Свойства такие же, как и у второго — выравнивание по Центру, остальное по умолчанию.

Внутрь данного расположения помещаем Кнопку. Компонент кнопки называем “Влево”, Текст кнопки “Влево”, оформление любое. 

После кнопки вставляем горизонтальное расположение. Да, именно, добавляем расположение внутрь расположения. Оно будет служить отступом между кнопками. Ширина 40 пикселей, остальное — по умолчанию.

После данного расположения добавляем Кнопку. Компонент кнопки называем “Вправо”, Текст кнопки “Вправо”, оформление любое. 

Добавляем пятое горизонтальное расположение после вышеописанных. Свойства такие же, как и у второго и третьего — выравнивание по Центру, остальное по умолчанию.

Внутрь него помещаем Кнопку. Компонент кнопки называем “Вниз”, Текст кнопки “Вниз”, оформление любое. 

В итоге у меня получилась вот такая визуальная конструкция: 

А структура ее такая:

Да, можно было так не заморачиваться с расположениями, но тогда кнопки бы наезжали друг на друга, и пользоваться ими было бы не очень удобно.

Второй экран

Чтобы создать второй экран, нужно нажать кнопку “Добавить экран” в строке под меню:

Появится окно названия экрана. Экран назвать можно как угодно. Как правило, если экранов много, желательно называть их так, чтобы было понятно, за что они отвечают. Но будьте внимательны — переименовать экран уже не получится! После того, как экран добавлен, автоматически откроется макет нового экрана. Переключаться между экранами можно через выпадающий список в строке под меню:

Обратите внимание, что медиафайлы, загруженные в проект, доступны для всех экранов. 

Настраиваем второй экран:

• Выравнивание по горизонтали и вертикали — Центр
• Добавим фоновое изображение, чтобы было красивее. У меня это картинка final.jpg. 
• Можно добавить анимации закрытия и открытия экрана — вы увидите, как это работает при смене экранов в игре. 
• Отключаем показ названия экрана и статусной строки — чтобы не занимали место.

Итого настройка получилась следующая:

На экран добавляем Надпись. Здесь будет просто текст, который будет говорить игроку, что он победил. Например, такой: “Ты дошел до портала и переместился в другую вселенную.” Вы можете добавить любой. Как и оформление надписи (цвет, шрифт) можно сделать любыми, главное, чтобы она была видна на данном фоне. 

Цвет текста можно выбрать любой, если кликнуть пункт “Custom”, тогда можно выбирать цвет на палитре цветов. 

После надписи добавляем Кнопку. Компонент переименовываем в “Заново”, текст кнопки “Заново”. Оформление любое. 

Вот примерно что получилось у меня: 

Обратите внимание, что на макете текст не умещается в надписи и вылезает за рамки. Это только на макете — одна из проблем App Inventor. При запуске приложения на смартфоне или планшете блок надписи растянется под количество текста, и такого кривого отображения не будет. 

Макет игры готов. Можно переходить к программированию. 

Программирование

Открываем раздел “Блоки”. Хочу обратить внимание, что для каждого экрана нужно будет программировать отдельно. Переключаться между экранами можно также, как и в макете — через выпадающий список в строке под меню. 

Первый экран

Для начала сделаю отступление. 

В русскоязычной части App Inventor местами переведен несколько кривовато. 

У кнопки есть три состояния: 

• Кнопка нажата (т.е. нажали и держат)
• Кнопка отпущена (т.е. после нажатия, неважно, насколько долгого, отпустили)
• Щелчок (когда кнопку нажали и отпустили, неважно, сколько времени прошло между этими двумя событиями, главное, что произошли они оба).

Так вот в англоязычной версии эти события называются:

• TouchDown
• TouchUp
• Click

И если с кликом все понятно, что TouchDown и  TouchUp переведены как “ПровестиВниз” и “ПровестиВверх”. Согласитесь, с первого раза и не поймешь, что это такое? 

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

Программируем Кнопку Вверх. Когда кнопка “Вверх” нажата, положение спрайта по горизонтали не будет меняться, меняется только по вертикали — мы увеличиваем координату Y. Для этого мы использует конструкцию “ПереместитьВ” определенные координаты. 

Тут у нас также появились новые блоки — Курс и Скорость. 

Курс — направление спрайта. Грубо говоря, в какую сторону он повернется. Здесь указано 90. Цифровой направление задается, исходя из градусной меры окружности:

Следовательно, Курс Вверх будет 90, Вниз —  270, Влево — 180, Вправо — 0.

Скорость — скорость перемещения спрайта от точки положения до заданной точки. Чем выше число — тем быстрее спрайт будет перемещаться.

Соответственно, когда кнопка отпущена, спрайт останавливается и скорость его равна нулю:

Аналогичным образом сделаем кнопку Вниз с небольшими корректировками:

• Y уменьшается.
• Курс — 270.

Кнопка Вправо отличается тем, что теперь идет движение не по вертикали, а по горизонтали, поэтому изменять будем координату X. Курс будет равен 0. 

Кнопка Влево отличается от предыдущей курсом 180 и уменьшением координаты. 

Теперь нужно запрограммировать, что будет, когда Спрайт будет касаться стен — он же не должен их проходить насквозь. А также, что будет, когда Спрайт наконец достигнет портала. 

Для этого будем использовать Метод “НаложениеСОбъектом”, который отвечает за соприкосновение. Внутри него мы будем использовать Конструкцию ЕСЛИ, так как нам нужно различать два варианта развития событий — если касается портала, и если касается остального множества спрайтов (напоминаю, стены созданы из нескольких спрайтов).

Когда спрайт Игрока накладывается на спрайт портала (Финиш), игра завершается и открывается второй экран. Когда спрайт Игрока накладывается на любой другой спрайт (т.е. стену), он перемещается в начало своего пути, а именно, в координаты X = 1, Y = 8. Откуда взялись эти цифры? В макете, куда мы в самом начале устанавливали спрайт Игрока, можно посмотреть в свойствах этого самого спрайта:

Первый экран готов. Перейдем к программированию второго экрана.

Второй экран

Тут все просто. Из активных элементов у нас есть только кнопка, которая будет перезапуском игры. Что она должна перезапускать? По сути, только открывать начальный экран. Это мы и запрограммируем.

Теперь ваша игра готова. Можно создавать .apk файл и пробовать устанавливать на телефон. 

Самостоятельная работа

Основываясь на вышеизложенном, попробуйте создать еще один уровень лабиринта. То есть, чтобы доходя до портала на первом экране, Игрок перемещался на второй экран с новым лабиринтом. А уже после прохождения оного — открывался финишный экран. Сразу оговорюсь, названия и порядок создания экранов роли не играют — после Screen1 может открываться Screen3, а затем Screen2.