Введение в Starling, часть 1

Данная статья открывает цикл “Введение в Starling”. Цикл построен на переводе Introducing Starling. Более подробно о Starling можно узнать на официальном сайте.

Что такое Starling?

Starling это ActionScript 3 2D-framework разработанный на основе Stage3D API (доступен в Flash Player 11 и Adobe AIR 3). В первую очередь Starling предназначен для разработки игр, но может использоваться для решения многих других задач. Starling позволяет быстро создавать аппаратно ускоренные приложения без прямого использования низкоуровнего Stage3D API.

Почему Starling?

Большинство разработчиков на Flash хотят иметь возможность использовать GPU ускорение (через Stage3D) без необходимости писать высокоуровневые библиотеки и копаться в низкоуровневом Stage3D API. Starling полностью разработан по мотивам Flash Player API, и абстрагируется от сложного Stage3D (Molehill) и позволяет легко и интуитивно программировать буквально всем.

Очевидно, что Starling больше подходит для ActionScript 3 разработчиков, особенно тех, кто участвует в разработке 2D-игр; конечно, вы должны иметь базовые знания ActionScript 3. По своей конструкции (легкий, гибкий и простой), Starling может быть использован также для других задач, например, программирование пользовательского интерфейса. Это говорит о том, что все спроектировано на столько интуитивно, на сколько возможно, так что любой Java™ или .NET™ разработчик сможет быстро во всем разобраться.

Философия

Интуитивный

Starling прост в освоении. Особенно разработчики на Flash/Flex будут чувствовать себя сразу как дома, так как Starling впитал большинство догм ActionScript и абстрагируется от сложности низкоуровнего Stage3D API. Вместо использования таких понятий как буфер вершин, матрицы перспектив, шейдеров, байт-код, вы будете использовать знакомые понятия, такие как отображение списка DOM, модель событий, и знакомые интерфейсы, как MovieClip, Sprite, TextField и т.д.

Легковесный

Starling легкая птица во многих смыслах. Количество классов ограничено (около 80kb кода). Нет никаких внешних зависимостей от Flash Player 11 или AIR 3 (поддержка мобильных платформ будет в будущих версиях). Это делает ваши приложения маленькими, а рабочий процесс – простым.

Бесплатный

Starling является свободным и живым, и распространяется по условиям лицензии Simplified BSD. Вы можете использовать его свободно даже в коммерческих приложениях. Мы работаем над Starling каждый день, и мы рассчитываем на активную обратную связь сообщества, чтобы улучшить Starling еще больше.

Как это все работает

Starling использует Stage3D API, за кулисами которого содержится низкоуровневый графический API, работающий на основе OpenGL и DirectX на стационарных устройствах, и OpenGL ES2 на мобильных устройствах. Как разработчик, вы должны знать, что Starling это ActionScript 3 порт Sparrow, эквивалентной библиотеки под iOS, опирающуюся на OpenGL ES2 API:

Рисунок 1.1
Слой Starling лежит поверх Stage3D (Molehill).

Starling воспроизводит многое из API, которое уже знакомо Flash-разработчикам, рисунок ниже иллюстрирует API, предоставляемые Starling, когда дело доходит до графических элементов:

Рисунок 1.2
Дерево наследования DisplayObject.

Многие думают, что API-интерфейсы Stage3D строго ограничены только 3D-содержимым. На самом деле название может ввести в заблуждение из-за наличия в нем термина “3D”. Так как мы можем получить 2D?

Как мы можем сделать что-то вроде MovieClip с помощью drawTriangles?


Рисунок 1.3
drawTriangles и 2D?

На самом деле, это очень просто, GPU очень эффективен при рисовании треугольников, так что drawTriangles будут рисовать два треугольника, которые мы будем использовать для наложения текстур с использованием UV mapping – так мы получим что-то вроде Sprite. Обновляя на наших треугольниках текстуру каждый кадр, мы бы в конечном итоге получаем аналог MovieClip. Круто, да?

Теперь, хорошей новостью является то, что нам даже не придется делать все это на самом деле, когда мы будем использовать Starling – мы просто снабдим нашими кадрами MovieClip от Starling и вуаля!

Рисунок 1.4
drawTriangles + текстурированный четырехугольник = 2D.

Чтобы дать вам представление о том, как Starling все упрощает, давайте посмотрим, какой код мы должны были бы
написать для показа простого текстурированного четырехугольника используя низкоуровневый Stage3D API:

[actionscript3]// create the vertices
var vertices:Vector. = Vector.([
-0.5,-0.5,0, 0, 0, // x, y, z, u, v
-0.5, 0.5, 0, 0, 1,
0.5, 0.5, 0, 1, 1,
0.5, -0.5, 0, 1, 0]);

