9 мин. на чтение (слов - 1864)

Создание электронной интерактивной игры «Овощи»

Если хотите создать электронную игру с использованием перетаскивания объектов, но не знаете, как это сделать, то эта статья для вас. Вы узнаете, как создать простую игру с перетаскиванием под названием «Овощи». Игра может быть адаптирована с помощью замены текста, звука и изображения.

Как выглядит игра «Овощи»

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

Правила игры

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

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

Дизайн игры

Игра «Овощи» использует несколько внешних ресурсов, включая пять изображений овощей, пять звуковых файлов, которые произносят названия овощей, и два аудиофайла для неправильных и правильных ответов. Подготовьте все эти ресурсы перед началом создания игры. Кроме того, лучше дать им описательные имена, чтобы вы могли легко найти их позже.

Эта игра имеет только один слайд. Начните с чистого слайда. Затем добавьте изображения и вставьте звук. Создайте баннер с поздравлением с помощью облака-выноски и звездный дождь с помощью 5-конечных звезд. После этого добавьте цикл анимации, чтобы заставить звездный дождь работать.

Чтобы создать взаимодействия перетаскивания, используйте функцию области размещения. Вставьте источники перетаскивания, цели перетаскивания, а также метки. Затем создайте взаимодействия с действиями и JavaScript. Это поможет контролировать ответы и то, как появляются метки, поздравительный баннер и звездный дождь.

Процесс создания игры с помощью ActivePresenter разбит на несколько этапов:

  1. Добавление изображений и создание взаимодействий.
  2. Создание поздравительного баннера и звездного дождя.
  3. Создание взаимодействий перетаскивания.
  4. Предварительный просмотр и экспорт игры в HTML5.

Прежде чем вдаваться в детали, помните, что эта игра предназначена для обучения детей. Поэтому красивый фон поможет увеличить вовлеченность обучающихся. В открывшемся проекте с пустым слайдом выберите любую тему в галерее тем (вкладка «Оформление» > «Темы») и примените ее к слайду.

Этап 1: добавление изображений и создание взаимодействий

На этом этапе вставьте изображения в слайд. Затем используйте события и действия для создания взаимодействий. При нажатии на изображение вы слышите звук, и в то же время изображение подсвечивается. Чтобы все изображения работали таким образом, добавьте действия «Воспроизведение аудио» и «Подсветка».

Обычно для вставки и редактирования изображений используют объект «Изображение». Но если необходимо добавить и редактировать нескольких изображений, то лучше использовать панель «Ресурсы» (вкладка «Вид» > «Ресурсы»).

Сделайте следующее:

Шаг 1: на панели «Ресурсы» > вкладка «Изображение» > «Импорт изображения из файла», чтобы вставить все изображения в слайд.

Шаг 2: перетащите изображение с панели «Ресурсы» и поместите его на холст. Затем перейдите на панель «Свойства» > «Взаимодействия» > «События и действия», добавьте два действия, как показано ниже:

Шаг 3: на холсте скопируйте и вставьте текущее изображение четыре раза. Затем замените изображения и отредактируйте их действия.

На данном этапе примите к сведению следующее:

  • Чтобы заменить изображение, выберите его и перейдите на панель «Свойства» > «Размер и свойства» > «Изображение» > «Из проекта...». Выберите одно из них, чтобы изменить выбранное изображение.
  • При копировании и вставке текущего изображения они перекрывают друг друга. Просто выберите и перетащите их, чтобы изменить их позицию.
  • Параметры выравнивания используются для выравнивания и распределения изображений.
  • Поместите изображения так, чтобы освободить место для пустых полей, про которые поговорим позже.

Теперь вы импортировали изображения в слайд и добавили интерактивность к ним.

Этап 2: создание поздравительного баннера и звездного дождя

Создание поздравительного баннера и звездного дождя не требует каких-либо внешних ресурсов. Для этого используйте фигуры («Главная» или «Аннотации» > «Фигуры»). Затем используйте функции быстрого стиля, заливки, линии и тени для создания поздравительного баннера и звездного дождя.

1. Создание поздравительного баннера

