Anthill Game Framework

Tiny framework for creating Flash games.

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

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


guide:assets_loading

Различия

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

Ссылка на это сравнение

guide:assets_loading [30.04.2013 13:57]
127.0.0.1 внешнее изменение
guide:assets_loading [22.10.2013 18:39] (текущий)
Илья Уткин
Строка 4: Строка 4:
  
   - Растеризация векторных MovieClip в последовательность растровых кадров;​   - Растеризация векторных MovieClip в последовательность растровых кадров;​
-  - Загрузка растровых изображений включенных в приложение;​ +  - Загрузка растровых изображенийвключенных в приложение;​ 
-  - Загрузка растровых атласов которые могут содержать произвольное количество отдельных изображений и/или анимаций.+  - Загрузка растровых атласовкоторые могут содержать произвольное количество отдельных изображений и/или анимаций.
  
 Далее будет рассмотрен каждый из перечисленных способов более подробно. Далее будет рассмотрен каждый из перечисленных способов более подробно.
Строка 15: Строка 15:
 ===== Растеризация MovieClip ===== ===== Растеризация MovieClip =====
  
-Под растеризацией клипов подразумевается,​ что вы храните всю графику в *.fla или *.swc библиотеках вашего проекта,​ вероятно в векторном виде. Все клипы находящиеся в библиотеках должны быть экспортированы в код.+Под растеризацией клипов подразумевается,​ что вы храните всю графику в *.fla или *.swc библиотеках вашего проекта,​ вероятно в векторном виде. Все клипынаходящиеся в библиотекахдолжны быть экспортированы в код.
  
-Предположим что вы нарисовали анимации ожидания,​ хотьбы и атаки вашего героя и экспортировали их в код под именами ''​HeroIdle_mc'',​ ''​HeroWalk_mc'',​ ''​HeroAttack_mc''​.+Предположимчто вы нарисовали анимации ожидания,​ ходьбы и атаки вашего героя и экспортировали их в код под именами ''​HeroIdle_mc'',​ ''​HeroWalk_mc'',​ ''​HeroAttack_mc''​.
  
-**Примечание:​** Рекомендуется использовать префиксы или постфиксы в именах клипах которые экспортируются в код чтобы они не путались с рабочими классами игры.+**Примечание:​** Рекомендуется использовать префиксы или постфиксы в именах клипахкоторые экспортируются в кодчтобы они не путались с рабочими классами игры.
  
-Теперь чтобы корректно создать из этих векторных клипов растровые анимации для Anthill, вам следует создать загрузчик ресурсов и поместить в него классы клипов из которых необходимо создать анимации.+Теперьчтобы корректно создать из этих векторных клипов растровые анимации для Anthill, вам следует создать загрузчик ресурсов и поместить в него классы клиповиз которых необходимо создать анимации.
  
 <sxh as3> <sxh as3>
Строка 37: Строка 37:
 </​sxh>​ </​sxh>​
  
-Обычно для растеризации большого количества клипов необходимо некоторое время и при попытке создания экземпляров анимаций которые еще небыли растеризированы ​— могут возникнуть ошибки. Поэтому в первую очередь необходимо убедится в успешном завершении кэширования всех анимаций и только потом инициализировать игровой мир. Чтобы узнать о завершении процесса растеризации,​ в выше ​преведенном коде мы добавили к событию ''​eventComplete''​ указатель на метод ''​onLoadComplete()'',​ давайте рассмотрим его содержимое:​+Обычно для растеризации большого количества клипов необходимо некоторое время и при попытке создания экземпляров анимацийкоторые еще небыли растеризированымогут возникнуть ошибки. Поэтому в первую очередь необходимо убедится в успешном завершении кэширования всех анимаций и только потом инициализировать игровой мир. Чтобы узнать о завершении процесса растеризации,​ в приведенном ​выше ​коде мы добавили к событию ''​eventComplete''​ указатель на метод ''​onLoadComplete()'',​ давайте рассмотрим его содержимое:​
  
 <sxh as3> <sxh as3>
Строка 53: Строка 53:
  
  
-===== Загрузка изображений включенных в приложение =====+===== Загрузка изображенийвключенных в приложение =====
  
