16 мин. на чтение (слов - 3116)

Как создать электронную игру «Поиск сокровищ»

«Поиск сокровищ» известна как одна из популярных игр, которые любят многие люди. Сегодня рассмотрим подробную инструкцию по созданию этой компьютерной игры с помощью ActivePresenter 7.

Описание электронной игры «Поиск сокровищ»

Правила игры

Нажмите кнопку «Старт», чтобы начать игру. Ваша задача состоит в том, чтобы привести лодку из первоначального положения в конечную точку на карте сокровищ. Чтобы достичь этого, необходимо ответить на четыре вопроса, соответствующие четырем сундукам, расположенным на пути.

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

Как создать игру «Поиск сокровищ»

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

Слайды приветствия, завершения и поздравления не займут много времени, так как они не имеют слишком много взаимодействий. Много времени уйдет на слайды списка вопросов. Наряду со встроенными действиями этот слайд использует код JavaScript для управления поведением лодки, сундуков и т. д.

Короче говоря, чтобы создать эту игру необходимо:

  1. Подготовить внешние изображения и аудиофайлы.
  2. Создать четыре слайда: «Начало», «Список вопросов», «Конец игры» и «Поздравление».
  3. Создать четыре слайда вопросов.
  4. Создать случайный порядок вопросов.
  5. Заставить работать слайд списка вопросов с помощью событий и действий.
  6. Заставить работать кнопки с помощью событий и действий.
  7. Экспортировать игровой проект.

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

Шаг 1: создание шаблона вопроса

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

В этой игре понадобится изображение для фона:

  • слайда приветствия;
  • слайда списка вопросов;
  • слайда с четырьмя вопросами;
  • слайда завершения игры;
  • слайда поздравления.

И еще несколько изображений: сундук с сокровищами, лодка и мешок с золотом.

Подготовьте несколько внешних звуковых файлов для использования на слайдах поздравления и завершения игры. Чтобы вставить звуковые файлы в слайды, перейдите на вкладку «Аннотации», нажмите «Аудио» и выберите «Из файла...».

Шаг 2: создание четырех слайдов – «Начало», «Список вопросов», «Конец игры» и «Поздравление»

В этом большом шаге создаются и оформляются четыре слайда.

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

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

После создания слайдов добавьте эффекты перехода к слайдам, делая их более привлекательными.

1. Создание нового проекта

Чтобы создать новый проект, на начальной странице щелкните «Пустой проект». Новый проект имеет один пустой слайд по умолчанию. Вставьте еще три.

2. Вставка изображений в четыре слайда

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

Чтобы вставить изображение, на вкладке «Аннотации» щелкните «Изображение».

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

Кроме того, не забудьте вставить аудиофайлы на слайды начала и конца игры.

3. Изменение состояния изображения сундука на слайде списка вопросов

Каждый сундук – это объект, который после одного правильного ответа превращается в мешок с золотом. Мешок с золотом указывает на выигрыш. Чтобы это произошло, отредактируйте состояние объекта изображения сундука, затем используйте действие Выполнить JavaScript для отображения состояния. Вторая задача будет обсуждаться в шаге 5.

Для редактирования состояний изображения камеры выполните следующие действия:

Шаг 1: откройте панель «Состояния объекта».

Выберите изображение сундука, откройте вкладку «Вид» и щелкните «Состояния объекта».

Шаг 2: создайте новое состояние.

Щелкните «Изменить состояния» и нажмите кнопку «Добавить состояние». Назовите вновь созданное состояние Выигрыш.

Шаг 3: измените изображение для состояния «Выигрыш».

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

Шаг 4: нажмите кнопку «Закончить изменение состояний», чтобы сохранить изменения.

Дополнительные сведения см. Как работать с состояниями объектов.

4. Создание кнопок для слайдов

На этом этапе вы создадите кнопку «Старт» для слайда приветствия, затем кнопку «Играть снова» для перезапуска игры и слайда поздравления. Вставьте объект «Кнопка», затем добавьте к ней анимацию, чтобы она качалась при наведении на нее курсора мыши.

