Genome2D — MovieClip

В этой статье поговорим о MovieClip’ах.
Если мы говорим о какой либо анимации, которая будет исполнятся с помощью GPU, мы всегда в конечном итоге будем иметь дело с текстурными атласами.
Что такое текстурный атлас? Проще говоря это картинки собранные в одну картинку. Еще их называют спрайтшитами :) (Sprite sheet) (Примеры)
Например, мы имеем анимацию ниндзи, которая идет влево. Мы нарисовали пять картинок анимации (5 спрайтов) и поместили их в одну картинку. В коде мы будем работать с одной картинкой. Когда нам надо показать на экране какой-либо спрайт мы просто задаем область в нашей большой картинке, которую надо показать. Если нам надо анимацию, то мы последовательно меняем спрайт.

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

Когда создается атлас, кроме картинки также создается XML файл в котором описан каждый спрайт — его имя и координаты по которым его достать.
Genome2D содержит богатый функционал по созданию атласов, но вы должны подумать о том, чтобы сгенерировать атлас внешними программными средствами, чтобы не делать это в рантайм. Одна из таких программ Texture Packer http://www.texturepacker.com/ (также эти программы имеют более богатый функциональный набор и более грамотно делают атласы).

Немного кода:

[Embed(source = "../assets/ninja.xml", mimeType = "application/octet-stream")]
public const NinjaEmbeddedXML:Class;
 
[Embed(source = "../assets/ninja.png")]
public const NinjaEmbeddedBitmap:Class;

Здесь мы просто подключили атлас и его XML файл.
Далее создаем эту картику, XML и после этого с помощью фабрики GTextureAtlasFactory.createFromBitmapDataAndXML создаем текстурный атлас. Первым параметром строковая уникальная переменная имя атласа далее bitmapData нашего спрайт-шита и XML файл.

var bitmapAtlas:Bitmap = new NinjaEmbeddedBitmap();
var atlasXML:XML = XML(new NinjaEmbeddedXML());
var textureAtlas:GTextureAtlas = GTextureAtlasFactory.createFromBitmapDataAndXML("textureAtlasId", bitmapAtlas.bitmapData, atlasXML);

XML файл использует Sparrow формат, он легко экспортируется с выше упомянутого Texture Packer. Автор думал над тем, чтобы сделать свой формат но похоже что Sparrow формат имеет все что нужно, потому решил что будет использовать его. Выглядит он так:

<?xml version="1.0" encoding="UTF-8"?>
<TextureAtlas imagePath="ninja.png">
    <SubTexture name="nw1" x="1" y="1" width="42" height="50"/>
    <SubTexture name="nw2" x="44" y="1" width="42" height="50"/>
    <SubTexture name="nw3" x="87" y="1" width="42" height="50"/>
    <SubTexture name="nw4" x="130" y="1" width="42" height="50"/>
    <SubTexture name="nw5" x="173" y="1" width="42" height="50"/>
    <SubTexture name="nw6" x="1" y="52" width="42" height="50"/>
    <SubTexture name="stood" x="44" y="52" width="42" height="50"/>
</TextureAtlas>

Имя спрайта, позиция и размеры.

Теперь у нас есть атлас и мы можем начать создавать MovieClip.
Создадим нод с мувиклипом:

var node:GNode = GNodeFactory.createNode();
var movieclip:GMovieClip = node.addComponent(GMovieClip) as GMovieClip;

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

var animation:Array = ["nw1", "nw2", "nw3", "nw2", "nw1", "stood", "nw4", "nw5", "nw6", "nw5", "nw4"];

После зададим все параметры нашему мувиклипу — текстурный атлас, кадры анимации и фреймрейт для анимации:

movieclip.setTextureAtlas(textureAtlas);
movieclip.frames = animation;
movieclip.frameRate = 30;

Положим нод нашего мувика в корневой нод:

rootNode.addChild(node);

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

var cameraNode:GNode = GNodeFactory.createNode("camera");
cameraNode.addComponent(GCamera);
rootNode.addChild(cameraNode);

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

movieclip.setTextureAtlas(textureAtlas2);
movieclip.frames = animation2;

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

var node:GNode = GNodeFactory.createNode();
var sprite:GSprite = node.addComponent(GSprite) as GSprite;
sprite.setTexture(textureAtlas.getTexture("stood"));

Также, текстурный атлас можно создать программно с MovieClip, Bitmap, Font и т.д.

На этом пока все.
Исходники тут. Результат:

This movie requires Flash Player 9

Поделиться в соц. сетях

Опубликовать в LiveJournal
Опубликовать в Google Plus
  • Bruyn

    Подскажи ты случаем не знаешь можно ли в Genome2D использовать по пиксельную обработку на подобий BitMapData.

  • VirtualMaestro

    Не могу точно ответить. Надо напрямую лучше спросить на форуме у автора http://blog.flash-core.com/?forum=genome2d-forum

    Знаю только, что можно у GMovieClip и GSprite взять через метод getTexture() экземпляр GTexture.
    А с него взять bitmapData. Для GSprite это будет один спрайт (одна картинка), а для GMovieClip будет целый атлас (спрайтшит).

    Еще вроде можно как то шейдеры писать для попиксельной обработки. Пока в это не сильно вникал.

    Можно также управлять цветом через node.transform
    как в этом примере (но тут уже не попиксельно) https://github.com/pshtif/Genome2D/blob/master/examples/src/examples/MouseExample.as