Как создать flash анимацию. Как создать флеш анимацию

Мы постоянно сталкиваемся с флеш-анимацией – в интернете и в телевизионных трансляциях. Создание простой флеш-анимации с помощью технологии Flash – довольно простая задача, так как Flash предлагает много полезных инструментов, которые упрощают весь процесс. Если вы хотите создать флеш-анимацию или мультфильм, то вы можете сделать его набросок всего за пару часов.

Шаги

Часть 1

Покадровая флеш-анимация

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

    • По умолчанию Flash воспроизводит 24 кадра в секунду (FPS). Это означает, что за одну секунду будут показаны 24 кадра, но не все из них должны быть обязательно разными. Вы можете изменить этот параметр (если хотите) на 12 кадров в секунду, но при 24 кадрах в секунду анимация будет воспроизводиться более «гладко».
  1. Установите Flash Professional. Есть множество программ для создания флеш-анимации, но наиболее мощной является Adobe Flash Professional CC. Вы можете бесплатно установить пробную версию этой программы или использовать другой продукт (если вы не хотите регистрироваться на Adobe Creative Cloud). Далее в этой статье описывается работа с Flash Professional.

    Так как покадровая анимация требует наличия нескольких изображений (которые немного отличаются друг от друга), то вам нужно создать эти изображения вручную. Для этого воспользуйтесь Adobe Flash Professional или нарисуйте изображения в любом графическом редакторе.

    • Если вы хотите, чтобы размер ваших изображений легко менялся без потери их качества, создавайте изображения в векторной, а не в растровой графике. Векторные изображения будут перерисовывать себя при изменении их размера (то есть вы избежите пикселизации или сглаживания). Растровые изображения – это традиционные изображения, например, фотографии, нарисованные картинки и так далее. При попытке увеличить такие изображения вы получите сильно искаженную картинку.
  2. Создайте первый кадр. При первом запуске Adobe Flash Professional вы увидите пустой холст (слой) и пустую временную шкалу. По мере добавления кадров временная шкала будет заполняться автоматически. Вы можете работать со слоями так же, как вы делаете это в Photoshop.

    • Прежде чем добавить изображение, создайте базовый фон вашей анимации. Переименуйте «Слой 1» в «Фон», а затем закрепите его. Создайте второй слой и назовите его как угодно. Это будет слой, на котором вы будете создавать анимацию.
    • Добавьте рисунок на холст первого кадра. Вы можете импортировать рисунок с вашего компьютера, или вы можете использовать инструменты для рисования, чтобы создать рисунок непосредственно в программе.
    • Первый кадр – это «ключевой» кадр. Ключевой кадр – это кадр, который включает изображение и образует основу («костяк») анимации. Вы будете создавать новый ключевой кадр каждый раз при изменении изображения.
    • Ключевые кадры на временной шкале обозначаются черной точкой.
    • Вы не нужен ключевой кадр в каждом последующем кадре. Создавайте ключевой кадр через каждые четыре-пять кадров, чтобы сделать хорошую анимацию.
  3. Преобразуйте изображение в символ. В этом случае вы сможете добавить изображение в кадр несколько раз. Это особенно полезно, если вам нужно быстро добавить несколько однотипных картинок в один кадр (например, рыбки в аквариуме).

    • Выделите рисунок. Щелкните правой кнопкой мыши по рисунку и выберите «Convert to Symbol» (Преобразовать в символ). Изображение будет добавлено в библиотеку, что упростит его использование в будущем.
    • Удалите рисунок. Не волнуйтесь - вы сможете добавлять его в кадр простым перетаскиванием из библиотеки. Так вы можете добавить в кадр один и тот же рисунок несколько раз.
  4. Добавьте пустые кадры. Если ваш первый ключевой кадр готов, вставьте пустые кадры, а затем приступайте к созданию второго ключевого кадра. Нажмите F5 (четыре или пять раз), чтобы добавить пустые кадры после первого ключевого кадра.

  5. Создайте второй ключевой кадр (после того, как вы добавили несколько пустых кадров). Есть два различных способа сделать это: вы можете скопировать существующий ключевой кадр и внести в него небольшие изменения, или вы можете создать пустой ключевой кадр и добавить в него новое изображение. Если вы используете рисунок, созданный в другой программе, воспользуйтесь вторым способом. Если вы вставляете изображение, созданное при помощи инструментов для рисования Adobe Flash Professional, воспользуйтесь первым методом.

    • Чтобы создать ключевой кадр, используя содержимое предыдущего ключевого кадра, нажмите F6. Чтобы создать пустой ключевой кадр, щелкните правой кнопкой мыши по последнему кадру на временной шкале и выберите «Insert Blank Keyframe» (Вставить пустой ключевой кадр).
    • После того как вы создали второй ключевой кадр, вам нужно внести изменения в его изображение, чтобы анимация «ожила». Если вы пользовались инструментами для рисования Adobe Flash Professional, выберите инструмент «Transform» (Преобразование), чтобы выделить элемент вашего рисунка (например, руку персонажа) и изменить его.
    • Если в каждый ключевой кадр вы вставляете новое изображение, убедитесь, что оно находится в нужном месте (согласно логической последовательности кадров).
  6. Повторите процесс. После создания двух ключевых кадров повторите процесс – добавьте несколько пустых кадров между каждыми ключевыми кадрами и убедитесь, что анимация будет проигрываться «гладко».

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

    • Выберите кадр, в котором рисунок будет преображаться.
    • Откройте панель свойств рисунка. Для этого нажмите F3.
    • Измените значения параметров в окне свойств рисунка. Например, вы можете изменить оттенок или цвет, добавить фильтры, изменить размер.
    • Вы также можете использовать инструмент «Free Transform» (Свободное преобразование), чтобы менять рисунок так, как вам угодно.
  8. Добавьте заключительные штрихи. Проверьте созданную анимацию, нажав Ctrl + Enter. Убедитесь, что рисунок (персонаж) правильно меняется и что анимация воспроизводится с правильной скоростью. Если анимация воспроизводится слишком быстро, уменьшите значение FPS или увеличьте продолжительность твина.

    • По умолчанию FPS равен 24, поэтому попробуйте уменьшить это значение до 12. Измените значение FPS на панели свойств. Однако при FPS = 12 анимация может воспроизводиться недостаточно плавно.
    • Чтобы изменить продолжительность твина, выберите слой, содержащий твин, и при помощи ползунка измените продолжительность твина. Если вы хотите удвоить продолжительность твина, передвиньте ползунок на 48 кадров. Не забудьте вставить фон в пустые кадры, чтобы фон не исчез посередине анимации. Для этого выберите фоновый слой, щелкните по последнему кадру анимации (на временной шкале), а затем нажмите F5.

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

