Прежде чем приступить к созданию игры на Thunkable, давайте разберемся, что такое Thunkable. Thunkable — это платформа блочного кодирования, которая может существенно помочь детям, которые хотят создавать мобильные игры, но совсем не знакомы с программированием. Дети, которые любят играть в игры, могут попробовать сделать одну, так как это повысит творческие способности их ума. Он фокусируется на логике и пытается развить воображение и чувство программирования в молодых умах. Дети могут стать разработчиками и создателями, а не просто потребителями игр.
Thunkable может стать отправной точкой для детей, которые плохо знакомы с миром программирования и хотят создавать свои собственные игры.
В этом блоге мы узнаем, как создавать забавные игры с помощью платформы Thunkable.
Предварительные условия
Вы должны иметь базовые знания о блочном кодировании, например, о скретч-платформах или любых других. Следует знать о типах спрайтов и спрайтах. Необходимо хорошо знать свойства спрайтов и способы их изменения. И последнее, но не менее важное: вы должны быть хорошо знакомы с Thunkable-платформами (если нет, не волнуйтесь. Наша статья посвящена тому же), фронтенд-разработке и серверной разработке с использованием двух вариантов дизайна и блоков в Thunkable и игровом механизме. и работаю.
Что такое Танкабл?
Thunkable — это платформа, которую можно использовать для создания iOS, Android и веб-приложений. Эта платформа бесплатна и требует минимального использования кода или его отсутствия. Платформа Thunkable создана медиа-лабораторией MIT, теми же людьми, которые раньше создавали платформы App Inventor и Scratch. Более 80 000 пользователей используют Thunkable для создания инновационных приложений.
Когда вы создаете проект на платформе Thunkable, вы получаете интерфейс, в котором вы можете заниматься внутренним кодированием и внешней разработкой. Интерфейс выглядит так, как показано.
Текущий интерфейс раздела описан.
Раздел «Дизайн» — это раздел, который выбирается по умолчанию при создании проекта. Это поможет вам создать интерфейс вашего приложения, который включает в себя разработку различных необходимых экранов и добавление необходимых видимых и невидимых компонентов.
Раздел «Блоки» — когда вы нажимаете на него, вы переходите к различным интерфейсам, где вы можете увидеть различные категории блоков и рабочую область, где вы можете перетаскивать необходимые блоки для написания кода для серверной части.
Средство просмотра. В этом разделе вы увидите все компоненты и внешний вид вашего экрана. Вы можете переключаться между экранами, нажимая на имя экрана в верхней части окна просмотра. Все добавленные невидимые компоненты можно увидеть под средством просмотра.
Раздел «Компоненты». Независимо от того, нужен ли вам какой-либо видимый или невидимый компонент, все компоненты присутствуют в этом разделе компонентов. Он также предоставляет возможность поиска, с помощью которой вы можете найти необходимый компонент и получить его в отфильтрованном списке.
Дерево приложения. Все видимые компоненты, которые вы добавили в свое приложение, невидимые компоненты, добавленные в приложение, связанные внешние базы данных и загруженные мультимедийные файлы можно найти в дереве приложения. Кроме того, при добавлении любого компонента предлагается перетащить его из раздела компонентов и поместить в дерево приложения в нужную позицию, а не перетаскивать в средство просмотра для точного добавления компонента.
Панель «Свойства». Если вы хотите изменить свойства, относящиеся к какому-либо компоненту, вы можете использовать этот раздел для их изменения. Свойства могут включать имя компонента, текст на компоненте, его размер, поля, отступы, ширину, высоту и т. д.
Основы платформы Thunkable
При создании игры или любого приложения в Thunkable вам необходимо выполнить два типа разработки: внешнюю разработку и внутреннюю разработку.
Фронтенд-разработка включает в себя проектирование экранов вашего приложения и размещение на этом экране всех видимых и невидимых компонентов, необходимых для вашего приложения. Компоненты включают кнопки, изображения, метки, камеры, преобразование текста в речь и многие другие.
Видимые компоненты — это те компоненты, которые вы видите на экране, тогда как невидимые располагаются под экраном и выполняют некоторые задачи, но не видны нигде на экране. Мы можем заняться фронтенд-разработкой, перейдя в представление дизайнера на платформе Thunkable, показанное ниже.
Для внутренней разработки Thunkable предоставляет функцию перетаскивания с блочным кодированием. Нам нужно запрограммировать функциональность нашего приложения и написать логическую часть. Мы даем инструкции приложению, используя блоки различных категорий. Для выполнения серверной разработки нам нужно будет перейти к представлению блоков Thunkable, как показано на рисунке.
Создание игры с помощью Thunkable
Для создания любой игры на платформе Thunkable нам нужно выполнить четыре шага, которые включают в себя:
- Создайте базовый дизайн всех экранов и нарисуйте его на бумаге или в любом онлайн-инструменте.
- Нарисуйте блок-схему того, как будет работать ваша игра, а также напишите псевдокод, содержащий все функции, которые должно предоставлять ваше приложение, и описывающий работу вашей игры.
- Создайте визуальный дизайн, который станет интерфейсом игры, разместив все компоненты на экране и добавив все необходимые экраны в свое приложение.
- Выполните блочное серверное кодирование для своей игры, которое включает в себя центральную логическую часть и рабочие функции игры.
Прежде чем приступить к созданию какой-либо игры в Thunkable, вы должны знать о следующих компонентах и их использовании при разработке игр:
- Canvas — это сенсорная панель, содержащая сцену, на которой будут отображаться все ваши персонажи-спрайты.
- Спрайты. Спрайты — это объекты типа спрайт класса. Они представляют собой любых персонажей, препятствия или предметы, присутствующие на игровой сцене. Вы можете создать столько спрайтов спрайтового типа, сколько необходимо. Все спрайты одного и того же типа имеют одинаковые свойства, такие как ширина, высота, изображение, положение x и y и т. д. Однако вы можете изменить их явно.
Создание игры-лабиринта
Мы создадим игру, в которой вы будете управлять движением присутствующего в игре мяча, наклоняя свой мобильный телефон в разные стороны. Вы должны следить за тем, чтобы мяч не касался ни одной из стен лабиринта. Если он коснется, мяч переместится в исходную точку, где он был первоначально размещен.
Шаг 1. Для этого мы нарисуем примерный эскиз дизайна нашего экрана, содержащий все необходимое, что будет видно в игре.
Шаг 2. Теперь мы напишем псевдокод для нашей игры. Там будет описано все, что происходит в игре, и это работает.
- Как только экран открывается, мы видим шар и лабиринт, содержащий структуры, похожие на стены.
- Мяч движется вместе с вами, когда вы двигаете и наклоняете свой мобильный телефон.
- При наклоне мобильного телефона положение мяча меняется.
- Если мяч касается какой-либо стены, он возвращается в исходную точку, где он был изначально размещен.
Шаг 3. Теперь мы создадим интерфейс нашего приложения на Thunkable, перейдя к представлению дизайна проекта Thunkable. До этого:
- Обязательно зарегистрируйтесь на платформе Thunkable.
- Создайте новый проект.
- Назовите его по вашему выбору.
Интерфейс игры будет выглядеть так, как показано на изображении ниже.
Первый компонент, который мы разместим на экране, — это холст, который автоматически отображает сцену и тип спрайта с одним из ее спрайтов. Для этого выполните поиск в разделе добавления компонентов о холсте, а затем перетащите холст на экран или в дерево приложения. После добавления это будет выглядеть так, как показано на рисунке ниже.
После этого вы можете продублировать тип спрайта, щелкнув его в дереве приложения и нажав кнопку «Дублировать» на панели свойств. Назовите спрайты: один тип спрайта — тип стены, а другой — тип шара. Для обоих из них вы можете выполнить поиск в Google, загрузить изображение и убедиться, что фон изображения удален, посетив сайт RemoveBG.
Вы можете загрузить обе фотографии в дерево приложения, прокрутив вниз, нажав «Выбрать раздел файла» и просмотрев раздел, как показано ниже. После этого вы можете щелкнуть тип спрайта с именем «Тип стены», а затем установить изображение в разделе изображения на панели свойств.
После этого вы можете переименовать спрайт типа стены в wall1, а типа мяча в ball. Вы можете дополнительно дублировать спрайт wall1, создать несколько стен и расположить их на холсте, уменьшая и увеличивая ширину и высоту, а также перемещая их, чтобы создать узор лабиринта.
После выполнения вышеуказанных шагов окончательный интерфейс должен выглядеть, как показано ниже.
Последнее, что осталось, — это добавить невидимый компонент под названием гироскоп, который может помочь нам распознавать величину и направление движения мобильных устройств, на основе чего мы также можем перемещать позиции x и y нашего шара.
Компоненты гироскопа изменяют ускорение движения в трех измерениях, а именно x, y и z, обозначаемых значениями гамма, бетта и альфа соответственно.
Шаг 4. Теперь мы перейдем к разделу блоков проекта Thunkable и напишем внутреннее кодирование для функциональности игры.
Положение любого спрайта на холсте определяется координатами x и y или точками положения, которые можно найти на панели свойств этого спрайта.
Первое, что нам нужно написать, — это управлять движением мяча в соответствии с изменениями значений гироскопа. Перейдя в раздел блоков гироскопа, вы обнаружите следующие блоки кода.
Блок событий здесь может помочь нам определить изменение значений гироскопа «при изменении гироскопа». Мы можем использовать этот блок и соответственно установить скорость нашего шара по осям X и Y так, чтобы он двигался в соответствии с изменениями гироскопа. Для установки скоростей x и y спрайта мяча мы можем использовать самый первый блок, доступный в разделе блока движения, который называется «установить скорость мяча по x на _», который также можно использовать для «установить скорость мяча по y на _». » как показано ниже.
Мы установим скорость x мяча в соответствии с гамма-изменениями гироскопа, а скорость y мяча в соответствии с изменениями бетты, как показано ниже.
Итак, мы завершили код перемещения шарика при наклоне мобильного телефона.
Далее мы напишем код, согласно которому, когда мяч касается любой из стен, он должен вернуться в исходные положения x и y. Мы можем проверить положение шара по осям x и y, перейдя в дизайн, щелкнув по шару и проверив положение x и y на панели свойств, как показано ниже.
Мы можем наблюдать, что позиции x и y мяча равны 25 и 25 соответственно.
Теперь мы перейдем в раздел блоков и проверим категорию блоков событий, где мы сможем найти блок, который поможет нам определить, касается ли мяч какой-либо из стен. В третьем блоке говорится: «Когда тип стены сталкивается с типом стены», который можно изменить на «Когда мяч сталкивается с типом стены». Тип стены содержит все дочерние спрайты стен; таким образом, этот блок может удовлетворить наши потребности.
Далее, если произойдет столкновение мяча с каким-либо спрайтом стены, мы переместим наш шар в исходные позиции x и y. Этот блок можно найти в движениях под названием «переместить спрайт 18 на x 100 y 100», которые можно изменить на «переместить мяч на x 25 y 25».
В совокупности мы можем запрограммировать перемещение мяча обратно в исходное положение, используя приведенный ниже код.
Вы можете проверить работу своей игры в приложении Thunkable Live, установив его на свое мобильное устройство и войдя в систему, используя ту же учетную запись, которую вы использовали при создании игры.
Заключение
Создать игру на платформе Thunkable легко, выполнив указанные в статье шаги и имея некоторые знания о платформе Thunkable. Обязательно придумайте отличную уникальную идею и попробуйте создать свою собственную игру на Thunkable.
Прочитав эту статью, вы сможете создавать игры на Thunkable. Все, что вам нужно сделать, это добавить необходимые фоны и спрайты, а затем логически написать код для каждого из них.
