Anthill Game Framework

Tiny framework for creating Flash games.

Инструменты пользователя

Инструменты сайта


guide:assets_loading

Загрузка графики

В Anthill графика может быть загружена и использована из трех источников:

  1. Растеризация векторных MovieClip в последовательность растровых кадров;
  2. Загрузка растровых изображений, включенных в приложение;
  3. Загрузка растровых атласов, которые могут содержать произвольное количество отдельных изображений и/или анимаций.

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


Растеризация MovieClip

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

Предположим, что вы нарисовали анимации ожидания, ходьбы и атаки вашего героя и экспортировали их в код под именами HeroIdle_mc, HeroWalk_mc, HeroAttack_mc.

Примечание: Рекомендуется использовать префиксы или постфиксы в именах клипах, которые экспортируются в код, чтобы они не путались с рабочими классами игры.

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

// Создание загрузчика ресурсов.
var loader:AntAssetLoader = new AntAssetLoader();

// Добавление списка клипов для растеризации.
loader.addClips(new <Class>[ HeroIdle_mc, HeroWalk_mc, HeroAttack_mc ]);

// Добавление обработчика для определения завершения растеризации.
loader.eventComplete.add(onLoadComplete);

// Запуск растеризации.
loader.start();

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

private function onLoadComplete(aLoader:AntAssetLoader):void
{
  // Если загрузчик больше не нужен, освобождаем его.
  aLoader.destroy();
  
  /* Теперь мы точно знаем, что все готово к работе и здесь можем создавать игровой мир. */
}


Загрузка изображений, включенных в приложение

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

[Embed(source="myPicture.png")] protected var myEmbedPicture:Class;

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

// Создание загрузчика ресурсов.
var loader:AntAssetLoader = new AntAssetLoader();

// Добавление включенного изображения в очередь на обработку.
loader.addGraphic(myEmbedPicture, "myPicture");

// Запуск растеризации.
loader.start();

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

Внимание: С именами классов эмбед картинок все немного иначе, чем с именами клипов. То есть, если вы включаете картинки в код в классе, который находится внутри каких-либо пакетов, то имя анимации будет состоять не только из имени класса изображения, но и из имени пакета. Например, если убрать в нашем примере второй параметр и предположить, что класс, в котором объявлен embed тэг, находится в пакете «com.domain.projectname», то имя анимации по умолчанию может быть похожим на «com.domain.projectname::myEmbedPicture».

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

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

loader.addGraphic(myEmbedPicture, "myPicture", 32, 32);

Далее, исходя из размеров изображения и размеров кадра, скрипт автоматически рассчитает количество кадров и создаст анимацию, разрезав изображение.


Загрузка растровых атласов

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

Пример атласа

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

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

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

Предположим, у вас есть произвольное количество картинок, которые представляют собой разные анимации состояний главного героя, каждая картинка имеет имя: hero_idle_XX.png, hero_walk_XX.png, hero_attack_XX.png и т.д. Под XX скрывается номер кадра, то есть одна картинка в нашем случае равна одному кадру.

Упаковываем все эти картинки, к примеру, используя выше упомянутый TexturePacker, и получаем на выходе большой атлас и следующую информацию:

<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath="test.png">
    <SubTexture name="hero_idle_01" x="659" y="25" width="41" height="21"/>
    <SubTexture name="hero_idle_02" x="831" y="2" width="41" height="21"/>
    <SubTexture name="hero_idle_03" x="788" y="2" width="41" height="21"/>
    <SubTexture name="hero_idle_04" x="789" y="129" width="35" height="24"/>
    <SubTexture name="hero_walk_01" x="733" y="152" width="35" height="24"/>
    <SubTexture name="hero_walk_02" x="865" y="126" width="35" height="24"/>
    <SubTexture name="hero_walk_03" x="807" y="103" width="35" height="24"/>
    <SubTexture name="hero_walk_04" x="770" y="103" width="35" height="24"/>
    <SubTexture name="hero_attack_01" x="733" y="103" width="35" height="24"/>
    <SubTexture name="hero_attack_02" x="696" y="141" width="35" height="24"/>
    <SubTexture name="hero_attack_03" x="659" y="152" width="35" height="24"/>
</TextureAtlas>

Подключаем изображение атласа и XML-файл с информацией к нашему проекту:

[Embed(source="game_art.png")] private var bmpGameArt:Class;
[Embed(source="game_art.xml", mimeType="application/octet-stream")] private var xmlGameArt:Class;

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

var loader:AntAssetLoader = new AntAssetLoader();

// Добавляем атлас
loader.addAtlasA(bmpGameArt, xmlGameArt, "atlasGameArt");

// Добавляем создание анимации ожидания из атласа
loader.addGraphicFromAtlas("atlasGameArt", "HeroIdle", "hero_idle");

// Добавляем создание анимации ожидания из атласа
loader.addGraphicFromAtlas("atlasGameArt", "HeroWalk", "hero_walk");

// Добавляем создание анимации атаки из атласа
loader.addGraphicFromAtlas("atlasGameArt", "HeroAttack", "hero_attack");

// Запускаем обработку
loader.start();

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

Примечание: метод addAtlasA() принимает в качестве аргумента для XML-данных непосредственно бинарные данные, а не текстовый XML. Если вам необходимо работать с текстовым XML, то используйте метод addAtlas().

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


Заключение

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

var loader:AntAssetLoader = new AntAssetLoader();

// Обработка клипов
loader.addClips(new <Class>[EnemyIdle_mc, EnemyWalk_mc, EnemyAttack_mc ]);

// Обработка изображения
loader.addGraphic(bmpButton, "PlayButton", 76, 32);

// Обработка атласа
loader.addAtlasA(bmpGameArt, xmlGameArt, "atlasGameArt");
loader.addGraphicFromAtlas("atlasGameArt", "HeroIdle", "hero_idle");
loader.addGraphicFromAtlas("atlasGameArt", "HeroWalk", "hero_walk");
loader.addGraphicFromAtlas("atlasGameArt", "HeroAttack", "hero_attack");

// Запускаем обработку
loader.start();

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


1) Обратите внимание на промо-ролик программы TexturePacker на сайте программы — он достаточно хорошо и наглядно рассказывает о сути и пользе атласов.
guide/assets_loading.txt · Последние изменения: 22.10.2013 18:39 — Илья Уткин