С неделю назад, столкнулся с интересной проблемой: как вставить флеш-книгу, созданную с способом описанным вот в , в блог созданный на бесплатной платформе? Не знаете!

Казалось бы, все элементарно, закидываете, полученные в программе Flip PDF файлы на хостинг и выводите уже на нужной странице блога. Но… все это возможно, если у вас блог расположен на платном хостинге и у вас есть доступ к файлам сайта через файловый менеджер хостинга или ту же Filezilla.

А если доступа нет? Что делать в таком случае?

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

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

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

Решение довольно элементарное, но при этом удобное до безобразия, получаем что-то типа Ютуб, но только для книг.

Регистрация

Итак. Сервис называется issuu .

Повторюсь, сей сервис работает по принципу Ютуба, вы загружаете на него свои книги в формате PDF (можно и не только в PDF, но об этом дальше), а потом размещаете на страницах блога или ссылку или код.

Давайте посмотрим, как это все выглядит. Заходим по вышеуказанной ссылочке

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

Мне проще с социалок, потому у меня это вот так выглядит

Так, книжечку в PDF-формате подготовили? Нет?! Тогда вам вот или , создавайте PDF-файл и двигаемся дальше.

Можно и не PDF, данный сервис поддерживает довольно много форматов, но существуют и некоторые ограничения (смотрите в конце статьи технические требования).

Загрузка

Если у вас вдруг нет книги под рукой, то возьмите любой текст, я вот, например, взял свою . Сверстал в Word и сохранил в формате PDF.

Что-то я отвлекся, итак, загрузка книги. После регистрации, нажимаем кнопку Upload

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

Можете, кстати, разрешить скачивание книги, и тогда, при вставке в блог появиться ссылка на скачивание. Нажимаем Publish now и…

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

Так что, нажимайте кнопку My Publucation и ждите, когда ваша книга загрузиться на сервер Issuu.

Что-то у них там косяки какие-то были, и мне два дня пришлось ждать и смотреть вот на такое.

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

Вставка в блог

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

Заходим в My Publucation и видим список загруженных книг, ну или то количество книги, которое вы загрузили.

Настройка внешнего вида

Нажимаем левой кнопкой мыши на нужную книгу и выбираем

Видим окно настроек будущей флеш-книги

Настраиваете так, как вам интереснее:


После всех изменений нажимайте на кнопку Save style . Это обязательно, иначе у вас не откроется окно с кодом.

Кстати, можете поставить галочку Use on Tumblr, WordPress or similar, а можете и не ставить. Разницы в отображении книги я не заметил, там только сам код меняется, но у меня было, что после вставки кода “с галочкой” сама книга не отображалась на странице. Решайте сами.

Примеры

А теперь давайте посмотрим, как выглядит книга в разных ориентациях.

Альбомная ориентация (двухстраничный разворот)
Книжная ориентация
Разница, конечно существенная. В плане чтения удобнее книжная ориентация, а вот для рассматривания картинок – альбомная.

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

Заключение

Вот и все не хитрые действия необходимые для получения флеш-книги.

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

  • Максимальный размер загружаемых файлов: 500 страницы или 100 МБ.
  • Поддерживаемые форматы: PDF, Word (DOC, DOCX), PowerPoint (PPT), Open Office (ODS, ODP), WordPerfect (WPD), Rich Text Format (RTF), Star Office (SXI, SXW).
  • Документ должен корректно открывается в соответствующих приложениях(например, Acrobat Reader или Microsoft Word).
  • Файл не должен быть защищен паролем, не должен иметь ограничений доступа, печати и копирования
  • Разрешение изображения должно быть до 150 точек на дюйм. Более высокое разрешение будет уменьшено.

Вот как-то так.

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