Шаг 1: вставка кнопки.

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

Шаг 2: добавление анимации к кнопкам.

Чтобы добавить анимацию к кнопке, откройте вкладку «Анимация» и выберите тип анимации. В этом примере используется эффект акцента «Качка».

Шаг 3: повторение эффекта анимации.

Можно указать, сколько раз эффект анимации будет повторяться. Для этого щелкните правой кнопкой мыши панель объектов анимации на шкале времени и выберите параметры анимации. В появившемся диалоговом окне выберите пункт «До конца слайда» в списке «Повтор».

5. Создание эффекта искр для слайда поздравления

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

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

Шаг 1: вставьте объект четырехконечной звезды (вкладка «Аннотации» > «Фигуры» > «Звезды»), затем измените его цвет на белый (панель «Свойства» > «Стиль и эффекты» > «Заливка»).

Шаг 2: скопируйте и вставьте объект, чтобы создать больше звезд. Не забудьте изменить их размер.

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

Шаг 5: на недавно добавленной шкале времени добавьте анимации к звездным объектам (откройте вкладку «Анимации» > выберите акцент «Пульс»).

Шаг 6: повторите эффект анимации (см. выше эффект анимации кнопки, чтобы узнать, как это сделать).

Дополнительные сведения см. Использование нескольких шкал времени

6. Добавление эффектов перехода к слайдам

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

Для этого выберите слайды, перейдите на вкладку «Переходы» и выберите один из галереи эффектов.

Шаг 3: создание четырех слайдов вопросов

В игре используются всего четыре вопроса: два «Выбора ответа», один «Верно/Неверно» и один «Несколько ответов». Они используют один шаблон, который создадите с помощью шаблона слайдов. Поможет макет вопроса, особенно когда проект имеет много вопросов. Один макет может быть применен к любому количеству вопросов. Также определите количество баллов для каждого правильного ответа, количество попыток, которые могут сделать пользователи, и т. д.

1. Создание макета вопроса

Выполните следующие действия, чтобы создать макет для всех вопросов:

Шаг 1: откройте главный вид (на вкладке «Вид» щелкните «Шаблон слайда»).

Шаг 2: выберите макет вопроса шаблона слайда и измените фоновое изображение для него. Используйте подготовленное изображение (вкладка «Аннотации» > «Изображение»).

Шаг 3: настройте макет вопроса, чтобы придать четырем вопросам единый внешний вид.

Для этого измените размер заполнителя вопроса и заголовка макета. Разместите их на противоположных сторонах макета.

Шаг 4: настройте стиль сообщения.

В главном представлении настройте сообщения, изменив их форму и цвет.

Вопросы в игре используют три из пяти готовых сообщений: «Правильно», «Неправильно» и «Подсказка». Остальные три удалите. Кроме того, можно изменить цвет заливки и линии сообщений на вкладке «Формат» или на вкладке «Стиль и эффекты» панели «Свойства».

Шаг 5: настройте кнопку отправки ответа, изменив ее цвет, форму и надпись.

Нажмите кнопку «Отправить» в правом нижнем углу макета, перейдите на вкладку «Формат» и используйте один из быстрых стилей. Можно создать собственный стиль.

Шаг 6: добавьте дополнительные действия к кнопке ответа.

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

Для этого нажмите кнопку и откройте раздел «События и действия» на панели «Свойства», добавьте действие Воспроизведение аудио: Mouse Click 2» в событие По щелчку. Можно использовать другой встроенный звук или импортировать аудиофайл.

Дополнительные сведения см. Использование событий и действий в ActivePresenter 7.

Шаг 7: закройте главный вид (откройте вкладку «Шаблон слайда» и нажмите кнопку «Закрыть шаблон»).

После этого заголовок вопроса обновится. Можно увидеть изменения в списке макетов из нового слайда или галереи макетов.

2. Создание слайда с четырьмя вопросами