-Под включением изображения в приложение предполагается что вы добавили изображение непосредственно в ваше приложение с использованием тэга embed следующим образом:​+Под включением изображения в приложение предполагаетсячто вы добавили изображение непосредственно в ваше приложение с использованием тэга embed следующим образом:​
  
 <sxh as3> <sxh as3>
Строка 61: Строка 61:
 </​sxh>​ </​sxh>​
  
-Далее из этого изображения вы можете создать полноценную анимацию используя следующий код:+Далее из этого изображения вы можете создать полноценную анимациюиспользуя следующий код:
  
 <sxh as3> <sxh as3>
Строка 74: Строка 74:
 </​sxh>​ </​sxh>​
  
-В данном коде мы помещаем класс изображения в очередь на обработку. Обработка этой картинки произойдет после запуска загрузчика. Вторым параметром мы укаываем имя анимации которая будет создана из изображения и помещена в кэш анимаций. Если имя анимации не указать принудительно,​ то в качестве имени будет использовано имя класса.+В данном коде мы помещаем класс изображения в очередь на обработку. Обработка этой картинки произойдет после запуска загрузчика. Вторым параметром мы указываем имя анимациикоторая будет создана из изображения и помещена в кэш анимаций. Если имя анимации не указать принудительно,​ то в качестве имени будет использовано имя класса.
  
-**Внимание:​** С именами классов эмбед картинок все немного иначе чем с именами клипов. То есть, если вы включаете картинки в код в классе,​ который находится внутри каких-либо пакетов,​ то имя анимации будет состоять не только из имени класса изображения,​ но и из имени пакета. Например,​ в нашем примере ​если убрать ​второй параметр и предположить что класс в котором объявлен embed тэг находится в пакете "​com.domain.projectname",​ то имя анимации по умолчанию может быть похожим на "​com.domain.projectname::​myEmbedPicture"​.+**Внимание:​** С именами классов эмбед картинок все немного иначечем с именами клипов. То есть, если вы включаете картинки в код в классе,​ который находится внутри каких-либо пакетов,​ то имя анимации будет состоять не только из имени класса изображения,​ но и из имени пакета. Например, ​если убрать ​в нашем примере второй параметр и предположитьчто классв котором объявлен embed тэгнаходится в пакете "​com.domain.projectname",​ то имя анимации по умолчанию может быть похожим на "​com.domain.projectname::​myEmbedPicture"​.
  
-Используя выше описанный код мы получим однокадровую анимацию,​ первый кадр которой будет содержать все изображение. Но таким образом вы можете создавать непосредственно анимации из изображений с секвенцией кадров. Допустим у вас есть изображение с кадрами как это:+Используя выше описанный кодмы получим однокадровую анимацию,​ первый кадр которой будет содержать все изображение. Но таким образом вы можете создавать непосредственно анимации из изображений с секвенцией кадров. Допустиму вас есть изображение с кадрамикак это:
  
 {{ :​guide:​bmp_sequence.png?​nolink&​200 |}} {{ :​guide:​bmp_sequence.png?​nolink&​200 |}}
  
-В данном примере каждый кадр имеет строгие размеры:​ 32x32px. Чтобы при загрузке этого изображения получить растровую анимацию вам нужно указать размеры кадра при добавлении изображения в очередь на обработку:​+В данном примере каждый кадр имеет строгие размеры:​ 32x32px. Чтобы при загрузке этого изображения получить растровую анимациювам нужно указать размеры кадра при добавлении изображения в очередь на обработку:​
  
 <sxh as3> <sxh as3>
Строка 88: Строка 88:
 </​sxh>​ </​sxh>​
  
-Далее исходя из размеров изображения и размеров кадра, скрипт автоматически рассчитает количество кадров и создаст анимацию разрезав изображение.+Далееисходя из размеров изображения и размеров кадра, скрипт автоматически рассчитает количество кадров и создаст анимациюразрезав изображение.
  
  
Строка 96: Строка 96:
 ===== Загрузка растровых атласов ===== ===== Загрузка растровых атласов =====
  
