В помощь мобильному разработчику
Cocos логотип

Да будет снег! Xamarin.Forms, CocosSharp и частицы

Александр Алексеев

Тем, кто меня знает, должно быть, хорошо известно, что я очень люблю использовать в работе Xamarin.Forms. Это первый фреймворк, к которому я примериваю каждый новый проект. Мне нравятся все те преимущества, которые он обеспечивает по умолчанию — простой MVVM (в особенности привязки), а также механизм визуализации. Кроме того, благодаря всему этому теперь стало легче добираться до платформы без того, чтобы прибегать к помощи рендереров.

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

iOS CocosSharp частицы

Android CocosSharp частицы

Эти приложения крутые… но их, разумеется, не получится создать при помощи Xamarin.Forms… верно? Не так ли?

А вот и нет!

И то, и другое приложение разработано с помощью Forms, и они оба запускаются с довольно многими элементами Forms — кнопками, таблицами и некоторыми привязками данных. Собственно, чтобы все это обладало определенной привлекательностью и существует CocosSharp. И его довольно легко настроить и запустить.

Итак, давайте разберемся в том, как это можно сделать! (Полный исходный код проекта можно найти на GitHub.)

 

Встречаем CocosSharp!

Ключом к получению этого крутого фона и этих анимации является CocosSharp. Я задумал создать определенное приложение погоды под названием Carrot. Если идет снег, в приложении показывается некоторая визуализация снега, а если дождь, тогда демонстрируется некоторая визуализация дождя и т. д. Мне хотелось проверить, сумею ли я реализовать подобное посредством Xamarin.Forms.

CocosSharp является основой для разработки игр. Это полнофункциональный физический движок. Если захочется, можно даже написать целую игру в Forms внутри него. Мы не будем использовать все возможности CocosSharp… все, что нам нужно — это некоторые частицы и спрайты.

Вначале необходимо добавить CocosSharp к проектам. Это NuGet, и он для удобства назван CocosSharp.Forms. Добавьте его к проектам платформ. Если вы используете PCL, стоит заметить, что вам нужно изменить профиль PCL на 111 перед добавлением NuGet. Примечательно, что это лишит нас возможности вести разработку под UWP (наряду с другими меньшими платформами Windows).

Теперь пора узнать об основных компонентах, которые мы будем использовать.

 

CCSprite

CCSprite— это класс, который заботится о рендеринге изображений в CocosSharp, с помощью него я отображаю фон и дом в приложении. Чтобы CocosSharp получил возможность отображать изображения, их нужно правильно настроить, выполнив ряд интересных вещей.

Сначала надо создать папку Content в каждом проекте платформы. Под ней создайте папку Images, она необязательна, однако, пригодится для лучшей организации (не забудьте прочитать разделы Layers, Scenes и Views, которые расположены ниже, чтобы лучше в этом разобраться). И побросайте в нее изображения.

В случае с проектом для iOS убедитесь в том, что вы установили Build Action на BundleResource. В то же время в случае с Android удостоверьтесь, что Build Action установлена на AndroidAsset. Теперь изображения доступны фреймворку.

Теперь следует на самом деле создать объект CCSprite. Я сделал это с помощью конструктора, который принимает строку в качестве имени файла. Имя файла, который Вы передаете, должно быть таким же, как имя изображения, добавленного в папку, – без расширения.

Другим полезным свойством CCSprite является Position, который на самом деле, как бы это сказать… это то, где спрайт находится в пределах общей сцены. Свойство Position задается другим классом в CocosSharp под названием CCPoint, который представляет собой координаты X/Y.

Кое-что интересное в CocosSharp, заключается в том, что position 0,0 находится в нижнем левом углу, а затем X отводит позицию вправо и Y поднимает позицию вверх. Таким же образом работают и некоторые другие фреймворки. (На мой взгляд, здесь это устроено несколько более интуитивно понятно.)

AnchorPoint указывает на то, где размещается спрайт в Position. Например, если Вы определите AnchorPoint к середине спринта, а Position укажите в x=0 и y=0, тогда половина спрайта не будет видна, так как абсолютный центр будет 0,0. Есть несколько констант на CCPoint, которые определяют различные общие опорные точки (среднюю, верхнюю левую и т. д.).

Теперь пришло время для ScaleX и ScaleY… этому нужно уделить особое внимание, дабы удостовериться в том, что изображение не слишком велико (или не слишком мало) для того, чтобы поместиться на экране.

Но как нам узнать, какой следует установить масштаб? Это хороший вопрос. Грубо говоря, Вам необходимо знать размеры области, куда все будет помещено. И исходя из этого, Вы можете все масштабировать в соответствии с тем, какова общая площадь по сравнению с размерами изображений. В этом посте описывается хороший способ для получения общих размеров экрана в приложении Forms (и это также годится в случае с CocosSharp в Forms).

В дополнение ко всему, приведем здесь код для создания 2 изображений в приложении (обратите внимание на то, что App.Width и App.Height устанавливаются из проекта платформы и представляют собой ширину и высоту полного экрана):

 