Как вам сервис и статья? Жду в комментариях! Всем удачи! Пока!

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

Многие сайты с программным обеспечением содержат, помимо всего прочего, как раз такие конструкторы. Установка их на компьютер, как правило, не создает для пользователя особых проблем. Помните о том, что выбранную программ следует зарегистрировать и установить все необходимы изменения - тогда она будет вам служить верой и правдой, то есть бесперебойно. Большинство конструкторов игр сделаны на английском языке, но вы можете поискать русификатор или версию на русском. Часто в самих настройках есть окно, где можно установить родной для вас язык.

Как создать флеш игру: предварительная подготовка

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

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

Как создать флеш игру: работаем в конструкторе игр

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

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

Как создать флеш игру: доводим игру «до ума»

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

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

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

Как создать флеш игру, если есть желание, но нет знаний?

Тем многочисленным пользователям, которых так волнует этот вопрос, мы непременно хотим дать ответ. Помните, что любые знания не могут взяться из ниоткуда. Любое новое дело приходится с чего-то начинать. Со временем вы станете понимать, каких именно знаний вам не достает для создания игр. Вы начнете спрашивать советов, искать рекомендации, читать соответствующую литературу, благодаря чему станете продвигаться в своем умении все дальше и дальше. Не бойтесь нового, иначе вы никогда не достигнете желаемого. Удачи!

Многие из нас любят коротать время, играя в короткие флэш-игры, однако мало кто задумывается о том, как эти произведения виртуального искусства создаются. Между тем, данная технология существует еще с конца 90-х гг. Ее создателем является американская компания Macromedia (ныне Adobe Systems). Эта система активно применяется не только для разработки игр, но и в веб-мастеринге. Именно на флэше работают большинство сайтов в Интернете (хотя, некоторые уже переходят на HTML 5). Также детищем Adobe Systems является программа для создания приложений Macromedia Flash. Освоить ее может любой человек, даже далекий от компьютерных технологий. Однако, прежде чем мы начнем рассказывать о том, как делать игры, рассмотрим основные плюсы и минусы данной платформы.

Преимущества Adobe Flash

    Существует ряд достоинств, которые выделяют эту технологию на фоне других программных платформ и делают эту технологию превосходной для создания любительского игрового контента:
  • Во-первых, это скорость разработки. В отличие от других платформ, флеш позволяет создать любую игру буквально за час. Macromedia Flash не утруждает разработчика длинными кусками кода, предоставляя готовый инструмент для работы
  • Во-вторых, эта технология предлагает широкие возможности по работе с другим мультимедийным контентом. Вам не придется тратить время и силы на конвертацию одного файла в другой. Технология позволяет без лишних хлопот интегрировать в игру любые графические, звуковые и видеофайлы. Таким образом вы можете включить в работу над проектом художников, композиторов, монтажеров и создать по-настоящему уникальный продукт
  • В-третьих, Macromedia может похвастаться интуитивно понятным управлением и набором функций, значительно упрощающих работу в данной программной среде. Функция «drag and drop», командное меню Action Script, удобные рабочие панели и подсказки — все это делает работу с Adobe крайне приятной
  • В-четвертых, функционал платформы крайне удобен в плане подачи и распространения контента. Благодаря веб-расширению Adobe Player, приложения созданные на основе этой технологии легко размещаются на любом сайте, путем вставки на страницу простейшего кода. Также технология поддерживает создание автономных приложений в формате swf, которые легко воспроизводятся на любой операционной системе
  • Наконец, в-пятых. Эта технология позволяет создавать красочные игры с очень плавной анимацией и большой интерактивностью. Во многом, красота приложения зависит от таланта художника, а не программиста. Этим свойством данная платформа привлекает новичков, желающих попробовать себя в создании игр.

Недостатки Flash Player

    Как и любая другая программа, эта также имеет ряд минусов, о которых должен знать любой, кто хочет начать работать с флэш-приложениями:
  • Привязка к временной шкале. По сути, создание флэш-приложений представляет собой расположение последовательных кадров на временной шкале и дальнейшее их воспроизведение. Таким образом, эта система отлично подходит для создания анимаций. Однако нелинейности, которая является актуальной тенденцией для большинства игр, добиться не удастся.
  • Быстродействие. К сожалению, она не отличается особо быстрой работой. Поэтому на ее основе не создают кооперативные игры и аркады с большим количеством однотипных объектов.
  • Нет поддержки трехмерности. Существенным минусом является то, что технология флеш не поддерживает создание и использование трехмерных моделей и сцен окружения, а для большинства современных игр это является незыблемым стандартом. С другой стороны, браузерные онлайн игры используют преимущественно Flash, в связи с определенными ограничениями, характерными для сетевых игр.
  • Закрытость платформы. Adobe Macromedia не поддерживает добавление новых функций. В других программных средах (например в Java), можно добавить новые свойства. Здесь это могут сделать лишь сами разработчики. И несмотря на то, что они постоянно обновляют программу с учетом мнений пользователей, ее функционал продолжает оставаться ограниченным.

Несмотря на эти недостатки, флеш является незаменимой для создания небольших любительских мини-игр.

Как создать Flash-игру: основные аспекты