// create the buffer to upload the vertices
var vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5);

// upload the vertices
vertexbuffer.uploadFromVector(vertices, 0, 4);

// create the buffer to upload the indices
var indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6);

// upload the indices
indexbuffer.uploadFromVector (Vector.([0, 1, 2, 2, 3, 0]), 0, 6);

// create the bitmap texture
var bitmap:Bitmap = new TextureBitmap();

// create the texture bitmap to upload the bitmap
var texture:Texture = context3D.createTexture(bitmap.bitmapData.width, bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false);

// upload the bitmap
texture.uploadFromBitmapData(bitmap.bitmapData);

// create the mini assembler
var vertexShaderAssembler : AGALMiniAssembler = new AGALMiniAssembler();

// assemble the vertex shader
vertexShaderAssembler.assemble( Context3DProgramType.VERTEX, "m44 op, va0, vc0\n" + // pos to clipspace
"mov v0, va1" // copy uv
);

// assemble the fragment shader
fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, "tex ft1, v0, fs0 ;\n" +
"mov oc, ft1"
);

// create the shader program
var program:Program3D = context3D.createProgram();

// upload the vertex and fragment shaders
program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode);

// clear the buffer
context3D.clear ( 1, 1, 1, 1 );

// set the vertex buffer
context3D.setVertexBufferAt(0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_2);

// set the texture
context3D.setTextureAt( 0, texture );

// set the shaders program
context3D.setProgram( program );

// create a 3D matrix
var m:Matrix3D = new Matrix3D();

// apply rotation to the matrix to rotate vertices along the Z axis
m.appendRotation(getTimer()/50, Vector3D.Z_AXIS);

// set the program constants (matrix here)
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m, true);

// draw the triangles
context3D.drawTriangles( indexBuffer );

// present the pixels to the screen
context3D.present();[/actionscript3]

И в итоге мы бы имели следующий результат:

Рисунок 1.5
Простой текстурированный четырехугольник.

Довольно сложный код для такого примера, не так ли? Это цена за доступ к низкоуровневому API – вы получаете под контроль многие вещи, но придется писать тонны кода.

Используя Starling, вы будете писать следующий код:

[actionscript3]// create a Texture object out of an embedded bitmap
var texture:Texture = Texture.fromBitmap ( new embeddedBitmap() );

// create an Image object our of the Texture
var image:Image = new Image(texture);

// set the properties
image.pivotX = 50;
image.pivotY = 50;
image.x = 300;
image.y = 150;
image.rotation = Math.PI/4;

// display it
addChild(image);[/actionscript3]

Как ActionScript 3 разработчик, который использовал Flash API, вы будете чувствовать себя почти как дома с таким подходом. Все самое сложное в Stage3D API делается за кулисами.

Если вы попытаетесь использовать функцию перерисовки областей, вы увидите, что Starling, как и ожидается, делает все на Stage3D, а не классическом Display List. Рисунок ниже иллюстрирует это. У нас есть квадрат, вращающийся на каждом кадре – перерисовка областей показывают только счетчик FPS для отрисовки которого используется Display List (работает на CPU):

Рисунок 1.6
Содержимое отрисованное через Stage3D.

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

Расслоение ограничений

Как разработчик, использующий Starling (и, как результат Stage3D), вы должны помнить об одном ограничении. Как упоминалось ранее, Stage3D в буквальном смысле новая архитектура рендеринга внутри Flash Player. Слой GPU находится под слоем Display List, а это означает, что любой контент работающий внутри Display List, будет размещен выше содержимого Stage3D.

Рисунок ниже иллюстрирует слои:

Рисунок 1.7
Расслоение Stage3D, StageVideo и Display List.

Обратите внимание, что Stage3D-объект не может быть прозрачным, чтобы позволить разработчикам проигрывать видео с использованием технологии StageVideo (введенной в Flash Player 10.2) и накладывать поверх видео контент созданный через Stage3D. Такая функция может быть включена в будущих версиях Flash Player, и AIR.


В следующей статье мы расскажем вам о том, как настроить Flash Builder для работы со Starling и создадим базовое приложение.

Похожие записи:

2 Responses to Введение в Starling, часть 1
  1. an2rej Reply

    Дак следующей статьи нету? А то я обыскался, подумал может ссылку забыл вставить))

    Starling меняется и очень много устаревшей информации в интернете качается как Г в проруби и путает людей.

    • Валерий Бохан Reply

      Намечался перевод книги Introducing Starling ([ссылка] FREE), но сил дальше переводить не нашлось.
      Так что лучше почитать её в оригинале и следить за репозиторием ([ссылка]) и форумом ([ссылка])

Leave a Reply

Your email address will not be published. Please enter your name, email and a comment.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">