首页技术教程极客学院eoe

eoe 移动开发者论坛

 找回密码
 加入eoe

QQ登录

只需一步,快速开始

查看: 5939|回复: 20
收起左侧

使用OGEngine快速开发Flappy Bird

[复制链接]

48

主题

103

帖子

828

e币
发表于 2014-7-11 10:33:45 | 显示全部楼层 |阅读模式
本帖最后由 OGEngine 于 2014-7-11 10:35 编辑

    《flappy bird》是由来自越南的独立游戏开发者DongNguyen所开发的作品,游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍,而这只鸟其实是根本不会飞的……所以玩家每点击一下小鸟就会飞高一点,不点击就会下降,玩家必须控制节奏,拿捏点击屏幕的时间点,让小鸟能在落下的瞬间跳起来,恰好能够通过狭窄的水管缝隙,只要稍一分神,马上就会失败阵亡。

本文将介绍使用OGEngine游戏引擎来做一个类似FlayppyBird 的游戏,游戏创意及资源属原作者所有,这里只做技术学习使用。


一、没图没真相,先来看看截图
      

游戏基本上模仿了原版的游戏过程。

二、游戏场景的设计
游戏场景(GameScene)是本游戏的重点,它包括三种元素:
    (1)
主角小鸟
    (2)障碍物水管
    (3)滚动的地板

GameScene所控制的操作:
    (1)游戏状态的表示
    (2)添加小鸟和水管
    (3)分数的实时统计
    (4)碰撞的检测

1、创建小鸟类(BirdSprite)
在整个游戏的过程当中,小鸟有三种不同的状态:
    (1)准备状态(挥动翅膀,不受重力约束)
    (2)飞行状态(飞行过程中,受重力的影响)
    (3)死亡状态(倒地的状态)

这里用几个常量来标示小鸟的状态
  1. public static final int STATE_READY = 0;
  2.         public static final int STATE_FLY = 1;
  3.         public static final int STATE_DIE = 2;
复制代码

