Рисование геометрия с CCDrawNodeDrawing geometry with CCDrawNode

CCDrawNode Предоставляет методы для рисования объектов-примитивов, таких как линий, кругов и треугольников.CCDrawNode provides methods for drawing primitive objects such as lines, circles, and triangles.

CCDrawNode Класс в CocosSharp предоставляет несколько методов для рисования распространенных геометрических фигур.The CCDrawNode class in CocosSharp provides multiple methods for drawing common geometric shapes. Он наследует от CCNode класса и обычно добавляется CCLayer экземпляров.It inherits from the CCNode class, and is usually added to CCLayer instances. В этом руководстве описывается, как использовать CCDrawNode экземпляров для выполнения пользовательской отрисовки.This guide covers how to use CCDrawNode instances to perform custom rendering. Он также предоставляет полный список функций рисования с помощью снимков экрана и примеры кода.It also provides a comprehensive list of available draw functions with screen shots and code examples.

Создание CCDrawNodeCreating a CCDrawNode

CCDrawNode Класс может использоваться для рисования геометрических объектов, таких как круги, прямоугольники и линии.The CCDrawNode class can be used to draw geometric objects such as circles, rectangles, and lines. Например, в следующем образце кода показано, как создать CCDrawNode экземпляр, который рисует окружность в CCLayer реализация класса:For example, the following code sample shows how to create a CCDrawNode instance which draws a circle in a CCLayer implementing class:

public class GameLayer : CCLayer
{
    public GameLayer ()
    {
        var drawNode = new CCDrawNode ();
        this.AddChild (drawNode);
        // Origin is bottom-left of the screen. This moves
        // the drawNode 100 pixels to the right and 100 pixels up
        drawNode.PositionX = 100;
        drawNode.PositionY = 100;

        drawNode.DrawCircle (
            center: new CCPoint (0, 0),
            radius: 20,
            color: CCColor4B.White);

    }
} 

Этот код формирует следующие круга во время выполнения.This code produces the following circle at runtime:

Сведения о методе DrawDraw method details

Давайте рассмотрим некоторые сведения, относящиеся к рисования с CCDrawNode:Let’s take a look at a few details related to drawing with a CCDrawNode:

Draw методы имеют относительно CCDrawNodeDraw methods positions are relative to the CCDrawNode

Все методы рисования требуется по крайней мере одной позиции значение для рисования.All draw methods require at least one position value for drawing. Это значение позиции определяется относительно CCDrawNode экземпляра.This position value is relative to the CCDrawNode instance. Это означает, что CCDrawNode сам имеет положение, а все рисуйте вызовы, выполняемые для CCDrawNode принять одно или несколько значений позиции.This means that the CCDrawNode itself has a position, and all draw calls made on the CCDrawNode also take one or more position values. Чтобы понять, как объединить эти значения, давайте рассмотрим несколько примеров.To help understand how these values combine, let’s look at a few examples.

Сначала мы рассмотрим DrawCircle приведенном выше примере:First we’ll look at the DrawCircle example above:

...
drawNode.PositionX = 100;
drawNode.PositionY = 100;