В игр четыре вопроса. Давайте сначала создадим вопрос с множественным выбором. Вы сделаете то же самое для трех других.

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

Теперь выполните следующие действия в обычном представлении.

Шаг 1: в заполнителе вопроса макета вопроса нажмите кнопку с вопросом «Выбор ответа». После этого введите варианты ответа и надписи в текстовых полях.

Шаг 2: определите правильный ответ на вопрос. Чтобы задать любой вариант правильного ответа на вопрос, дважды щелкните переключатель рядом с ним.

См. следующие статьи, чтобы узнать больше о типах вопросов, которые будете использовать в игре:

Шаг 3: перемешайте варианты ответов.

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

Для этого откройте панель «Свойства», перейдите в раздел «Оценивание и отчетность» и выберите параметр «Случайный ответ».

Шаг 4: определите баллы для каждого правильного ответа.

Установите количество баллов, которые пользователи получают за каждый правильный ответ. Можно установить любое значение из списка. Чтобы определить значение, в разделе «Оценивание и отчетность» панели «Свойства» выберите значение из списка «Баллы».

Шаг 5: определите количество попыток, которые могут сделать пользователи.

В ActivePresenter можно позволить пользователям делать столько попыток, сколько они хотят, пока они не дадут правильный ответ. В этом примере установим значение 1. Это означает, что пользователи должны выбрать правильные ответы с первого раза.

Чтобы задать максимальное число попыток, выберите значение в поле «Попытки».

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

Шаг 6: сделайте паузу в игре, пока пользователи не предпримут каких-либо действий.

Для этого в разделе «Общее» вкладки «Взаимодействия» щелкните «Пауза презентации для ожидания ввода данных пользователем».

3. Установка взаимодействий для вопросов

В зависимости от того, как пользователи отвечают на вопрос, происходит одно из трех событий (Если правильно, Если неправильно и Если не завершено). Чтобы это произошло, добавьте события и действия к вопросу, выбрав ответ на вопрос > панель «Свойства» > вкладка «Взаимодействия» > «События и действия».

Случай № 1: пользователи правильно отвечают на вопрос:

  • появляется сообщение «Правильно»;
  • игра возвращает пользователей к слайду списка вопросов, где они могут выбрать следующий вопрос.

События и действия следующие:

Случай № 2: пользователи отвечают на вопрос неправильно:

  • появляется сообщение «Неправильно»;
  • игра заканчивается, пользователям переходят на слайд, где они могут снова запустить игру.

События и действия:

Случай № 3: пользователи нажимают кнопку «Ответить» без выбора каких-либо параметров:

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

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

Шаг 4: случайный порядок вопросов

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

Сделайте следующее, чтобы рандомизировать вопросы:

1. Откройте набор слайдов (на вкладке «Вид» и выберите «Наборы слайдов»).

2. Переместите четыре слайда в набор. Для этого щелкните правой кнопкой мыши четыре слайда > «Переместить слайд в» > выберите созданный набор (Набор 1).

3. Вставьте четыре случайных слайда.

Откройте вкладку «Слайд» и щелкните «Случайный слайд». Поместите случайные слайды под слайдом списка вопросов и над слайдом завершения игры.

Шаг 5: заставьте слайд списка вопросов работать с помощью событий и действий

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

1. Добавьте события и действия к изображениям сундуков

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

После правильного ответа на первый вопрос пользователи получают количество баллов, которое установили ранее (1 балл за правильный ответ). Для первого вопроса они пока не имеют никакого смысла. События и действия для первого сундука показаны на скриншоте ниже:

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

2. Добавьте анимацию к изображениям лодки и сундука

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

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

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

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

Шаг 3: анимация лодки.

Выберите объект, перейдите на вкладку «Анимации» и выберите эффект анимации. В этом примере создаем пользовательский путь, чтобы заставить лодку переместиться к первому сундуку.

Дополнительные сведения см. Как добавить и изменить пути движения объекта.

Шаг 4: добавление анимации сундука.