Частицы!

Падающий снег и выходящий из трубы дым реализованы при помощи частиц. CocosSharp поставляется с несколькими встроенными эффектами частиц, и их можно создавать и добавлять. Здесь я использовал CCParticleSnow и CCParticleSmoke (впрочем, об этом Вы и сами можете догадаться).

У частиц есть множество свойств, установив которые можно изменить то, как они будут появляться. И большинство из них носят говорящие названия — StartColor, EndColor, StartSize, EndSize и т. д. Если вы видите свойство, которое заканчивается на Var, то это устанавливает вариантность в соответствующем свойстве, то есть, вводит немного хаотичности. Так что StartSizeVar у частиц снега будет утверждать то, чтобы начальный размер снежных хлопьев не был все время одинаковым.

Проще всего добиться того, чтобы частицы выглядели так, как вам хочется, можно путем экспериментирования с различными свойствами. И для этого идеально подходят Xamarin Workbooks. Используя симулятор/эмулятор, можно избежать сценариев полного старта и перезапуска.

Код для создания частиц снега в моем приложение выглядит следующим образом:

 

Слои, сцены и представления

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

Однако, что такое сцена? Класс CCScene в значительной степени является базовым слоем того, куда все остальное будет добавляться. По крайней мере, так я это понимаю. Сцены держат слои. Слои держат видимые объекты. Только 1 сцена может быть активной в любой момент.

И, наконец — есть еще CCGameView. Это «окно» OS в целый мир CocosSharp. Так что именно здесь Вы устанавливаете некоторые свойства «мира», которые будут применяться ко всему.

И наиболее важным из них является DesignResolution. Это свойство принимает объект CCSizeI, который определяет ширину и высоту внутренней системы координат. Обратите внимание, что он не определяет то, насколько большим будет представление внешне. Другими словами, определение 100 на 100 означает то, что максимальная координата Х в мире CocosSharp будет 100, независимо от того, сколько пикселов операционной системы фактический занимает представление.

Другим важным свойством является установка ContentManager.SearchPaths. Это список строк, благодаря которому CocosSharp узнает, в каких папках искать контент. Поэтому, если Вы ранее положили изображения в папку Images удостоверьтесь в том, что в списке содержатся записи этих изображений! Обратите внимание: все, что Вы сюда положите, будет искаться в родительской папке Content.

И, наконец, Вы должны указать игровому представлению на то, какую сцену запускать изначально. Это делается с помощью функции RunWithScene.

Но откуда же приходит CCGameView?

 

Работа с Xamarin.Forms

До сих пор в этой статье я рассматривал лишь CocosSharp, и не говорил ничего конкретного по поводу Xamarin.Forms. К счастью, часть, связанная с Forms, здесь просто замечательная и на удивление простая. Существует класс в CocosSharp.Forms NuGet, который называется CocosSharpView. Этот класс наследует от Xamarin.Forms  View. Это означает, что он может быть добавлен к каждому визуальному макету в Forms, как и любые другие вещи: Label, Button и т. д. Для Forms никакой разницы нет.

Тут есть один нюанс, который заключается в том, что для инициализации класса CocosSharpView требуется некоторое время, поэтому вам необходимо зарегистрировать обработчик события — ViewCreated, чтобы манипулировать им, когда он будет готов. В обработчике событий Вы будете настраивать сцены, слои и т. д. И на тот случай, если Вы этого не знаете, скажем, что этот обработчик событий также получает посылаемый CCGameView объект в качестве объект-отправителя в функции аргументов. Так что именно здесь Вы даете старт функции RunWithScene!

И поскольку CocosSharpView является нормальным Xamarin.Forms представлением, вы можете добавить его в макет определенного типа (сетку, стек и т. д.), поместить его в другой ContentView или же делать с ним что захотите! Я разделил ContentView для того, чтобы CocosSharpView оказалось единственным в ContentView, занимая его всецело. Затем добавьте это в XAML как показано:

 

Итог

Вы можете провернуть некоторые ловкие трюки с Xamarin.Forms и CocosSharp. Здорово, что применение CocosSharp не ограничивается только разработкой игр — вы можете использовать его чисто для «украшений», как это сделал я в этом примере. Он также генерирует один и тот же вид на всех платформах, так что если Вы желаете создать какие-нибудь «фантастические» элементы пользовательского интерфейса, например, такие как кнопки, то Вы запросто можете сделать это изнутри. CocosSharp также предоставляет легкий способ получения пользовательских шрифтов, благодаря чему можно очень здорово украсить следующие Ваше приложение Forms!

АвторMatthew Soucoup
ИсточникСodeMillTech.com

Александр Алексеев
Александр Алексеев

Xamarin - разработчик. Работаю с .NET платформой с 2012 года, программирую в основном с использованием C#. За это время успел поработать с ASP.NET, Entity Framework, MSSQL, Git

Meetup лого
Xamarin Forms отправка файлов

Написать ответ