Cocos2d-xna: horizontal strategic game development Experiment 2 Sprite and Scene Production

I don't know how many of my friends know how to make animations and movies. They are shooting and recording scenes and then editing them into a complete film. The game is very similar, you can understand that you want to create a world, and then let the players progress according to the rules of the world. The screen is the best observer, but a good film must have a "command" to run the world, let the protagonist follow the predefined route, which corresponds to the director class (CCDirector) in cocos2d.

Now let's take out the previous design materials and think about what scenarios the game should use. In this game, we will mainly switch between the following four scenarios:

From this we can see that it is the beginning, the selection of the battle, the game, and the final end, the process of the game subject is done in this way.

 

First scenario

The previous code is only used in the Test scenario. Now, let's create a new scenario. First, we will finish the above interface and prepare the image materials, split the interface into background images, buttons, and logos, and add the saved images to the Content:

Next, open SceneStart. cs in Scenes and write the class as follows:

Public class SceneStart: CCScene {public SceneStart () {base. init (); // get the screen size CCSize size = CCDirector. shareddire (). getWinSize (); // The background image CCSprite background = CCSprite. spriteWithFile ("bg_start"); this. addChild (background); // Logo image CCSprite logo = CCSprite. spriteWithFile ("logo"); // set the logo to the upper-left corner of the interface. position = new CCPoint (size. width/2, size. height/2 + 120); this. addChild (logo); // two buttons: CCMenuItemImage btn_start = CCMenuItemImage. itemFromNormalImage ("btn_start1", "btn_start2", this, click_start); CCMenuItemImage btn_setting = CCMenuItemImage. itemFromNormalImage ("btn_setting1", "btn_setting2", this, click_setting); // MenuItem requires CCMenu combination of CCMenu menu = CCMenu. menuWithItems (btn_start, btn_setting); // a vertical interval arrangement menu. alignItemsVerticallyWithPadding (10); // set it to the menu in the middle of the interface. position = new CCPoint (size. width/2, size. height/2-120); this. addChild (menu);} private void click_start (CCObject sender) {} private void click_setting (CCObject sender ){}}

After preliminary writing, you may need to reference using cocos2d. Then, make the following changes in AppDelegate. cs:

Public class AppDelegate: CCApplication {public AppDelegate (Game game, GraphicsDeviceManager graphics): base (game, graphics) {CCApplication. sm_pSharedApplication = this;} public override bool applicationDidFinishLaunching () {// initialize CCDirector ccdirepdire= CCDirector. shareddire(); pDirector. setOpenGLView (); // whether to display FPS (Frame Rate per second) pDirector. displayFPS = true;

// Set the Updata interval pDirector here. animationInterval = 1.0/60; // create a scenario CCScene pScene = new Scenes. sceneStart (); // run this scenario pDirector. runWithScene (pScene); return true ;}}

You will find: CCScene pScene = new Scenes. sceneStart (); then use pDirector. runWithScene (pScene) entered this scene. pDirector is the director. He said: Now we are going to take a picture of the starting scene.

Of course, there are a lot of set items in the above Code. Now let's take a look:

Strange, why does this happen? Here we will talk about CCSprite. CCSprite is generally called the genie class. Its main function is to present images, and there is no specialized Image class in cocos2dxna, all images are displayed and operated through CCSprite. After loading the CCSprite image, the center point (also called anchorPoint) of (0.5, 0.5) prevails, that is to say, the xy location is actually the center location of the image it hosts, so we need to modify the coordinates or set the anchor point to (0, 0. For example:

AnchorPoint = new CCPoint (0, 0 );

The following is a brief introduction of the Code. cocos2dxna's coordinate week is in the lower left corner of the screen. This is consistent with other cocos2d versions, mainly for the purpose of unified standards, of course, this also brings about the trouble of understanding. Of course, the omnipotent Director (CCDirector) also provides a conversion method, but we don't need much here. To ensure uniformity, it is recommended that the development based on the coordinates in the lower left corner be better.

CCSprite. the spriteWithFile static method can easily generate the images we need. You don't have to write a lot of code yourself. You only need one line. spriteWithFile gets the image files corresponding to the Content resource project, CCSprite can also control its coordinate position. In the initial scenario, position is used to control the position and the Logo is fixed to the center-to-top position.

The button class CCMenu does not work independently. You need to initialize yourself through multiple sub-projects, so you have two menu codes, CCMenuItemImage also has a static method to help developers write a few Code Completion buttons. CCMenuItemImage is a derived class of CCMenuItem. CCMenuItemLabel and CCMenuItemSprite are derived from CCMenuItem. Their functions are the same as their names, I just want to see how it is easy to use.

Remove FPS

At this time, it will be said that the number of frames in the lower left corner is too uncomfortable. Can you remove it? Of course, you can simply set the director's DisplayFPS to false, but cocos2dxna has a bug, run the command as follows:

The solution to this bug is also very simple, that is, initialize the Font in AppDelegate, which is caused by the internal processing mechanism.

CCLabelTTF a = CCLabelTTF. labelWithString ("0", "Arial", 0 );

You can add the code above. You don't need to add it. Run it now to see:

Isn't it handsome? Maybe you can't wait to get started with the next scenario. Now let's talk about more important topics:

Huge resource texture image optimization plist

Open your project directory, find the program compiled under bin, and check the Content (Content is the Content set of the output project, and everything you see will be packaged into XAP) output XNB file:

Now, can you bear it? In fact, the source image does not pack more than 400 KB. Why is it so exaggerated after the conversion? Because XNA will compile and output the resource content by itself, this is for your convenience, at the same time, compilation of non-standard resource content into specifications will involve the details of Image Rendering if more resources are involved. So, for Image Rendering and display, in fact, they only recognize 2 N idempotent width images. Whether it is a program or a hardware, its input and output follow this rule. Therefore, no matter what storage you use, your small images will eventually become a unified specification.

One method is to change the image texture pattern to a 2 N-power-width image. For details, see:

All your images are in the color format by default, so the unfortunate fact is that you are faced with a huge volume of image materials (which is expanded to a power of 2 internally ), dxtCompressed format can greatly reduce the image size, but DxtCompressed has certain requirements on the image, the most basic requirement is: 2 N power width height

It is difficult for image resources to be exactly the same. If we deliberately make it, we will correct code N with multiple codes. We will use the features of cocos2d to solve this problem, in cocos2d, many images are saved as a large image and used independently. This method is a plist image frame file, which can greatly reduce the image volume, the most important thing is that the big image can meet the requirement of the N power width of 2.

TexturePackerGUI is a software dedicated to cocos2d plist files. The best advantage of this software is the Windows version (many excellent tools are running on IOS). The following is a simple method of use:

Open TexturePackerGUI and drag the previous start interface material into the window.

Dependencies, which correspond to each other. Now we use them in the program, add them to the Content project, and then make the following two changes:

1. Modify the Textrue Format attribute in the Content Processor of parameter gameui01.png to DxtCompressed.

2. Modify the input and output pipelines of GameUI01.plist. Because plist requires a unique content pipeline of cocos2dxna, add reference first:

Then select the GameUI. plist attribute to modify the input and output pipelines:

Compile the file now and check it out. You will find an error about duplicate names. Therefore, you need to separate the generated plist file from the png file, for example, creating an images directory, we recommend that you create an Images directory under the file directory where plist is located to add the corresponding png, because it will automatically process and search for the corresponding image file in the Code. Now let's compile it again.

Now let's look at the two xna files generated by GameUI01, which add up to only 1 MB, which has greatly reduced the volume. There are still a lot of space in the png Image and may be completely reserved for other UI interfaces.

How to Use plist

The next step is how to use the plist file in the Code and open the SceneStart. cs code. Let's make a transformation.

Public class SceneStart: CCScene {public SceneStart () {base. init (); CCSpriteFrameCache. sharedSpriteFrameCache (). addSpriteFramesWithFile ("GameUI01", "images/GameUI01"); // get the screen size CCSize size = CCDirector. shareddire (). getWinSize (); // The background image CCSprite background = CCSprite. spriteWithSpriteFrameName ("bg_start.png"); background. anchorPoint = new CCPoint (0, 0); this. addChild (background); // Logo image CCSprite logo = CCSprite. spriteWithSpriteFrameName ("logo.png"); // set the logo to the top of the page. position = new CCPoint (size. width/2, size. height/2 + 120); this. addChild (logo); // two buttons: CCMenuItemSprite btn_start = CCMenuItemSprite. itemFromNormalSprite (CCSprite. spriteWithSpriteFrameName ("btn_start1.png"), CCSprite. spriteWithSpriteFrameName ("btn_start2.png"), this, click_start); CCMenuItemSprite btn_setting = CCMenuItemSprite. itemFromNormalSprite (CCSprite. spriteWithSpriteFrameName ("btn_setting1.png"), CCSprite. spriteWithSpriteFrameName ("btn_setting2.png"), this, click_start); // MenuItem requires CCMenu combination CCMenu menu = CCMenu. menuWithItems (btn_start, btn_setting); // a vertical interval arrangement menu. alignItemsVerticallyWithPadding (10); // set it to the menu in the middle of the interface. position = new CCPoint (size. width/2, size. height/2-120); this. addChild (menu);} private void click_start (CCObject sender) {} private void click_setting (CCObject sender ){}}

In this Code, CCSpriteFrameCache is used to load plist and png files, use them to get the required image frames in advance, and then use them in the program. CCSpriteFrameCache is a repository, use the file name to identify all content resources, CCSprite. spriteWithSpriteFrameName can be directly extracted and used based on the file name. About CCSpriteFrameCache, which will be applied to animation and other image processing, this is just a simple image application example.

This code is still in: https://github.com/Nowpaper/SanguoCommander_cocos2dxna_Sample

You can search for the TexturePackerGUI software on the Internet.

I wanted to switch over this time. I have read enough content. Let's continue with the next article :)