小鸟三种状态下的设置:
  1. /**
  2.          * 刷新状态
  3.          * @param state
  4.          */
  5.         public void refreshState(int state) {
  6.                 switch (state) {
  7.                 case STATE_READY:
  8.                         this.setY(initY);
  9.                         this.setRotation(0);
  10.                         this.animate(180);
  11.                         break;
  12.                 case STATE_FLY:
  13.                         this.animate(100);
  14.                         break;
  15.                 case STATE_DIE:
  16.                         this.stopAnimation(0);
  17.                         this.setRotation(90);
  18.                         break;
  19.                 }
复制代码
注:①小鸟在准备状态下是恢复初始坐标位置,恢复旋转角度为0,翅膀振动比较慢一些。
       ②小鸟在飞行过程中,翅膀振动快一些。
       ③小脑死亡时停止振动翅膀,旋转角度为90°。


2、创建水管类(BarSprite)
我们知道游戏中,小鸟是不停地由左往右飞,通过层层水管障碍物,事实上,我们只需要让水管和地板由右往左移动就可以实现小鸟由左往右飞的感觉了,呵呵。

我们可以使用 PhysicsHandler 来处理水管的移动问题,使得水管一生成的时候就以设定的速度由右往左匀速移动。

请看下面的代码:
  1. public BarSprite(float pX, float pY, String pTextureRegionName,boolean isUpBar,
  2.                         VertexBufferObjectManager pVertexBufferObjectManager) {
  3.                 super(pX, pY, pTextureRegionName, pVertexBufferObjectManager);

  4.                 this.isUpBar = isUpBar;
  5.                 mPhysicsHandler = new PhysicsHandler(this);
  6.                 this.registerUpdateHandler(mPhysicsHandler);
  7.                 // 设置移动方向和速度
  8.                 mPhysicsHandler.setVelocityX(-150);
  9.         }
  10.         
  11.         /**
  12.          * 停止移动
  13.          */
  14.         public void stopMove(){
  15.                 this.unregisterUpdateHandler(mPhysicsHandler);
  16.         }
复制代码

3、创建地板类(FloorSprite)
    地板类主要是要实现控制地板的循环滚动状态。
  1. public class FloorSprite extends AnimatedSprite {
  2.         /** 视差值 **/
  3.         private float mParallaxValue;
  4.         /** 视差移动的因数 **/
  5.         private float mParallaxFactor = 5;
  6.         /** 每秒改变的视差值 **/
  7.         private float mParallaxChangePerSecond;
  8.         public void setParallaxChangePerSecond(float mParallaxChangePerSecond) {
  9.                 this.mParallaxChangePerSecond = mParallaxChangePerSecond;
  10.         }
  11.         public FloorSprite(float pX, float pY, String pTextureRegionName,
  12.                         float mParallaxChangePerSecond,
  13.                         VertexBufferObjectManager pVertexBufferObjectManager) {
  14.                 super(pX, pY, pTextureRegionName, pVertexBufferObjectManager);
  15.                 this.mParallaxChangePerSecond = mParallaxChangePerSecond;
  16.         }
  17.         @Override
  18.         protected void onManagedUpdate(float pSecondsElapsed) {
  19.                 super.onManagedUpdate(pSecondsElapsed);
  20.                 // LogUtil.d("onManagedUpdate pSecondsElapsed-->"+pSecondsElapsed);
  21.                 this.mParallaxValue += this.mParallaxChangePerSecond * pSecondsElapsed;
  22.         }
  23.         @Override
  24.         protected void onManagedDraw(GLState pGLState, Camera pCamera) {
  25.                 pGLState.pushModelViewGLMatrix();
  26.                 {
  27.                         final float cameraWidth = pCamera.getWidth();
  28.                         final float shapeWidthScaled = this.getWidthScaled();
  29.                         float baseOffset = (mParallaxValue * this.mParallaxFactor)
  30.                                         % shapeWidthScaled;

  31.                         while (baseOffset > 0) {
  32.                                 baseOffset -= shapeWidthScaled;
  33.                         }
  34.                         pGLState.translateModelViewGLMatrixf(baseOffset, 0, 0);
  35.                         float currentMaxX = baseOffset;
  36.                         do {
  37.                                 super.onManagedDraw(pGLState, pCamera);
  38.                                 pGLState.translateModelViewGLMatrixf(shapeWidthScaled, 0, 0);
  39.                                 currentMaxX += shapeWidthScaled;
  40.                         } while (currentMaxX < cameraWidth);
  41.                 }
  42.                 pGLState.popModelViewGLMatrix();
  43.         }
  44. }
复制代码

4、添加小鸟
前面简单地封装了一下小鸟精灵类,在游戏场景类GameScene里添加小鸟及改变小鸟状态就比较简单了。

  1. birdSprite = new BirdSprite(120, 370, pVertexBufferObjectManager);
  2.                 birdSprite.setZIndex(pZIndex_middle);
  3.                 birdSprite.refreshState(game_state);
  4.                 birdSprite.setScale(1.2f);
  5.                 this.attachChild(birdSprite);
复制代码

5、添加水管
我们知道,水管在游戏中是源源不断地,水管的添加,主要是通过createBars(float pX) 来生成,每隔一段时间生产上下一对水管,中间留有小鸟通过的缝道。
  1. /**
  2.          * 创建一对bars
  3.          * @param pX
  4.          */
  5.         private void createBars(float pX) {
  6.                 float pY = -new Random().nextInt(300);

  7.                 BarSprite upSprite = new BarSprite(pX, pY, Res.BAR_UP, true,
  8.                                 pVertexBufferObjectManager);
  9.                 BarSprite downSprite = new BarSprite(pX, upSprite.getBottomY() + 165,
  10.                                 Res.BAR_DOWN, false, pVertexBufferObjectManager);
  11.                 this.attachChild(upSprite);
  12.                 this.attachChild(downSprite);
  13.                 barSprites.add(upSprite);
  14.                 barSprites.add(downSprite);

  15.                 this.sortChildren();

  16.         }
复制代码
我们可以通过TimerHandler每隔一段时间创建一对水管。

  1. mTimerHandler = new TimerHandler(pTimerSeconds, true,
  2.                                 new ITimerCallback() {

  3.                                         @Override
  4.                                         public void onTimePassed(TimerHandler pTimerHandler) {
  5.                                                 createBars(480);

  6.                                         }
  7.                                 });
复制代码


三、小鸟物理效果以及碰撞检测的设计
我们知道,游戏的一大特点就是玩家每点击一下小鸟就会飞高一点,不点击小鸟就会受到重力效果以一定的加速度往下掉。

我们使用OGEngine 引擎集合的Box2D功能,很容易地就可以实现这一的效果。

1、为小鸟添加物理效果

  1. /**
  2.          * 初始化物理效果
  3.          */
  4.         private void initPhysics() {
  5.                 this.mPhysicsWorld = new PhysicsWorld(new Vector2(0, 50), false);
  6.                 // 参数 :密度、弹力、摩擦力
  7.                 FixtureDef FIXTURE_DEF = PhysicsFactory.createFixtureDef(0, 0.0f, 0.0f);
  8.                
  9.                 Body birdBody = PhysicsFactory.createBoxBody(mPhysicsWorld, birdSprite,
  10.                                 BodyType.DynamicBody, FIXTURE_DEF);
  11.                 birdSprite.setBody(birdBody);
  12.                 this.mPhysicsWorld.registerPhysicsConnector(new PhysicsConnector(birdSprite,
  13.                                 birdBody, true, true));
  14.         }
复制代码

2、在小鸟飞行的状态中,每点击一次屏幕小鸟会有一个向上的速度。
birdSprite.getBody().setLinearVelocity(0, -15); 这样就可以为小鸟设置一个向上的速度。
  1. @Override
  2.         public boolean onSceneTouchEvent(TouchEvent pSceneTouchEvent) {
  3.                 if (pSceneTouchEvent.isActionDown()) {

  4.                         if (game_state == STATE_READY) {
  5.                                 gameStart();
  6.                         }
  7.                         if (!birdSprite.isCollisionFloor() && !birdSprite.isCollisionBar()) {
  8.                                 
  9.                                 if(birdSprite.getY()>0){
  10.                                         // 不能飞过顶部
  11.                                         birdSprite.getBody().setLinearVelocity(0, -15);
  12.                                         // 播放音效
  13.                                         SoundRes.playSound(SOUND_WING);
  14.                                 }
  15.                         }
  16.                 }
  17.                 return super.onSceneTouchEvent(pSceneTouchEvent);
  18.         }
复制代码

3、检测碰撞

我们通过注册一个 IUpdateHandler 不停地监听小鸟跟水管或者地板有没发生碰撞,并根据实际情况做对应的逻辑处理。
  1. /**
  2.          * 不停检测用的 handler
  3.          */
  4.         private IUpdateHandler checkHandler = new IUpdateHandler() {

  5.                 @Override
  6.                 public void reset() {

  7.                 }
  8.                 @Override
  9.                 public void onUpdate(float pSecondsElapsed) {
  10.                         // LogUtil.d("onUpdate--->"+pSecondsElapsed);
  11.                         if (game_state == STATE_FLY) {
  12.                                 // 小鸟旋转
  13.                                 rotateBird();
  14.                                 if (!birdSprite.isCollisionBar() && isCollidesWithBar()) {
  15.                                         birdSprite.setCollisionBar(true);
  16.                                         // 停止水管的生成和移动
  17.                                         barOver();
  18.                                        
  19.                                         // 播放音效
  20.                                         SoundRes.playSound(SOUND_HIT);
  21.                                        
  22.                                 }
  23.                                 // 小鸟是否碰撞到地板或者水管
  24. //                                if (birdSprite.collidesWith(mFloorSprite) && !birdSprite.isCollisionFloor()) {
  25.                                 if ( !birdSprite.isCollisionFloor()&&isContact(birdSprite, mFloorSprite)) {
  26.                                         birdSprite.setCollisionFloor(true);
  27.                                         if(!birdSprite.isCollisionBar()){
  28.                                                 // 停止水管的生成和移动
  29.                                                 barOver();
  30.                                                 // 播放音效
  31.                                                 SoundRes.playSound(SOUND_HIT);
  32.                                         }
  33.                                         // 游戏结束
  34.                                         gameOver();
  35.                                 }
  36.                                 // 迭代器遍历bar集合
  37.                                 Iterator<BarSprite> iterator = barSprites.iterator();
  38.                                 while (iterator.hasNext()) {
  39.                                         BarSprite barSprite = iterator.next();
  40.                                         // 检测小鸟是否通过水管
  41.                                         if(barSprite.isUpBar() && !barSprite.isPass()){
  42.                                                 if(barSprite.getCentreX()<birdSprite.getX()){
  43.                                                         barSprite.setPass(true);
  44.                                                         score++;
  45.                                                         updateScore(score);
  46.                                                 }
复制代码

4、小鸟角度旋转逻辑
     小鸟在上飞或者下飞的情况下会有不同的角度,这个我们可以根据小鸟的Y速度调试出来。
  1. /**
  2.          * 小鸟角度旋转逻辑
  3.          */
  4.         private void rotateBird(){
  5.                 float speed_y = birdSprite.getBody().getLinearVelocity().y;
  6.                
  7.                 float pRotation  = Math.min(Math.max(-30, (speed_y*4f)-45), 90);
  8.                
  9.                 birdSprite.getBody().setRotation(pRotation);
  10.         }
复制代码

四、分数的处理
分数的处理比较简单,主要用到OGEngine 的 Text 类,以及安卓子身的SharedPreferences来保存每次的最高纪录即可。
  1. <font color="#000000">public class SharedUtil {

  2.         private static final String Shared_System = "Shared_og";

  3.         private static final String BEST_SCORE = "best_score";

  4.         public static void setBestScore(Context pContext, int pBestScore) {
  5.                 Editor edit = pContext.getSharedPreferences(Shared_System,
  6.                                 Context.MODE_PRIVATE).edit();
  7.                 edit.putInt(BEST_SCORE, pBestScore);
  8.                 edit.commit();
  9.         }

  10.         public static int getBestScore(Context context) {
  11.                 return context
  12.                                 .getSharedPreferences(Shared_System, Context.MODE_PRIVATE)
  13.                                 .getInt(BEST_SCORE, 0);
  14.         }</font>
复制代码

好了,分析就到这里,更多细节请各位自下载游戏源码研究: http://www.ogengine.com/download/doc.jsp

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入eoe

x

0

主题

2

帖子

16

e币
发表于 2017-6-21 13:50:17 | 显示全部楼层
pGLState.pushModelViewGLMatrix();
                {
                        final float cameraWidth = pCamera.getWidth();
                        final float shapeWidthScaled = this.getWidthScaled();
                        float baseOffset = (mParallaxValue * this.mParallaxFactor)
                                        % shapeWidthScaled;

                        while (baseOffset > 0) {
                                baseOffset -= shapeWidthScaled;
                        }
                        pGLState.translateModelViewGLMatrixf(baseOffset, 0, 0);
                        float currentMaxX = baseOffset;
                        do {
                                super.onManagedDraw(pGLState, pCamera);
                                pGLState.translateModelViewGLMatrixf(shapeWidthScaled, 0, 0);
                                currentMaxX += shapeWidthScaled;
                        } while (currentMaxX < cameraWidth);
                }
                pGLState.popModelViewGLMatrix();
        }


这个还得有opengl基础
发表于 2014-7-11 11:15:27 | 显示全部楼层
赞! 早就想自己开发一个玩玩,但是不知道怎么下手

11

主题

31

帖子

267

e币
发表于 2014-7-11 11:24:33 | 显示全部楼层
非常不错,学习了。。。。

13

主题

29

帖子

206

e币
发表于 2014-7-11 14:25:16 | 显示全部楼层
思路很清晰,感谢楼主分享

1

主题

14

帖子

47

e币
发表于 2014-7-11 15:54:03 | 显示全部楼层
哈哈,原来Flappy bird  开发起来这么简单的呀,看了这介绍 我也能开发出来了,关键有源码。。。。

0

主题

11

帖子

22

e币
发表于 2014-7-11 18:29:58 | 显示全部楼层
我来学习学习.
发表于 2014-7-12 11:02:44 | 显示全部楼层
欢迎大家一起学习探讨,可以加入开发者群: 313897892

5

主题

28

帖子

159

e币
发表于 2014-7-14 09:55:58 | 显示全部楼层
开发思路很重要,有了思路我也能很快弄一个。。。

0

主题

2

帖子

29

e币
发表于 2014-7-23 19:45:03 | 显示全部楼层
赞个。学习学习。。

0

主题

2

帖子

0

e币
发表于 2014-8-1 15:26:46 | 显示全部楼层
恩微软反而我惹的方式的方式地方

11

主题

214

帖子

882

e币
发表于 2014-8-12 09:45:58 | 显示全部楼层

1

主题

26

帖子

12

e币
发表于 2014-8-12 18:08:33 | 显示全部楼层
素材不好搞啊~~~~~~~~~~~~~~~~~~~~

0

主题

23

帖子

115

e币
发表于 2014-10-12 21:45:18 | 显示全部楼层
学习到小鸟动画如何加载这个地方卡住了
发表于 2014-10-29 09:00:13 | 显示全部楼层
很好谢谢·························
发表于 2014-10-29 09:27:21 | 显示全部楼层
源码网页打不开了
您需要登录后才可以回帖 登录 | 加入eoe

本版积分规则

推荐阅读
赞助商们

QQ|新帖|小黑屋|eoe 移动开发者论坛 ( 京ICP备11018032 京公网安11010802020210  

GMT+8, 2018-10-16 07:16 , Processed in 0.177410 second(s), 44 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表
关闭

扫一扫 关注eoe官方微信