drawNode.DrawCircle (center: new CCPoint (0, 0),
...

В этом случае CCDrawNode расположен в (100,100), и нарисованные круг с координатами (0,0) относительно CCDrawNode, полученный в круге, выровненные по центру 100 пикселей до, так и справа от нижний левый угол экрана игры.In this case, the CCDrawNode is positioned at (100,100), and the drawn circle is at (0,0) relative to the CCDrawNode, resulting in the circle being centered 100 pixels up and to the right of the bottom-left corner of the game screen.

CCDrawNode Также может быть размещен в начале координат (нижней левой части экрана), полагаясь на окружность для смещения:The CCDrawNode can also be positioned at the origin (bottom left of the screen), relying on the circle for offsets:

...
drawNode.PositionX = 0;
drawNode.PositionY = 0;

drawNode.DrawCircle (center: new CCPoint (50, 60),
...

Приведенный выше результаты в центре круга по 50 единиц (drawNode.PositionX + CCPoint.X) справа от левой части экрана и 60 (drawNode.PositionY + CCPoint.Y) единиц выше нижнего края экрана.The code above results in the circle’s center at 50 units (drawNode.PositionX + the CCPoint.X) to the right of the left side of the screen, and 60 (drawNode.PositionY + the CCPoint.Y) units above the bottom of the screen.

После вызова метод draw, графического объекта можно изменять только CCDrawNode.Clear вызывается метод, поэтому любые изменения положения необходимо выполнить на CCDrawNode сам.Once a draw method has been called, the drawn object cannot be modified unless the CCDrawNode.Clear method is called, so any repositioning needs to be done on the CCDrawNode itself.

Объекты, нарисованными CCNodes также будут затронуты CCNode экземпляра Rotation и Scale свойства.Objects drawn by CCNodes are also impacted by the CCNode instance’s Rotation and Scale properties.

Методы рисования не обязательно должны вызываться на каждом кадреDraw methods do not need to be called every frame

Методы рисования должен вызываться только один раз для создания постоянного визуализации.Draw methods need to be called only once to create a persistent visual. В примере выше вызов DrawCircle в конструкторе класса GameLayerDrawCircle не нужно вызывать каждый кадр, повторно рисовать окружность, когда экран обновляется.In the example above, the call to DrawCircle in the constructor of the GameLayerDrawCircle does not need to be called every-frame to re-draw the circle when the screen refreshes.

Это отличается от методы рисования в MonoGame, обычно отображающего что-то на экран для только один кадр и который должен вызываться каждого кадра.This differs from draw methods in MonoGame, which typically will render something to the screen for only one frame, and which must be called every-frame.

Если вызова методов рисования каждого кадра, а затем объекты будут со временем накапливаться внутри вызывающего CCDrawNode экземпляра, в результате чего перетаскивания в частоте кадров как рисуются дополнительные объекты.If draw methods are called every frame then objects will eventually accumulate inside the calling CCDrawNode instance, resulting in a drop in framerate as more objects are drawn.

Каждый CCDrawNode поддерживает несколько вызовов drawEach CCDrawNode supports multiple draw calls

CCDrawNode экземпляры можно нарисовать несколько фигур.CCDrawNode instances can be used to draw multiple shapes. Это позволяет сложных визуальных объектов для охваченными в одном объекте.This allows complex visual objects to be encased in a single object. Например, следующий код может использоваться для подготовки к просмотру нескольких кругов с одним CCDrawNode:For example, the following code can be used to render multiple circles with one CCDrawNode:

for (int i = 0; i < 8; i++)
{
    drawNode.DrawCircle (
        center: new CCPoint (i*15, 0),
        radius: 20,
        color: CCColor4B.White);
} 

Это приводит на следующем рисунке:This results in the following graphic:

Примеры вызова DrawDraw call examples

В доступны следующие вызовы draw CCDrawNode:The following draw calls are available in CCDrawNode:

DrawCardinalSplineDrawCardinalSpline

DrawCardinalSpline Создает изогнутой линии через переменное число точек.DrawCardinalSpline creates a curved line through a variable number of points.

config Параметр определяет, какие точки сплайн будут переданы.The config parameter defines which points the spline will pass through. В приведенном ниже примере показано сплайна, который проходит через четыре точки.The example below shows a spline which passes through four points.

tension Элементов управления параметрами как острые или round точек на сплайн отображаются.The tension parameter controls how sharp or round the points on the spline appear. Объект tension значение 0 приведет к кривой сплайн и tension сплайна, нарисованными прямые линии и четкие края приведет к значение 1.A tension value of 0 will result in a curved spline, and a tension value of 1 will result in a spline drawn by straight lines and hard edges.

Хотя сплайны кривые линии, CocosSharp рисует сплайны с прямыми линиями.Although splines are curved lines, CocosSharp draws splines with straight lines. segments Параметр контролирует, сколько сегментов, используемую для отрисовки сплайн.The segments parameter controls how many segments to use to draw the spline. Большее число приводит к плавно изогнутой сплайна за счет производительности.A larger number results in a smoothly curved spline at the cost of performance.

Пример кода:Code example:

var splinePoints = new List<CCPoint> ();
splinePoints.Add (new CCPoint (0, 0));
splinePoints.Add (new CCPoint (50, 70));
splinePoints.Add (new CCPoint (0, 140));
splinePoints.Add (new CCPoint (100, 210));

drawNode.DrawCardinalSpline (
    config: splinePoints,
    tension: 0,
    segments: 64,
    color:CCColor4B.Red); 

DrawCatmullRomDrawCatmullRom

DrawCatmullRom Создает изогнутой линии через переменное число точек, аналогичную DrawCardinalLine.DrawCatmullRom creates a curved line through a variable number of points, similar to DrawCardinalLine. Этот метод не поддерживает параметр натяжение.This method does not include a tension parameter.

Пример кода:Code example:

var splinePoints = new List<CCPoint> ();
splinePoints.Add (new CCPoint (0, 0));
splinePoints.Add (new CCPoint (80, 90));
splinePoints.Add (new CCPoint (100, 0));
splinePoints.Add (new CCPoint (0, 130)); 

drawNode.DrawCatmullRom (
    points: splinePoints,
    segments: 64); 

DrawCircleDrawCircle

DrawCircle Создает периметре круга из заданного radius.DrawCircle creates a perimeter of a circle of a given radius.

Пример кода:Code example:

drawNode.DrawCircle (
    center:new CCPoint (0, 0),
    radius:20,
    color:CCColor4B.Yellow); 

DrawCubicBezierDrawCubicBezier

DrawCubicBezier Рисование кривой линии между двумя точками, с помощью контрольных точек для задания пути между двумя точками.DrawCubicBezier draws a curved line between two points, using control points to set the path between the two points.

Пример кода:Code example:

drawNode.DrawCubicBezier (
    origin: new CCPoint (0, 0),
    control1: new CCPoint (50, 150),
    control2: new CCPoint (250, 150),
    destination: new CCPoint (170, 0),
    segments: 64,
    lineWidth: 1,
    color: CCColor4B.Green); 

DrawEllipseDrawEllipse

DrawEllipse Создает контура эллипс, который часто называется овала (несмотря на то, что два, геометрически не идентичны).DrawEllipse creates the outline of an ellipse, which is often referred to as an oval (although the two are not geometrically identical). Форму эллипса могут определяться CCRect экземпляра.The shape of the ellipse can be defined by a CCRect instance.

Пример кода:Code example:

drawNode.DrawEllipse (
    rect: new CCRect (0, 0, 130, 90),
    lineWidth: 2,
    color: CCColor4B.Gray); 

DrawLineDrawLine

DrawLine подключается к точкам с помощью строки заданной ширины.DrawLine connects to points with a line of a given width. Этот метод аналогичен методу DrawSegment, за исключением того, он создает неструктурированный конечные точки, в отличие от функции round конечных точек.This method is similar to DrawSegment, except it creates flat endpoints as opposed to round endpoints.

Пример кода:Code example:

drawNode.DrawLine (
    from: new CCPoint (0, 0),
    to: new CCPoint (150, 30),
    lineWidth: 5,
    color:CCColor4B.Orange); 

DrawLineListDrawLineList

DrawLineList создает несколько строк, подключив каждая пара пунктов CCV3F_C4B массива.DrawLineList creates multiple lines by connecting each pair of points specified by a CCV3F_C4B array. CCV3F_C4B Структура содержит значения для положение и цвет.The CCV3F_C4B struct contains values for position and color. verts Параметр всегда должен содержать четное количество точек, так как каждая строка определяется двумя точками.The verts parameter should always contain an even number of points, as each line is defined by two points.

Пример кода:Code example:

CCV3F_C4B[] verts = new CCV3F_C4B[] {
    // First line:
    new CCV3F_C4B( new CCPoint(0,0), CCColor4B.White),
    new CCV3F_C4B( new CCPoint(30,60), CCColor4B.White),
    // second line, will blend from white to red:
    new CCV3F_C4B( new CCPoint(60,0), CCColor4B.White),
    new CCV3F_C4B( new CCPoint(120,120), CCColor4B.Red)
};

drawNode.DrawLineList (verts); 

DrawPolygonDrawPolygon

DrawPolygon Создает многоугольник заполненными и с контуром переменной ширины и цвета.DrawPolygon creates a filled-in polygon with an outline of variable width and color.

Пример кода:Code example:

CCPoint[] verts = new CCPoint[] {
    new CCPoint(0,0),
    new CCPoint(0, 100),
    new CCPoint(50, 150),
    new CCPoint(100, 100),
    new CCPoint(100, 0)
};

drawNode.DrawPolygon (verts,
    count: verts.Length,
    fillColor: CCColor4B.White,
    borderWidth: 5,
    borderColor: CCColor4B.Red,
    closePolygon: true); 

DrawQuadBezierDrawQuadBezier

DrawQuadBezier соединяющая две точки с линией.DrawQuadBezier connects two points with a line. Он ведет себя так же, как DrawCubicBezier , но поддерживает только одну контрольную точку.It behaves similarly to DrawCubicBezier but only supports a single control point.

Пример кода:Code example:

drawNode.DrawQuadBezier (
    origin:new CCPoint (0, 0),
    control:new CCPoint (200, 0),
    destination:new CCPoint (0, 300),
    segments:64,
    lineWidth:1,
    color:CCColor4B.White);

DrawRectDrawRect

DrawRect Создает прямоугольник, заполненными с переменную ширину и цвет.DrawRect creates a filled-in rectangle with an outline of variable width and color.

Пример кода:Code example:

var shape = new CCRect (
    0, 0, 100, 200);
drawNode.DrawRect(shape,
    fillColor:CCColor4B.Blue,
    borderWidth: 4,
    borderColor:CCColor4B.White); 

DrawSegmentDrawSegment

DrawSegment соединяющая две точки с помощью строки переменную ширину и цвет.DrawSegment connects two points with a line of variable width and color. Это похоже на DrawLine, за исключением того, он создает round конечных точек, а не неструктурированный конечных точек.It is similar to DrawLine, except it creates round endpoints rather than flat endpoints.

Пример кода:Code example:

drawNode.DrawSegment (from: new CCPoint (0, 0),
    to: new CCPoint (100, 200),
    radius: 5,
    color:new CCColor4F(1,1,1,1)); 

DrawSolidArcDrawSolidArc

DrawSolidArc Создает Клин заполненными цвета и radius.DrawSolidArc creates a filled-in wedge of a given color and radius.

Пример кода:Code example:

drawNode.DrawSolidArc(
    pos:new CCPoint(100, 100),
    radius:200,
    startAngle:0,
    sweepAngle:CCMathHelper.Pi/2, // this is in radians, clockwise
    color:CCColor4B.White); 

DrawSolidCircleDrawSolidCircle

DrawCircle Создает заполненными круга определенного радиуса.DrawCircle creates a filled-in circle of a given radius.

Пример кода:Code example:

drawNode.DrawSolidCircle(
    pos: new CCPoint (100, 100),
    radius: 50,
    color: CCColor4B.Yellow); 

DrawTriangleListDrawTriangleList

DrawTriangleList Создает список треугольников.DrawTriangleList creates a list of triangles. Каждый треугольник определяется три CCV3F_C4B экземпляров в массиве.Each triangle is defined by three CCV3F_C4B instances in an array. Количество вершин в массиве, передаваемый verts параметра должно быть кратно трем.The number of vertices in the array passed to the verts parameter must be a multiple of three. Обратите внимание, что только сведения о содержащихся в CCV3F_C4B — это положение verts и их цвет — DrawTriangleList метод не поддерживает рисования треугольники текстурами.Note that the only information contained in CCV3F_C4B is the position of the verts and their color – the DrawTriangleList method does not support drawing triangles with textures.

Пример кода:Code example:

CCV3F_C4B[] verts = new CCV3F_C4B[] {
    // First triangle:
    new CCV3F_C4B( new CCPoint(0,0), CCColor4B.White),
    new CCV3F_C4B( new CCPoint(30,60), CCColor4B.White),
    new CCV3F_C4B( new CCPoint(60,0), CCColor4B.White),
    // second triangle, each point has different colors:
    new CCV3F_C4B( new CCPoint(90,0), CCColor4B.Yellow),
    new CCV3F_C4B( new CCPoint(120,60), CCColor4B.Red),
    new CCV3F_C4B( new CCPoint(150,0), CCColor4B.Blue)
};

drawNode.DrawTriangleList (verts); 

СводкаSummary

В этом руководстве описывается создание CCDrawNode и выполнения обработки на основе примитивом.This guide explains how to create a CCDrawNode and perform primitive-based rendering. Он содержит пример каждого из вызовов draw.It provides an example of each of the draw calls.