Создание анимаций на движке она напоминает детское увлечение, когда на уголках страниц по кадрам рисовался рисунок и при быстром перелистывании он начинал двигаться. Суть флэш-анимаций такая же — вы покадрово располагаете графические объекты на временной шкале и при воспроизведении они начинают двигаться. С играм все сложнее. Для того, чтобы создавать их, необходимо освоить язык программирования ActionScript 3.0. Изучить его можно при помощи специальных книг и учебников (например, книга Колина Мука «ActionScript 3.0 для Flash»). Также есть довольно много обучающих видео на YouTube. Достаточно проявить совсем немного старания, чтобы освоить эту программу. Сделав это, у вас вряд ли появятся вопросы о том, как написать flash-игру.

    При создании флэш-игры, важно придерживаться определенной структуре:
  • Титульное окно (заставка)
  • Правила
  • Окно окончания игры

Сначала идет «Титульное окно». Это заставка, которая должна произвести первоначальное впечатление на игрока. Здесь важно проявить весь свой художественный талант и фантазию.

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

«Фон» — это окружение, на котором будут находиться графические объекты. В отдельных случаях, объекты занимают весь экран. Игровой фон можно создать инструментами Adobe Macromedia, либо воспользоваться сторонними программами (например, Ogmo Editor превосходно справляется с созданием двухмерных сцен). Важно, чтобы он был тематическим и дополнял общую концепцию игры.

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

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

Программа для создания флеш-игр без знания языков программирования. Позволяет создавать игры из логических блоков и заранее подготовленных изображений.

Когда-то, наверное, уже пару лет назад, на нашем сайте появилась программа Game Maker , которая позволяла делать игры практически без знания какого-либо языка программирования!

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

Особенности программы

При помощи Stencyl можно создавать 2D-игры любых жанров, но больше всего движок программы «заточен» под различные стрелялки-бродилки. Структурно программа представляет собой целый комплекс инструментов, в котором можно, при желании, создать игру «с нуля» без использования сторонних приложений.

Закрываем всплывающее окошко с информацией о новой версии программы кнопкой «Close» или «Don’t show this again» (если не хотим видеть данное окошко при каждом запуске программы) и взамен него получаем следующее окно:

Здесь нам предлагают создать собственную учетную запись в сообществе разработчиков Stencyl. В принципе, аккаунт можно и не создавать (для этого жмем кнопку «Remind Me Later» внизу), но регистрация дает Вам возможность скачивать дополнительные шаблоны и действия с онлайн хранилища под названием StencylForge, поэтому не помешает:). Для заведения учетной записи нажимаем кнопку «Create an Account» и переходим к форме регистрации:

Здесь заполняем стандартные поля с вашим логином, паролем (два раза) и адресом электронной почты, после чего нажимаем кнопку «Sign Up». Если все пройдет удачно, то перед Вами наконец откроется интерфейс стартового окна программы.

Интерфейс стартового окна

Внешне рабочее пространство стартового окна Stencyl разделено на несколько зон:

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

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

  1. Открыть папку, в которой Stencyl хранит все ресурсы созданных игр и сами игры (кнопка «View Games Folder» в левом нижнем углу).
  2. Запустить обучающий курс по работе с программой («Start Crash Course» на зеленой панельке в правом нижнем углу). Кстати, там же рядом есть кнопка для скрытия предложения пройти обучение («Don’t show this again»).
  3. Открыть выделенную в данный момент игру из списка, что аналогично двойному клику по картинке игры («Open Game» в правом нижнем углу).

Для самостоятельного изучения возможностей Stencyl Вы можете пройти обучающий курс (и желательно бы его пройти), а также открыть одну из готовых игр, которая наиболее соответствует Вашей задумке, и посмотреть, как там все устроено. А я предлагаю изучить работу программы на примере создания игры о приключениях символа нашего сайта и его виртуального жителя - Фриды Бест!

С чего начать создание игры в Stencyl

Если Вы, перед тем как собрались создавать свою игру, посмотрели стандартные примеры игр на Stencyl, то могли заметить, что в основном все они довольно простые, одноэкранные и имеют вид сбоку. Мы же будем делать динамический шутер с видом сверху и стрельбой при помощи мышки! Все как в «больших» играх:).

Для своего проекта Вы можете изменить логику одного из готовых шаблонов, но мы не ищем простых путей и потому - только «с нуля», только «хардкор»:). Для этого нажмем на панели инструментов рабочей области (или в меню «File» - «Create New») кнопку «Create a New Game» и попадем в следующее окошко:

Здесь мы можем выбрать шаблон игры по жанру с уже подобранным заранее набором функций и действий для Вашего проекта. Однако мы будем создавать игру с чистого листа, поэтому выбираем пункт «Blank Game» и жмем кнопку «Next».

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

В поле «Name» нам нужно указать название нашей игры, а в разделе «Screen Size» задать размеры игрового поля, указав его ширину (Width) и высоту (Height) в пикселях. После этого жмем кнопку «Create» и переходим непосредственно к интерфейсу редактора игр:

По умолчанию перед нами открывается вкладка «Dashboard», на которой слева собрано все дерево ресурсов игры, а справа находится непосредственно рабочая область. Здесь, думаю, уместно будет внести кое-какие пояснения по структуре «дерева».

