Статьи

Золотые яйца: создайте флеш-игру с помощью вызовов API Twitter

В этом уроке я расскажу вам об использовании API REST Twitter и о том, как вы можете использовать его для создания игры, которая не только отображает твиты в реальном времени, но и использует их для создания объектов, с которыми игрок может взаимодействовать.

Прежде чем читать этот учебник, я рекомендую ознакомиться с сессиями AS3 101 от Дрю Кеппл , Пониманием JSON , Пониманием игрового цикла — Basix , Сессиями Greensock Tweening Platform и, возможно, некоторыми учебниками по дизайну и анимации .


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


Прежде чем мы начнем, нам нужно настроить некоторые активы; мы создаем игру, так что вы можете сделать так, чтобы она выглядела красиво :-). Нам понадобятся кнопки для Новой игры, Инструкций, Меню и Твита (для оценки игрока); нам также понадобится фон, несколько птиц, золотое яйцо и треснувшее яйцо. Помимо всего этого нам понадобятся некоторые дополнительные ресурсы, такие как сообщение о загрузке, сообщение Tweet, кнопка «Follow Me», окно инструкций и панель, где вы будете отображать свои Tweets.

Шаг 1: Давайте подготовим активы


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

Нам понадобится Main класс, который станет нашим основным мозгом, именно он будет связан с вашим FLA-файлом. Помимо этого нам понадобится класс Game который будет обрабатывать игровую логику игры и выполнять большую часть работы. Поскольку в играх есть события, которые вы должны слушать, мы создадим класс с именем GameEvent который мы будем использовать для связи с нашим основным классом. Нам также понадобится класс Egg который будет содержать данные твита, тип яйца, которым он будет, и некоторые другие вещи, которые нам понадобятся позже. И нам понадобится класс TweetHolder который мы будем связывать с мувиклипом в библиотеке, чтобы мы могли TweetHolder и добавлять некоторые свойства в твит, который мы покажем. Все эти классы перейдут в нашу папку com которая должна находиться рядом с нашим FLA-файлом.

Main.as

Game.as

GameEvent.as

Egg.as

TweetHolder.as


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

Шаг 3: Расположить меню

Для этого урока мы будем использовать TweenLite от GreenSock, которую вы можете скачать ЗДЕСЬ (нажмите AS3, загрузите содержащийся в нем ZIP-файл, затем разархивируйте его и скопируйте файл с именем greensock.swc в папку, где находится ваш FLA-файл).

Если у вас есть файл SWC рядом с вашим FLA, нам нужно будет связать его с нашим FLA, поэтому нажмите «Изменить» на панели «Свойства» вашего файла:

Шаг 4: Подготовьте TweenLite

Затем нажмите «Настройки» рядом с ActionScript 3.0, затем «+» и введите «./greensock.swc».

Шаг 4: Подготовьте TweenLite

После этого мы готовы начать работать в нашем Главном классе.


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

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


Поскольку вы являетесь разработчиком и хотите, чтобы пользователи связывались с вами, кнопка «Следуй за мной» звучит как хорошая идея — поэтому давайте заставим вашу кнопку отправлять пользователей в ваш профиль в Twitter; мы сделаем это так:

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


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

Сначала давайте добавим прослушиватель кликов к кнопке « New Game , которая есть у нас на стадии, а затем давайте создадим функцию, которая очистит сцену.

Далее мы возьмем все наши объекты со сцены в функции startGame

Теперь нам нужно добавить кнопку меню и текстовое поле оценки, мы будем вызывать кнопку меню menu_btn и оценка будет называться score_text и это будет динамическое текстовое поле. Не забудьте вставить шрифт; для этого я добавлю Verdana Bold, нажав кнопку «Вставить» и добавив символы, которые нам понадобятся.

Шаг 7: Очистка сцены для новой игры

Затем добавьте оба объекта в верхней части сцены, но из этого, так как они нам не нужны в нашем первом кадре, мы добавим две строки, которые будут анимировать их оба в нашей функции startGame :

Теперь давайте дадим пользователю возможность вернуться в меню, добавив функцию к кнопке меню, которую мы только что добавили; мы назовем это goToMenu и мы назовем его, когда пользователь нажмет на menu_btn . Для этого мы добавим прослушиватель событий в нашу функцию запуска игры:

