Cocos2d-XNA:Switch to Windows Phone 8 Native UI

It has been a while since my last post, now time for blogging again. Today, I shall describe the methodology which one can use to switch between cocos2d-xna platform and windows phone 8 native UI's.

Prerequisites:

1. Knowledge of XNA content pipeline.
2. Knowledge of Cocos2d-XNA platform.
3. Should have build & execute cocos2d-xna project from my earlier post.
4. Knowledge about Windows Phone platform.

Cocos2d-XNA platform is a very flexible platform in customization, in terms of designing game UI. Game developers can use level-editors to design game UI, but, when it comes to designing a common UI like setting page, shopping page, help page, UI designing using cocos2d-xna controls let alone often turns into a nightmare. You either have to create a very simple design or you have to create a custom design using coos2d-xna. There exists another alternative to these existing ones i.e. use the native UI controls of the platform which you are using. This often ease the development because developers just need to use native hi-tech UI design instead of creating custom design in cocos2d-xna, which is a lot time consuming and requires quite a lot of engineering effort at times. So, today I be showing you all, how you can switch between windows phone 8 platform native UI and cocos2d-xna game scene.

You can download the require source code files for this tutorial or you can follow step by step discussion below.

Download Now!

Now, lets start coding.

1) Your first step should be to build & execute cocos2d-xna project from my earlier post.  
2) Once your base project is build, create a new windows phone page in a landscape mode and name it "NativeUIPage.xaml".
3) Now, create a simple button and its click event "Button_Click".  
4) Now, open "NativeUIPage.xaml.cs" file and go to "Button_Click" method.  
5) Now, write below lines of code within "Button_Click" method in "NativeUIPage.xaml.cs" file.

if (this.NavigationService.CanGoBack)  
       {  
         this.NavigationService.GoBack();  
       }  

Here we are simply going back to our cocos2d-xna game page from our native windows phone 8 UI page.

6) Close the "NativeUIPage.xaml.cs" file and open "IntroLayer.cs" file.
7) Replace "IntroLayer()" method with following lines of code.

public IntroLayer()  
     {  
       // create and initialize a Label  
       var label = new CCLabelTTF("Hello Cocos2D-XNA", "MarkerFelt", 22);  

       // position the label on the center of the screen  
       label.Position = new CCPoint(CCDirector.SharedDirector.WinSize.Center.X, CCDirector.SharedDirector.WinSize.Center.Y + 180);   
       // add the label as a child to this Layer  
       AddChild(label);  

       // setup our color for the background  
       Color = new CCColor3B(Microsoft.Xna.Framework.Color.Blue);  
       Opacity = 255;  

       // Initialization.  
       string img_btn_switch_native_path = "Buttons/btn_switch_native";  
       string img_btn_switch_native_onclick_path = "Buttons/btn_switch_native_onclick";  

       // Button.  
       CCMenuItem btnSwitchToNativeUI = new CCMenuItemImage(img_btn_switch_native_path, img_btn_switch_native_onclick_path, this.SwitchToNativeUIAction);  
       btnSwitchToNativeUI.Scale = 0.5f;  

       // Button Menu  
       CCMenu menu = new CCMenu(btnSwitchToNativeUI);  
       menu.Position = CCDirector.SharedDirector.WinSize.Center;  

       // Adding child.  
       this.AddChild(menu);  
     }  

Here, we are simply creating an introductory text and a button to switch to windows phone 8 native UI.

8) Now create "SwitchToNativeUIAction(...)" & "NavigateToNativeUI(...)" methods as shown below.
 

#region Switch to Native UI action.  

     /// <summary>  
     /// Settings button action.  
     /// </summary>  
     /// <param name="sender">Sender parameter</param>  
     private void SwitchToNativeUIAction(object sender)  
     {  
       // Switch.  
       this.NavigateToNativeUI("/NativeUIPage.xaml");  
     }  
     #endregion  

     #region Navigate to Native UI.  

     /// <summary>  
     /// Navigate from Start menu page.  
     /// </summary>  
     /// <param name="pagePath">Page path parameter</param>  
     public void NavigateToNativeUI(string pagePath)  
     {  
       // Garbage Collection.  
       GC.Collect();  
       GC.WaitForPendingFinalizers();  
       GC.Collect();  

       Deployment.Current.Dispatcher.BeginInvoke(() =>  
       {  
         // Navigate.  
         ((PhoneApplicationFrame)Application.Current.RootVisual).Navigate(new Uri(pagePath, UriKind.Relative));  
       });  
     }  
     #endregion  

"SwitchToNativeUIAction(...)" method is a simple action selector for our button in cocos2d-xna platform. While "NavigateToNativeUI(...)" method is the method that will switch to windows phone 8 native UI. "NavigateToNativeUI(...)" method is simple executing garbage collection to free unused memory and then it will use a separate thread, other then game thread to switch to windows phone 8 target native UI page.

9) Now, execute the project and you will see following screen.

10) Now, click the button and you will switch to windows phone 8 native UI as shown below.

That's about it.

Enjoy!! Coding.