Использование CocosSharp в Xamarin.FormsUsing CocosSharp in Xamarin.Forms

Загрузить образец загрузить примерDownload Sample Download the sample

CocosSharp может использоваться для добавления точное фигуры, изображения и отрисовку текста в приложение для расширенного представленияCocosSharp can be used to add precise shape, image, and text rendering to an application for advanced visualization

Усовершенствовано в 2016 г. Кокосовые # в Xamarin.FormsEvolve 2016: Cocos# in Xamarin.Forms

ОбзорOverview

CocosSharp — это гибкая и мощная технология для отображения графики, чтение сенсорный ввод, воспроизведение аудио-и управление.CocosSharp is a flexible, powerful technology for displaying graphics, reading touch input, playing audio, and managing content. В этом руководстве объясняется, как добавить CocosSharp в приложения Xamarin.Forms.This guide explains how to add CocosSharp to a Xamarin.Forms application. Здесь рассматривается следующее:It covers the following:

Что такое CocosSharpWhat is CocosSharp?

CocosSharp является подсистемой игры с открытым исходным кодом, доступный на платформе Xamarin.CocosSharp is an open source game engine that is available on the Xamarin platform. CocosSharp является эффективным для среды выполнения библиотеки, которая содержит следующие компоненты:CocosSharp is a runtime-efficient library which includes the following features:

  • Образ с помощью визуализации CCSprite классаImage rendering using the CCSprite class
  • Фигуры с помощью визуализации CCDrawNode классаShape rendering using the CCDrawNode class
  • С помощью логики каждый кадр CCNode.Schedule классаEvery-frame logic using the CCNode.Schedule class
  • С помощью управления содержимым (Загрузка и выгрузка ресурсы, такие как PNG-файлы) CCTextureCacheContent management (loading and unloading of resources such as .png files) using the CCTextureCache
  • Анимаций с помощью CCAction классаAnimations using the CCAction class

В CocosSharp основное внимание уделяется упрощают создание кросс платформенных игр 2D; Тем не менее он может быть отличным добавлением к приложения на основе форм Xamarin.CocosSharp’s primary focus is to simplify the creation of cross-platform 2D games; however, it can also be a great addition to Xamarin Form applications. Поскольку игр обычно требуют эффективной визуализации и точный контроль над визуальных элементов, CocosSharp можно использовать для добавления эффективную визуализацию и эффекты не игровых приложений.Since games typically require efficient rendering and precise control over visuals, CocosSharp can be used to add powerful visualization and effects to non-game applications.

Xamarin.Forms построена на основе собственного, специфические для платформы пользовательского интерфейса системы.Xamarin.Forms is built upon native, platform-specific UI systems. Например Buttons выглядят по-разному в iOS и Android и даже может отличаться по версиям операционной системы.For example, Buttons appear differently on iOS and Android, and may even differ by operating system version. Напротив CocosSharp не используют все визуальные объекты платформы, поэтому все визуальные объекты выглядят одинаково на всех платформах.By contrast, CocosSharp does not use any platform-specific visual objects, so all visual objects appear identical on all platforms. Само собой разрешение и пропорции отличаются между устройствами, и это может повлиять на прорисовку CocosSharp его визуальные элементы.Of course, resolution and aspect ratio differ between devices, and this can impact how CocosSharp renders its visuals. Эти сведения будут рассматриваться далее в этом руководстве.These details will be discussed later in this guide.

Более подробные сведения можно найти в CocosSharp разделе.More detailed information can be found in the CocosSharp section.

Добавление пакетов CocosSharp NugetAdding the CocosSharp Nuget packages

Прежде чем использовать CocosSharp, разработчики должны сделать ряд дополнений в свои проекты Xamarin.Forms.Before using CocosSharp, developers need to make a few additions to their Xamarin.Forms project. В этом руководстве предполагается, что проект Xamarin.Forms с помощью iOS, Android и .NET Standard проект библиотеки.This guide assumes a Xamarin.Forms project with an iOS, Android, and .NET Standard library project. Весь код будет записываться в проекте библиотеки .NET Standard; Тем не менее библиотеки должны добавляться проекты iOS и Android.All of the code will be written in the .NET Standard library project; however, libraries must be added to the iOS and Android projects.