Теперь функция, которая заставит вещи вернуться:

Пока что проект должен выглядеть так:

На самом деле мы не удалили заголовок; мы оставим это там, пока мы показываем сообщение о том, что твиты загружаются.


Мы почти готовы запустить наш игровой движок, но как часть этого мы должны иметь возможность общаться с нашим Main классом. Мы сделаем это с событиями, поэтому давайте возьмем наш GameEvent и добавим тип событий, которые мы хотим слушать:

  1. Когда игра закончилась: GAME_ENDED .
  2. Когда счет изменился: SCORE_CHANGE .
  3. Когда загруженные твиты будут готовы к использованию: TWEETS_READY .
  4. Когда твиты не могут быть загружены: TWEETS_ERROR .

Итак, со всем, что сейчас отсортировано, нам нужно отредактировать наш класс GameEvent

С нашим меню и созданными событиями мы наконец готовы запустить наш игровой движок


Чтобы заставить нашу игру работать должным образом, нам нужно создать ее экземпляр, добавить слушателей событий и уничтожить их, когда они больше не нужны; для этого мы добавим некоторый код в функцию startGame функцию goToMenu и новую созданную нами функцию с именем endGame (эта функция убьет наш экземпляр игры и удалит слушателей событий).

Сначала давайте отредактируем нашу функцию «начать игру»; мы добавим следующие строки в конец конца функции startGame .

Поскольку мы используем переменную с именем game, нам нужно объявить ее в начале нашего класса как частную переменную:

В нашей функции goToMenu мы добавим вызов нашей функции endGame, которую мы создадим, и добавим следующий код:

С этим нам будет хорошо пойти и поработать над нашим классом Game


Сначала нам нужно объявить некоторые переменные, которые мы будем использовать позже:

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

Шаг 11: Начало нашей игры

И мы endGame в нашей функции endGame :

Пришло время начать веселье и создать настоящую игру! Для этого нам понадобятся твиты. Основная идея этого руководства заключается в загрузке твитов, и для этого мы будем использовать API поиска из Twitter .

Я рекомендую вам пойти и проверить это, но для этой игры мы просто воспользуемся некоторыми из возможных вариантов; мы сделаем два запроса, а затем добавим игру на сцену, поэтому мы не добавили ее при создании, сначала загрузим твиты для золотых яиц в нашей функции Game и добавим прослушиватель событий, когда он будет добавлен, где мы начинаем игру:

Для этого запроса мы использовали только lang который является языком для твитов, которые мы хотим получить в соответствии с кодом ISO 639-1 ; q которое является основным словом (также может быть фразой — просто убедитесь, что кодируете URL), которое мы ищем; и rpp — это количество твитов, которые мы хотим получить. Если вы хотите найти более чем одну вещь, которую вы можете использовать OR , она все равно работает просто отлично, но ее нет на новой странице документации, поэтому я не могу сказать, или они прекратят ее поддерживать (то же самое для NOT которая становится удобным, когда вы получаете слишком много спам твитов).

Для получения дополнительной информации об этом перейдите на страницу «использования поиска» в Twitter .

Когда наши твиты для золотых яиц загружены, мы загрузим твиты для «взломанных яиц» в функцию loadCrackedEggs а затем отправим событие, loadCrackedEggs что все готово для запуска игры:

Как только мы загрузим JSON, мы преобразуем его в переменную объекта, которую мы объявим в начале нашего кода — чтобы понять JSON, я рекомендую вам прочитать Understanding JSON — чтобы преобразовать его в объект, мы будем использовать as3corelib из Mike Chambers и его функция JSON.decode , которая будет возвращать объект со всем содержимым файла JSON.


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

Шаг 11: Начало нашей игры

Тогда нам нужно будет работать в нашем классе:

Это все, что мы сделаем с нашим классом Egg.

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


Может случиться, что твиты не могут быть загружены, поэтому рекомендуется делать что-то, а не просто позволить этому случиться, поэтому каждый раз, когда мы загружали твиты, мы добавляли прослушиватель IOErrorEvent, настроенный на вызов функции с именем errorHandler . Эта функция просто отправит событие ошибки, чтобы наш класс Main мог его обработать:

