WP7 game development: TweeJump (cocos2d-xna)

TweeJumpThis tutorial briefly describes how to use Cocos2d-XNA to make a simple WP7 game. You can follow the tutorial step by step, or simply jump to the end of the article and download SimpleGame. Download and install the Cocos2d-XNA https://github.com/cocos2d/cocos2d-x-for-xna 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1063496-0.png "/> Cocos2d-XNA main file role: install-template-mscs.msi: Template installer cocos2d-xna: Main project CocosDenshion: Sound Effects Cocos2d. framework, Cocos2d. content. pipeline. importers: supports text resources (*. fnt ,*. tmx ,*. plist) HelloCocos2d: Example project Tests: feature demonstration 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q10630U-1.png "/> 650) this. width = 650;" alt = "" src =" http://www.bkjia.com/uploads/allimg/131228/1Q1064J0-2.png "/> 650) this. width = 650;" alt = "" src =" http://www.bkjia.com/uploads/allimg/131228/1Q1063I5-3.png "/> Next... complete the installation if there is a User Account Control prompt to select and then continue Next... complete the installation and then you can create the cocos2d-xna project. Hello, Cocos2D-XNA! Start cocos2d-xna.sln add new project select Cocos2d-xna Application under XNA Game Studio 4.0 node, give the project name TweeJump. 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q10BH2-4.png "/> OK, a dialog box 650 is displayed. this. width = 650;" alt = "" src =" http://www.bkjia.com/uploads/allimg/131228/1Q1062258-5.png "/> Let's make sure you can choose OK. OpenXLive is a game competition and social network SNS platform on Windows Phone 7, allows developers to add the game competitive service and social network SNS features for their games with minimal workload. OpenXLive is developed and operated by Fulcrum Mobile Networks, Inc. Similar applications include OpenFeint and Plus + on the iPhone .) Www.openxlive.com we set the created Project as a startup Item, for example, 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1063146-6.png "/> F5 run, Cocos2D-XNA HelloWorld program, start the simulator, the program running interface is as follows: 650) this. width = 650;" alt = "" src =" http://www.bkjia.com/uploads/allimg/131228/1Q1061620-7.png "/> By default, there is only one scenario HelloWorldScene in the project, except for the addition of Hall, points, achievements, and sample code HelloCocos2d. Cocos2d is organized according to the concept of scene, and the game is switched by multiple scene. A game scenario generally refers to a part that can run independently at a certain time point, including visible game roles, terrain, and invisible logic scripts. For example, a specific level of a game, game menus, and field animations are all independent scenes. Scenes in cocos2d are composed of different layers. TweeJump requires three scene, namely the main menu, Game screen, and Game ending screen (GameOver), to complete our Game logic. The Game process is as follows: choose game> main menu play> game screen start game> game end call GameOver screen> again> game screen. The basic introduction of Cocos2d-XNA below describes the main use of the Cocos2d-XNA in TweeJump class. CCDirector is responsible for managing scenarios and switching scenarios. CCNode is the most important object in the Cocos2d-XNA. The addChild () method of CCNode is the most important method in my opinion. It acts as a container and can add child to countless nodes, but each node has only one parent node. At the same time, it can execute callback functions and CCAction with attributes such as postion, scale, and rotation. CCLayer, a subclass of CCNode, and a layer is a area that can be drawn. You can add objects such as ui and sprite to it. CCMenu is derived from CClayer and can process input messages. CCMenu contains multiple CCMenuItem objects. After receiving the input message, the input message is distributed to the corresponding MenuItem according to the touch position, execute the callback function. CCMenu also provides an alignment menu item Function 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1063S6-8.png "/> CCSprite can be viewed as a time point. A 2D image is edited to add the background of our game. In the TweeJump game, the background is blue sky and white clouds, in order to reuse it, we extract it into the parent class Main. The MainMenu of the Main menu, Game screen Game, And GameOver of the ending screen only need to inherit it. Paint and draw out the cute blue sky and white clouds in Main. In order to facilitate the management of the Classes used in the game, try to build them into the Classes folder and create the class Main: 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q10625Z-9.png "/> Let Main inherit from CCLayer and rewrite the init () method public class Main: CCLayer {// adjust the proportion of materials public const float sy = 1.6666666666667f; public const float sx = 1.5f; public static void Scale (CCNode sprite) {sprite. scaleY = sy; sprite. scaleX = sx;} public override bool init () {if (! Base. init () {return false;} // @ todo return true;} First paste the blue sky to @ todo where: CCSpriteBatchNode SpriteManager = CCSpriteBatchNode. batchNodeWithFile("Images/sprites",10);AddChild(SpriteManager,-1,(Int)Tags. kSpriteManager);CCSprite Background = CCSprite. spriteWithTexture(SpriteManager. Texture,New CCRect(0,0,320,480));SpriteManager. addChild(Background);Scale(Background);Background. position = New CCPoint(240,400);//This. initClouds();Initialize cloud//This. schedule(Step);Let the cloud become cute. Put the tags enumeration out of the class public enum tags {kSpriteManager = 0, kBird, kScoreLabel, kCloudsStartTag = 100, // The value indicates that kPlatformsStartTag is 200 in a segment, although kBonusStartTag = 300} is only added with blue sky, let's take a look at the effect first. You need to modify the entry point of Scene before running. In AppDelegate. find the following code in the applicationDidFinishLaunching () method in cs and modify it: // create a scene. it's an autorelease objectCCScene pScene = TweeJumpScene. scene (); // runpDirector. runWithScene (pScene); now we need to instantiate pScene as our Main, but the bad thing is our Main. cs is a CCLayer and not CCScene. The implementation code is as follows: CCScene pScene = CCScene. node (); pScene. addChild (Tweejump. classes. mainMenu. node (); in Main. in cs, you also need to add the node () method to call the init () method to complete initialization. public Static New CCLayer Node(){Main Ret = New Main();If(Ret. init()){Return Ret;}Return Null;}It's ugly to run F5. 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q10612W-10.png "/> because the default screen is landscape in the game, you need () add this sentence to set the screen to a portrait screen: pDirector. deviceOrientation = ccDeviceOrientation. ccdeviceorientationportraid; 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1061606-11.png "/> blue sky texture OK, undo our comments, remove the text instructions, and then draw the cloud into the Main background. Directly paste the Code a little longer. In order to appear technically less sensitive, view the source code in detail (cocos2d is easy to use ). Private Void InitClouds(){CurrentCloudTag =(Int)Tags. kCloudsStartTag;While(CurrentCloudTag <(Int)Tags. kCloudsStartTag + KNumClouds){This. initCloud();CurrentCloudTag ++;}This. resetClouds();}The initClouds () method completes the initialization of clouds. initClouds calls KNumClouds = 12 times. initCloud) This method randomly generates blocks from three clouds and then calls resetClouds) complete cloud location initialization. For details, refer to the source file. Main. cs registers spriteManager and adds it to the CCLayer (addChild () method of Main). It retrieves spriteManager as needed. A part of Texture is saved to CCSprite to form a new CCSprite object, and then spriteManager. addChild (CCSprite :) is handed over to spriteManage for unified management. Use spriteManager. getChildByTag (tag :) extracts the corresponding sprite and assigns the position value to achieve the position required by the texture, movement, action, and so on. The position is the position of the image center ); therefore, it is very convenient to specify a unique and regular tag for each Sprite (the function of enumerating tags ). Use getChildByTag to traverse the required sprite in spriteManager and assign values to view the source code resetXXXX () method. Not only does Main. cs exist, but you can also find the initXXXX () resetXXXX () method in Game. Source code Solution Explorer: 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1063551-12.png "/> The main menu and the ending screen are skipped... Skipped... Main. cs is over. Let's take a look at the use of menus and labels, you can use them to easily complete Tweejump or the main menu and GameOver of your own game (If your game is not very complex ). MainMenu. cs and GameOver. cs both inherit from Main. cs because Dad is Li Gang and has the background of blue sky and white clouds. With the addition of Menu, Labe, and Sprite, let's take a look at how simple it is. Repeat the preceding steps to override init () and add the node () method. paste the following code CCMenuItem button1 = CCMenuItemImage in init. itemFromNormalImage (@ "Images \ loginButton", @ "Images \ loginButton", this, loginCallback); Scale (button1); CCMenuItem button2 = CCMenuItemImage. itemFromNormalImage (@ "Images \ playButton", @ "Images \ playButton", this, playCallback); Scale (button2); CCMenuItem button3 = CCMenuItemImage. itemFromNormalImage (@ "Images \ aboutButton", @ "Im Ages \ aboutButton ", this, aboutCallback); Scale (button3); CCMenu menu = CCMenu. menuWithItems (button1, button2, button3); menu. alignItemsVerticallyWithPadding (15f); menu. position = new CCPoint (240,257); this. addChild (menu); CCMenuItemImage. the first two parameters of itemFromNormalImage () are the image resource (CCSprite) before and after the press, and the last parameter is the Callback function after the press, in the format of void Callback (CCObject sender ){}. Draw the response of our game's Logo completion callback function and replace runWithScene () with MainMenu, as shown below. 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1064A4-13.png "/> GameOver. the final score display in cs is achieved by CCLabelBMFont, which makes your words very personalized and cool. paste the code: CCLabelBMFont scoreLabel = CCLabelBMFont. labelWithString (currentScore. toString (), "Fonts/bitmapFont"); scoreLabel. scaleX = sx * 1.5f; scoreLabel. scaleY = sy * 1.5f; // The clip is too small. Ignore addChild (scoreLabel, 5, (int) tags. kScoreLabel); scoreLabel. position = new CCPoint (240,450); 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q10A605-14.png "/> For games, Label3961 has a good score. BitmapFont is the resource file bitmapFont. fnt. If the Content Impoter is not set to Text Importer in the attribute, and the Content Processor is TextProcessor, a compilation error will occur. Open this file and you can see that it is a key value pair connected by equal signs. Focus on char id = 32 48... It represents space 0123456789, And the cursor behind each char IDR shows the space 0123456789 position of this chart on bitmapfont.png. 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1062492-15.png "/> The. fntfile and the corresponding. PNG file have a corresponding location relationship, which must be unchangeable .. The Directory of the fntfile has an imagesfile containing the corresponding. PNG file. 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q10A406-16.png "/> Game control-gravity sensing this version of the cocos2d-xna is not encapsulated gravity sensing, I use XNA self-carried gravity sensing, because Accelerometer is also an event-driven tool, it will not be incompatible. It should not be encapsulated in future versions. 1 add Microsoft. Devices. Sensors reference 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1064524-17.png "/> 2 create an Accelerometer object, 3 register the CurrentValueChanged event of the Accelerometer object, and 4 Start the Accelerometer object Start () method to Start the gravity sensor listener. In the registered event handling method, you can use e. sensorReading. acceleration. X and e. sensorReading. acceleration. y, e. sensorReading. acceleration. Z to access the 3D offset value of the current acceleration. Here, I only need to mention one. In many tutorials, The ReadingChanged event of the Accelerometer object is registered. When you are using the Windows Phone 7.1 SDK, VS will prompt you That the ReadingChanged event is outdated, of course you can use it, but we recommend that you use CurrentValueChanged. The TimeBetweenUpdates attribute affects the interval between two triggering CurrentValueChanged events. Therefore, if you want to set the interval of gravity sensing, you 'd better use CurrentValueChanged. For details, see the init () of the source code Game. cs (). Integrated with the OpenXLive SDKOpenXLive function: the rankings show the world that you are the strongest player in this game! The point list is used to record your game performance, so that you can share your extraordinary game performance with players all over the world. · Game achievements each game achievement, like a medal, records your growth history in the game. By making achievements, you can tell your friends how you are the best warrior in the game. · Social Networks tell you how many siblings in the world are fighting with you in the game. Find them and become friends with them to start a journey of adventure. · The Personal center contains stories about your past, present, and future. Your points, your achievements, the games you 've played, and your friends are worth your record. · Does Cloud storage not want others to discover your secrets in the game? Put it on the cloud. You can open the dusty secret anywhere. · Game announcements tell you about major events in the game. For example, you became No. 1. If you are in front of 650) this. width = 650; "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1Q1062258-5.png "/> Check OpenXLive sdk. You can easily use OpenXLive sdk by adding a reference to a new project. Friends familiar with XNA will find that our game engine Cocos2d-XNA is actually a GameComponent and our OpenXLive SDK is also a GameComponent, open our main game class Game1 source code called GameMain, is to find the product that inherits from Microsoft. xna. framework. game class. Compare our project TweeJump with the Game1.cs file of the sample program HelloCocos2d. A few more pieces of code is integrated with OpenXLive. In the Game1 class, the field // # error Please full your game Secret Key in below codeprivate string APISecretKey = "Y8eUF6f5xXEGSuw3DkKntbhQ"; XLiveFormManager; in the Game1 constructor, Add the XLiveFormManager instance to Component. // Create XLive FormManagermanager = new XLiveFormManager (this, APISecretKey); manager. openSession (); // Add XLive FormManager in ComponentsComponents. add (manager); note that the Add of GameComponents of OpenXLive must be placed in Cocos2d. -Before GameComponents of the xna game engine. Loads resources in LoadContent () to add background events to the OpenXLive sdk ui and exit the UI events. Texture2D background = \ '# \' "/div> manager. background = \ '# \' "/div> manager. UIExitingEvent + = new EventHandler (manager_UIExiting); void manager_UIExiting (object sender, EventArgs e) {CCDirector. shareddire (). runningScene. visible = true;} If you select OpenXLive SDK when creating a project, the code is added to Game1.cs by default. The following uses MainMenu as an example to teach you how to use OpenXLive SDK in a game. In the init () method, create a button CCMenuItemImage loby = CCMenuItemImage. itemFromNormalImage (@ "images \ lolobby", @ "images \ Lobby1", this, new SEL_MenuHandler (LobbyCallback); loby. position = new CCPoint (0, 20); CCMenu LMenu = CCMenu. menuWithItems (lolobby); LMenu. position = new CCPoint (240, 60); callback method: public virtual void LobbyCallback (CCObject pSender) {CCDirector. shareddire (). pause (); CCDirector. shareddire (). runningScen E. visible = false; OpenXLive. forms. XLiveFormFactory. factory. showForm ("lolobby");} OpenXLive. forms. XLiveFormFactory. factory. showForm ("lolobby"); show the form we need. Here is lolobby, in addition to "loby", "Startup", "Leaderboard", "Achievements", "Logon", "MyCenter", "FirendsList", "OnlinePlayer", "Pause", and "OpenXLiveGames". TweeJump uses three common functions: "Achievements", "Leaderboard", and "loby. After Show is displayed, make sure to hide the current Scene when the game is suspended. When you come back, make sure to display the current Scene when the game starts. Void manager_UIExitingEvent (object sender, EventArgs e) {CCDirector. shareddire(). runningScene. visible = true; CCDirector. shareddire(). resume ();} development resource source code http://tweejump.codeplex.com/ Website http://www.openxlive.com/http://www.openxlive.org/http://www.cocos2d-x.org/QQ Group 15855827337699353 email lkw@Openxlive.com

This article is from the "xnagame" blog, please be sure to keep this source http://xnagame.blog.51cto.com/4387996/781990