Оно состоит из четырех веток, первые две из которых, содержат стандартные наборы ресурсов (RESOURCES) и логики (LOGIC), а две последние опционально могут хранить загруженные вручную ресурс-паки (RESOURCE PACKS) и расширения (EXTENSIONS).

Главной веткой здесь является ветка RESOURCES. Она содержит следующие разделы:

  1. Actor Types - здесь хранятся спрайты всех игровых персонажей и настраиваются действия их анимации и взаимодействия между собой.
  2. Backgrounds - в этом разделе у нас могут храниться все необходимые фоны для игры. Причем фон может быть, как для заднего плана (background), так и для переднего (foreground), что позволяет накладывать фоны друг на друга, достигая, например, тем самым эффекта параллакса .
  3. Fonts - раздел, в который мы можем загружать различные красивые шрифты для создания оригинальных надписей. Однако, стоит учесть, что Stencyl может работать только с английским набором символов, поэтому для добавления русских букв файл шрифта, нам нужно заменить ими какие-нибудь из латинских символов.
  4. Scenes - место для создания и редактирования уровней игры. Именно здесь мы можем задать внешний вид любого этапа и разместить всех персонажей, бонусы и другие игровые элементы.
  5. Sounds - соответственно хранилище всех звуков, использованных в игре.
  6. Tilesets - специальная ветка в которой хранятся тайлы - специальные спрайты, которые мы можем использовать для построения игровых уровней.

Создание и настройка тайлов

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

Создаем первую сцену - создаем персонажа - создаем врагов - создаем бонусы - создаем остальные этапы

Чтобы создать сцену в Stencyl нужно нарисовать ее внешний вид в ветке Scenes. Однако, для того, чтобы рисовать, нам нужно сначала иметь блоки, которыми можно «рисовать». Эти блоки в программе имеют название тайлов (tiles) и хранятся в разделе Tileset:

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

Для начала нам нужно создать новый набор тайлов (кнопка «Create New» в разделе Tilesets), после чего мы увидим окно, как на скриншоте выше. Для загрузки изображения нам нужно нажать кнопку «Choose Image» и выбрать в открывшемся окне Проводника заранее подготовленный файл с нужной картинкой (-ами).

Когда изображение загрузится, зададим ему параметры разбивки и размеры по ширине и высоте, после чего (если все правильно отображается) можно добавлять изображение в набор нажатием кнопки «Add».

Для каждого изображения (тайла) в матрице можно настраивать параметры взаимодействия с игровыми персонажами и предметами. Для этого нужно выделить нужный тайл и получить доступ к следующему окну:

В верхней части правой панели откроется раздел «Collision Bounds» (границы столкновений). Здесь мы можем выбрать произвольную форму, обозначающую границы взаимодействия нашего объекта с игровыми персонажами. По умолчанию у всех тайлов стоит параметр «Square» (квадрат), который делает тайл полностью непроходимым и твердым. Если же Вам нужно сделать тайл «прозрачным» для персонажей (например, пол), то достаточно задать параметр «No Collisions».

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

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

Отрисовка сцены в Stencyl

После того, как набор тайлов сформирован, логично перейти к следующему шагу - формированию из добавленных изображений готового игрового пространства. Сделать это можно, нажав кнопку «Create New» в разделе Scenes. После нажатия кнопки мы попадем в окно настроек сцены:

Здесь нам обязательно нужно в поле «Name» задать уникальное название нашей сцене, указать размеры (ширина и высота в тайлах (по умолчанию) или пикселях), а также опционально (то есть, по собственному желнию) задать фоновой цвет для новой сцены. Жмем «Ok» и попадаем в редактор уровня:

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

Первым делом рисуем фон нашей рабочей области. Для этого на правой панели активируем вкладку «Palette» а на ней вкладку «Tiles» и выбираем нужный тайл из представленного перечня. Затем на левой панели выбираем инструмент «Карандаш» (Pencil) и рисуем выбранным тайлом нужные области.

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

Управлять слоями можно при помощи кнопок под панелью «Layers». Здесь имеются кнопки для создания, удаления, перемещения и переименования слоев. Кроме того, любой слой можно скрыть или отобразить, нажав на кнопку в виде глаза справа от имени слоя.

Создание персонажей

После того, как у нас создана первая сцена настало время «заселить» ее различными игровыми персонажами. В Stencyl они зовутся «актерами» и хранятся, соответственно, в разделе «Actor Types». Создаются актеры по одному и тому же принципу, поэтому рассмотрим мы этот процесс на примере создания главной героини нашей игры - Фриды.

Чтобы добавить нового актера достаточно зайти в вышеупомянутый раздел Actor Types и нажать там кнопку «Create New». Нас уже привычно снова спросят о том, как мы хотим назвать новый игровой объект, после чего перед нами появится окно редактирования анимации персонажа:

Здесь в левой части выводится список добавленных анимаций актера (по умолчанию пустой кадр «Animation 0»), а в правой находятся инструменты добавления и настройки этих самых анимаций.

Выбираем пустую анимацию (или добавляем новую кликом по кнопке с плюсом внизу) и кликаем в правой части по полю «Click here to add a frame». После этого откроется окошко добавления изображений, которое похоже на аналогичное окно для добавления новых тайлов в набор. Нажимаем кнопку «Choose image», выбираем нужное изображение и настраиваем его разбивку и размеры (если нужно).