Пакет CocosSharp Nuget содержит все объекты, необходимые для создания объектов CocosSharp.The CocosSharp Nuget package contains all of the objects needed to create CocosSharp objects. Пакет nuget CocosSharp.Forms включает CocosSharpView класс, который используется для размещения CocosSharp в Xamarin.Forms.The CocosSharp.Forms nuget package includes the CocosSharpView class, which is used to host CocosSharp in Xamarin.Forms. Добавить CocosSharp.Forms NuGet и CocosSharp будут автоматически добавляться также.Add the CocosSharp.Forms NuGet and CocosSharp will be automatically added as well. Чтобы сделать это, щелкните правой кнопкой мыши пакетов папки в проект библиотеки .NET Standard и выберите добавить пакеты... . Введите условие поиска CocosSharp.Formsвыберите CocosSharp для Xamarin.Forms, затем нажмите кнопку Add Package.To do this, right-click on the Packages folder in the .NET Standard library project and select Add Packages.... Enter the search term CocosSharp.Forms, select CocosSharp for Xamarin.Forms, then click Add Package.

Оба CocosSharp и CocosSharp.Forms будут добавлены в проект пакеты NuGet:Both CocosSharp and CocosSharp.Forms NuGet packages will be added to the project:

Повторите описанные выше действия для проектов для конкретной платформы (например, iOS и Android).Repeat the above steps for platform-specific projects (such as iOS and Android).

Пошаговое руководство. Добавление в приложение Xamarin.Forms CocosSharpWalkthrough: Adding CocosSharp to a Xamarin.Forms app

Выполните следующие действия, чтобы добавить простое представление CocosSharp в приложение Xamarin.Forms.Follow these steps to add a simple CocosSharp view to a Xamarin.Forms app:

  1. Создание Xamarin страницы формCreating a Xamarin Forms Page
  2. Добавление CocosSharpViewAdding a CocosSharpView
  3. Создание GameSceneCreating the GameScene
  4. Добавление кругAdding a Circle
  5. Взаимодействие с CocosSharpInteracting with CocosSharp

Когда вы успешно добавили представления CocosSharp в приложение Xamarin.Forms, перейдите на CocosSharp документации Дополнительные сведения о создании содержимого с помощью CocosSharp.Once you've successfully added a CocosSharp view to a Xamarin.Forms app, visit the CocosSharp documentation to learn more about creating content with CocosSharp.

1. Создание Xamarin страницы форм1. Creating a Xamarin Forms Page

CocosSharp может размещаться в любом контейнере Xamarin.Forms.CocosSharp can be hosted in any Xamarin.Forms container. В этом примере для данной страницы используется страница с именем HomePage.This sample for this page uses a page called HomePage. HomePage разбивается пополам, Grid Показать, как Xamarin.Forms CocosSharp могут быть визуализированы и одновременно на одной странице.HomePage is split in half by a Grid to show how Xamarin.Forms and CocosSharp can be rendered simultaneously on the same page.

Во-первых, Настройка параметров страницы, чтобы он содержал Grid и два Button экземпляров:First, set up the Page so it contains a Grid and two Button instances:

public class HomePage : ContentPage
{
public HomePage ()
    {
        // This is the top-level grid, which will split our page in half
        var grid = new Grid ();
        this.Content = grid;
        grid.RowDefinitions = new RowDefinitionCollection {
            // Each half will be the same size:
            new RowDefinition{ Height = new GridLength(1, GridUnitType.Star)},
            new RowDefinition{ Height = new GridLength(1, GridUnitType.Star)},
        };
        CreateTopHalf (grid);
        CreateBottomHalf (grid);
    }
    void CreateTopHalf(Grid grid)
    {
        // We'll be adding our CocosSharpView here:
    }
    void CreateBottomHalf(Grid grid)
    {
        // We'll use a StackLayout to organize our buttons
        var stackLayout = new StackLayout();
        // The first button will move the circle to the left when it is clicked:
        var moveLeftButton = new Button {
            Text = "Move Circle Left"
        };
        stackLayout.Children.Add (moveLeftButton);

        // The second button will move the circle to the right when clicked:
        var moveCircleRight = new Button {
            Text = "Move Circle Right"
        };
        stackLayout.Children.Add (moveCircleRight);
        // The stack layout will be in the bottom half (row 1):

        grid.Children.Add (stackLayout, 0, 1);
    }
}

