Cocos2d-x for WindowsPhone: Develop a hamster game (on)

This article mainly introduces how to use cocos2d-x for xNa to develop a hamster game, although the cocos2d getting started tutorial also has a hamster, but this article focuses on simple learning implementation, because of the frame animation, so I used another mouse image resource to learn a knowledge point in a single project as much as possible, so it is not a waste of time in some tedious places, so you will see very direct code implementation examples, this development example focuses on the use of the following cocos2d-x classes: ccsprite, ccmenuitemsprite, ccscene

 

Create a project

First, create a project, from the project template can find the "cocos2d-x" category, enter the name and click OK, we are here: hit_mole.

Then reference the cocos2d-x for xNa 4 DLL :( these DLL from the cocos2d-x for xNa compilation results, see the previous article for details)

Cocos2d-xna.dll: cocos2d-x for xNa main class library

Cocos2d. Framework. dll: cccontent class used by the content pipeline. It will work with importers to read the project's plist File

Icsharpcode. sharpziplib. dll

Zlib.net. dll

Note that the hit_molecontent project references the content pipeline dll:

Cocos2d. content. pipeline. Importers. dll

Compile and run it to confirm there is no error.

 

Create basic game scenarios

The first thing is to prepare a set of images for this game and add them to your hit_molecontent project.

Then add a class in your project. Here we will talk about it, you can directly modify the Helloworld class in the template, but the template generation is a bit complicated, which is not conducive to the description, to make it simple and clear, I directly create a class as the starting point. This class name is currently Scene1.

The class code is as follows:

 

Using cocos2d;
Namespace Hit_Mole
{
Public class Scene1: CCScene
{
Public Scene1 ()
{
// Initialization
Initialize ();
}
Public bool initialize ()
{
// Read scene.jpg images from hit_molecontentto become an genie in the game.
CCSprite background = CCSprite. spriteWithFile ("scene ");
// Set the anchor point to (). The default anchor point for reading a single image is (F, F ).
Background. anchorPoint = new CCPoint (0, 0 );
// Add the background to the scene
This. addChild (background );
Return base. init ();
}
}
}

 

Open AppDelegate. cs and find the scenario code displayed by the Director under applicationDidFinishLaunching ().

You will find that the template automatically adds a Helloworld (although its name is not called this) scenario, and the code of this scenario is in HelloWorldScene. cs. We don't need it, just replace it with our scenario.

CCScene pScene = new Scene1();

Run the following command to check the effect:

A basic game scenario has emerged.

 

Manufacturing Mice

The ghost mouse will show up and go back according to certain rules. Here we will first achieve the effect of being clicked. In another article, we will focus on the animation part, so let's create a mouse that is not very intelligent. It's just silly to show its head-on knock.

In Cocos2d-x for xna there are various ways to achieve click, of which CCMenuItem is used to do the menu options in the UI interface, I think it is equivalent to the Button of other engines, the mouse game itself is a click game, making moles a button is not a problem.

Create a class: Mole

Special attention! NormalImage and SelectedImage in the following code are private variables in the latest cocos2d-x for xna and need to be modified to public by yourself

Using cocos2d;
Namespace Hit_Mole
{
Public class Mole: CCMenuItemSprite
{
Scene1 gamescene;
CCSprite body;
CCSprite hideimage;
Public Mole (Scene1 root, SEL_MenuHandler selector)
{
// Save the game Root
Gamescene = root;
// Read a mouse hole and add it to the menu. It serves as the background.
Ccsprite hole = ccsprite. spritewithfile ("hole ");
Hole. anchorpoint = new ccpoint (0, 0 );
This. addchild (hole );
// Read a mole body image and set it to the default image
Body = ccsprite. spritewithfile ("marmot_3 ");
Normalimage = body;
// Read the image displayed when a mole is selected (clicked)
SelectedImage = CCSprite. spriteWithFile ("marmot_4 ");
// The hidden image is useless in this article, so it is invisible.
Hideimage = CCSprite. spriteWithFile ("marmot_4 ");
Hideimage. visible = false;
This. addChild (hideimage );
// Initialize the selector. The Hit status will occur and be clicked.
InitWithTarget (root, selector );
// Set the content size. When the class is inherited, The contentSize will not be refreshed. You must specify
ContentSize = body. contentSize;
}
}
}

Generally, CCMenuItemSprite is obtained through the static method. To achieve better results, you can create a custom button by using the inheritance method. Here, you need to note the construction method Mole (Scene1 root, SEL_MenuHandler selector), which requires passing in the game root (root) and a callback event so that they can play a role. For details, see CCMenuItemSprite. itemFromNormalSprite description

Now let's transform the Scene1 class to make the hamster appear in the scenario:

Using cocos2d;
Namespace Hit_Mole
{
Public class Scene1: CCScene
{
Public Scene1 ()
{
// Initialization
Initialize ();
}
Public bool initialize ()
{
// L1
// Read scene.jpg images from hit_molecontentto become an genie in the game.
CCSprite background = CCSprite. spriteWithFile ("scene ");
// Set the anchor point to (). The default anchor point for reading a single image is (F, F ).
Background. anchorPoint = new CCPoint (0, 0 );
// Add the background to the scene
This. addChild (background );
// L2
// Obtain the width of the current window
Var w = CCDirector. shareddire(). getWinSize (). width/4;
// Get the height and offset 80 pixels
Var h = (CCDirector. shareddire(). getWinSize (). height-80)/3;
// Declare a CCMenuItemSprite Array
CCMenuItemSprite [] moles = new CCMenuItemSprite [4*3];
For (int I = 0; I <4; I ++)
{
For (int j = 0; j <3; j ++)
{
// Create a menu (button) for the hamster and arrange it in 4*3 mode
Mole mole = new Mole (this, onClick );
Mole. position = new CCPoint (I * w + w/2, j * h + h/2 );
Moles [j * 4 + I] = mole;
}
}
// Create CCMenu
Var menus = CCMenu. menuWithItems (moles );
// The menu item is in the middle of the parent node by default, so you need to move them to 0, 0
Menus. position = new CCPoint (0, 0 );
This. addChild (menus );
Return base. init ();
}
// Click the callback.
Public void onClick (CCObject sender)
{
}
}
}

Note that the newly created Mole cannot receive click events and must be created as a CCMenu, which can only run in the internal mechanism of the engine.

The overall structure should be shown as follows:

In some games, scenarios may be very complicated. CCLayer and other features will be added to differentiate them, but don't worry, as long as you can understand the relationship between nodes and objects, easy to learn.

 

Running Effect

Run it now to see what the effect looks like. It will change when you click it.

Download the sample code in this article:

Cocos2d-x for WindowsPhone)

Special Recommendation: dark blue right hand