Thunkable.com: игра «Охота за мусором»
Закончили полуторамесячный курс по мобильной разработке для группы детей 10-13 лет (второй год обучения в нашей компьютерной академии). Для обучения мы использовали веб-сервис «Thunkable.com», о котором я писал подробный пост 9 сентября. Как я писал ранее, веб-сервис «Thunkable» достаточно хорош в качестве инструмента обучения, но очень вероятно, что мы скоро уже не сможем его использовать, так как владельцы этого веб-сервиса планируют сильное урезание возможностей бесплатного тарифа, который мы используем. (Благо, альтернативы есть.)
В поисках идей для учебных проектов мобильных приложений я зашел на ютуб-канал этого веб-сервиса и нашел серию из пяти видеороликов (1, 2, 3, 4, 5) на английском языке, опубликованную на этом ютуб-канале 2 декабря 2022 года. («Замедление» ютуба сейчас уже научились обходить все, кому это интересно. При обучении созданию видеороликов, вероятно, будем переходить на «Rutube».) Видеоролики небольшие, по 5-7 минут, но разбора этого проекта хватило на половинку одного нашего занятия.
Игра «Охота за мусором»
В оригинале мобильное приложение, которое предлагается создавать, называется «Scavenger Hunt». Это название можно перевести на русский язык как «Охота за мусором» (в англоязычной википедии есть статья об этой игре). Коротко о сути игры. Участники разбиваются на несколько небольших команд, а организаторы игры подготавливают и выдают командам список предметов, которые нужно найти. Для организаторов игры ее преимущество в том, что список искомых предметов может состоять из каких угодно предметов, в которые может входить даже какой-нибудь мусор; обычно предметы выбираются из имеющихся в локации (в комнате, в здании, на игровой площадке и так далее) и не покупаются специально, что позволяет здорово сэкономить. Побеждает участник или команда, которые раньше всех соберут все предметы из списка.
Пишут, что эта игра (или что-то на нее похожее) родилась в древности. В США эта игра стала популярной с 1930-х годов (снят ряд кинофильмов по теме, игра включена в образовательные программы [непонятно, зачем] и т. п.). Мы в такое в детстве не играли, хотя тоже, бывало, возились со всяким мусором. Большинство студентов у меня в группе оказались знакомы с этой игрой, но ни у кого она сама по себе не вызвала особого энтузиазма. У современных детей, погруженных в мобильные игры и развлечения, подобные старые (безгаджетные) игры не пользуются популярностью (так мне кажется).
Ну а тут предлагают эту игру совместить со смартфонами (попытка реализации так называемой «дополненной реальности», по-английски «augmented reality» - AR), что, думаю, является неплохой идеей. По крайней мере, этот проект было интересно реализовывать, и он - несложный и наглядный, что и требуется при обучении.
Дизайн экрана игры
Для самой игры достаточно одного экрана, но при желании можно еще добавить экран с какой-нибудь заставкой. Вот как у меня выглядит экран игры при его проектировании:
На экране находятся, сверху вниз: надпись (компонент «Label») с названием игры, компонент для картинки (компонент «Image»), надпись с инструкцией для пользователя (во время игры эта надпись используется для отображения описания фотографии) и компонент «Data Viewer List», отображающий список предметов, которые должны искать участники игры.
Компонент для отображения списка предметов (компонент «Data Viewer List») получает данные для отображения из источника данных. Источники данных (data sources) можно добавлять отдельно, для этого в меню слева есть пункт «Data»:
Как видно на иллюстрации выше, для работы с данными используется электронная таблица. Эти данные можно в любой момент изменить: исправить названия предметов, удалить название предмета, добавить новое название предмета.
Как должна работать игра
Команда или участник игры запускают приложение на смартфоне. После этого участники ищут какой-нибудь из предметов списка. Как только предмет найден, нужно нажать (тапнуть) на соответствующий пункт в списке предметов. Приложение предложит сфотографировать найденный предмет. Участники фотографируют предмет со смартфона.
Приложение автоматически определяет, что находится на фотографии, и отображает фотографию предмета, а под нею - описание предмета на фотографии. Если приложение найдет в описании фотографии слово, совпадающее с названием выбранного предмета из списка, то фон соответствующего предмета в списке предметов меняется с белого на зеленый. Таким образом, зеленый цвет отображает то, что данный предмет найден. Задача участников игры - сделать фон всех пунктов в списке предметов зеленым.
Программирование игры
Вот как у меня выглядит программа, она небольшая:
Тестирование игры
Вот снимок экрана моего смартфона во время игры (игра тестируется через приложение «Thunkable Live», оно распространяется бесплатно через магазин приложений «Google Play» [у меня смартфон с операционной системой «Android»]):
На иллюстрации выше видно, что в данный момент участник игры (или команда) нашел поблизости клавиатуру и сфотографировал ее (фотография видна на иллюстрации). В списке предметов, которые нужно найти, фон пункта «keyboard» стал зеленым, так как это слово есть в описании предмета на фотографии, это описание смартфон сформировал автоматически.
О недостатках приложения (некоторые из них можно считать особенностями игры, а не недостатками), выявленных при тестировании. Во-первых, описание фотографии автоматически формируется смартфоном на английском языке. Поэтому список предметов приходится составлять только из английских слов. Слова на русском языке - не вариант.
Во-вторых, в описании предмета на фотографии может попасться сразу несколько искомых слов (это, наверное, не недостаток, а фича), то есть можно тут же сделать фотографию той же клавиатуры, только для пункта «computer», и фон этого пункта тоже станет зеленым, так как в описании есть фраза «computer keyboard», которая может «закрыть» оба соответствующих пункта в списке искомых предметов.
В-третьих, автоматическое описание предмета на фотографии формируется не всегда. Например, смартфон не смог определить на фотографии компьютерную мышь, а также другой смартфон. В случае, когда смартфон не может определить предмет на фотографии, он выдает слово «Undefined».
В целом получилось довольно веселое занятие.
В поисках идей для учебных проектов мобильных приложений я зашел на ютуб-канал этого веб-сервиса и нашел серию из пяти видеороликов (1, 2, 3, 4, 5) на английском языке, опубликованную на этом ютуб-канале 2 декабря 2022 года. («Замедление» ютуба сейчас уже научились обходить все, кому это интересно. При обучении созданию видеороликов, вероятно, будем переходить на «Rutube».) Видеоролики небольшие, по 5-7 минут, но разбора этого проекта хватило на половинку одного нашего занятия.
Игра «Охота за мусором»
В оригинале мобильное приложение, которое предлагается создавать, называется «Scavenger Hunt». Это название можно перевести на русский язык как «Охота за мусором» (в англоязычной википедии есть статья об этой игре). Коротко о сути игры. Участники разбиваются на несколько небольших команд, а организаторы игры подготавливают и выдают командам список предметов, которые нужно найти. Для организаторов игры ее преимущество в том, что список искомых предметов может состоять из каких угодно предметов, в которые может входить даже какой-нибудь мусор; обычно предметы выбираются из имеющихся в локации (в комнате, в здании, на игровой площадке и так далее) и не покупаются специально, что позволяет здорово сэкономить. Побеждает участник или команда, которые раньше всех соберут все предметы из списка.
Пишут, что эта игра (или что-то на нее похожее) родилась в древности. В США эта игра стала популярной с 1930-х годов (снят ряд кинофильмов по теме, игра включена в образовательные программы [непонятно, зачем] и т. п.). Мы в такое в детстве не играли, хотя тоже, бывало, возились со всяким мусором. Большинство студентов у меня в группе оказались знакомы с этой игрой, но ни у кого она сама по себе не вызвала особого энтузиазма. У современных детей, погруженных в мобильные игры и развлечения, подобные старые (безгаджетные) игры не пользуются популярностью (так мне кажется).
Ну а тут предлагают эту игру совместить со смартфонами (попытка реализации так называемой «дополненной реальности», по-английски «augmented reality» - AR), что, думаю, является неплохой идеей. По крайней мере, этот проект было интересно реализовывать, и он - несложный и наглядный, что и требуется при обучении.
Дизайн экрана игры
Для самой игры достаточно одного экрана, но при желании можно еще добавить экран с какой-нибудь заставкой. Вот как у меня выглядит экран игры при его проектировании:
На экране находятся, сверху вниз: надпись (компонент «Label») с названием игры, компонент для картинки (компонент «Image»), надпись с инструкцией для пользователя (во время игры эта надпись используется для отображения описания фотографии) и компонент «Data Viewer List», отображающий список предметов, которые должны искать участники игры.
Компонент для отображения списка предметов (компонент «Data Viewer List») получает данные для отображения из источника данных. Источники данных (data sources) можно добавлять отдельно, для этого в меню слева есть пункт «Data»:
Как видно на иллюстрации выше, для работы с данными используется электронная таблица. Эти данные можно в любой момент изменить: исправить названия предметов, удалить название предмета, добавить новое название предмета.
Как должна работать игра
Команда или участник игры запускают приложение на смартфоне. После этого участники ищут какой-нибудь из предметов списка. Как только предмет найден, нужно нажать (тапнуть) на соответствующий пункт в списке предметов. Приложение предложит сфотографировать найденный предмет. Участники фотографируют предмет со смартфона.
Приложение автоматически определяет, что находится на фотографии, и отображает фотографию предмета, а под нею - описание предмета на фотографии. Если приложение найдет в описании фотографии слово, совпадающее с названием выбранного предмета из списка, то фон соответствующего предмета в списке предметов меняется с белого на зеленый. Таким образом, зеленый цвет отображает то, что данный предмет найден. Задача участников игры - сделать фон всех пунктов в списке предметов зеленым.
Программирование игры
Вот как у меня выглядит программа, она небольшая:
Тестирование игры
Вот снимок экрана моего смартфона во время игры (игра тестируется через приложение «Thunkable Live», оно распространяется бесплатно через магазин приложений «Google Play» [у меня смартфон с операционной системой «Android»]):
На иллюстрации выше видно, что в данный момент участник игры (или команда) нашел поблизости клавиатуру и сфотографировал ее (фотография видна на иллюстрации). В списке предметов, которые нужно найти, фон пункта «keyboard» стал зеленым, так как это слово есть в описании предмета на фотографии, это описание смартфон сформировал автоматически.
О недостатках приложения (некоторые из них можно считать особенностями игры, а не недостатками), выявленных при тестировании. Во-первых, описание фотографии автоматически формируется смартфоном на английском языке. Поэтому список предметов приходится составлять только из английских слов. Слова на русском языке - не вариант.
Во-вторых, в описании предмета на фотографии может попасться сразу несколько искомых слов (это, наверное, не недостаток, а фича), то есть можно тут же сделать фотографию той же клавиатуры, только для пункта «computer», и фон этого пункта тоже станет зеленым, так как в описании есть фраза «computer keyboard», которая может «закрыть» оба соответствующих пункта в списке искомых предметов.
В-третьих, автоматическое описание предмета на фотографии формируется не всегда. Например, смартфон не смог определить на фотографии компьютерную мышь, а также другой смартфон. В случае, когда смартфон не может определить предмет на фотографии, он выдает слово «Undefined».
В целом получилось довольно веселое занятие.