В iOS HomePage отображается, как показано на следующем рисунке:On iOS, the HomePage appears as shown in the following image:

2. Добавление CocosSharpView2. Adding a CocosSharpView

CocosSharpView Класс используется для внедрения CocosSharp в Xamarin.Forms приложение.The CocosSharpView class is used to embed CocosSharp into a Xamarin.Forms app. Так как CocosSharpView наследует от Xamarin.Forms.View класс, он предлагает привычный интерфейс для макета, и он может использоваться внутри контейнеров макета например Xamarin.Forms.Grid.Since CocosSharpView inherits from the Xamarin.Forms.View class, it provides a familiar interface for layout, and it can be used within layout containers such as Xamarin.Forms.Grid. Добавьте новый CocosSharpView в проект, выполнив CreateTopHalf метод:Add a new CocosSharpView to the project by completing the CreateTopHalf method:

void CreateTopHalf(Grid grid)
{
    // This hosts our game view.
    var gameView = new CocosSharpView () {
        // Notice it has the same properties as other XamarinForms Views
        HorizontalOptions = LayoutOptions.FillAndExpand,
        VerticalOptions = LayoutOptions.FillAndExpand,
        // This gets called after CocosSharp starts up:
        ViewCreated = HandleViewCreated
    };
    // We'll add it to the top half (row 0)
    grid.Children.Add (gameView, 0, 0);
}

CocosSharp инициализация не выполняется сразу же, поэтому рекомендуем зарегистрироваться событие когда CocosSharpView завершения его создания.CocosSharp initialization is not immediate, so register an event for when the CocosSharpView has finished its creation. Это можно сделать HandleViewCreated метод:Do this in the HandleViewCreated method:

void HandleViewCreated (object sender, EventArgs e)
{
    var gameView = sender as CCGameView;
    if (gameView != null)
    {
        // This sets the game "world" resolution to 100x100:
        gameView.DesignResolution = new CCSizeI (100, 100);
        // GameScene is the root of the CocosSharp rendering hierarchy:
        gameScene = new GameScene (gameView);
        // Starts CocosSharp:
        gameView.RunWithScene (gameScene);
    }
}

HandleViewCreated Метод имеет две важные сведения, которые мы будем рассматривать.The HandleViewCreated method has two important details that we’ll be looking at. Во-первых, GameScene класс, который будет создан в следующем разделе.The first is the GameScene class, which will be created in the next section. Важно отметить, что приложение не будет компилироваться до GameScene создается и gameScene экземпляр ссылка будет разрешена.It’s important to note that the app will not compile until the GameScene is created and the gameScene instance reference is resolved.

Второй важный момент — DesignResolution свойство, которое определяет видимую область игры для CocosSharp объектов.The second important detail is the DesignResolution property, which defines the game’s visible area for CocosSharp objects. DesignResolution Свойства будут рассмотрены после создания GameScene.The DesignResolution property will be looked at after creating GameScene.

3. Создание GameScene3. Creating the GameScene

GameScene Класс наследует от элемента CocosSharp CCScene.The GameScene class inherits from CocosSharp’s CCScene. GameScene Это первая точка, где мы имеем дело только с помощью CocosSharp.GameScene is the first point where we deal purely with CocosSharp. Код, содержащийся в GameScene работает в любом приложении CocosSharp ли он размещается в пределах проекта Xamarin.Forms или нет.Code contained in GameScene will function in any CocosSharp app, whether it is housed within a Xamarin.Forms project or not.