Затем в нашем FLA мы добавим новый кадр в наш видеоклип loadingTweets, где вы можете добавить свое сообщение, чтобы пользователь знал, что что-то пошло не так, и переместиться в другой кадр, чтобы он не показывал то, что не предполагалось к. Мы отобразим это в классе errorHandler который мы установили в качестве прослушивателя для TWEET_ERROR.

Шаг 12: Обработка ошибок

Когда твиты готовы, мы можем их инициализировать; для этого мы создадим нашу функцию addGame в нашем классе Main, и в этой функции мы добавим нашу игру на сцену, чтобы сработала функция init в нашем классе Game, мы addGame наш addGame анимацию пользователь должен был знать, что твиты загружаются.

Затем в нашей функции init для класса Game мы создадим нашу первую птицу и добавим гнездо (которое игрок будет использовать для ловли яиц) и черную полосу (которая будет содержать твиты, пойманные пользователем) — так что давайте создать эти клипы.

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

Шаг 13: Инициализация нашей игры
Шаг 13: Инициализация нашей игры

Теперь, когда все готово, нам нужно будет поработать над нашими птицами, яйцами, нашими твитами и основным циклом этой игры.


Наши птицы будут бросать яйца, поэтому они очень важны! Итак, давайте создадим их и оживим их. В нашей функции createBird мы создадим птицу, анимируем ее и решим, когда будет создана следующая птица; кроме того, мы установим скорость птицы (чтобы немного разнообразить уровень сложности, они будут двигаться быстрее по ходу игры).


Теперь, когда вокруг нас летают птицы, нам нужно, чтобы они releaseEgg яйца, поэтому в нашей функции releaseEgg мы сделаем это:


Со временем сложность изменится; мы уже сделали вызов, чтобы это произошло в нашей функции init , так что теперь мы сделаем это:


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


Когда время истечет, мы дадим нашему пользователю возможность видеть и делиться своим счетом, для этого мы создадим мувиклип, в котором будет указан результат и предоставлена ​​возможность поделиться им:

Шаг 18: Показ счета

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


Как только пользователь нажимает на tweet_btn нашего сообщения, он или она будут перенаправлены на страницу в Твиттере с заранее написанным сообщением, чтобы они могли поделиться своим счетом. Для этого мы будем использовать другую форму вызова API Twitter — API Tweet button — для получения дополнительной информации посетите страницу Twitter .

Для этого урока мы будем использовать только три переменные: текст; URL, которым мы хотим поделиться; и «via», который является своего рода мостом, который мы используем, в данном случае Activetuts +.

URL-адрес, на который нам нужно отправить нашего пользователя, — https://twitter.com/share , там пользователь сможет войти в систему и написать в Твиттере о нашей игре. К этому URL мы должны добавить переменные следующим образом:

Есть некоторые другие переменные, которые вы можете добавить к своему URL, такие как рекомендуемые учетные записи и язык, но мы не будем использовать их, потому что они предназначены для кнопки Tweet, поэтому они бесполезны для этого урока. Но я рекомендую вам проверить их, так как они могут пригодиться когда-нибудь.


Иногда, когда вы создаете слишком много переменных и объектов, ваше приложение может работать медленно, поэтому мы используем сборщик мусора и сообщаем ему, что собирать и что оставить для использования. Как только яйца сошли со сцены, это означает, что они нам больше не нужны (то же самое относится и к нашим птицам), поэтому стоит избавиться от них. Мы сделаем это с помощью функции, killObjectкоторую мы вызывали уже несколько раз, и мы будем вызывать ее позже. Эта функция очистит этот объект и избавится от него; это займет спрайт, так как мы просто собираемся убить экранные объекты.

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


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

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


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

Шаг 22: Создание объектов Tweet

Когда вы создаете свою графику, не забудьте вставить шрифт, который вы используете.

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

Когда мы закончим с этим классом, все должно быть готово к работе.


Я надеюсь, что вы, ребята, сочтете этот урок полезным и найдете отличные способы применить то, чему научили! Для другого примера использования этого вы можете посетить домашнюю страницу моего сайта на JsCampos.com , или проверить некоторые другие хорошие игры, которые используют Twitter, такие как Tweet Land и Tweet Hunt .

Спасибо за ваше время, и я надеюсь, что вам понравилось, любые отзывы хорошо приняты