Cocos2d-XNA: Build & Execute using Windows Phone 8

Time for blogging again. Today, I shall provide a step by step tutorial for building and executing cocos2d-xna code project in Microsoft Visual Studio 2012 for windows phone 8. 

Prerequisites:

1) Knowledge of XNA content pipeline.
2) Knowledge of Cocos2d-XNA platform.

Lets not waste any further of our time and start with the tutorial.

1) Install XNA Game Studio 4.0 & its visual studio extensions via MXA Game Studio.  
2) Install Git on your machine.
3) Go to Cocos2d-xna git repository and Download the master code base of cocos2d-xna through git by following the provided procedure.

4) After downloading the "Cocos2D-xna" source code. Go to following path i.e. ~/MonoGame/, under this directory double click "Protobuild.exe" file to generate platform specific projects.

5) Open MS Visual Studio 2012 and click tools->extension &updates

6) Write "Cocos2d" in search box and install "Cocos2D-XNA Empty Game for Windows Phone".

7) Now create new project by using cocos2d-xna WP8 template and name it "SampleApp".

8) Remove 'box2d, cocos2d, ICSharpCOde.SharpZLib, MonoGame.Framework' references from your project.

9) Add the platform specific projects of 'box2d, cocos2d, ICSharpCOde.SharpZLib, MonoGame.Framework' projects from the downloaded code (Wp8 in this case). By Right click the project and click add->existing project. Then select WP8 project files for 'box2d, cocos2d, ICSharpCOde.SharpZLib, MonoGame.Framework' one by one.

10) Now right click the "SampleApp" project and click Project Dependency, then select all and click OK.

11) Now open the "GamePage.XAML" file in "SampleApp" project and replace the existing code with following:

<Grid x:Name="LayoutRoot" Background="Transparent">  
     <DrawingSurface x:Name="XnaSurface"/>  
     <MediaElement></MediaElement>  
 </Grid>  

 

12) Now, right click the root of the projects and click add->new project, then add "Windows Phone Game library" project and name it "XNAContentPipeline".

13) Similarly, add->new project of "Empty Content Project" and name it "XNAContentPipelineContent".

14) Select "XNAContentPipelineContent" project and click the properties windows.

15) Then change "Content Root Directory" property to "Content".

16) In "XNAContentPipeline" project right click the reference then click "add content reference" and select "XNAContentPipelineContent" project reference.

17) Now, right click "XNAContentPipeline" project and click properties, then in "Build Events" add following two line in the post-build section:  

'xcopy "$(ProjectDir)$(OutDir)Content\*.xnb" "$(SolutionDir)SampleApp\Content" /D /y /s /r'  
 'xcopy "$(ProjectDir)$(OutDir)Content\*.wma" "$(SolutionDir)SampleApp\Content" /D /y /s /r'  

 

18) Now right click the "SampleApp" project and click Project Dependency, then select all and click OK.

19) Add a sample sprite file to the "XNAContentPipelineContent" project, its ".xnb" file will be created in the "Content" folder of "SampleApp" project.

20) Now, add that created ".xnb" file to your "Content" folder in Visual studio as well so, right click the "Content" folder under "SampleApp" project and add the ".xnb" file from "Content" folder.

21) Now, right click the ".xnb" file and click the "Properties" windows, then select "Build Action" property as "Content" & "Copy to Output Directory" property as "Copy if newer".

22) Right click the root of the project and click "Configuration Manager", Select All projects and choose build platform as "x86".

23) Now, build the project and execute it in WP8 Emulator. Your cocos2d-xna project will be successfully executed for Windows Phone 8.

That's about it.

Enjoy!! Coding.