CCScene Класс является корнем visual все CocosSharp отрисовки.The CCScene class is the visual root of all CocosSharp rendering. Любого видимого объекта CocosSharp должны содержаться в CCScene.Any visible CocosSharp object must be contained within a CCScene. В частности, необходимо добавить визуальные объекты CCLayer экземпляров и их CCLayer необходимо добавить экземпляры CCScene.More specifically, visual objects must be added to CCLayer instances, and those CCLayer instances must be added to a CCScene.

Приведенный ниже график могут помочь визуализировать типичный CocosSharp иерархии:The following graph can help visualize a typical CocosSharp hierarchy:

Только один CCScene могут быть активны одновременно.Only one CCScene can be active at one time. Большинство игр используйте несколько CCLayer экземпляры, чтобы Сортировка содержимого, но наше приложение использует только один.Most games use multiple CCLayer instances to sort content, but our application uses only one. Аналогичным образом большинстве игр используется несколько визуальных объектов, но у нас будет только один в наше приложение.Similarly, most games use multiple visual objects, but we’ll only have one in our app. Более подробный рассказ о CocosSharp, визуальной иерархии можно найти в Пошаговое руководство по игре BouncingGame.A more detailed discussion about the CocosSharp visual hierarchy can be found in the BouncingGame walkthrough.

Изначально GameScene класс будет практически пустым – мы просто создадим его соответствие ссылка в HomePage.Initially the GameScene class will be nearly empty – we’ll just create it to satisfy the reference in HomePage. Добавьте новый класс в проект .NET Standard library с именем GameScene.Add a new class to your .NET Standard library project named GameScene. Он должен наследовать от CCScene следующим образом:It should inherit from the CCScene class as follows:

public class GameScene : CCScene
{
    public GameScene (CCGameView gameView) : base(gameView)
    {

    }
}

Теперь, когда GameScene — мы определены, можно вернуться к HomePage и добавьте поля:Now that GameScene is defined, we can return to HomePage and add a field:

// Keep the GameScene at class scope
// so the button click events can access it:
GameScene gameScene;

Теперь можно скомпилировать наш проект и запустить его, чтобы увидеть CocosSharp под управлением.We can now compile our project and run it to see CocosSharp running. Мы еще не добавили ничего для наших GameScene, это черный — цвет по умолчанию сцены CocosSharp в верхней части нашей странице:We haven’t added anything to our GameScene, so the top half of our page is black – the default color of a CocosSharp scene:

4. Добавление круг4. Adding a Circle

В приложении используется запущенный экземпляр обработчика CocosSharp, отображение пустой CCScene.The app currently has a running instance of the CocosSharp engine, displaying an empty CCScene. Далее мы добавим визуальный объект: круг.Next, we’ll add a visual object: a circle. CCDrawNode Класс может использоваться для рисования различных геометрических фигур, как описано в Рисование геометрия с CCDrawNode руководство.The CCDrawNode class can be used to draw a variety of geometric shapes, as outlined in the Drawing Geometry with CCDrawNode guide.

Добавить круг наших GameScene класса и создать его экземпляр в конструкторе, как показано в следующем коде:Add a circle to our GameScene class and instantiate it in the constructor as shown in the following code:

public class GameScene : CCScene
{
    CCDrawNode circle;
    public GameScene (CCGameView gameView) : base(gameView)
    {
        var layer = new CCLayer ();
        this.AddLayer (layer);
        circle = new CCDrawNode ();
        layer.AddChild (circle);
        circle.DrawCircle (
            // The center to use when drawing the circle,
            // relative to the CCDrawNode:
            new CCPoint (0, 0),
            radius:15,
            color:CCColor4B.White);
        circle.PositionX = 20;
        circle.PositionY = 50;
    }
}

Выполнение приложения теперь показывает круг в левой части области отображения CocosSharp:Running the app now shows a circle on the left side of the CocosSharp display area:

