Genome2D — Начало

Я использую SDK 4.6 c таргетингом на FP 11.1
Среда программирования Idea.
Создайте проект и подключите библиотеку Genome2D v0.3.5.
ВНИМАНИЕ!

Первым делом, что надо сделать перед написанием кода, это добавить параметр wmode=direct в html шаблон, иначе ничего работать не будет.

В FlashBuilder и в Idea есть html шаблон (в других средах не знаю как) что то типа index.template.html, добавьте туда этот параметр:
params.wmode = «direct»;

Перед использованием классов генома следует инициализировать движок.

   Genome2D.getInstance().onInitialized.addOnce(onGenome2DInitialized);
   Genome2D.getInstance().init(stage, G2DStage3DContext);

Мы подключили слушатель на событие инициализации (тут автор вместо классических событий использует сигналы (в частности библиотеку AS3Signals). К сигналу onInitialized был подключен слушатель onGenome2DInitialized через метод addOnce, который означает что после вызова этот слушатель будет удален из списка).
Потом инициализируем движок посредством метода init. В качестве первого параметра передаем ссылка на Stage, а другим передаем класс рендерера. Для использования GPU ускорения используем класс G2DStage3DContext.
Genome2D реализован в виде синглтона и это логично — мы имеем единственную централизированную точку входа в движок, тем самым убирая возможные неясности, а с другой стороны не имеет смысла создавать два движка в проекте.

Перейдем к нашему хендлеру onGenome2DInitialized (далее код будет в нем).
Создаем bitmapData. В нашем случае это будет красный квадрат размером 32 пикселя. Тут можно было бы использовать также загружаемые картинки или встроенные асеты (embed).
С помощью статического методы createFromBitmapData создаем экземпляр текстуры (класс G2DTexture). Как параметры передаем строковое значение textureId — оно должно быть уникальным, а вторым bitmapData.

var bitmapData:BitmapData = new BitmapData(32,32, false, 0xFF0000);
var texture:G2DTexture = G2DTexture.createFromBitmapData("textureId", bitmapData);

Мы можем работать с рутом напрямую (root), но лучше всего создать ноду-контейнер (класс G2DNode), которая будет для нас вершиной рендер-графа и добавить ее в root.
Как параметр можно передать строковое значение. Сейчас не важно будет оно уникально или нет но в будущем ситуация может поменяться. Можно вообще не задавать этот параметр, он будет автоматом сгенерирован движком.

var container:G2DNode = new G2DNode("container");
Genome2D.getInstance().root.addChild(container);

Далее мы добавим ноду для камеры. Так как мы хотим, чтобы камера смотрела на сцену с центра экрана мы должны задать ей соответствующую позицию.
Все трансформации которые происходять над нодами в геноме, делаются по средством компонента G2DTransform, который автоматически создается геномом для каждой ноды (G2DNode). К нему можно достучатся с помощью поля transform (node.transform).

var cameraNode:G2DNode = new G2DNode("camera");
cameraNode.transform.x = stage.stageWidth/2;
cameraNode.transform.y = stage.stageHeight/2;

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

cameraNode.addComponent(G2DCamera);
container.addChild(cameraNode);

Создаем спрайт, экземпляр класса G2DSprite.
Вызываем статический метод G2DComponent.createWithNode, который создаст экземпляр G2DNode с заданным присоединенным компонентом.

var sprite:G2DSprite = G2DComponent.createWithNode(G2DSprite, "sprite") as G2DSprite;

Это можно было сделать вручную, напр. так:

var spriteNode:G2DNode = new G2DNode("sprite");
var sprite:G2DSprite = spriteNode.addComponent(G2DSprite) as G2DSprite;

Но для уменьшения писанины есть вот такой вот factory метод G2DComponent.createWithNode.

Теперь добавим текстуру созданную нами ранее в этот спрайт (чтобы спрайт имел че рендерить :) )

sprite.setTexture(texture);

Зададим позиции нашему спрайту (в даном случае установим его по центу):

sprite.node.transform.x = stage.stageWidth/2;
sprite.node.transform.y = stage.stageHeight/2;

Добавим спрайт в главную ноду нашего графа отображения.
Каждый компонент в Genome2D содержит ссылку на свой нод (component.node).
Поэтому добавляем наш спрайт таким образом:

container.addChild(sprite.node);

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

This movie requires Flash Player 9

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

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