Чтобы создать поздравительный баннер, используйте фигуру «Облако-выноска». Чтобы скрыть желтый маркер, просто перетащите его к облаку. Затем измените размер облака и добавьте текст.

Обратите внимание, что баннер поздравления появляется только тогда, когда обучающиеся правильно сопоставляют все изображения с их названиями. Поэтому установите его начальное состояние как скрытое (панель «Свойства» > «Размер и свойства» > «Расчет времени» > «Изначально скрыто»).

2. Создание звездного дождя

Когда закончите игру, будет показан баннер поздравления. В то же время появляется звездный дождь. Для это создадим звезды, а затем воспользуемся интерактивной шкалой времени и действиями для создания цикла анимации. Добавим анимационный эффект ко всем звездам. После этого запустим действие, которое вызывает интерактивную шкалу времени, если обучающиеся дадут все правильные ответы. Ниже рассказывается, как сделать звездный дождь. Использование действий для его запуска будет обсуждаться на следующем этапе.

Сделайте следующее:

Шаг 1: вставьте 5-конечную фигуру звезды. Затем скопируйте ее, чтобы получить другие и разместите их должным образом.

Шаг 2: создайте интерактивную шкалу времени и назовите ее Шкала времени 1 (панель «Шкала времени» > список шкал времени > «Добавить шкалу времени»).

Шаг 3: на Шкале времени 1 добавьте эффект акцента («Линии») к звезде. Затем примените эффект к остальным (щелкните правой кнопкой мыши звезду на холсте > «Применить ко всем объектам фигуры» > «Анимация»).

Шаг 4: дважды щелкните панель времени эффекта любой звезды > «Повтор». Затем установите количество повторов для воспроизведения эффекта анимации более одного раза.

Обратите внимание на следующее:

  • Можно установить различную продолжительность эффекта анимации для каждой звезды, чтобы звезды заканчивались в разное время. Это помогает сделать анимацию более естественной.
  • Звездный дождь появляется только тогда, когда обучающиеся завершают игру. Поэтому его необходимо изначально скрыть с помощью соответствующей опции.

Этап 3: создание взаимодействий перетаскивания

В ActivePresenter существует два способа создания взаимодействия перетаскивания. Во-первых, используйте вопрос «Перетаскивание». Во-вторых, используйте функцию «Область размещения» (вкладка «Взаимодействия» > «Область размещения»). В этой игре лучше использовать функцию, поскольку она позволяет мгновенно оценивать ответы обучающихся. Если воспользуетесь вопросом «Перетаскивание», то не сможете оценивать обучающихся, когда они перетаскивают название овоща в поле под изображением.

1. Используйте области размещения для взаимодействия «Перетаскивание»

Объект «Область размещения» содержит область размещения, источник перетаскивания и два сообщения. Вставьте объект области размещения, чтобы создать взаимодействие перетаскивания. Взаимодействие перетаскивания содержит поле имя в качестве источника перетаскивания и пустое поле под каждым изображением в качестве области размещения. Кроме того, добавьте метку «Правильно» (зеленая галочка) в правой стороне. Эта метка отображается, если обучающиеся правильно сопоставляют изображение овоща с его названием. Чтобы взаимодействие перетаскивания работало, настройте поведение области размещения.

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

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

Сделайте следующее:

Шаг 1: вставьте область размещения и настройте ее для создания взаимодействия перетаскивания.

Запомните:

  • Область размещения – это тип интерактивных объектов, куда можно перетащить объекты в качестве источников перетаскивания.
  • Объект в качестве источника перетаскивания имеет светло-зеленый маркер. Объект в области размещения имеет светло-красный маркер.
  • Оранжевая линия перетаскивания соединяет источник перетаскивания с областью размещения. Этот соединитель означает, что перемещение источника перетаскивания в область размещения является правильным действием. По этой причине он появляется только при перетаскивании источника перетаскивания в область размещения.
  • Используйте инструменты z-сортировки, чтобы разместить метки над пустыми полями.
  • Измените состояние меток на изначально скрытое.