Основные сведения о DesignResolutionUnderstanding DesignResolution

Теперь, когда отображается визуального объекта CocosSharp, мы сможем решить проблему DesignResolution свойство.Now that a visual CocosSharp object is displayed, we can investigate the DesignResolution property.

DesignResolution Представляет ширину и высоту области CocosSharp по размещению и изменение размера объектов.The DesignResolution represents the width and height of the CocosSharp area for placing and sizing objects. Фактическое разрешение области измеряется в пикселей хотя DesignResolution измеряется в мире единицы.The actual resolution of the area is measured in pixels while the DesignResolution is measured in world units. На следующей схеме показана разрешение различные части представления, отображаться на iPhone 5 с разрешением экрана 640 x 1136 пикселей:The following diagram shows the resolution of various parts of the view as displayed on an iPhone 5 with a screen resolution of 640x1136 pixels:

На схеме выше показаны измерения, пикселей с внешней стороны экрана черным шрифтом.The diagram above displays pixel dimensions on the outside of the screen in black text. Единицы отображаются внутри схемы в белым текстом.Units are displayed on the inside of the diagram in white text. Ниже приведены некоторые важные сведения, отображенный выше.Here are some important details displayed above:

  • Источником отображение CocosSharp является слева внизу.The origin of the CocosSharp display is at the bottom left. В правой увеличивает значение X и перемещении вверх увеличивает значение Y.Moving to the right increases the X value, and moving up increases the Y value. Обратите внимание, что значение Y инвертируется по сравнению с некоторые другие обработчики плоского макета, где (0,0) находится в левой верхней части холста.Notice that the Y value is inverted compared to some other 2D layout engines, where (0,0) is the top-left of the canvas.
  • Чтобы сохранить пропорции его представления является CocosSharp по умолчанию.The default behavior of CocosSharp is to maintain the aspect ratio of its view. Поскольку шире, чем высота первой строки в сетке, CocosSharp не заполняет всю ширину элемента свою ячейку, как показано пунктирной белого прямоугольника.Since the first row in the grid is wider than it is tall, CocosSharp does not fill the entire width of its cell, as shown by the dotted white rectangle. Это поведение можно изменить, как описано в разделе руководство обработка нескольких разрешений в CocosSharp.This behavior can be changed, as described in the Handling Multiple Resolutions in CocosSharp guide.
  • В этом примере CocosSharp сохранит область отображения 100 единиц ширину, высоту, независимо от размера или соотношение сторон своего устройства.In this example, CocosSharp will maintain a display area of 100 units wide and tall regardless of the size or aspect ratio of its device. Это означает, что код можно предположить, что X = 100 представляет правую привязан CocosSharp отображения, сохранение макета, согласованные на всех устройствах.This means that code can assume that X=100 represents the far-right bound of the CocosSharp display, keeping layout consistent on all devices.

Сведения о CCDrawNodeCCDrawNode Details

Простое приложение использует CCDrawNode класс Рисование окружности.Our simple app uses the CCDrawNode class to draw a circle. Этот класс может быть очень полезно для бизнес-приложений, так как он обеспечивает отрисовки геометрического объекта на основе векторов — это функция, отсутствующие на Xamarin.Forms.This class can be very useful for business apps since it provides vector-based geometry rendering – a feature missing from Xamarin.Forms. В дополнение к круги CCDrawNode класс может использоваться для рисования прямоугольников, сплайны, линий и многоугольников пользовательские.In addition to circles, the CCDrawNode class can be used to draw rectangles, splines, lines, and custom polygons. CCDrawNode также является простой в использовании, так как он не требуется использовать файлы изображений (.png).CCDrawNode is also easy to use since it does not require the use of image files (such as .png). Более подробное рассмотрение CCDrawNode можно найти в Рисование геометрия с CCDrawNode руководство.A more detailed discussion of CCDrawNode can be found in the Drawing Geometry with CCDrawNode guide.

5. Взаимодействие с CocosSharp5. Interacting with CocosSharp

