CocosSharp v1.7.0.0-pre1: Embeddable game view and Xamarin.Forms support

RamiTabbaraRamiTabbara AUMember, Xamarin Team Xamurai

One of the most highly sought after features requested by users was the ability to integrate a CocosSharp game within a Xamarin.Forms application. Specifically, users were after a way to incorporate Xamarin.Forms controls alongside an embeddable game view that does not necessarily occupy the entire screen.

Unfortunately, due to a variety of limitations imposed by our dependencies, prior to CocosSharp 1.7.0.0, such functionality was previously not possible. Hence, to realise our goal, we have had to start from the ground-up and substantially redesign how a CocosSharp game is initialised.

The end of CCApplication — introducing the new CCGameView


Users of CocosSharp will be familiar with CCApplication's role in kick-starting their game. For example, on iOS, we would do the following:


    class Program : NSApplicationDelegate 
    {
        public override void DidFinishLaunching (MonoMac.Foundation.NSNotification notification)
        {

            CCApplication application = new CCApplication(false, new CCSize(1024f, 768f));
            
            // GameAppDelegate is a subclass of CCApplicationDelegate, a container class for loading the game scene
            application.ApplicationDelegate = new GameAppDelegate();

            application.StartGame();
        }

        ....

The problem implicit in this setup was that CCApplication took full control over your application, insisting that your game view was not only full-screen but that it was the sole, root view displayed.

In CocosSharp 1.7.0.0, we have replaced CCApplication with the new CCGameView class that serves the dual role of both setting up your game as well as rendering your game content. Depending on the targeted platform, CCGameView inherits from a corresponding native view class as showcased below:

CCGameView

The benefit of this design is that now a user simply treats CCGameView as they would any other native view. In particular, that means that on iOS, a CCGameView can now be specified within a .xib, while on Android we can make use of our resource .axml and similarly on WindowsPhone setup our view within a .xaml. For instance, a simple Android layout resource file for an activity with a game view could be


< ?xml version="1.0" encoding="utf-8"? />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
<CocosSharp.CCGameView
     android:id="@+id/GameView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent" />
</LinearLayout>

Overall, we now have a much more natural and cohesive setup for your game, and importantly users can not only specify the dimensions of their view, but when their game view appears within their application.

Replacing CCApplicationDelegate with the ViewCreated event


As highlighted in the previous section, a CCApplication instance was paired with a corresponding CCApplicaitonDelegate that was in charge of loading your game content. For example,


    public class GameAppDelegate : CCApplicationDelegate
    {
        public override void ApplicationDidFinishLaunching (CCApplication application, CCWindow mainWindow)
        {
            // Specify default world dimensions
            CCScene.SetDefaultDesignResolution(1024.f, 768.f, CCSceneResolutionPolicy.ShowAll);
            
            CCScene scene = new CCScene (mainWindow);
            
            // Setup your scene
            // ...
            
            mainWindow.RunWithScene (scene);
        }
    }

With the introduction of the new CCGameView we have removed this cumbersome approach of subclassing CCApplicationDelegate, replacing it with the CCGameView event ViewCreated, which users hook up to in order to initialise their game content. So for example, on iOS, for a game view associated with a custom view controller we could do the following,


    [Register ("ViewController")]
    partial class ViewController
    {
        [Outlet]
        CocosSharp.CCGameView GameView { get; set; }

        ...

and subsequently a user would then hook up to the ViewCreated event


public partial class ViewController : UIViewController
{
    public override void ViewDidLoad ()
    {
        base.ViewDidLoad ();

        if (GameView != null) {
            // Set loading event to be called once game view is fully initialised
            GameView.ViewCreated += LoadGame;
        }
        
        // Called once the game view has been fully initialised
        void LoadGame (object sender, EventArgs e)
        {
            CCGameView gameView = sender as CCGameView;

            if (gameView != null) {
                
                // Set world dimensions
                gameView.DesignResolution = new CCSizeI (1024, 768);

                gameView.ContentManager.SearchPaths = new List<string> () { "Fonts", "Sounds", "Images" };

                CCScene gameScene = new CCScene (gameView);
                gameScene.AddLayer (new GameLayer ());
                gameView.RunWithScene (gameScene);
            }
        }
    }

    ....

Similarly, for an Android app, connecting to ViewCreated would be performed during the corresponding activity's initialisation,


    public class MainActivity : Activity
    {
        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);

            // Set our view from the "main" layout resource
            SetContentView (Resource.Layout.Main);

            // Get our game view from the layout resource,
            // and attach the view created event to it
            CCGameView gameView = (CCGameView)FindViewById (Resource.Id.GameView);
            
            if (gameView != null)
                gameView.ViewCreated += LoadGame;
        }

        void LoadGame (object sender, EventArgs e)
        {
            // Same as above
        }
        
    ....

while finally on WindowsPhone, a custom Page with a xaml-specified game view would be setup within the constructor


    public sealed partial class MainPage : Page
    {
        public MainPage ()
        {
            this.InitializeComponent ();

            if (GameView != null)
                GameView.ViewCreated += LoadGame;
        }

        void LoadGame (object sender, EventArgs e)
        {
            // Same as above
        }
    
    ....

CocosSharpView for Xamarin.Forms


We have also introduced the new custom Xamarin.Forms View CocosSharpView, whose custom view renderers are built on top of our CCGameView stack as highlighted below

CocosSharpView

Initialising a CocosSharpView is just as easy as creating any other Xamarin.Forms control:


public class GamePage : ContentPage
{
    CocosSharpView gameView;

    public GamePage ()
    {
        gameView = new CocosSharpView () {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.FillAndExpand,
            // Set the game world dimensions
            DesignResolution = new Size (1024, 768),
            // Set the method to call once the view has been initialised
            ViewCreated = LoadGame
        };

        Content = gameView;
    }

    void LoadGame (object sender, EventArgs e)
    {
        var nativeGameView = sender as CCGameView;

        if (nativeGameView != null) {
            // As in past examples
        }
    }

    ....


Limitations


Firstly, please be aware that for our initial prerelease, CocosSharp 1.7.0.0-pre1, we have reduced the scope of our package to only target iOS, Android or Windows Phone 8.1 projects. In subsequent releases, we will broaden the range of platforms supported.

More importantly, despite all the advances that are introduced by the new CCGameView class, there are still some constraints imposed by our dependencies. In particular, while a user can create, destroy and subsequently recreate multiple instances of a CCGameView, currently we do not support the ability to have multiple concurrent CCGameView instances. In other words, for a given ViewController, Activity, Page etc., there can only be one CCGameView active at any point in time.

Will I necessarily need Xamarin.Forms to make use of these new features?


No. To make it perfectly clear — CCGameView is a native view implementation, meaning that you're free to incorporate this class within a native iOS, Android or WindowsPhone project.

For Xamarin.Forms users, the benefit of using the Forms-specific CocosSharpView lies in the ability to specify all the UI elements of your game within a single, cross-platform project.

And remember...


as a prerelease we'll be constantly looking to fix and improve what is a substantial redesign — something that is only possible with your support and feedback.

«1

Posts

  • MichaelBluesteinMichaelBluestein USInsider, University, Developer Group Leader ✭✭✭

    great work @RamiTabbara and @kjpou1

  • MichaelBluesteinMichaelBluestein USInsider, University, Developer Group Leader ✭✭✭

    Hey Guys,

    I updated the Xamarin Studio templates and created a new CocosSharp Xamarin.Forms showcase project, but the project doesn't include a reference to the CocosSharp PCL, and NuGet only shows version 1.6.2. Where can we get 1.7 (other than building from source)?

    Thanks

  • MichaelBluesteinMichaelBluestein USInsider, University, Developer Group Leader ✭✭✭

    Got It! I didn't have "Show Pre-release Packages" checked in Xamarin Studio's NuGet package manager.

  • AnatoliiGabuzaAnatoliiGabuza PLUniversity

    Thanks for great work! Testing it ;)

  • zahikramerzahikramer ILMember ✭✭✭

    Great Great Great @RamiTabbara and @kjpou1 !
    Waited for that so much!
    Thank you very much.

    Regarding CocosSharpView ,
    shouldn't it be called CocosSharpXFView (to distinguish it from CCGameView?)
    What do you think?

  • zahikramerzahikramer ILMember ✭✭✭

    Or CCGameXFView...
    ?

  • BrandonGBrandonG USMember

    Are there any sample projects yet?

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Hey Brandon

    They will be worked on but the same concepts still apply. Use the templates to get started and the rest of the game layout and creation is exactly the same. The only difference is that you have access to the Native View and it is controlled exactly as any other control would be for that platform.

    Templates are provided for normal application as well as Forms integration. It is up to the developer to decide on which is best to use.

    Please report any problems you may be having.

  • Adam.PatridgeAdam.Patridge USInsider, University
    edited November 2015

    First thing I tried was to combine some typical Xamarin.Forms content with a CocosSharpView on the same Page (sounded like a good idea at the time), so I threw in a StackLayout with a ListView and a CocosSharpView. Unfortunately, that just resulted in an exception on iOS.

    Error with EAGLContext.RenderBufferStorage! (System.InvalidOperationException)
    at OpenTK.Platform.iPhoneOS.iPhoneOSGameView.CreateFrameBuffer () [0x0014a] in :0
    at CocosSharp.CCGameView.CreateFrameBuffer () [0x0000f] in :0
    at CocosSharp.CCGameView.LayoutSubviews () [0x00000] in :0

    On Android, only the ListView content shows.

    (Is there a better place I should go to report problem details or ask questions about this pre-release?)

    Is that mixed-content scenario something that isn't really expected to work?

  • RamiTabbaraRamiTabbara AUMember, Xamarin Team Xamurai

    Hi Adam,

    There's a similar issue reported here, with a suggested change to the layout to fix it.

    The long and short of it is that the computed dimensions of the game view have either zero height and/or zero width (more likely zero height given that you're using a stack layout).

    There is a slight nuance when using a CocosSharpView (or another view such as a OpenGLView) relative to other controls such as labels or buttons. In the latter case, the native controls have default dimensions which will be reflected in the corresponding Xam.Forms control's size. e.g. When targeting iOS, creating a Xam.Forms Label with some text implicitly creates a UILabel of certain default size. Depending on how you layout your page, this default size can be of great importance, particularly when using a stack layout whose dimensions can solely be dependent on the size of its children.

    The problem is that for a game view, there is no native implicit default dimensions (other than 0x0), and the dimensions are driven by how the CocosSharpView is laid out on the page.

    In other words, if you've used a Label within a stack layout before and you haven't set the height, then you've implicitly relied on its default dimensions to ensure something was displayed. For the case of the CocosSharpView, that default height is 0.

  • Adam.PatridgeAdam.Patridge USInsider, University

    That's great info to know @RamiTabbara, thank you so much for the clarification. I don't know if the behavior should be the same between the two platforms (error on both, or error on none), but your explanation definitely makes sense.

    Just for the sake of getting a proof-of-concept together, I put it all in an AbsoluteLayout instead of a StackLayout and did sizing math via LayoutChildren. It looks like that will do the trick.

    POC tweet

  • AndyDentAndyDent AUMember ✭✭

    I'm having problems with a test Forms project, added separate thread for System.TypeLoadException for CocosSharp.CocosSharpViewRenderer and would be very grateful for people's comments. I'm trying to compose a sample for comparing performance in fast reaction to Cocos2D-x.

  • I just updated templete to cocossharp-v1-7-0-0-pre1. Getting build error ** The type or namespace name 'CCGameView' could not be found (are you missing a using directive or an assembly reference?)**

    Please help me with this.

  • RamiTabbaraRamiTabbara AUMember, Xamarin Team Xamurai

    Hi Manish,

    Make sure the prerelease packages are installed. Details on how to do this can be found in the release notes here.

  • Adam.PatridgeAdam.Patridge USInsider, University

    I've put together a blog post that covers getting the pre-release projects rolling in Xamarin Studio, based on all the things I messed up rushing through it. At the end, I put together a demo to show the ability to combine Xamarin.Forms and CocosSharpView on the same page. (The demo repo even has an animated CocosSharpView bouncing around on top of a Xamarin.Forms ListView.)

    Giving CocosSharp v1.7.0.0-pre1 a Spin

    Blog post demo Git repo

  • JensDemeyJensDemey USMember ✭✭

    @RamiTabbara said:
    currently we do not support the ability to have multiple concurrent CCGameView instances. In other words, for a given ViewController, Activity, Page etc., there can only be one CCGameView active at any point in time.

    Hello RemaiTabbara, do you know if multiple instances will be supported at some point in the future?
    Thanks

  • WitlockWitlock USMember

    Great!
    Waiting for the windows 10 release.

  • zahikramerzahikramer ILMember ✭✭✭

    +1 for @JensDemey request.

  • JensDemeyJensDemey USMember ✭✭

    I've been trying to set the CCGameView backgroundcolor to transparent but it stays black. Does anyone know how to make it transparent?
    I think it's pretty important for an embedded view.

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    @JensDemey

    What platform?

  • JensDemeyJensDemey USMember ✭✭

    @kjpou1
    Android.

    Some of the code I'm using:
    CocosSharpView :
    gameView = new CocosSharpView() { BackgroundColor = Color.Transparent, DesignResolution = new Size(1024, 768), HorizontalOptions = LayoutOptions.Center, // Set the method to call once the view has been initialised ViewCreated = LoadGame };

    GameLayer:
    public GameLayer(): base(CCColor4B.Transparent) { //.. }

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai

    Set up new issue here https://github.com/mono/CocosSharp/issues/324. Thanks

  • CCGameView gameView = (CCGameView)FindViewById (Resource.Id.GameView);
    gameView.ViewCreated += LoadGame;

    Above code is binding LoadGame event. but its not being called.
    any idea?

  • zahikramerzahikramer ILMember ✭✭✭

    It's an old problem for WinPhone 8.1 XAML
    Thought it was solved. but not.
    Even from the PCL support for CC, when i try to insert normal page BEFORE the game,
    like opening the app from FirstPage.cs and from there buy pushing a button to navigate to the CC game page,
    I get "Access Violation" Error.
    Here i attached replacement for the PCL project of the Templates for the new 1.7 version of CC.
    (you also need to change on the WinPhone project the App class constructor to:
    public App () { // The root page of your application // The root page of your application MainPage = new NavigationPage(new FirstPage()); }

    Can you fix the bug?
    Thanks

  • zahikramerzahikramer ILMember ✭✭✭

    Attached here the full WP81 test project.
    anyone?

  • @Manishkumar.7018 said:
    CCGameView gameView = (CCGameView)FindViewById (Resource.Id.GameView);
    gameView.ViewCreated += LoadGame;

    Above code is binding LoadGame event. but its not being called.
    any idea?

    Please help me to slove it.

  • WitlockWitlock USMember

    Kind of lame how my VS templates are all version 1.7 now which doesn't support windows builds.

  • kjpou1kjpou1 LUMember, Xamarin Team Xamurai
  • PaulKellyPaulKelly USMember ✭✭

    Where can I get the pre 1.7 project templates for Xamarin Studio and how do I install them?
    The above link from Kenneth is for 1.6.2 and assume for Visual Studio
    Add in manager for Xamarin Studio only brings up Ver 1.7.
    Thank you

  • FedorBushlanovFedorBushlanov VNMember
    edited December 2015

    I'm having seems to be silly error at this point:

    CCGameView gameView = (CCGameView)FindViewById (Resource.Id.GameView);

    It says:

    Error CS0012: The type 'OpenTK.Platform.Android.AndroidGameView' is defined in an assembly that is not referenced. You must add a reference to assembly 'OpenTK-1.0, Version=1.0.0.0, Culture=neutral, PublicKeyToken=84e04ff9cfb79065'. (CS0012) (CrazyLoops.Android)

    and

    Error CS0030: Cannot convert type 'Android.Views.View' to 'CocosSharp.CCGameView' (CS0030) (CrazyLoops.Android)

    But it seems that FindViewById is defined in Android.App namespace, and I have it referenced! Please help.

    SOLVED: I added "OpenTK-1.0" reference as requested into "References" folder and it can be compiled now.

  • RamiTabbaraRamiTabbara AUMember, Xamarin Team Xamurai

    Hi Fedor,

    Good to hear. Also, in case you're not aware, there are XS and VS projects available so that you can create new projects with the correct references setup and avoid these headaches.

  • Here is an issue with v1.7.0.0-pre1 which didn't appear in previous versions. When my application is running well in foreground or stays in background, whenever I turn OFF and then ON the screen, I get the exception:

    System.NullReferenceException: Object reference not set to an instance of an object
      at Microsoft.Xna.Framework.ScreenReceiver.OnUnlocked () [0x00011] in <filename unknown>:0
      at Microsoft.Xna.Framework.ScreenReceiver.OnReceive (Android.Content.Context context, Android.Content.Intent intent) [0x00073] in <filename unknown>:0
      at Android.Content.BroadcastReceiver.n_OnReceive_Landroid_content_Context_Landroid_content_Intent_ (IntPtr jnienv, IntPtr native__this, IntPtr native_context, IntPtr native_intent) [0x00019] in /Users/builder/data/lanes/2512/d3008455/source/monodroid/src/Mono.Android/platforms/android-17/src/generated/Android.Content.BroadcastReceiver.cs:430
      at at (wrapper dynamic-method) System.Object:9ec28329-5e61-4607-8635-bc5367286ce3 (intptr,intptr,intptr,intptr)
    

    I didn't find any example on how to handle OnUnlocked() event, where I supposed somehow to create my everything again and run it. Please advise and thank you!

  • zahikramerzahikramer ILMember ✭✭✭

    Hi @ramiTabbara
    Any news on release?

  • DreamTeamMobileDreamTeamMobile USMember

    Where did you guys get OpenTK 1.0 reference?

  • Does the 1.7.1 version of CocosSharp work on Windows Desktop? The current templates (as far as I know) support iOS, Android, and Windows Phone.

    I'm all for mobile development, but if I want to write a game for Steam (and I do), the framework (and templates) will have to support Windows Desktop (probably followed by Mac Desktop under Mono). Is this available and I am missing it?

  • YuryPahomauYuryPahomau USMember
    edited August 2016

    I want to develop windows DirectX game. Please bring back this functionality.

  • I am having a problem that if I change view controller my gameview stops running and all sprites become invisible. I have handled game pause and resume on view appear and disappear. Any Idea why this is happening?

  • this issue only happens if i put my controller with gameview inside a tab

  • RayKoopaRayKoopa DEMember ✭✭

    So, any words on how to use CCGameView on the Windows desktop platform?

«1
Sign In or Register to comment.