cocos2d-XNA游戏开发之山寨《Flapy Bird》（一）

　　最近在看cocos2d开发，想找个游戏练练手，碍于没有策划能力，只能从山寨做起。目前最火的游戏，莫过于是这个像素鸟《Flapy Bird》了，下面就开始山寨它吧。

开发环境

系统：Windows8

IDE：Visual Studio 2012

资源文件

随便那个网站下载一个flapybird的apk(下载地址：http://app.suning.com/d.php?pack=com.dotgears.flappybird)，改后缀名为.rar，解压之后就能找到游戏引用的资源。

打开assetsgfx,会找到一张atlas.png，包含了所有的图片资源，sound中是声音资源。

项目搭建

因为是学习项目，就自己搭建cocos框架，不使用cocos模版。新建项目，选择XNAGame->WindowsPhone游戏。

添加AppDelegate.cs类，继承 CCApplication，添加构造函数，重写applicationDidFinishLaunching方法；

public class AppDelegate : CCApplication
    {
        public AppDelegate(Game game, GraphicsDeviceManager graphics)
            : base(game, graphics)
        {
            CCApplication.sm_pSharedApplication = this;
        }


        public override bool applicationDidFinishLaunching()
        {
            CCDirector pDirector = CCDirector.sharedDirector();
            pDirector.setOpenGLView();

            pDirector.DisplayFPS = true;
            pDirector.deviceOrientation = ccDeviceOrientation.CCDeviceOrientationPortrait; ;
            pDirector.animationInterval = 1.0 / 60;

            CCScene pScene = new CCScene();
            pDirector.runWithScene(pScene);
            return base.applicationDidFinishLaunching();
        }
    }

修改Game1.cs构造函数，添加代码：

public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";

            this.graphics.IsFullScreen = true;
            // Windows Phone 的默认帧速率为 30 fps。
            TargetElapsedTime = TimeSpan.FromTicks(333333);

            // 延长锁定时的电池寿命。
            InactiveSleepTime = TimeSpan.FromSeconds(1);

            CCApplication application = new AppDelegate(this, graphics);
            this.Components.Add(application);
        }

　　

添加场景（CCScene）

我们仔细观察游戏可以把游戏分为2个场景：

1.菜单场景

2.游戏场景

由于我们在AppDelegate创建了一个CCScene，可以用它来作为菜单场景，再新建一个GamePlayScene作为游戏场景（也可以自己新建一个MenuScene作为菜单场景）。

添加层（CCLayer）

游戏可以大致分为以下个层：

1.背景层（BackgroundLayer）

2.移动的道路层（RoadLayer）

3.游戏层（GamePlayLayer）

4.菜单层（MainLayer）

在菜单场景中，我们需要用到BackgroundLayer，RoadLayer和MainLayer。修改AppDelegate.cs代码：

public override bool applicationDidFinishLaunching()
        {
            CCDirector pDirector = CCDirector.sharedDirector();
            pDirector.setOpenGLView();

            pDirector.DisplayFPS = true;
            pDirector.deviceOrientation = ccDeviceOrientation.CCDeviceOrientationPortrait; ;
            pDirector.animationInterval = 1.0 / 60;

            CCScene pScene = new CCScene();
            pScene.addChild(BackgroundLayer.node(), (int)LayerTags.Background, (int)LayerTags.Background);
            pScene.addChild(RoadLayer.node(), (int)LayerTags.Road, (int)LayerTags.Road);
            pScene.addChild(MainLayer.node(), (int)LayerTags.Game, (int)LayerTags.Game);
            pDirector.runWithScene(pScene);
            return base.applicationDidFinishLaunching();
        }

　　

public enum LayerTags
    {
        Background = 0,
        Game = 1,
        Road = 2
    }

　　

背景层（BackgroundLayer）

 BackgroundLayer继承自CCLayer，重写静态方法node;

public static new CCLayer node()
        {
            BackgroundLayer ret = new BackgroundLayer();
            if (ret.init())
            {
                return ret;
            }

            return null;
        }

下面我们就需要画背景图片了，重写init方法

首先我们需要算出资源图片与屏幕大小的缩放比例:

//288，511是背景图的大小
sX = CCDirector.sharedDirector().getWinSize().width / 288f; 
sY = CCDirector.sharedDirector().getWinSize().height / 512f;

由于此游戏的资源图片是一整张大图，所以我们需要根据区域进行读取，观察资源图片我们可以发现，存在2个背景图片，看来需要随机出现一个背景图片，完整init代码：

public override bool init()
        {
            sX = CCDirector.sharedDirector().getWinSize().width / 288f;
            sY = CCDirector.sharedDirector().getWinSize().height / 512f;
            Random random = new Random();
            int number = random.Next(0, 2);
            CCRect ccRect;
            if (number == 0)
            {
                ccRect = new CCRect(0, 0, 288, 512);
            }
            else
            {
                ccRect = new CCRect(292, 0, 288, 512);
            }
            CCSprite backgroundCcSprite = CCSprite.spriteWithFile("Images/background", ccRect);
            backgroundCcSprite.position = new CCPoint(240, 400);
            backgroundCcSprite.scaleY = sY;
            backgroundCcSprite.scaleX = sX;
            addChild(backgroundCcSprite);

            
            return base.init();

        }

效果如下：

 道路层（RoadLayer）

与背景层类似，继承自CCLayer并重写方法node()、init();

public static new CCLayer node()
        {
            RoadLayer ret = new RoadLayer();
            if (ret.init())
            {
                return ret;
            }

            return null;
        }

        public override bool init()
        {
            sX = CCDirector.sharedDirector().getWinSize().width / 288f;
            sY = CCDirector.sharedDirector().getWinSize().height / 512f;

            CCSprite downRoadCcSprite1 = CCSprite.spriteWithFile("Images/background", new CCRect(584, 0, 336, 112));
            downRoadCcSprite1.position = new CCPoint(240, 72);
            downRoadCcSprite1.scaleX = sX;
            downRoadCcSprite1.scaleY = sY;
            addChild(downRoadCcSprite1, 1, (int)SpriteTags.Road);

            return base.init();
        }

让道路动起来

此处我采用的是添加2个道路CCSprite，像小火车一样跟着，每动一帧，2个道路的坐标减少4，当第一个的x坐标等于0之后，将其放到第二个的后面，也就是x坐标等480（屏幕宽度）。

添加一个schedule定时器执行更新道路坐标方法，代码如下：

public override bool init()
        {
            sX = CCDirector.sharedDirector().getWinSize().width / 288f;
            sY = CCDirector.sharedDirector().getWinSize().height / 512f;

            downRoadCcSprite1 = CCSprite.spriteWithFile("Images/background", new CCRect(584, 0, 336, 112));
            downRoadCcSprite1.position = new CCPoint(240, 72);
            downRoadCcSprite1.scaleX = sX;
            downRoadCcSprite1.scaleY = sY;
            addChild(downRoadCcSprite1, 1, (int)SpriteTags.Road);

            downRoadCcSprite2 = CCSprite.spriteWithFile("Images/background", new CCRect(584, 0, 336, 112));
            downRoadCcSprite2.position = new CCPoint(480, 72);
            downRoadCcSprite2.scaleX = sX;
            downRoadCcSprite2.scaleY = sY;
            addChild(downRoadCcSprite2, 1, (int)SpriteTags.Road);

            this.schedule(updateDownRoad, 0.01f);
            return base.init();
        }
        private void updateDownRoad(float dt)
        {
            downRoadCcSprite1.position = new CCPoint(downRoadCcSprite1.position.x - 4, downRoadCcSprite1.position.y);
            if (downRoadCcSprite1.position.x == 0)
            {
                downRoadCcSprite1.position = new CCPoint(480, downRoadCcSprite1.position.y);
            }
            downRoadCcSprite2.position = new CCPoint(downRoadCcSprite2.position.x - 4, downRoadCcSprite2.position.y);
            if (downRoadCcSprite2.position.x == 0)
            {
                downRoadCcSprite2.position = new CCPoint(480, downRoadCcSprite2.position.y);
            }
        }

添加菜单

开始我做菜单的方法和上面一样从大图中截取图片生成CCMenuItemSprite，但是加入后发现菜单并非是一直显示的，不知道哪里设置出了问题：

CCSprite testCcSprite = CCSprite.spriteWithFile("Images/background", new CCRect(705, 235, 107, 58));
            testCcSprite.scaleX = sX;
            testCcSprite.scaleY = sY;
            CCMenuItemSprite testMenuItemSprite = CCMenuItemSprite.itemFromNormalSprite(testCcSprite, testCcSprite);
            CCMenu testmenuOperate = CCMenu.menuWithItems(testMenuItemSprite);
            testmenuOperate.position = new CCPoint(240, 205);
            this.addChild(testmenuOperate);

效果：

没办法了，只能切成单个图片，然后用另外一种方式试试，发现居然可行，求解！！！

CCMenuItemImage rateCcMenuItemSprite = CCMenuItemImage.itemFromNormalImage("Images/rate", "Images/rate_pressed", this, rateCallback);
            rateCcMenuItemSprite.scaleX = sX;
            rateCcMenuItemSprite.scaleY = sY;

            CCMenu menuRate = CCMenu.menuWithItems(rateCcMenuItemSprite);
            menuRate.position = new CCPoint(240, 350);
            this.addChild(menuRate);

            CCMenuItemImage startCcMenuItemSprite = CCMenuItemImage.itemFromNormalImage("Images/play", "Images/play_pressed", this, playCallback);
            startCcMenuItemSprite.scaleX = sX;
            startCcMenuItemSprite.scaleY = sY;

            CCMenuItemImage scoreCcMenuItemSprite = CCMenuItemImage.itemFromNormalImage("Images/rank", "Images/rank_pressed", this, rankCallback);
            scoreCcMenuItemSprite.scaleX = sX;
            scoreCcMenuItemSprite.scaleY = sY;

            CCMenu menuOperate = CCMenu.menuWithItems(startCcMenuItemSprite, scoreCcMenuItemSprite);
            menuOperate.alignItemsHorizontallyWithPadding(30);
            menuOperate.position = new CCPoint(240, 205);
            this.addChild(menuOperate);

CCMenuItemImage startCcMenuItemSprite = CCMenuItemImage.itemFromNormalImage("Images/play", "Images/play_pressed", this, playCallback);第一个参数为默认图片，第二个为按下时候图片，playCallback为按下的处理事件

  

然后添加Logo

CCSprite logoCcSprite = CCSprite.spriteWithFile("Images/background", new CCRect(700, 177, 185, 55));
            logoCcSprite.position = new CCPoint(240, 550);
            logoCcSprite.scaleX = sX;
            logoCcSprite.scaleY = sY;
            addChild(logoCcSprite);

添加会动的小鸟

此处采用CCAnimation进行绘制小鸟的动画，在init中调用initActiveBird()

private void initActiveBird()
        {
            CCTexture2D texture = CCTextureCache.sharedTextureCache().addImage("Images/background");//2D纹理

            CCSpriteFrame birFrame6 = CCSpriteFrame.frameWithTexture(texture, new CCRect(117, 976, 40, 50));
            CCSpriteFrame birFrame7 = CCSpriteFrame.frameWithTexture(texture, new CCRect(117, 975, 40, 50));
            CCSpriteFrame birFrame8 = CCSpriteFrame.frameWithTexture(texture, new CCRect(117, 974, 40, 50));
            CCSpriteFrame birFrame9 = CCSpriteFrame.frameWithTexture(texture, new CCRect(117, 975, 40, 50));
            CCSpriteFrame birFrame10 = CCSpriteFrame.frameWithTexture(texture, new CCRect(117, 976, 40, 50));
            CCSpriteFrame birFrame0 = CCSpriteFrame.frameWithTexture(texture, new CCRect(61, 982, 40, 50));
            CCSpriteFrame birFrame1 = CCSpriteFrame.frameWithTexture(texture, new CCRect(61, 981, 40, 50));
            CCSpriteFrame birFrame2 = CCSpriteFrame.frameWithTexture(texture, new CCRect(61, 980, 40, 50));
            CCSpriteFrame birFrame3 = CCSpriteFrame.frameWithTexture(texture, new CCRect(61, 979, 40, 50));
            CCSpriteFrame birFrame4 = CCSpriteFrame.frameWithTexture(texture, new CCRect(61, 978, 40, 50));
            CCSpriteFrame birFrame5 = CCSpriteFrame.frameWithTexture(texture, new CCRect(61, 977, 40, 50));
            CCSpriteFrame birFrame11 = CCSpriteFrame.frameWithTexture(texture, new CCRect(5, 977, 40, 50));
            CCSpriteFrame birFrame12 = CCSpriteFrame.frameWithTexture(texture, new CCRect(5, 978, 40, 50));
            CCSpriteFrame birFrame13 = CCSpriteFrame.frameWithTexture(texture, new CCRect(5, 979, 40, 50));
            CCSpriteFrame birFrame14 = CCSpriteFrame.frameWithTexture(texture, new CCRect(5, 980, 40, 50));
            CCSpriteFrame birFrame15 = CCSpriteFrame.frameWithTexture(texture, new CCRect(5, 981, 40, 50));
            CCSpriteFrame birFrame16 = CCSpriteFrame.frameWithTexture(texture, new CCRect(5, 982, 40, 50));
            CCSprite birdCcSprite = CCSprite.spriteWithSpriteFrame(birFrame0);
            birdCcSprite.position = new CCPoint(240, 430);
            birdCcSprite.scaleX = sX;
            birdCcSprite.scaleY = sY;
            addChild(birdCcSprite);

            List<CCSpriteFrame> animFrames = new List<CCSpriteFrame>();
            animFrames.Add(birFrame0);
            animFrames.Add(birFrame1);
            animFrames.Add(birFrame2);
            animFrames.Add(birFrame3);
            animFrames.Add(birFrame4);
            animFrames.Add(birFrame5);
            animFrames.Add(birFrame6);
            animFrames.Add(birFrame7);
            animFrames.Add(birFrame8);
            animFrames.Add(birFrame9);
            animFrames.Add(birFrame10);
            animFrames.Add(birFrame11);
            animFrames.Add(birFrame12);
            animFrames.Add(birFrame13);
            animFrames.Add(birFrame14);
            animFrames.Add(birFrame15);
            animFrames.Add(birFrame16);
            CCAnimation animation = CCAnimation.animationWithFrames(animFrames, 0.03f);
            CCAnimate animate = CCAnimate.actionWithAnimation(animation, true);
            CCActionInterval seq = (CCActionInterval)(CCSequence.actions(animate));
            birdCcSprite.runAction(CCRepeatForever.actionWithAction(seq));
        }

 

场景切换

在点击开始按钮时候，我们需要进行场景切换，跳到游戏场景，为playCallback添加实现

 private void playCallback(CCObject sender)
        {
            GamePlayScene gamePlayScene = new GamePlayScene();
            gamePlayScene.addChild(BackgroundLayer.node(), (int)LayerTags.Background, (int)LayerTags.Background);
            gamePlayScene.addChild(RoadLayer.node(), (int)LayerTags.Road, (int)LayerTags.Road);
            gamePlayScene.addChild(GamePlayLayer.node(), (int)LayerTags.Game, (int)LayerTags.Game);
            float t = 0.8f;
            CCTransitionScene reScene = CCTransitionFade.transitionWithDuration(t, gamePlayScene);
            CCDirector.sharedDirector().replaceScene(reScene);
        }

*******************************************

至此，第一屏已经山寨完毕，楼主去写第二屏算法去了。