Сразу после того, как лодка достигает сундука, сундук раскачивается. Эффект начинается с того момента, когда заканчивается анимация лодки. Следовательно, добавьте анимацию сундука, повторите эффект раскачивания, пока пользователи не нажмут на сундук.

Чтобы это произошло, щелкните правой кнопкой мыши панель объектов анимации на шкале времени > «Настройки анимации» > «Повтор» > «До конца слайда».

Можно повторить шаги с 1 по 4, описанные выше, чтобы оживить другие лодки и сундуки. Дополнительно см. Анимация объектов в ActivePresenter 7.

3. Добавление событий и действий на слайд

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

Шкала времени Вопрос 2 воспроизводится, если пользователи правильно отвечают на первый вопрос и получают 1 балл. Шкала времени Вопрос 3 воспроизводится, если они дают правильные ответы на первые два вопроса. Короче говоря, условием для правильного выполнения действия является количество набранных пользователями баллов.

Кроме того, вам нужно выполнить действие JavaScript, чтобы активировать только один сундук за раз при деактивации других. Скопируйте и вставьте следующий код JavaScript в окно «Выполнить JavaScript»:

var score = prez.variable('apQuizScore');
        if (score !== 0) {
            for (var i = 1; i <= 3; ++i) { 
                var objectName = 'Вопрос ' + i;
                var objectImage = 'Лодка ' + i;
                var objectImageHide = 'Лодка '+ (i-1);
                var object = prez.object(objectName);
                     if (i == score) {
                     prez.object (objectImage).show();
                     prez.object (objectImageHide).hide();
                     object.state('Выигрыш');    
                     prez.object('Вопрос ' + (i-1)).state('Выигрыш');
                     prez.object('Вопрос ' + (i-2)).state('Выигрыш');
                    } 
                
                }}
       else {
           prez.startTimeline ('Вопрос 1');
           object.state('Normal');
                
      } 

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

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

Для этого выполните следующие действия:

Шаг 1: вставьте интерактивный объект (в этом примере используется кнопка).

Шаг 2: сделайте кнопку видимой, изменив ее заливку и цвет линии (без заливки, без линии).

Шаг 3: заставьте кнопку приостановить презентацию, чтобы дождаться отклика от пользователя.

Выберите кнопку, перейдите на вкладку «Взаимодействия» панели «Свойства», нажмите отметку «Пауза презентации для ожидания ввода данных пользователем».

Шаг 6: заставить работать кнопки с помощью событий и действий

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

1. Кнопка «Старт»

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

2. Кнопка «Играть снова»

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

См. Введение в переменные ActivePresenter 7 и Добавление и использование переменных, чтобы узнать больше о переменных в ActivePresenter.

Шаг 7: экспорт игрового проекта

Наконец, экспортируйте проект «Поиск сокровищ» в HTML5. Почему HTML5? Потому что это конечный результат для проектов, которые требуют взаимодействия с пользователями (компьютерная игра, онлайн-тесты, моделирование программного обеспечения и т. д.). При этом используются стандарты HTML5, которые позволяют пользователям просматривать и взаимодействовать с контентом в интернете (в режимах «Обучение», «Практика» и «Тест»). Кроме того, при необходимости можно экспортировать проект в пакеты LMS (SCORM или xAPI).

Выполните следующие шаги:

1. На вкладке «Экспорт» щелкните «HTML5».

2. Выберите любой из четырех режимов экспорта проекта, кроме демонстрационного.

3. Скройте панель инструментов плеера и боковую панель, чтобы отключить лишние элементы.

Для этого на вкладке «Экспорт» щелкните «Настройки плеера». После этого на вкладке «Общее» выполните следующие действия:

  • «Боковая панель» > «Позиция» > «Нет»;
  • «Панель инструментов» > снимите чекбокс «Показать панель инструментов».

Кроме того, не забудьте применить изменение к выбранному режиму.


Новые возможности в релизе ActivePresenter 7.5
Создание руководства по технологии производства: к...

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