В этом уроке я расскажу вам об использовании API REST Twitter и о том, как вы можете использовать его для создания игры, которая не только отображает твиты в реальном времени, но и использует их для создания объектов, с которыми игрок может взаимодействовать.
Прежде чем читать этот учебник, я рекомендую ознакомиться с сессиями AS3 101 от Дрю Кеппл , Пониманием JSON , Пониманием игрового цикла — Basix , Сессиями Greensock Tweening Platform и, возможно, некоторыми учебниками по дизайну и анимации .
Окончательный результат предварительного просмотра
Давайте посмотрим на конечный результат, к которому мы будем стремиться:
Шаг 1: Давайте подготовим активы
Прежде чем мы начнем, нам нужно настроить некоторые активы; мы создаем игру, так что вы можете сделать так, чтобы она выглядела красиво :-). Нам понадобятся кнопки для Новой игры, Инструкций, Меню и Твита (для оценки игрока); нам также понадобится фон, несколько птиц, золотое яйцо и треснувшее яйцо. Помимо всего этого нам понадобятся некоторые дополнительные ресурсы, такие как сообщение о загрузке, сообщение Tweet, кнопка «Follow Me», окно инструкций и панель, где вы будете отображать свои Tweets.
Шаг 2: Давайте создадим несколько классов
В этом уроке мы будем работать с некоторыми классами, если вы не знакомы с классами, вам следует взглянуть на урок Как использовать класс документа во Flash .
Нам понадобится Main
класс, который станет нашим основным мозгом, именно он будет связан с вашим FLA-файлом. Помимо этого нам понадобится класс Game
который будет обрабатывать игровую логику игры и выполнять большую часть работы. Поскольку в играх есть события, которые вы должны слушать, мы создадим класс с именем GameEvent
который мы будем использовать для связи с нашим основным классом. Нам также понадобится класс Egg
который будет содержать данные твита, тип яйца, которым он будет, и некоторые другие вещи, которые нам понадобятся позже. И нам понадобится класс TweetHolder
который мы будем связывать с мувиклипом в библиотеке, чтобы мы могли TweetHolder
и добавлять некоторые свойства в твит, который мы покажем. Все эти классы перейдут в нашу папку com
которая должна находиться рядом с нашим FLA-файлом.
Main.as
пакет com { импортировать flash.display. *; // Расширяет MovieClip, потому что это будет связано с нашим FLA-файлом открытый класс Main расширяет MovieClip { публичная функция Main () { // Здесь мы добавим наш код 🙂 } } }
Game.as
пакет com { импортировать flash.display. *; Открытый класс Игра расширяет Sprite { публичная функция Game () { // Здесь мы добавим логику для нашей игры } } }
GameEvent.as
пакет com { импортировать flash.events. *; // Это будет наше пользовательское событие, поэтому оно будет расширять открытый класс GameEvent расширяет Event { // Здесь мы будем хранить параметры, которые мы получим, чтобы мы могли использовать их позже, поэтому они общедоступны общедоступные параметры var: String; // Здесь мы добавляем параметры, так как позже будем использовать их для обмена информацией между классами. публичная функция GameEvent (type: String = "По умолчанию", params: String = null, bubbles: Boolean = false, отменяемый: Boolean = false) { // Нам нужно инициализировать наш супер, чтобы мы получили все его свойства супер (типа, пузырьки, отменяемые); } } }
Egg.as
пакет com { импортировать flash.display. *; // Это будет наше пользовательское событие, поэтому оно будет расширять открытый класс Egg расширяет Event { публичная функция Egg () { // Здесь мы добавим логику для наших яиц } } }
TweetHolder.as
пакет com { импортировать flash.display. *; // Это будет наше пользовательское событие, поэтому оно будет расширять Event открытый класс TweetHolder расширяет Event { публичная функция TweetHolder () { // Здесь мы добавим логику для нашего TweetHolder } } }
Шаг 3: Расположить меню
Пришло время начать веселье! Разместите все активы нашего меню, поместите новую кнопку игры на сцену, создайте название для своей игры, добавьте инструкции, а также кнопку инструкции. Как только вы все это сделаете на сцене, назначьте имя экземпляра каждому из них, так как нам нужно будет обратиться к ним в нашем главном классе.
Шаг 4: Подготовьте TweenLite
Для этого урока мы будем использовать TweenLite от GreenSock, которую вы можете скачать ЗДЕСЬ (нажмите AS3, загрузите содержащийся в нем ZIP-файл, затем разархивируйте его и скопируйте файл с именем greensock.swc в папку, где находится ваш FLA-файл).
Если у вас есть файл SWC рядом с вашим FLA, нам нужно будет связать его с нашим FLA, поэтому нажмите «Изменить» на панели «Свойства» вашего файла:
Затем нажмите «Настройки» рядом с ActionScript 3.0, затем «+» и введите «./greensock.swc».
После этого мы готовы начать работать в нашем Главном классе.
Шаг 5: Отображение инструкций
Чтобы показать инструкции к игре, нам нужно будет уже создать мувиклип, который будет содержать инструкции с именем экземпляра instructions_content
и кнопку, которая вызовет его с именем экземпляра instructions_btn
. Кроме того, мы потратим время, чтобы все стало действовать как кнопка.
Мы будем использовать только одну функцию для отображения и скрытия инструкций, поэтому нам понадобится переменная, которая сообщит нам, отображаются ли инструкции; мы будем называть эту переменную, showingInstructions
.
пакет com { // импортируем то, что нам нужно для анимации объектов import com.greensock.TweenLite; импорт com.greensock.easing. *; импортировать flash.display. *; импортировать flash.events. *; открытый класс Main расширяет MovieClip { // переменная, которую мы будем использовать, чтобы узнать, отображаются ли инструкции // устанавливается в false, поскольку первая позиция инструкций будет вне кадра приватная переменная показывающая инструкции: Boolean = false; публичная функция Main () { this.addEventListener (Event.ADDED, init); } приватная функция init (e: Event): void { this.removeEventListener (Event.ADDED, init); // устанавливаем объекты как кнопки и получаем указатель инструкция_бтн.buttonMode = true; инструкция_контент.close_btn.buttonMode = true; // мы будем вызывать функцию инструкцияHandler, когда Инструкции_btn.addEventListener (MouseEvent.CLICK, инструкцияHandler); инструкция_контент.close_btn.addEventListener (MouseEvent.CLICK, инструкцияHandler); } инструкции приватной функцииHandler (e: MouseEvent): void { // мы спрашиваем, показываются ли инструкции если (showingInstructions) { // если они есть, мы хотим отправить их из кадра и сообщить игре, которая не показывается TweenLite.to (инструкция_контент, .4, {y: 600, облегчение: Cubic.easeIn}); showInstructions = false; } еще { // если это не так, мы оживим его на сцене и скажем, что он показывается TweenLite.to (инструкция_контент, .4, {y: 364, облегчение: Cubic.easeOut}); showInstructions = true; } } } }
Шаг 6: Кнопка «Следуй за мной»
Поскольку вы являетесь разработчиком и хотите, чтобы пользователи связывались с вами, кнопка «Следуй за мной» звучит как хорошая идея — поэтому давайте заставим вашу кнопку отправлять пользователей в ваш профиль в Twitter; мы сделаем это так:
приватная функция init (e: Event): void { this.removeEventListener (Event.ADDED, init); // устанавливаем объекты как кнопки и получаем указатель инструкция_бтн.buttonMode = true; followMe_btn.buttonMode = true; инструкция_контент.close_btn.buttonMode = true; // мы будем вызывать функцию инструкцияHandler, когда Инструкции_btn.addEventListener (MouseEvent.CLICK, инструкцияHandler); инструкция_контент.close_btn.addEventListener (MouseEvent.CLICK, инструкцияHandler); followMe_btn.addEventListener (MouseEvent.CLICK, followMeHandler); }
Нам нужно будет создать наш обработчик, который будет называться followMeHandler
как мы писали, когда объявляли слушателя:
// эта функция получит объект MouseEvent, который мы назовем «е» приватная функция followMeHandler (e: MouseEvent): void { // Вам нужно изменить jscamposcr для вашего имени пользователя, Twitter позаботится обо всем остальном navigateToURL (новый URLRequest ("http://www.twitter.com/jscamposcr"), "_blank"); }
Шаг 7: подготовить сцену к новой игре
Когда у вас есть меню, инструкции и кнопка «следуй за мной», пришло время испачкать руки и начать тяжелую работу — но сначала нам нужно подготовить область с подходящими объектами, чтобы начать игру. Это мы сделаем, переместив все объекты меню, включая инструкции.
Сначала давайте добавим прослушиватель кликов к кнопке « New Game
, которая есть у нас на стадии, а затем давайте создадим функцию, которая очистит сцену.
приватная функция init (e: Event): void { this.removeEventListener (Event.ADDED, init); // настроить слушателей, позиции, видимость и т. д. newGame_btn.buttonMode = true; инструкция_бтн.buttonMode = true; followMe_btn.buttonMode = true; menu_btn.buttonMode = true; инструкция_контент.close_btn.buttonMode = true; newGame_btn.addEventListener (MouseEvent.CLICK, startGame); Инструкции_btn.addEventListener (MouseEvent.CLICK, инструкцияHandler); инструкция_контент.close_btn.addEventListener (MouseEvent.CLICK, инструкцияHandler); followMe_btn.addEventListener (MouseEvent.CLICK, followMeHandler); }
Далее мы возьмем все наши объекты со сцены в функции startGame
приватная функция startGame (e: * = null): void { TweenLite.to (newGame_btn, .3, {x: -200, ease: Quad.easeIn}); TweenLite.to (инструкция_бтн, .3, {x: 500, облегчение: Quad.easeIn}); TweenLite.to (followMe_btn, .3, {y: 650, ease: Quad.easeIn}); // нам нужно будет скрыть инструкции, если они не выполняются если (showingInstructions) { TweenLite.to (инструкция_контент, .3, {y: 600, облегчение: Quad.easeIn}); showInstructions = false; } }
Теперь нам нужно добавить кнопку меню и текстовое поле оценки, мы будем вызывать кнопку меню menu_btn
и оценка будет называться score_text
и это будет динамическое текстовое поле. Не забудьте вставить шрифт; для этого я добавлю Verdana Bold, нажав кнопку «Вставить» и добавив символы, которые нам понадобятся.
Затем добавьте оба объекта в верхней части сцены, но из этого, так как они нам не нужны в нашем первом кадре, мы добавим две строки, которые будут анимировать их оба в нашей функции startGame
:
приватная функция startGame (e: * = null): void { TweenLite.to (newGame_btn, .3, {x: -200, ease: Quad.easeIn}); TweenLite.to (инструкция_бтн, .3, {x: 500, облегчение: Quad.easeIn}); TweenLite.to (followMe_btn, .3, {y: 650, ease: Quad.easeIn}); TweenLite.to (menu_btn, .3, {y: 0, задержка: .2, облегчение: Quad.easeOut}); TweenLite.to (score_text, .3, {y: 10, задержка: .2, облегчение: Quad.easeOut}); если (showingInstructions) { TweenLite.to (инструкция_контент, .3, {y: 600, облегчение: Quad.easeIn}); showInstructions = false; } }
Теперь давайте дадим пользователю возможность вернуться в меню, добавив функцию к кнопке меню, которую мы только что добавили; мы назовем это goToMenu
и мы назовем его, когда пользователь нажмет на menu_btn
. Для этого мы добавим прослушиватель событий в нашу функцию запуска игры:
приватная функция startGame (e: * = null): void { TweenLite.to (newGame_btn, .3, {x: -200, ease: Quad.easeIn}); TweenLite.to (инструкция_бтн, .3, {x: 500, облегчение: Quad.easeIn}); TweenLite.to (followMe_btn, .3, {y: 650, ease: Quad.easeIn}); menu_btn.buttonMode = true; menu_btn.addEventListener (MouseEvent.CLICK, goToMenu); TweenLite.to (menu_btn, .3, {y: 0, задержка: .2, облегчение: Quad.easeOut}); TweenLite.to (score_text, .3, {y: 10, задержка: .2, облегчение: Quad.easeOut}); если (showingInstructions) { TweenLite.to (инструкция_контент, .3, {y: 600, облегчение: Quad.easeIn}); showInstructions = false; } }
Теперь функция, которая заставит вещи вернуться:
приватная функция goToMenu (e: MouseEvent): void { // отключаем прослушиватель событий menu_btn.removeEventListener (MouseEvent.CLICK, goToMenu); // мы возвращаем все наши активы TweenLite.to (title, .3, {y: 91, delay: .2, ease: Quad.easeOut}); TweenLite.to (newGame_btn, .3, {x: 162, задержка: .2, облегчение: Quad.easeOut}); TweenLite.to (инструкция_бтн, .3, {x: 162, задержка: .2, облегчение: Quad.easeOut}); TweenLite.to (followMe_btn, .3, {y: 500, задержка: .2, облегчение: Quad.easeOut}); TweenLite.to (menu_btn, .3, {y: -35, ease: Quad.easeIn}); TweenLite.to (score_text, .3, {y: -30, ease: Quad.easeIn}); }
Пока что проект должен выглядеть так:
На самом деле мы не удалили заголовок; мы оставим это там, пока мы показываем сообщение о том, что твиты загружаются.
Шаг 8: Создайте необходимые события
Мы почти готовы запустить наш игровой движок, но как часть этого мы должны иметь возможность общаться с нашим Main
классом. Мы сделаем это с событиями, поэтому давайте возьмем наш GameEvent
и добавим тип событий, которые мы хотим слушать:
- Когда игра закончилась:
GAME_ENDED
. - Когда счет изменился:
SCORE_CHANGE
. - Когда загруженные твиты будут готовы к использованию:
TWEETS_READY
. - Когда твиты не могут быть загружены:
TWEETS_ERROR
.
Итак, со всем, что сейчас отсортировано, нам нужно отредактировать наш класс GameEvent
пакет com { импортировать flash.events. *; открытый класс GameEvent расширяет Event { public static const GAME_ENDED: String = "Игра окончена"; public static const SCORE_CHANGE: String = "Изменение счета"; public static const TWEETS_READY: String = "Tweets Ready"; public static const TWEETS_ERROR: String = "Ошибка твитов"; общедоступные параметры var: String; публичная функция GameEvent (type: String = "По умолчанию", params: String = null, bubbles: Boolean = false, отменяемый: Boolean = false) { супер (типа, пузырьки, отменяемые); параметры = параметры; } } }
С нашим меню и созданными событиями мы наконец готовы запустить наш игровой движок
Шаг 9: настройка игрового экземпляра
Чтобы заставить нашу игру работать должным образом, нам нужно создать ее экземпляр, добавить слушателей событий и уничтожить их, когда они больше не нужны; для этого мы добавим некоторый код в функцию startGame
функцию goToMenu
и новую созданную нами функцию с именем endGame
(эта функция убьет наш экземпляр игры и удалит слушателей событий).
Сначала давайте отредактируем нашу функцию «начать игру»; мы добавим следующие строки в конец конца функции startGame
.
игра = новая игра (); game.addEventListener (GameEvent.GAME_ENDED, endGame); game.addEventListener (GameEvent.SCORE_CHANGE, changeScore); game.addEventListener (GameEvent.TWEETS_READY, addGame); game.addEventListener (GameEvent.TWEETS_ERROR, errorHandler);
Поскольку мы используем переменную с именем game, нам нужно объявить ее в начале нашего класса как частную переменную:
частная вар игра: игра;
В нашей функции goToMenu мы добавим вызов нашей функции endGame, которую мы создадим, и добавим следующий код:
приватная функция endGame (e: GameEvent = null): void { // Это сбросит счет в случае, если пользователь начинает новую игру Score_text.text = "Оценка: 0"; // Это убьет нашу игру с помощью функции killGame, которую мы создадим внутри нашего игрового класса game.killGame (); // Мы удалим всех наших слушателей из нашего игрового экземпляра game.removeEventListener (GameEvent.GAME_ENDED, endGame); game.removeEventListener (GameEvent.SCORE_CHANGE, changeScore); game.removeEventListener (GameEvent.TWEETS_READY, addGame); game.removeEventListener (GameEvent.TWEETS_ERROR, errorHandler); // Если игра была добавлена, то мы ее исчезнем, а затем удалим со сцены и из памяти. if (game.addedToStage) { TweenLite.to (game, .4, {alpha: 0, onComplete: (function () {game.parent.removeChild (game); game = null})}); } // Если нет, то мы просто убьем его еще { игра = ноль; } }
С этим нам будет хорошо пойти и поработать над нашим классом Game
Шаг 10: Загрузка твитов
Сначала нам нужно объявить некоторые переменные, которые мы будем использовать позже:
// Это будет хранить информацию наших твитов после их загрузки приватная переменная goldenEggsData: Object; приватная переменная crackedEggsData: Object; // Это будет держать наши яйца частный var goldenEggsArray: Array = new Array (); приватная переменная crackedEggsArray: Array = new Array (); // Количество использованных яиц закрытый var goldenEggsCount: int = 0; приватная переменная crackedEggsCount: int = 0; // Скорость яйца, пока они падают частная переменная скорость: int = 4; // Это гнездо, которое мы будем использовать для ловли яиц частное гнездо var: Nest = новое гнездо (); // Это будет держать яйца, которые находятся на сцене закрытые яйца: Array = new Array (); // Это будет держать твиты, которые отображаются приватная переменная твитыOnScreen: Array = new Array (); // Это самоочевидно закрытый счет var: Number = 0; частная сложность: число = 3; Закрытая переменная закончилась: Boolean = false; // Это скажет, если ключ хранится private var rightKey: Boolean = false; приватная переменная leftKey: Boolean = false; // мувиклип из библиотеки приватная переменная tweetsBar: TweetsBar = new TweetsBar (); // Это говорит о том, что игра была добавлена на сцену public var AddedToStage: Boolean = false;
Затем нам нужно сообщить пользователю, что происходит, поэтому мы добавим к сцене видеоклип и loadingTweets
его loadingTweets
; это говорит о том, что твиты загружаются. Мы startGame
его в нашу startGame
из нашего основного класса
приватная функция startGame (e: MouseEvent): void { loadingTweets.x = 130; loadingTweets.y = 230; loadingTweets.alpha = 0; TweenLite.to (newGame_btn, .3, {x: -200, ease: Quad.easeIn}); TweenLite.to (инструкция_бтн, .3, {x: 500, облегчение: Quad.easeIn}); TweenLite.to (followMe_btn, .3, {y: 650, ease: Quad.easeIn}); TweenLite.to (loadingTweets, .3, {alpha: 1, delay: .2}); menu_btn.buttonMode = true; menu_btn.addEventListener (MouseEvent.CLICK, goToMenu); TweenLite.to (menu_btn, .3, {y: 0, задержка: .2, облегчение: Quad.easeOut}); TweenLite.to (score_text, .3, {y: 10, задержка: .2, облегчение: Quad.easeOut}); if (показывает инструкцию) { TweenLite.to (инструкция_контент, .3, {y: 600, облегчение: Quad.easeIn}); showInstructions = false; } игра = новая игра (); game.addEventListener (GameEvent.GAME_ENDED, endGame); game.addEventListener (GameEvent.SCORE_CHANGE, changeScore); game.addEventListener (GameEvent.TWEETS_READY, addGame); game.addEventListener (GameEvent.TWEETS_ERROR, errorHandler); }
И мы endGame
в нашей функции endGame
:
приватная функция endGame (e: GameEvent = null): void { Score_text.text = "Оценка: 0"; game.killGame (); game.removeEventListener (GameEvent.GAME_ENDED, endGame); game.removeEventListener (GameEvent.SCORE_CHANGE, changeScore); game.removeEventListener (GameEvent.TWEETS_READY, addGame); game.removeEventListener (GameEvent.TWEETS_ERROR, errorHandler); if (game.addedToStage) { TweenLite.to (game, .4, {alpha: 0, onComplete: (function () {game.parent.removeChild (game); game = null})}); } еще { игра = ноль; loadingTweets.alpha = 0; loadingTweets.x = 800; loadingTweets.y = 2300; } }
Пришло время начать веселье и создать настоящую игру! Для этого нам понадобятся твиты. Основная идея этого руководства заключается в загрузке твитов, и для этого мы будем использовать API поиска из Twitter .
Я рекомендую вам пойти и проверить это, но для этой игры мы просто воспользуемся некоторыми из возможных вариантов; мы сделаем два запроса, а затем добавим игру на сцену, поэтому мы не добавили ее при создании, сначала загрузим твиты для золотых яиц в нашей функции Game
и добавим прослушиватель событий, когда он будет добавлен, где мы начинаем игру:
публичная функция Game () { // загрузчик твитов var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, loadCrackedEggs); loader.addEventListener (IOErrorEvent.IO_ERROR, errorHandler); // создаем URL q = что мы ищем rpp = количество твитов, которое мы хотим // Если вы собираетесь использовать сложную строку в вашем URL, убедитесь, что вы используете функцию encodeURI («Ваша строка»), а затем добавьте ее в URL var url: String = "http://search.twitter.com/search.json?lang=en&q=golden%20eggs&rpp=50"; loader.load (новый URLRequest (url)); this.addEventListener (Event.ADDED, init); }
Для этого запроса мы использовали только lang
который является языком для твитов, которые мы хотим получить в соответствии с кодом ISO 639-1 ; q
которое является основным словом (также может быть фразой — просто убедитесь, что кодируете URL), которое мы ищем; и rpp
— это количество твитов, которые мы хотим получить. Если вы хотите найти более чем одну вещь, которую вы можете использовать OR
, она все равно работает просто отлично, но ее нет на новой странице документации, поэтому я не могу сказать, или они прекратят ее поддерживать (то же самое для NOT
которая становится удобным, когда вы получаете слишком много спам твитов).
Для получения дополнительной информации об этом перейдите на страницу «использования поиска» в Twitter .
Когда наши твиты для золотых яиц загружены, мы загрузим твиты для «взломанных яиц» в функцию loadCrackedEggs
а затем отправим событие, loadCrackedEggs
что все готово для запуска игры:
приватная функция loadCrackedEggs (e: Event): void { // Мы объявим эту переменную как частную переменную, чтобы мы могли хранить данные здесь goldenEggsData = JSON.decode (e.currentTarget.data); // загрузчик твитов var loader: URLLoader = new URLLoader (); loader.addEventListener (Event.COMPLETE, startGame); loader.addEventListener (IOErrorEvent.IO_ERROR, errorHandler); // создаем URL ors = что мы ищем rpp = количество твитов, которое мы хотим var url: String = "http://search.twitter.com/search.json?q=cracked%20eggs&lang=en&rpp=50"; loader.load (новый URLRequest (url)); }
Как только мы загрузим JSON, мы преобразуем его в переменную объекта, которую мы объявим в начале нашего кода — чтобы понять JSON, я рекомендую вам прочитать Understanding JSON — чтобы преобразовать его в объект, мы будем использовать as3corelib из Mike Chambers и его функция JSON.decode
, которая будет возвращать объект со всем содержимым файла JSON.
Шаг 11: Начало нашей игры
Для начала мы создадим два массива, которые будут содержать информацию о яйцах, и для этого нам понадобится наш класс Egg, который мы создали на шаге 2 ; в этом классе мы будем хранить некоторые данные и добавлять графику для наших яиц. Чтобы добавить графику, нам нужно будет экспортировать графику для яиц из библиотеки, чтобы использовать их в нашем коде следующим образом:
Тогда нам нужно будет работать в нашем классе:
пакет com { импортировать flash.display. *; импортировать flash.events. *; открытый класс Egg расширяет Sprite { // Здесь мы будем хранить тип яйца, чтобы использовать правильную графику открытый тип var: String; // Сохраняет текст строки общедоступный var твит: String; // Сохраняет имя пользователя автора твита public var user: String; // Сохраняет URL аватара пользователя public var userImg: String; публичная функция Egg () { this.addEventListener (Event.ADDED, init); } приватная функция init (e: Event): void { this.removeEventListener (Event.ADDED, init); // Здесь мы добавляем изображение, соответствующее типу яйца // Мы используем мувиклипы, которые мы экспортировали в нашу библиотеку if (type == "Golden Egg") { var goldenEgg: GoldenEgg = new GoldenEgg (); AddChild (goldenEgg); } еще { var crackedEgg: CrackedEgg = new CrackedEgg (); AddChild (crackedEgg); } } } }
Это все, что мы сделаем с нашим классом Egg.
Теперь мы будем работать в нашей функции startGame
. Здесь мы пройдемся по объекту, который содержит информацию наших твитов, затем для каждого загруженного твита мы создадим яйцо, дадим ему необходимую информацию, а затем добавим его в массив, чтобы мы могли использовать его позже.
приватная функция startGame (e: Event): void { crackedEggsData = JSON.decode (e.currentTarget.data); для (var i: int = 0; i <goldenEggsData.results.length; i ++) { var goldenEgg: Egg = new Egg (); goldenEgg.tweet = goldenEggsData.results [i] .text; goldenEgg.user = goldenEggsData.results [i] .from_user; goldenEgg.userImg = goldenEggsData.results [i] .profile_image_url; goldenEgg.type = "Золотое яйцо"; goldenEggsArray.push (goldenEgg); } для (var x: int = 0; x <crackedEggsData.results.length; x ++) { var crackedEgg: Egg = new Egg (); crackedEgg.tweet = crackedEggsData.results [x] .text; crackedEgg.user = crackedEggsData.results [x] .from_user; crackedEgg.userImg = crackedEggsData.results [x] .profile_image_url; crackedEgg.type = "Cracked Egg"; crackedEggsArray.push (crackedEgg); } dispatchEvent (new GameEvent (GameEvent.TWEETS_READY)); }
Шаг 12: Обработка ошибок
Может случиться, что твиты не могут быть загружены, поэтому рекомендуется делать что-то, а не просто позволить этому случиться, поэтому каждый раз, когда мы загружали твиты, мы добавляли прослушиватель IOErrorEvent, настроенный на вызов функции с именем errorHandler
. Эта функция просто отправит событие ошибки, чтобы наш класс Main мог его обработать:
приватная функция errorHandler (e: IOErrorEvent): void { dispatchEvent (new GameEvent (GameEvent.TWEETS_ERROR)); }
Затем в нашем FLA мы добавим новый кадр в наш видеоклип loadingTweets, где вы можете добавить свое сообщение, чтобы пользователь знал, что что-то пошло не так, и переместиться в другой кадр, чтобы он не показывал то, что не предполагалось к. Мы отобразим это в классе errorHandler
который мы установили в качестве прослушивателя для TWEET_ERROR.
приватная функция errorHandler (e: GameEvent): void { loadingTweets.gotoAndStop (2); }
Шаг 13: Инициализация нашей игры
Когда твиты готовы, мы можем их инициализировать; для этого мы создадим нашу функцию addGame
в нашем классе Main, и в этой функции мы добавим нашу игру на сцену, чтобы сработала функция init
в нашем классе Game, мы addGame
наш addGame
анимацию пользователь должен был знать, что твиты загружаются.
приватная функция addGame (e: Event): void { AddChild (игра); TweenLite.to (title, .3, {y: -200, ease: Quad.easeIn}); loadingTweets.alpha = 0; loadingTweets.x = 800; loadingTweets.y = 2300; }
Затем в нашей функции init
для класса Game мы создадим нашу первую птицу и добавим гнездо (которое игрок будет использовать для ловли яиц) и черную полосу (которая будет содержать твиты, пойманные пользователем) — так что давайте создать эти клипы.
Наше гнездо должно иметь графику и невидимый фрагмент ролика, который мы будем использовать для проверки столкновений с яйцами; черная полоса нуждается только в основном названии. Нам нужно будет экспортировать оба из них для использования в качестве AS.
приватная функция init (e: Event): void { this.removeEventListener (Event.ADDED, init); // Мы устанавливаем для нашей переменной значение true, чтобы наш класс Main знал, добавлен он или нет AddedToStage = true; // Установить позицию, альфа и анимацию для нашего объекта гнезда nest.x = 10; nest.y = 497; nest.alpha = 0; TweenLite.to (гнездо, .5, {alpha: 1}); AddChild (гнездо); // Добавить, положение и аномалию для панели твитов tweetsBar.x = 350; tweetsBar.alpha = 0; TweenLite.to (tweetsBar, .6, {alpha: 1}); AddChild (tweetsBar); // Это наш основной цикл, который позаботится о нашей игре и расскажет, что происходит stage.addEventListener (Event.ENTER_FRAME, updateGame); // Мы будем перемещать наше гнездо с помощью клавиш, поэтому нам нужно будет прослушивать события клавиатуры stage.addEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); stage.addEventListener (KeyboardEvent.KEY_UP, keyUpHandler); // Мы создадим нашу первую птицу, которая является началом настоящей игры createBird (); // Чтобы сделать эту игру немного интересной, мы изменим сложность нашей игры, когда пользователь играет в нее TweenLite.delayedCall (10, changeDifficulty); }
Теперь, когда все готово, нам нужно будет поработать над нашими птицами, яйцами, нашими твитами и основным циклом этой игры.
Шаг 14: Создание наших птиц
Наши птицы будут бросать яйца, поэтому они очень важны! Итак, давайте создадим их и оживим их. В нашей функции createBird
мы создадим птицу, анимируем ее и решим, когда будет создана следующая птица; кроме того, мы установим скорость птицы (чтобы немного разнообразить уровень сложности, они будут двигаться быстрее по ходу игры).
приватная функция createBird (): void { // Создать новый экземпляр Bird из нашей библиотеки var bird: Bird = новая птица (); // Это время, которое пройдет до того, как яйцо будет выпущено var time: Number = (Math.random () * 1.3) +. 5; // Мы разместим птицу вне сцены и в произвольной позиции Y, чтобы они выглядели немного более реальными bird.x = -100; bird.y = (Math.random () * 60) + 50; // Анимация птицы и уничтожение ее после того, как это сделано, анимация TweenLite.to (bird, 5, {x: 600, onComplete: killObject, onCompleteParams: [bird]}); AddChild (птица); если (! закончился) { // Мы должны сказать нашей птице отпустить яйца после определенного времени, которое будет случайным TweenLite.delayedCall (time, releaseEgg, [bird]); // Если игра не закончилась, нам нужно создать новую птицу, и в зависимости от сложности она придет быстрее TweenLite.delayedCall (Math.random () * затруднение, createBird); } еще { // Так как игра закончилась, нам не нужно никаких обновлений stage.removeEventListener (Event.ENTER_FRAME, updateGame); // Если игра закончилась, мы не хотим выпускать яйца, поэтому мы вызываем любые вызовы этой функции. TweenLite.killTweensOf (releaseEgg); // Кроме того, чтобы яйца не появлялись, мы удалим все яйца if (eggs.length> 0) { для (var i: int = 0; i <eggs.length; i) { killObject (яйцо [I]); eggs.shift (); } } // Мы оживим наше гнездо, так как больше яиц не будет поймано TweenLite.to (гнездо .6, {y: 700}); // Мы покажем счет и дадим пользователю возможность чирикать его showTweetScore (); } }
Шаг 15: Выпуск яиц
Теперь, когда вокруг нас летают птицы, нам нужно, чтобы они releaseEgg
яйца, поэтому в нашей функции releaseEgg
мы сделаем это:
приватная функция releaseEgg (b: Bird): void { var r: Number = Math.random (); вар яйцо: яйцо; // Здесь мы выбираем, будет ли наше яйцо золотым или треснувшим, давая немного больше шансов получить золотое яйцо если (r> 0,45) { // Если пользователь получает золотое яйцо, тогда нам нужно назначить одно яйцо из нашего массива золотых яиц и обновить счет egg = goldenEggsArray [goldenEggsCount]; goldenEggsCount ++; } еще { // Если пользователь получает взбитое яйцо, тогда нам нужно назначить одно яйцо из нашего массива взбитых яиц и обновить счет egg = crackedEggsArray [crackedEggsCount]; crackedEggsCount ++; } // Затем мы назначим положение птицы, которая собирается выпустить ее egg.x = bx; egg.y = by; // Затем мы добавляем его в stage и помещаем в наш массив eggs, чтобы он обновлялся AddChild (яйцо); eggs.push (яйцо); }
Шаг 16: Изменить сложность
Со временем сложность изменится; мы уже сделали вызов, чтобы это произошло в нашей функции init
, так что теперь мы сделаем это:
Закрытая функция changeDifficulty (): void { // Первая сложность установлена на 3, поэтому, если эта функция вызывается, мы изменим ее, чтобы больше птиц собрались вместе и ускорили яйца если (сложность == 3) { сложность = 2; скорость = 5; // Мы снова вызываем эту функцию, поэтому сложность снова меняется TweenLite.delayedCall (10, changeDifficulty); возвращение; } если (сложность == 2) { сложность = 1,5; скорость = 7; TweenLite.delayedCall (5, changeDifficulty); возвращение; } если (сложность == 1,5) { сложность = 1; скорость = 8; TweenLite.delayedCall (5, changeDifficulty); возвращение; } // Если сложность установлена в 1, это означает, что эта функция была вызвана несколько раз и что 30 секунд этой игры прошли, поэтому пришло время завершить эту игру если (сложность == 1) { закончено = правда; возвращение; } }
Шаг 17: Готовим вещи
Чтобы переместить наше гнездо, мы будем использовать нашу клавиатуру и наш цикл обновления, поэтому нам нужно сообщить нашей игре, какая клавиша нажимается, для этого мы уже создали пару переменных, но теперь мы добавим функциональность, которая заставит наше гнездо двигаться. Мы уже настроили пару прослушивателей событий — один для того, когда ключ не работает, а другой для того, когда он отпущен — в нашей функции init
, так что теперь давайте обработаем эти вызовы. Для этого нам нужно будет использовать коды клавиш, для получения дополнительной информации о тех, кого вы можете найти, в кратком совете по использованию кодов клавиш.
приватная функция keyDownHandler (e: KeyboardEvent): void { // Когда удерживается левая или правая клавиша, нам нужно установить ее значение в true // 37 = слева // 39 = вправо if (e.keyCode == 37) { leftKey = true; } if (e.keyCode == 39) { rightKey = true; } } приватная функция keyUpHandler (e: KeyboardEvent): пусто { // Когда отпускается левая или правая клавиша, нам нужно установить значение false // 37 = слева // 39 = вправо if (e.keyCode == 37) { leftKey = ложь; } if (e.keyCode == 39) { rightKey = ложь; } }
Шаг 18: Показ счета
Когда время истечет, мы дадим нашему пользователю возможность видеть и делиться своим счетом, для этого мы создадим мувиклип, в котором будет указан результат и предоставлена возможность поделиться им:
Не забудьте назначить имя экземпляра вашему динамическому текстовому полю и вставить шрифт, который вы хотите использовать. Когда ваша графика готова, мы готовы ее кодировать; для этого мы создадим функцию с именем showTweetScore
в которой мы создадим новый экземпляр этого showTweetScore
ролика, разместим его, добавим сообщение с оценкой и дадим возможность чирикать оценку.
приватная функция showTweetScore (): void { var tweetMessage: TweetMessage = new TweetMessage (); tweetMessage.x = 10; tweetMessage.y = 270; tweetMessage.message_text.text = "Вы только что набрали" + score.toString () + "Балл за золотые яйца!"; tweetMessage.embedFonts = true; AddChild (tweetMessage); TweenLite.from (tweetMessage, .6, {alpha: 0}); tweetMessage.tweet_btn.buttonMode = true; tweetMessage.tweet_btn.addEventListener (MouseEvent.CLICK, shareScore); }
Шаг 19: Поделиться баллом
Как только пользователь нажимает на tweet_btn
нашего сообщения, он или она будут перенаправлены на страницу в Твиттере с заранее написанным сообщением, чтобы они могли поделиться своим счетом. Для этого мы будем использовать другую форму вызова API Twitter — API Tweet button — для получения дополнительной информации посетите страницу Twitter .
Для этого урока мы будем использовать только три переменные: текст; URL, которым мы хотим поделиться; и «via», который является своего рода мостом, который мы используем, в данном случае Activetuts +.
URL-адрес, на который нам нужно отправить нашего пользователя, — https://twitter.com/share
, там пользователь сможет войти в систему и написать в Твиттере о нашей игре. К этому URL мы должны добавить переменные следующим образом:
частная функция shareScore (e: MouseEvent): void { // Нам нужно закодировать строку var url: String = encodeURI ("https://twitter.com/share?text= Я только что набрал" + score.toString () + "баллов в Золотых яйцах!, попробуйте победить меня! & url = http: // www .jsCampos.com / GoldenEggs & с помощью = envatoactive "); // Мы используем _blank, чтобы пользователь мог вернуться и продолжить играть в игру, не загружая ее снова navigateToURL (новый URLRequest (url), "_blank"); }
Есть некоторые другие переменные, которые вы можете добавить к своему URL, такие как рекомендуемые учетные записи и язык, но мы не будем использовать их, потому что они предназначены для кнопки Tweet, поэтому они бесполезны для этого урока. Но я рекомендую вам проверить их, так как они могут пригодиться когда-нибудь.
Шаг 20: Уничтожь объекты
Иногда, когда вы создаете слишком много переменных и объектов, ваше приложение может работать медленно, поэтому мы используем сборщик мусора и сообщаем ему, что собирать и что оставить для использования. Как только яйца сошли со сцены, это означает, что они нам больше не нужны (то же самое относится и к нашим птицам), поэтому стоит избавиться от них. Мы сделаем это с помощью функции, killObject
которую мы вызывали уже несколько раз, и мы будем вызывать ее позже. Эта функция очистит этот объект и избавится от него; это займет спрайт, так как мы просто собираемся убить экранные объекты.
приватная функция killObject (ob: Sprite): void { // Мы удалим их со сцены, а затем установим их в null, чтобы сборщик мусора позаботился об этом ob.parent.removeChild (О.Б.); ob = ноль; }
Помимо этих объектов нам может понадобиться избавиться от нашего игрового экземпляра; в этих случаях мы убьем всех слушателей, чтобы не тратить память ни на что.
публичная функция killGame (): void { если (addedToStage) { stage.removeEventListener (Event.ENTER_FRAME, updateGame); stage.removeEventListener (KeyboardEvent.KEY_DOWN, keyDownHandler); stage.removeEventListener (KeyboardEvent.KEY_UP, keyUpHandler); } }
Шаг 21: Наш игровой цикл
Наш цикл будет одной из самых важных функций; это позаботится обо всем, что находится на сцене, и будет следить за всем. Первое, что сделает эта функция, это передвинет наше гнездо, когда пользователь нажимает правую или левую клавишу, помня о том, что для этого должны быть ограничения, чтобы гнездо не выходило за пределы сцены.
приватная функция updateGame (e: Event): void { if (nest.x <250 && rightKey) { nest.x + = 5; } if (nest.x> 9 && leftKey) { nest.x - = 5; } }
Затем мы должны позаботиться о наших яйцах, проверить, были ли они пойманы или ушли со сцены. Для этого нам нужно добавить следующий код в нашу функцию:
// Сначала нужно проверить, есть ли яйца на сцене if (eggs.length> 0) { для (var i: int = 0; i <eggs.length; i ++) { // если есть, нам нужно переместить их, чтобы они упали яйца [i] .y + = скорость; // Затем нам нужно проверить, был ли какой-то из них перехвачен с помощью hitTestObject с невидимым объектом внутри нашего гнезда. if (eggs [i] .hitTestObject (nest.hit)) { // Если поймано одно яйцо, нужно добавить или вычесть точки if (eggs [i] .type == "Золотое яйцо") { оценка + = 100; } еще { оценка - = 80; } // Затем мы должны сообщить нашему Основному классу, чтобы текст оценки был изменен // Отправляем счет в качестве параметра GameEvent var gameEvent: GameEvent = new GameEvent (GameEvent.SCORE_CHANGE, score.toString ()); dispatchEvent (gameEvent); // Затем мы покажем Tweet в out bar, используя класс, который мы создадим // Мы присвоим значения этому твиту из яйца, поэтому этот класс имеет эти свойства var tweet: TweetHolder = new TweetHolder (); tweet.user_text.text = eggs [i] .user; tweet.tweet_text.text = eggs [i] .tweet; tweet.userImg = eggs [i] .userImg; твит.х = 5; tweetsBar.addChild (твит); // Если показывается слишком много твитов, нам нужно будет скрыть некоторые if (tweetsOnScreen.length> 0) { // сначала нам нужно освободить место для нового твита для (var a: int = 0; a <tweetsOnScreen.length; a ++) { tweetsOnScreen [a] .y = tweetsOnScreen [a] .y - tweet.height; } // если наш первый твит становится высоким, то нам нужно его затухать if (tweetsOnScreen [0] .y <100) { // Мы исчезаем и их мы удаляем со сцены и из нашего массива твитов TweenLite.to (tweetsOnScreen [0], .5, {alpha: 0, y: "- 100", onComplete: tweetsOnScreen [0] .parent.removeChild, onCompleteParams: [tweetsOnScreen [0]]}); tweetsOnScreen.shift (); } // Если новый твит слишком длинный, следующий может быть слишком высоким, поэтому нам нужно проверить и применить тот же процесс if (tweetsOnScreen [0] .y <100) { tweetsOnScreen [0] .parent.removeChild (tweetsOnScreen [0]); tweetsOnScreen.shift (); } } // После того, как все будет готово, нам нужно добавить наш новый твит в наш массив твитов tweetsOnScreen.push (твит); tweet.alpha = 1; tweet.y = 600 - tweet.height - 10; // после того, как мы закончим, пришло время убить это яйцо killObject (яйцо [I]); eggs.splice (i, 1); } // Если твит не был перехвачен и находится вне фрейма, то мы должны также уничтожить его еще, если (яйца [я] .y> 600) { killObject (яйцо [I]); eggs.splice (i, 1); } } }
Шаг 22: Создание твитов
Для наших объектов Tweet нам сначала понадобится объект из нашей библиотеки, который мы экспортируем и которому мы назначим новый класс для обработки передаваемых данных. Этот фрагмент ролика будет иметь резервное изображение на случай, если пользовательское изображение не может быть загружено, пробел для имени пользователя, который написал в Твиттере, и пробел для содержания Твита.
Когда вы создаете свою графику, не забудьте вставить шрифт, который вы используете.
Класс, который мы собираемся создать, заполнит данные, изменит размеры текстовых полей, загрузит аватар издателя и даст пользователю возможность нажать на твит и перейти в профиль издателя:
пакет com { импортировать flash.display. *; импортировать flash.events. *; импорт flash.net. *; открытый класс TweetHolder расширяет MovieClip { // Здесь будет храниться URL изображения, чтобы его можно было загрузить public var userImg: String; публичная функция TweetHolder () { this.addEventListener (Event.ADDED, init); } приватная функция init (e: Event): void { // Как и в нашем классе Game, мы сначала добавили данные, а затем добавили их на сцену this.removeEventListener (Event.ADDED, init); // Когда он добавлен, он изменяет размеры текстовых полей, поэтому пространство не теряется tweet_text.autoSize = "left"; hit.height = tweet_text.height + tweet_text.y; // Затем мы загружаем изображение и вызываем функцию, если изображение загружено или мы получаем ошибку var loader: Loader = новый Loader (); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, addImage); loader.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, onError); loader.load (новый URLRequest (userImg)); // Мы наконец сделаем этот твит кликабельным и добавим функцию для обработки кликов this.buttonMode = true; this.addEventListener (MouseEvent.CLICK, clickHandler); } приватная функция clickHandler (e: MouseEvent): void { // Чтобы перейти к профилю пользователя, нам просто нужно добавить имя пользователя в URL Twitter navigateToURL (новый URLRequest ("http://www.twitter.com/" + user_text.text), "_blank"); } приватная функция addImage (e: Event): void { // Когда изображение добавлено, нам нужно, чтобы оно выглядело гладким Растровое изображение (e.currentTarget.content) .smoothing = true; // изменить его размер e.currentTarget.content.height = 40; e.currentTarget.content.width = 40; // И добавить его в наш держатель твитов AddChild (e.currentTarget.content); } приватная функция onError (e: Event): void { // Если есть ошибка, нам просто нужно ее отловить // Поскольку у нас уже есть резервное изображение, нам не нужно ничего делать, если изображение не загружено trace («Невозможно загрузить изображение»); } } }
Когда мы закончим с этим классом, все должно быть готово к работе.
Вывод
Я надеюсь, что вы, ребята, сочтете этот урок полезным и найдете отличные способы применить то, чему научили! Для другого примера использования этого вы можете посетить домашнюю страницу моего сайта на JsCampos.com , или проверить некоторые другие хорошие игры, которые используют Twitter, такие как Tweet Land и Tweet Hunt .
Спасибо за ваше время, и я надеюсь, что вам понравилось, любые отзывы хорошо приняты