Шаг 2: приостановите игру, пока обучающиеся не перетащат поле названия и не поместят его в пустое поле. Выберите поле названия на панели «Свойства» > вкладка «Взаимодействия» > «Общее» > «Пауза презентации для ожидания ввода данных пользователем» > «Перед скрытием объекта».

Шаг 3: выберите пустое поле в области размещения. Затем в разделе «Свойства» > «Взаимодействия» > «Оценивание и отчетность» > выберите значение балла в раскрывающемся списке «Баллы». Значение по умолчанию – 1.

Шаг 4: перейдите в раздел «Перетаскивание» и нажмите кнопку, чтобы открыть диалоговое окно «Список принятого». По умолчанию выбран правильный источник перетаскивания, и пустое поле принимает все поля с названиями. Чтобы сбросить значения, сначала снимите отметку «Принять все». Затем в столбце «Принять» установите любую отметку.

Шаг 5: перейдите в раздел «События и действия». Затем добавьте события При отказе и При принятии вместе со следующими действиями, как показано ниже:

Действие «Выполнить JavaScript» направлено на отображение метки каждый раз, когда обучающиеся правильно перетаскивают название. Эта метка появляется через две секунды после воспроизведения звука. Просто вставьте этот код:

prez.object(‘XXX’).node.style.zIndex = 2000; 

Не забудьте заменить XXX на название каждой метки. Например:

prez.object(‘Правильно Баклажан’).node.style.zIndex = 2000; 

Шаг 6: скопируйте и вставьте созданный объект области размещения четыре раза. Затем выполните шаги 4 и 5, чтобы изменить свойства вставленных объектов области размещения. Одновременно измените текст их источников перетаскивания.

2. Оценивание вопроса

Когда обучающиеся находят пять правильных ответов, появляется баннер поздравления, звездный дождь и воспроизводится соответствующий звук. Чтобы создать эти взаимодействия используйте событие Если правильно и действия: Воспроизведение аудио, Показать объект, Запуск шкалы времени. Кроме того, также необходимы условные действия, чтобы гарантировать, что взаимодействия отображаются только тогда, когда обучающиеся правильно сопоставляют все источники перетаскивания со всеми областями размещения.

Взаимодействие выглядит следующим образом:

Этап 4: предварительный просмотр и экспорт игры в HTML5

Пришло время просмотреть то, что вы создали, и проверить, все ли вам нравится. Для этого используйте функцию «Предпросмотр HTML5». Если удовлетворены игровым проектом, экспортируйте его в HTML5.

1. Предварительный просмотр игрового проекта

Кнопка «Предпросмотр HTML5» («Главная» или «Экспорт» > «Предпросмотр HTML5») предназначена для предварительного просмотра игры.

Эта функция предоставляет четыре режима работы: «Демонстрация», «Обучение», «Практика» и «Тест». Можно выбрать режим просмотра и взаимодействия с игрой. Однако демонстрационный режим не является интерактивным.

2. Экспорт игры

ActivePresenter поддерживает экспорт в HTML5 (вкладка «Экспорт» > «HTML5»), который использует стандарты HTML5. Кроме того, приложение позволяет настроить внешний вид плеера перед экспортом («Экспорт» > «Настройки плеера»). Используйте данный тип экспорта, если хотите, чтобы обучающиеся взаимодействовали с вашим контентом в интернете.

Запомните:

  • Если не хотите показывать панель инструментов плеера, скройте ее («Настройки плеера» > «Общие настройки» > «Параметры» > «Панель инструментов» > снимите отметку «Показать панель инструментов»).
  • Не забудьте выбрать «Обучение», «Практика» и «Тест», чтобы игра была интерактивной. Как было сказано ранее, демонстрационный режим предназначен только для просмотра.
  • Если режим любого объекта отличается от режима, выбранного в разделе «Режимы работы» вкладки «Экспорт», то объект не будет показан. Таким образом, лучше выбрать все режимы для каждого объекта (панель «Свойства» > «Размер и свойства» > «Показать в режиме»). Помните, что режимы некоторых объектов выбираются автоматически.

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


Базовые вычисления с числовыми переменными: «Кальк...
Создание электронных игр: кроссворд «Названия фрук...

Читайте также: