TweeJump
这篇教程简单描述了如何使用Cocos2d-XNA来制作一个简单的WP7游戏。你可以按照教程一步步来,或者干脆直接跳到文章的最后,下载SimpleGame。
下载并安装Cocos2d-XNA
- 你可以从下面的链接来下载Cocos2d-XNA的源文件
https://github.com/cocos2d/cocos2d-x-for-xna
Cocos2d-XNA主要文件作用:
install-template-mscs.msi:模板安装程序
cocos2d-xna:主项目
CocosDenshion:声音音效
Cocos2d.Framework、Cocos2d.Content.Pipeline.Importers:支持文本类型资源(*.fnt、*.tmx、*.plist)
HelloCocos2d:示例工程
Tests :功能演示
Next Next ..完成安装中间如果有出现用户账户控制提示选择是然后继续Next..完成安装
接下来就能够创建cocos2d-xna工程了。
Hello, Cocos2D-XNA!
启动cocos2d-xna.sln 添加新项目选择XNA Game Studio 4.0节点底下的 Cocos2d-xna Application,给项目起个名字叫TweeJump。
Ok后,这里会弹出一个对话框
我们确认就好了选择ok (OpenXLive是Windows Phone 7上的游戏竞技和社交网络SNS平台,允许开发者以最小的工作量为自己的游戏增加游戏竞技服务和社交网络SNS功能。OpenXLive是由Fulcrum Mobile Networks, Inc.开发运营的。同类的应用还有iPhone上的OpenFeint和Plus+等。)www.openxlive.com
我们将创建好的工程设置为启动项,如下图:
F5运行,Cocos2D-XNA的HelloWorld程序,启动模拟器,程序运行界面如下:
默认工程里面只有一个场景HelloWorldScene,除了多了大厅、积分榜、成就和示例代码HelloCocos2d没有什么不同。
cocos2d是按照scene的概念组织的,游戏是由多个scene切换完成的。游戏场景一般是指在某个时刻能独立运行的部分,其中包括可见的游戏角色,地形和不可见的逻辑脚本等。例如,一个游戏的某个特定关卡,游戏菜单和过场动画等,都是一个独立的场景。cocos2d中的场景又由不同的层(CCLayer)组成。 TweeJump需要主菜单(MainMenu)、游戏画面(Game)、游戏结束画面(GameOver)三个scene来完成我们的游戏逻辑,游戏的流程如下:进入游戏>>主菜单选单play>>游戏画面开始游戏>>游戏结束呼出GameOver画面>> again>>游戏画面。
Cocos2d-XNA基础介绍
下面介绍一下TweeJump中主要用到的Cocos2d-XNA的类。
CCDirector负责管理场景和切换场景游戏暂停等。
CCNode是Cocos2d-XNA中最重要的对象。CCNode的addChild()方法,我个人认为是最重要的方法。它充当了一个容器的角色可以addChild进去无数个节点,但每个节点只有一个父节点,同时他可以执行回调函数和CCAction有postion,scale,rotation等等属性。
CCLayer,它是CCNode的子类,层是一个可以绘制的区域.可以将ui,sprite等对象添加到其中。
CCMenu从CClayer派生而来,可以处理输入消息,CCMenu包含多个CCMenuItem对象,在接收到输入消息之后,根据触摸位置,将输入消息分发到相应MenuItem,执行回调函数,CCMenu还提供一个对齐菜单项的功能
CCSprite, 可以看成是某一时刻,一个2D的图片的一个剪辑部分
添加我们游戏的背景
TweeJump游戏中的背景都是蓝天白云,为了重用我们把它提取成父类Main,主菜单MainMenu、游戏画面Game、结束画面GameOver只要继承它就蓝天白云了。
在Main中涂写画画出萌萌的蓝天白云,为了方便管理游戏中用到的类都尽量建到Classes文件夹中,新建类Main:
让Main继承CCLayer并重写init()方法
public class Main : CCLayer
{
//调整素材比例
public const float sy = 1.666666666666667f;
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;
}
}
先把蓝天贴到@todo哪里:
CCSpriteBatchNodespriteManager=CCSpriteBatchNode.batchNodeWithFile("Images/sprites", 10);
addChild(spriteManager, -1, (int)tags.kSpriteManager);
CCSpritebackground=CCSprite.spriteWithTexture(spriteManager.Texture, newCCRect(0, 0, 320, 480));
spriteManager.addChild(background);
Scale(background);
background.position=newCCPoint(240, 400);
//this.initClouds(); 初始化云
//this.schedule(step); 让云变得可爱点
把tags枚举放到类的外面
public enum tags
{
kSpriteManager = 0,
kBird,
kScoreLabel,
kCloudsStartTag = 100,//数值的意义是分出段来
kPlatformsStartTag = 200,
kBonusStartTag = 300
}
虽然只是添加了蓝天但还是先来看下效果吧,运行前需要修改下Scene的入口点。在
AppDelegate.cs中的applicationDidFinishLaunching()方法里找到下面代码并修改它:
// create a scene. it's an autorelease object
CCScene pScene = TweeJumpScene.scene();
//run
pDirector.runWithScene(pScene);
现在需要把pScene实例化为我们的Main,但是不好的事情是我们的Main.cs是一个CCLayer并不是CCScene,实现代码如下:
CCScene pScene = CCScene.node();
pScene.addChild(Tweejump.Classes.MainMenu.node());
在Main.cs里还需要添加node()方法用来调用init()方法完成初始化工作
publicstaticnewCCLayernode()
{
Mainret=newMain ();
if (ret.init())
{
returnret;
}
returnnull;
}
F5运行,这也太丑了吧。
因为在游戏中默认是横屏,所以需要在applicationDidFinishLaunching()里加上这句话将屏幕设置为竖屏:
pDirector.deviceOrientation = ccDeviceOrientation.CCDeviceOrientationPortrait;
蓝天贴图ok,解开我们的注释、去掉文字说明、再把云画上去Main我们的背景就ok了。
直接贴代码有点长了为了显得有技术含量少贴,详细查看源代码(cocos2d简单性很容易上手)。
privatevoidinitClouds()
{
currentCloudTag= (int)tags.kCloudsStartTag;
while (currentCloudTag |