CocosSharp визуальные элементы (такие как CCDrawNode) наследовать от CCNode класса.CocosSharp visual elements (such as CCDrawNode) inherit from the CCNode class. CCNode предоставляет два свойства, которые могут использоваться для размещения объекта относительно его родительского элемента: PositionX и PositionY.CCNode provides two properties which can be used to position an object relative to its parent: PositionX and PositionY. В настоящее время наш код использует эти два свойства для размещения центра круга, как показано в этом фрагменте кода:Our code currently uses these two properties to position the center of the circle, as shown in this code snippet:

circle.PositionX = 20;
circle.PositionY = 50;

Это важно отметить, что CocosSharp объекты располагаются с явно указанными значениями позиции, в отличие от большинства представления Xamarin.Forms, которые автоматически располагаются в соответствии с поведение их родительские элементы управления макета.It’s important to note that CocosSharp objects are positioned by explicit position values, as opposed to most Xamarin.Forms views, which are automatically positioned according to the behavior of their parent layout controls.

Мы добавим код, чтобы разрешить пользователю щелкните одну из двух кнопок, чтобы переместить элемент управления circle влево или вправо, 10 единиц (не пикселей, поскольку Рисует элемент управления circle в абсолютном единицы CocosSharp пространстве).We’ll add code to allow the user to click one of the two buttons to move the circle to the left or to the right by 10 units (not pixels, since the circle draws in the CocosSharp world unit space). Сначала мы создадим два открытых метода в GameScene класса:First we’ll create two public methods in the GameScene class:

public void MoveCircleLeft()
{
    circle.PositionX -= 10;
}

public void MoveCircleRight()
{
    circle.PositionX += 10;
}

Далее мы добавим обработчики две кнопки в HomePage реакция на щелчок мыши.Next, we’ll add handlers to the two buttons in HomePage to respond to clicks. После завершения наших CreateBottomHalf метод содержит следующий код:When finished, our CreateBottomHalf method contains the following code:

void CreateBottomHalf(Grid grid)
{
    // We'll use a StackLayout to organize our buttons
    var stackLayout = new StackLayout();

    // The first button will move the circle to the left when it is clicked:
    var moveLeftButton = new Button {
        Text = "Move Circle Left"
    };
    moveLeftButton.Clicked += (sender, e) => gameScene.MoveCircleLeft ();
    stackLayout.Children.Add (moveLeftButton);

    // The second button will move the circle to the right when clicked:
    var moveCircleRight = new Button {
        Text = "Move Circle Right"
    };
    moveCircleRight.Clicked += (sender, e) => gameScene.MoveCircleRight ();
    stackLayout.Children.Add (moveCircleRight);

    // The stack layout will be in the bottom half (row 1):
    grid.Children.Add (stackLayout, 0, 1);
}

Элемент управления circle CocosSharp теперь перемещает в ответ на нажатия.The CocosSharp circle now moves in response to clicks. Также четко видно границы CocosSharp полотна, перемещая элемент управления circle достаточно далеко влево или вправо:We can also clearly see the boundaries of the CocosSharp canvas by moving the circle far enough to the left or right:

СводкаSummary

В этом руководстве показано, как добавить CocosSharp в Xamarin.Forms существующего проекта, как создать взаимодействие между Xamarin.Forms и CocosSharp и рассматриваются различные вопросы, при создании макетов в CocosSharp.This guide shows how to add CocosSharp to an existing Xamarin.Forms project, how to create interaction between Xamarin.Forms and CocosSharp, and discusses various considerations when creating layouts in CocosSharp.

Игровое ядро CocosSharp и предлагает множество функциональные возможности и глубина, поэтому в этом руководстве представлены только общие действия CocosSharp.The CocosSharp game engine offers a lot of functionality and depth, so this guide only scratches the surface of what CocosSharp can do. Разработчиков, заинтересованных в изучать дополнительные сведения о CocosSharp можно найти множество статей в CocosSharp архив.Developers interested in reading more about CocosSharp can find many articles in the CocosSharp archive.