UPDATE (8-18-2017): Something changed with loading custom images for the particles. Instead of putting your image in the iOS and Android projects, you need to place it in your Forms solution. Also, if you notice that your custom particle has varying colors instead of having the color in your image file, you need to set the Start and End color with the CCColor4F RGBA constructor. I’ll update the code samples below to reflect these updates.
Cross platform apps have become a breeze with the addition of Xamarin Forms. The biggest challenge that I have been faced with is adding some UI flare to these apps without having to write so much platform specific code.
When your making an app, it’s always fun to add some personality to it by incorporating some kind of animation to make the user experience more engaging. One way to do this is by using a particle system in the background of your view.
There’s a few ways we can accomplish this,
- Create custom renderers for each platform utilizing the native frameworks to create a particle system.
- Use CocosSharp https://developer.xamarin.com/guides/cross-platform/game_development/cocossharp/
If your doing this in Xamarin Forms chances are you want this to work on both iOS and Android. For iOS you can easily create a custom renderer that uses the CAEmitterCell to create your particles. But Android does not have an equivalent of CAEmitterCell, you can find some examples (very few exists) of doing this on Android but there’s a pretty good chance that it will not act and look exactly like the iOS version. So we will be taking the CocosSharp route since we do not have to create any renderers and our UI will look exactly the same on both platforms.
I’ve created a Xamarin Forms projected called CocosDemo and the first thing we need to do is add the CocosSharp package to both iOS and Android. Right click on the Packages folder and select Add Packages, from there we can search for CocosSharp.
Make sure you select the one for Xamarin.Forms, this will also install the CocosSharp package as it is a dependency.
Once you have this installed on both platforms, you need to make sure that OpenTK is included as a reference as well. So right click on the references folder and select Edit References, then go to Packages, and make sure that OpenTK-1.0 is checked. Make sure you do this for both iOS and Android.
Your folder structure should now look something like this
Time to Code
Create a Content Page called GamePage, this will be the starting page of the app. Now we need to edit the CocosDemo class to look like this:
We are simply telling the MainPage to be the GamePage, and you’ll also notice there are two variables for holding ScreenHeight and ScreenWidth. In order to obtain the device’s screen width and height we have to initialize these two variables on each platform.
For iOS go to the AppDelegate.cs file and add the two lines for setting the width and height inside the FinishedLaunching method.
For Android, go to the MainActivity.cs and add this new method ConvertPixelsToDp and the lines for setting the width and height inside OnCreate.
Add the GameScene
Now create a new class called GameScene.cs which will be a subclass of CCScene.
Setting up the GamePage
For the GamePage, we are gonna set up a CocosSharpView and add that to our main layout.
Add Some UI
In order to incorporate other UI elements with the particle system just simply add the elements to the GamePage.xaml
Since this is a StackLayout, the particle system will appear underneath the label. If you want UI elements to appear on top of the particle system, switch to a different layout like Absolute or Relative.
Where the Particles At?
Now that all the set up in done, we can actually start coding the particle system. For this example we are going to create a CCParticleFireworks and a CCParticleExplosion. The other systems available are CCParticleSun, CCParticleSpiral, CCParticleSnow, CCParticleSmoke, CCParticleRain, CCParticleMeteor, CCParticleGalaxy, CCParticleFlower, CCParticleFire, and CCParticleBatchNode.
We will be doing all of the work inside the GamePage:
If you notice the code that is talking about using a custom image, if you decide to use your own image make sure you copy the image to
both iOS and Android projects your shared code project, then right click the image and go to Build Action and select EmbeddedResource.
If you run the app now you should see something like this (note: if you used a custom image you will see that, or the default circle particle if you commented that code out)