Когда все настроено, жмем кнопку «Add» в правой нижней части окна добавления - анимация должна отобразится в виде превью в левой секции:

Теперь нам осталось только настроить скорость смены кадров (двойной клик на любом из кадров) и некоторые дополнительные параметры, типа, названия (Name) анимации (очень пригодится для сложных проектов), цикличности (Looping) воспроизведения (по умолчанию активно), синхронизации и базовой точки (Origin Point) происхождения спрайта (по умолчанию - центр).

На нижней панели инструментов в правой секции мы обнаружим ряд кнопок. Они позволяют:

  • добавить новые кадры в анимацию (Import Frames);
  • редактировать выбранный кадр во внешнем редакторе (Edit Frame (External));
  • создать кадр во внешнем редакторе (Create Frame (External));
  • редактировать кадр во встроенном редакторе (Edit Frame);
  • удалить кадр (Remove Frame);
  • копировать кадр (Copy Frame);
  • вставить кадр (Paste Frame);
  • переместиться на кадр назад (Move Back) или вперед (Move Forward).

Настройка параметров и поведения персонажей

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

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

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

Для начала уменьшим область вокруг Фриды до размеров только ее тела. Здесь нужно учесть, что двигать область мышкой мы не можем, а для настроек используются четыре числовых параметра в секции «Current Shape». Вначале мы задаем сдвиг области по горизонтали (от левого края) и вертикали (от верха), а затем указываем новые ширину и высоту области столкновений.

Ниже есть еще несколько параметров, объединенных в секцию «Physical Properties». Здесь мы сталкиваемся с галочкой «Is a Sensor?» и понятием групп.

Если активировать флажок «сенсора», то выделенная область перестанет быть физическим объектом: персонаж или его часть станет как-бы «прозрачной» для различных преград, но в то же время сохранит возможность запускать какие-либо действия при определенных условиях.

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

Теперь, для чего нужны группы… Предположим, что у нашего персонажа в руках не бластер, а меч, которым он (точнее она:)) рубит в капусту врагов (кстати в исходнике у Фриды есть лазерный клинок;)).

Задача состоит в том, чтобы при касании к врагу мечом, враг погибал, но если мы промазали, и супостат задел Фриду, то у нее отнималась какая-то доля энергии. А главная проблема здесь то, что анимация удара у нас, по сути, является картинкой, на которой одновременно присутствует и Фрида, и меч…

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

По умолчанию у нас существует только одна область, которая соответствует самому персонажу («Same as Actor Type»). Однако при помощи инструментов рисования над основной рабочей областью мы можем создать новые виртуальные объекты и задать для них группу при помощи кнопки «Edit Groups».

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

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

Я для примера выбрал поведение «8 Way Movement», которое подразумевает передвижение актера по кругу в любую сторону. Теперь выбираем добавленное действие в списке слева и в правой части мы сможем настроить его параметры.

Добавление актеров на сцену и тестирование уровня

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

Возвращаемся в редактор созданной ранее сцены и вновь активируем палитру (Palette), но теперь вместо тайлов, включим вкладку «Actors» (Актеры). Перед нами появится список созданных ранее персонажей, которых мы сможем добавить на сцену при помощи инструмента «Карандаш»:

Главная героиня у нас одна, поэтому достаточно всего одного нажатия карандашом, чтобы добавить ее на сцену. И теперь наступил момент истины - первое тестирование! Чтобы запустить предварительную компиляцию проекта достаточно нажать кнопку «Test Scene» в правом верхнем углу вкладки с нашей сценой. Спустя некоторое время (первая компиляция всегда длится дольше) мы сможем полюбоваться своими трудами во флеш-плеере:

Помимо самого плеера с игрой сбоку у нас отображается окошко логов работы игры. С их помощью мы можем достаточно быстро найти неполадки в работе и попытаться их исправить.

Как видим, двигать Фриду в разных направлениях мы уже можем, но сама сцена остается неподвижной и стоит наше героине выйти за край видимой части сцены, как она исчезает… Непорядок:). Решить проблему можно, добавив Фриде поведение «Camera Follow» или настроив нужные параметры при помощи событий.

Также, нелишним было бы заменить стандартный курсор на что-то более подходящее, например, прицел. Это мы можем реализовать, добавив нового актера в виде прицела, убрав у него область столкновения и прикрепив к сцене при помощи стандартного поведения «Custom Mouse Cursor»:

Система событий в Stencyl

Простые игры в Stencyl можно создавать при помощи одних только стандартных поведений (Behaviors), однако, если нам требуется что-то нестандартное, то тут уже придется подумать над использованием событий, которые настраиваются для актеров и сцен в разделе «Events»:

По сути, поведения (Behaviors) тоже строятся на базе событий, но они имеют еще и визуальный интерфейс, что упрощает редактирование. Здесь же мы имеем дело непосредственно с функциональными блоками, которые выполняют те или иные действия.