-Атлас — это как правило большое изобржаение на котором собрана вся или большая часть графики для игры, но в отличии от класических изображений-секвенций кадров,​ атласы сопровождаются дополнительной информацией о том где и какой спрайт расположен. Такой подход позволяет избегать использования строгих размеров кадров и дает возможность максимально плотно компоновать разные спрайты на одном изображении,​ что в свою очередь позволяет экономить место за счет меньшего количества изображений. Особенно критично это может быть для мобильных и веб игр.+Атлас — этокак правилобольшое изображениена котором собрана вся или большая часть графики для игры, нов отличие от классических изображений-секвенций кадров,​ атласы сопровождаются дополнительной информацией о томгде и какой спрайт расположен. Такой подход позволяет избегать использования строгих размеров кадров и дает возможность максимально плотно компоновать разные спрайты на одном изображении,​ что в свою очередь позволяет экономить место за счет меньшего количества изображений. Особенно критично это может быть для мобильных и веб игр.
  
 {{ :​guide:​classic_tails-_sonic_advance.gif?​nolink&​500 |Пример атласа}} {{ :​guide:​classic_tails-_sonic_advance.gif?​nolink&​500 |Пример атласа}}
  
-Создание атласа в ручную — это достаточно трудоемкая работа. Поэтому на помощь приходят программы типа [[http://​www.codeandweb.com/​texturepacker|TexturePacker]]((Обратите внимание на промо-ролик программы TexturePacker на сайте программы — он достаточно хорошо и наглядно рассказывает о сути и пользе атласов.)),​ которые нажатием одной кнопки максимально оптимально компануют картинки и экспортируют их в виде одного большого файла изображения и XML файла с информацией о расположении кадров.+Создание атласа вручную — это достаточно трудоемкая работа. Поэтому на помощь приходят программы типа [[http://​www.codeandweb.com/​texturepacker|TexturePacker]]((Обратите внимание на промо-ролик программы TexturePacker на сайте программы — он достаточно хорошо и наглядно рассказывает о сути и пользе атласов.)),​ которые нажатием одной кнопки максимально оптимально компануют картинки и экспортируют их в виде одного большого файла изображения и XML-файла с информацией о расположении кадров.
  
-Информация о расположении кадров как правило записывается в XML формат. Поэтому если вы собираетсь работать с атласами,​ то помимо изображения необходимо будет так же делать эмбед XML файла.+Информация о расположении кадровкак правилозаписывается в XML-формат. Поэтомуесли вы собираетсь работать с атласами,​ то помимо изображения необходимо будет так же делать эмбед XML-файла.
  
-**Примечание:​** Поскольку Anthill не является популизированным игровым фреймворком,​ то для того чтобы вы могли использовать любой наиболее адекватный и часто обновляемый упаковщик текстур,​ решено было позаимствовать формат атласов у [[http://​gamua.com/​starling/​|Starling Framework]]. То есть вы можете использовать любой упаковщик текстур который умеет создавать атласы для ​Straling.+**Примечание:​** Поскольку Anthill не является популяризованным игровым фреймворком,​ то для тогочтобы вы могли использовать любой наиболее адекватный и часто обновляемый упаковщик текстур,​ решено было позаимствовать формат атласов у [[http://​gamua.com/​starling/​|Starling Framework]]. То есть вы можете использовать любой упаковщик текстуркоторый умеет создавать атласы для ​Starling.
  
-Предположим у вас есть произвольное количество картинок которые представляют собой разные анимации состояний главного героя, каждая картинка имеет имя: ''​hero_idle_XX.png'',​ ''​hero_walk_XX.png'',​ ''​hero_attack_XX.png''​ и т.д. Под XX скрывается номер кадра, то есть одна картинка в нашем случае равна одному кадру.+Предположиму вас есть произвольное количество картиноккоторые представляют собой разные анимации состояний главного героя, каждая картинка имеет имя: ''​hero_idle_XX.png'',​ ''​hero_walk_XX.png'',​ ''​hero_attack_XX.png''​ и т.д. Под XX скрывается номер кадра, то есть одна картинка в нашем случае равна одному кадру.
  
-Упаковываем все эти картинки,​ к примеру,​ используя выше упомянутый **TexturePacker** и получаем на выходе большой атлас и следующую информацию:​+Упаковываем все эти картинки,​ к примеру,​ используя выше упомянутый **TexturePacker**и получаем на выходе большой атлас и следующую информацию:​
  
 <sxh as3> <sxh as3>
Строка 127: Строка 127:
 </​sxh>​ </​sxh>​
  
-Подключаем изображение атласа и XML файл с информацией к нашему проекту:​+Подключаем изображение атласа и XML-файл с информацией к нашему проекту:​
  
 <sxh as3> <sxh as3>
Строка 134: Строка 134:
 </​sxh>​ </​sxh>​
  
-Теперь,​ чтобы добавить обработку такого атласа в ''​loader''​ и получение из него необходимых анимаций, нам придется написать следующий код:+Теперь,​ чтобы добавить обработку такого атласа в ''​loader''​ и получить из него необходимые анимации, нам придется написать следующий код:
  
 <sxh as3> <sxh as3>
Строка 155: Строка 155:
 </​sxh>​ </​sxh>​
  
-В данном коде первым делом мы добавляем в очередь на обработку ​атлас. В качестве аргументов указываем непосредственно класс изображения и класс XML с информацией,​ последним аргументом мы обозначаем как будет называться данный класс чтобы можно было связать с конкретно этим атласом ​создание анимаций ​— это позволят обрабатывать одновременно неограниченное количество атласов.+В данном коде первым делом мы добавляем ​атлас ​в очередь на обработку. В качестве аргументов указываем непосредственно класс изображения и класс XML с информацией,​ последним аргументом мы обозначаемкак будет называться данный классчтобы можно было связать создание анимаций ​конкретно ​с этим атласом — это позволят обрабатывать одновременно неограниченное количество атласов.
  
-**Примечание:​** метод ''​addAtlasA()''​ принимает в качестве аргумента для XML данных непосредственно бинарные данные,​ а не текстовый XML. Если вам необходимо работать с текстовым XML, то используйте метод ''​addAtlas()''​.+**Примечание:​** метод ''​addAtlasA()''​ принимает в качестве аргумента для XML-данных непосредственно бинарные данные,​ а не текстовый XML. Если вам необходимо работать с текстовым XML, то используйте метод ''​addAtlas()''​.
  
-После того как мы добавили в очередь обработку атласа,​ мы добавляем создание анимаций из этого атласа. Первым аргументом для метода ''​addGraphicFromAtlas()''​ мы указываем имя атласа из которого будет создана анимация,​ вторым аргументом задаем имя будущей анимациии третьим аргументом указываем префикс или постфикс имен изобржаений которые будут добавлены в текущую анимацию. Если префикс или постфикс не указан,​ то в создаваемую анимацию будут добавлены все изображения из атласа.+После тогокак мы добавили в очередь обработку атласа,​ мы добавляем создание анимаций из этого атласа. Первым аргументом для метода ''​addGraphicFromAtlas()''​ мы указываем имя атласаиз которого будет создана анимация,​ вторым аргументом задаем имя будущей анимации и третьим аргументом указываем префикс или постфикс имен изображенийкоторые будут добавлены в текущую анимацию. Если префикс или постфикс не указан,​ то в создаваемую анимацию будут добавлены все изображения из атласа.
  
  
Строка 167: Строка 167:
 ===== Заключение ===== ===== Заключение =====
  
-В данной статье мы рассмотрели три способа позволяющих использовать графику в проектах с Anthill. Вы можете использовать любой из этих способов или все способы одновременно. Пример использования:​+В данной статье мы рассмотрели три способапозволяющих использовать графику в проектах с Anthill. Вы можете использовать любой из этих способов или все способы одновременно. Пример использования:​
  
 <sxh as3> <sxh as3>
Строка 188: Строка 188:
 </​sxh>​ </​sxh>​
  
-Теперь когда мы разобрались с тем как ​мы можем добавить графику и анимации в проект,​ настало время разобраться с тем что такое анимации,​ где они хранятся и как их использовать и проигрывать.+Теперькогда мы разобрались с темкак можно добавить графику и анимации в проект,​ настало время разобраться с темчто такое анимации,​ где они хранятся и как их использовать и проигрывать.
  
 ---- ----
guide/assets_loading.txt · Последние изменения: 22.10.2013 18:39 — Илья Уткин