Окно событий делится на три секции:

  1. В левой секции находится список событий и кнопки для управления (создания/удаления/перемещения) ими. Для добавления события нам нужно нажать кнопку «Add Event», после чего выбрать нужную группу в выпадающем списке и указать конкретную нужную нам функцию. Справа от созданного события имеется галочка, которая позволяет нам при необходимости деактивировать его.
  2. В правой секции мы имеем список всех доступных действий, сгруппированный в 10 разделов, каждый из которых включается соответствующей кнопкой. Для большего удобства действия в каждом разделе рассортированы по тематическим вкладкам и имеют свой уникальный цвет. Внизу здесь есть еще три вкладки. По умолчанию активна вкладка «Palette» (палитра), на которой и располагаются списки действий. Вторая вкладка - «Attributes» - служит для отображения локальных переменных (о них чуть ниже), а третья - «Favorites» - служит для показа избранных Вами действий.
  3. Центральная секция - это рабочая область. Здесь мы и формируем окончательные примеры поведения персонажей при помощи различных комбинаций блоков действий и событий, по которым эти действия происходят. Комбинирование происходит путем простого перетаскивания блоков на рабочую область и последующей правки указанных в них параметров. Стоит учитывать, что функцию составляют только те блоки, которые объединены между собой и включены в основной блок события. Таким образом, чтобы временно убрать определенные ненужные в данный момент (но полезные) комбинации, нам достаточно просто вынести их из общей структуры на свободное место. Если же действия оказываются со временем ненужными вовсе, то их можно полностью удалить, переместив в корзину, которая находится в правой верхней части рабочей области.

Собственно, сам алгоритм создания событий мы уже описали, но дать какие-то универсальные рекомендации я, увы, не могу - для каждой игры события будут разными и их может быть довольно много… В качестве примера можете посмотреть исходники игры про Фриду, которые вы найдете в архиве с программой, но это - лишь ориентир, поскольку работа над событиями - Ваше личное творчество:).

Настройка физики и свойств

Мы с Вами уже рассмотрели много чего, но не коснулись некоторых дополнительных тем, которые могут быть очень важными при создании игр - я говорю о настройке всевозможных свойств наших актеров и сцен. Эти параметры у нас хранятся в двух последних вкладках. И первая из них - «Physics»:

Для сцен и актеров вкладка настройки физики выглядит по-разному. На вкладке с настройкой физики сцены находится всего два параметра - настройка горизонтальной и вертикальной гравитации. Внешний же вид секции настроек физических параметров актеров представлен на скриншоте выше и состоит из пяти вкладок с различными опциями:

  1. Вкладка «General» («Общие»). Здесь у нас есть три параметра: тип актера (неподвижный, платформа (может двигаться по заданным правилам, но его не могут двигать другие актеры) и подвижный), вращение актера (может вращаться или нет) и влияние гравитации.
  2. Вкладка «Heaviness» («Вес»). На этой вкладке можно настроить массу виртуального объекта и его инерционность.
  3. Вкладка «Material» («Материал») позволяет задать для актера такие характеристики, которые будут симулировать поведение реального предмета, сделанного из того или иного материала. У нас есть возможность выбрать одну из предустановок из выпадающего списка «Preset Materials» или вручную задать характеристики трения и упругости нашего актера.
  4. Вкладка «Damping» («Сопротивление») дает нам возможность более тонко настроить параметры взаимодействия актера с окружением за счет внедрения такой величины, как линейное (например, воздуху) и угловое (при вращении) сопротивление.
  5. Вкладка «Advanced» («Продвинутые») предоставляет нам доступ к различным дополнительным настройкам, не вошедшим в предыдущие разделы. Здесь можно активировать упрощенную модель физики (для оптимизации игры), автоматическое определение областей столкновений, события повторных столкновений и возможность применения паузы к актеру.

С физикой разобрались, а теперь посмотрим на свойства, которые вызываются нажатием кнопки «Properties»:

Как и в предыдущем случае, для сцен и актеров свойства будут разными. В свойствах сцены мы можем указать ее имя («Name»), размеры (секция «Size») и фоновой цвет («Background Color»).

В свойствах же актера можно, помимо имени, задать описание (поле «Description») объекта, группу, к которой относится актер (секция «Choose Group») и слой анимации для мобильных устройств (здесь можно ничего не менять, поскольку бесплатная версия программы не позволяет экспортировать игры в форматы для мобильников.

Но и это еще не все настройки, которые нам доступны в Stencyl. Общие настройки игры доступны нам по нажатию кнопки «Settings» на основной панели инструментов:

В окне настроек слева находится список групп параметров, а справа - основная область (иногда разделенная на несколько вкладок), содержащая всевозможные опции. Здесь нас интересуют следующие разделы:

  1. «Settings» («Настройки»). Первая группа настроек, которая позволяет немного персонализировать нашу игру. Эта группа содержит три вкладки. На первой из них («Main») мы можем задать игре новое имя, короткое описание, а также картинку-превью и иконку. На вкладке «Display» настраивается окончательный размер игрового пространства, а на последней («Advanced») есть возможность включить упрощенную физику и задать параметры сглаживания.
  2. «Loader» («Загрузчик»). В этой группе мы можем частично (учитывая некоторые ограничения бесплатной версии) настроить внешний вид прелоадера (загрузчика), который будет отображаться перед полной загрузкой игры. Здесь уже четыре вкладки. На первой («General» - общие) можно указать ссылку на Ваш сайт, включить защиту от копирования игры на других ресурсах (через запятую перечисляем список дозволенных сайтов во второй строке) и один из скинов загрузчика. На вкладке «Appearence» мы можем задать цвет экрана загрузчика и фоновое изображение. При помощи вкладки «Bar Style» указываются размеры полоски загрузчика, а «Bar Color», позволяет задавать, соответственно его цвета.
  3. «Attributes» («Атрибуты»). Данная группа настроек - одна из самых основных! Здесь можно управлять глобальными переменными, используемыми в игре (о переменных в следующем разделе ниже).
  4. «Controls» («Управление»). Как явствует из названия, в данной группе мы можем перенастроить и добавить кнопки клавиатуры, при помощи которых будут выполняться те или иные игровые действия.
  5. «Groups» («Группы»). Механизм групп мы уже рассматривали немного выше. Здесь мы имеем возможность видеть все созданные группы и править их.

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

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

И по умолчанию стоит увеличение спрайта в два раза, что влечет за собой ухудшение качества графики. Чтобы этого не происходило, советую отключить переразмеривание картинок, выбрав в поле «Scale» значение «Standard (1x)».

Также советую заглянуть на третью вкладку - «Editors». Здесь можно ассоциировать действия обработки графики, звука и текста с внешними более продвинутыми (нежели встроенные в Stencyl) редакторами.

Немного о переменных

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

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

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

В Stencyl переменные могут быть локальными и глобальными. Локальные переменные мы можем объявлять в рамках какого-нибудь события или поведения, и они будут работать только для указанных действий. Создать локальную переменную можно в редакторе событий, вызвав раздел «Attributes»:

Здесь у нас есть несколько вкладок:

  1. Вкладка «Getters» позволяет задать переменные, которые будут получать значение из каких-либо вычислений или прямых указаний.
  2. Вкладка «Setters» дает возможность установить какие-либо значения для созданных ранее переменных.
  3. Вкладка «Games Attributes» хранит блоки глобальных переменных и при желании позволяет добавлять новые (хотя, как это делать лучше мы рассмотрим чуть ниже).
  4. Вкладка «Lists» предоставляет нам возможность создавать массивы данных.
  5. Вкладка «Functions» используется для организации созданных функций.

Алгоритм создания локальной переменной прост: вначале создаем новый блок во вкладке «Getters», а затем находим во вкладке «Setters» только что созданную переменную и добавляем блок с ней на рабочую область, приравнивая к какому-либо игровому параметру. Вот и все - переменная объявлена и получила набор допустимых значений.

Глобальные переменные (Game Attributes) в Stencyl задаются сразу для всей игры и могут быть вызваны в любом событии или поведении. Как уже говорилось выше, создать их можно в разделе «Attributes» на вкладке «Game Attributes»:

Однако просматривать все созданные переменные и управлять ими гораздо удобнее при помощи раздела «Attributes» в настройках (кнопка «Settings» на панели инструментов или «Show Game Attributes» на вкладке «Game Attributes» в редакторе событий):

Здесь у нас представлен весь список глобальных переменных и имеется возможность создавать новые при помощи нажатия кнопки «Create New». Для новой переменной мы можем тут же задать тип (числовая, текстовая, булева или массив) и стартовое значение, не покидая пределов окна, что очень удобно на мой взгляд.

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

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

Публикация, импорт и экспорт игр

Наконец-то мы, хоть и бегло, но ознакомились с основными принципами работы со Stencyl. Предположим, мы создали игру, проверили ее и все оказалось рабочим. Теперь дело за малым - превратить игру из проекта в реальный SWF-файл, который можно выложить в Интернет. Для этого нам достаточно открыть меню «Publish» и в списке «Web» кликнуть пункт «Flash».

Запустится компиляция файла игры, после чего появится запрос, куда и под каким именем сохранять полученный флеш-файл. Сохраняем и все - игра готова:).

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

Проблема в том, что новый Stencyl 3.0 имеет только частичную совместимость с проектами, созданными в более ранних версиях, поэтому работоспособность импортированного Вами проекта игры может быть неполной или в худшем случае игра вообще не запустится, выдав ошибку. Вариантов у Вас будет немного - либо искать и исправлять ошибки, либо смириться, и оставить все, как есть:).

Достоинства и недостатки программы

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

Выводы

Из всех существующих сегодня программ для создания флеш-игр Stencyl является максимально разумным компромиссом между простотой работы и широтой возможностей. Радует то, что функционал конструктора в бесплатной редакции практически ничем не ограничен, что позволяет почти в полной мере реализовать любую задумку.

Однако, не стоит забывать о «почти»… Дело в том, что сам Stencyl работает на базе JAVA-машины, которая, как известно, довольно требовательна к ресурсам. Если к этой нагрузке добавить еще и нагрузку, которую создает игра, то получится, что для нормальной работы нам потребуется современный мощный компьютер.

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

Резюмируя, можно сказать, что Stencyl будет идеальным движком для создания всевозможных казуальных флеш-игр и бродилок-стрелялок с видом сбоку. Более того, потренировавшись создавать флеш-игры, Вы сможете приобрести один из типов лицензии и, немного изменив механику, портировать свою игру в форматы, поддерживаемые Android и iOS. А это уже реальный способ заработать деньги, разместив игру на Play Market’е или в App Store!

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

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.