Chimpmunk + js 跑酷

最新推荐文章于 2024-05-01 20:49:01 发布

过期的码农

最新推荐文章于 2024-05-01 20:49:01 发布

阅读量2k

点赞数

分类专栏： Cocos2d-x JavaScript

Cocos2d-x 同时被 2 个专栏收录

93 篇文章 0 订阅

订阅专栏

JavaScript

26 篇文章 0 订阅

订阅专栏

http://www.ityran.com/archives/5110

翻译：Jack★魏凡缤，紫夜行者，夜狼。校对：u0u0

Parkour Game Starter Kit

介绍

跑酷是一种非常受大众欢迎的游戏。这款入门套件教你如何使用Cocos2D-x以及相关工具创建有趣的跑酷游戏，而且同时支持iOS和Android。

一图胜过千言万语，让我们先看看学完这个教程后最终的游戏接图:

在这个游戏里面，我们使用手势控制。向上滑动跳起，向下滑动蹲下。逆时针画圈开启无敌模式。

入门套件使用cocos2d-x javascript绑定实现。

本文描述的步骤基于Mac OS X和Xcode开发环境实现。

关于作者

KeNan Liu 是一个开发者和ityran.com联合创始人。七年移动软件开发经验，涉及多个开发平台，如Windows Mobile, Brew, iOS and Windows Phone 8。现专注基于Cocos2dx游戏开发。你可以在Weibo上关注他。

Iven Yang 当前专注于cocos2d-x开发的工程师，同时也是泰然团队的联合创始人。

关于编辑

Yiming Guo 是一个对移动网络、云计算和数据挖掘感兴趣的在读本科生。现在在成都实习,专注于Cocos2d-x游戏开发。

关于美术

Fan Wang 有四年的美术设计经验。

Chapter 1: Getting Started

Note: 如果你已经熟悉如何创建多平台cocos2d-x项目可以跳到下个部分。

Get Cocos2d-x

打开网页地址Cocos2D-x download page.

有几个多个cocos2d-x可选择下载。建议下载最新的稳定版本。写这个starter kit的时候是cocos2d-x-2.1.5。

Creating a multi-platform project of Cocos2d-x

打开 Terminal 终端. 使用cd 命令跳转到你解压cocos2d-x的目录, 如下:

cd ~/Documents/project/cocos2d-x-2.1.4/tools/project-creator

Creating project use create_project.py

./create_project.py -project Parkour -package org.cocos2d-x.Parkour -language javascript

看见下列信息表示创建成功.

proj.ios        : Done!
proj.android        : Done!
proj.win32      : Done!
New project has been created in this path: /Users/u0u0/Documents/project/cocos2d-x-2.1.4/projects/Parkour
Have Fun!

如上所示, create_project.py 自动生成IOS Android win32 项目。这里我们用IOS项目做为例子。
跳转到项目目录打开项目。

cd ~/Documents/project/cocos2d-x-2.1.4/projects/Parkour/proj.ios
open Parkour.xcodeproj

项目创建完成，下面开始写代码。

Chapter 2: Setting up Multi-Resolution support

Cocos2d-x 提供一系列API使得游戏运行在不同分辨率下。技术细节参照这个文档。

Cocos2d-x 多分辨率适配完全解析

本文档展示如何使用它。

从HelloCpp 复制AppMacros.h 到Parkour项目

cp ~/Documents/project/cocos2d-x-2.1.4/samples/Cpp/HelloCpp/Classes/AppMacros.h ~/Documents/project/cocos2d-x-2.1.4/projects/Parkour/Classes

拖动 AppMacros.h 到Classes文件夹。弹出窗空中勾选“Add to targets”点击确认。

打开AppDelegate.cpp,添加AppMacros.h到文件顶部上。

#include "AppMacros.h"

用下面的代码替换applicationDidFinishLaunching的函数实现:

// initialize director
CCDirector *pDirector = CCDirector::sharedDirector();
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
pDirector->setOpenGLView(pEGLView);

// Set the design resolution
pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionFixedHeight);

CCSize frameSize = pEGLView->getFrameSize();

vector<string> searchPath;

float mediumGap = (mediumResource.size.height - smallResource.size.height) / 2;

if (frameSize.height > (smallResource.size.height + mediumGap)) {
    searchPath.push_back(mediumResource.directory);
    pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height);
} else {
    searchPath.push_back(smallResource.directory);
    pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
}

// set searching path
CCFileUtils::sharedFileUtils()->setSearchPaths(searchPath);

// turn on display FPS
pDirector->setDisplayStats(true);

// set FPS. the default value is 1.0/60 if you don't call this
pDirector->setAnimationInterval(1.0 / 60);

ScriptingCore* sc = ScriptingCore::getInstance();
sc->addRegisterCallback(register_all_cocos2dx);
sc->addRegisterCallback(register_all_cocos2dx_extension);
sc->addRegisterCallback(register_cocos2dx_js_extensions);
sc->addRegisterCallback(register_all_cocos2dx_extension_manual);
sc->addRegisterCallback(register_CCBuilderReader);
sc->addRegisterCallback(jsb_register_chipmunk);
sc->addRegisterCallback(jsb_register_system);
sc->addRegisterCallback(JSB_register_opengl);
sc->addRegisterCallback(MinXmlHttpRequest::_js_register);

sc->start();

CCScriptEngineProtocol *pEngine = ScriptingCore::getInstance();
CCScriptEngineManager::sharedManager()->setScriptEngine(pEngine);
ScriptingCore::getInstance()->runScript("MainScene.js");

我们用了2中不同的资源区适配不同分辨率,小资源放在“iphone”目录，大资源放在“ipad”。

Note: 我们改变了js入口到MainScene.js。把 main.js 重新命名MainScene.js。在Resource目录下的“res” 和“src”的不会在Parkour里面使用,删除它们然后点“Move to trash”。

创建2个目录拖拽它们到Resource文件夹,弹出框点“Create folder references for any added folders” 然后选“Add to targets”。

项目Parkour的Resource现在长这样:

Parkour 设计分辨率480*320, 所有图片会放在“iphone”下面,用iPhone模拟器运行. 完成所有游戏逻辑后我们添加其他的资源然后再不同分辨率下测试。

Chapter 3: Adding a Main Menu to Main Scene

现在我们有一个干净的Cocos2dx JSB项目,入口是“MainScene.js”。还需要添加其他东西到“MainScene.js”确保其运行。

打开“MainScene.js” 用下列内容替换：

// 1.
require("jsb.js");

// 2.
var MainLayer = cc.Layer.extend({
    // 3.
    ctor:function () {
        this._super();
        this.init();
    },

    // 4.
    init:function () {
        this._super();
        var centerPos = cc.p(winSize.width / 2, winSize.height / 2);

        var spriteBG = cc.Sprite.create("MainBG.png");
        spriteBG.setPosition(centerPos);
        this.addChild(spriteBG);

        cc.MenuItemFont.setFontSize(60);
        var menuItemPlay = cc.MenuItemFont.create("Play", this.onPlay, this);
        var menu = cc.Menu.create(menuItemPlay);
        menu.setPosition(centerPos);
        this.addChild(menu);
    },

    // on play button clicked
    onPlay:function (sender) {
        // 5.
        log("==onPlay clicked");
    }
});

// 6.
MainLayer.scene = function () {
    var scene = cc.Scene.create();
    var layer = new MainLayer();
    scene.addChild(layer);
    return scene;
};

// main entry
try {
    // 7.
    director = cc.Director.getInstance();
    winSize = director.getWinSize();
    // run first scene
    director.runWithScene(MainLayer.scene());
} catch(e) {log(e);}

要点解析:

1. Require() 会加载一个js module, 用文件名字作为形参。如果需要用cocos2dx jsb 开发游戏 “jsb.js” 是一个必须被加载的module。一个module一旦运行被加载,可以被使用在任何地方。

2. MainLayer = cc.Layer.extend() 是Cocos2dx jsb 继承object的方式,源自John Resig’s javascript Inheritance。这里我们从CCLayer继承了一个新的类MainLayer。

3. Ctor()会被调用如果new一个MainLayer. 它是jsb的构造函数。如果你重写这个方法记得调用this.super()。

4. 重写init()也需要调用this.super(). 我们用之前添加的背景图片创建一个精灵,放置在屏幕中间,作为子节点添加到MainLayer. 创建一个包含“Play”的菜单，并设置回调函数onPlay().

5. 目前onPlay()里面仅有打印一条log，后面我们再实现其功能。

6. MainLayer.scene = function (){}; 给MainLayer添加一个静态方法。

7. 是时候加在MainLayer了。用cc.Director.getInstance()获取director, 告诉director运行第一个场景。

Note:Director 和 winSize 被声明为全局变量,两个都被频繁使用。

运行项目将看到下面的画面:

Chapter 4: PlayScene Overview

主场景有3个层。

PlayLayer

该层有主角，地图，金币，岩石。

主角前进,玩家层镜头也前进。以确保主角始终在视野内。

背景有两个水平地图,主角从第一张地图移动到第二张地图时候,第一张地图自动加载到第二张地图右侧,一直循环下去。

StatusLayer

状态层在玩家层上,金币和距离数据显示在该层。
为什么分层呢?

如果金币距离数据显示在玩家层,数据会在镜头移动时候消失，分层能简单解决这个问题。

GameOverLayer

该层是一个color layer.

主角撞上石头后显示游戏结束, 并提供一个replay按钮。

Chapter 5: Setting Up PlayLayer with Physics World

PlayLayer是PlayScene最重要的层。这层处理玩家输入,碰撞检测,物体运动等等。

创建个js文件,并且添加Xcode 项目

首先,在资源目录中创建一个名为PlayScene.js的文件并且拖拽到Xcode工程源文件夹里。在弹出的对话框中,确保Add to targets选中,然后单击Finish。

然后，在Xcode项目里选择目标,切换到“Build Phases”标签,展开“Copy bundle Resource”项目。

滚动到底部并点击“+”。在弹出的对话框中,选择“PlayScene.js”,然后单击Add。

Note: ios工程里添加js文件到“Copy bundle Resources”是一个必要的步骤。如果没有添加,当调用js时,你会看到下面的错误信息。

Cocos2d: Get data from file(PlayScene.jsc) failed!
Cocos2d: JS: /Users/u0u0/Library/Application Support/iPhone Simulator/6.1/Applications/3F9658F6-12CB-422A-89E9-6719D04B4D4B/Parkour.app/MainScene.js:3:Error: can't open PlayScene.js: No such file or directory

PlayLayer with Physics World
打开“PlayScene.js” 并且代替成下面的文本:

var PlayLayer = cc.Layer.extend({
    // 1.
    space:null,// chipmunk space

    // constructor
    ctor:function () {
        this._super();
        this.init();
    },

    init:function () {
        this._super();
        this.initPhysics();
        // 2.
        this.scheduleUpdate();
    },

    // 3.
    initPhysics:function() {
        // 4.
        this.space = new cp.Space();
        // 5.
        this.space.gravity = cp.v(0, -350);
        // 6. set up Walls
        var wallBottom = new cp.SegmentShape(this.space.staticBody,
                        cp.v(0, g_groundHight),// start point
                        cp.v(4294967295, g_groundHight),// MAX INT:4294967295
                        0);// thickness of wall
        this.space.addStaticShape(wallBottom);
    },

    update:function (dt) {
        // 7.
        this.space.step(dt);
    }
});

PlayLayer.scene = function () {
    var scene = cc.Scene.create();
    var layer = new PlayLayer();
    scene.addChild(layer);
    return scene;
};

一些重要的注意事项:

1. 定义个类成员变量。左边是变量名称,右边是变量初始值。

2. 启动“update”方法。

3. 这款游戏,我们使用Chipmunk2D物理引擎。Cocos2d-x种有两套Chipmunk JSB API。一个是面向对象的,另一个是面向过程的。我们使用更加友好的面向对象接口。

4. new cp.Space() 是面向对象的chipmunk API，用来创建一个物理世界。

5. 设置物理世界的重力。cp.v()等同于cc.p().

6. 跑酷所用的地面，chipmunk中使用静态形状来描述。从物理空间新建一个静态SegmentShape,然后将它添加到物理空间。

7. update()方法每帧被调用。我们在这里调用chipmunk setp方法是物理世界动起来。

全局变量 g_groundHight 定义在”Utils.js”文件里面。

var g_groundHight = 50;

为了加载PlayScene, 我们需要打开”MainScene.js”, 添加下面的代码到头部。

require("Utils.js");
require("PlayScene.js");

用下面的代码替换onPlay的实现:

onPlay:function (sender) {
    cc.Director.getInstance().replaceScene(PlayLayer.scene());
}

调试并运行,点击“Play”按钮,屏幕将会显示一片黑。在下一章我们将添加些东西。

Chapter 6: Running This Way

本章我们将添加一个精灵到PlayLayer,并让他跑起来。我们称呼这个精灵为runner。

要实现跑的动作,我们需要帧动画。动画的实现要感谢资源文件下的精灵表单。

精灵表包括parkour.plist 和 parkour.png. 使用TexturePacker工具生成。

Note: 精灵表有助于减少内存消耗,加快绘图过程和保持帧率高。更多信息参考：精灵表单

帧动画由多张图片组成。

如下所示:

把所有的图片拖到TexturePacker里。然后点击”Publish to output the sprite sheet”.如需使用 TexturePacker可以在它的官网上找到。

现在我们获得两个文件“parkour.plist”和“parkour.png”, 把他们移动到资源目录下的Resource/iphone里面.

创建一个名为”Runner.js”js文件然后如我们前面做的那样添加到Xcode工程里。内容如下:

// 1.
if(typeof RunnerStat == "undefined") {
    var RunnerStat = {};
    RunnerStat.running = 0;
};

// 2.
var Runner = cc.Node.extend({
    sprite:null,
    runningSize:null,
    space:null,
    body:null,// current chipmunk body
    shape:null,// current chipmunk shape
    stat:RunnerStat.running,// init with running status
    runningAction:null,
    spriteSheet:null,
    get offsetPx() {return 100;},

    // 3.
    ctor:function (spriteSheet, space) {
        this._super();

        this.spriteSheet = spriteSheet;
        this.space = space;
        this.init();
    },

    init:function () {
        this._super();

        // 4.
        this.sprite = cc.PhysicsSprite.createWithSpriteFrameName("runner0.png");
        this.runningSize = this.sprite.getContentSize();

        // 5.
        this.initAction();
        // 6.
        this.initBody();
        // 7.
        this.initShape();
        // 8.
        this.sprite.setBody(this.body);
        // 9.
        this.sprite.runAction(this.runningAction);
        // 10.
        this.spriteSheet.addChild(this.sprite, 1);
        // 11.
        this.stat = RunnerStat.running;
    },

    // 12.
    onExit:function() {
        this.runningAction.release();

        this._super();
    },

    // 13.
    getPositionX:function () {
        return this.sprite.getPositionX();
    },

    initAction:function () {
        // init runningAction
        var animFrames = [];
        // num equal to spriteSheet
        for (var i = 0; i < 8; i++) {
            var str = "runner" + i + ".png";
            var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
            animFrames.push(frame);
        }

        var animation = cc.Animation.create(animFrames, 0.1);
        this.runningAction = cc.RepeatForever.create(cc.Animate.create(animation));
        this.runningAction.retain();
    },

    initBody:function () {
        // create chipmunk body
        this.body = new cp.Body(1, cp.momentForBox(1,
                        this.runningSize.width, this.runningSize.height));
        this.body.p = cc.p(this.offsetPx, g_groundHight + this.runningSize.height / 2);
        this.body.v = cp.v(150, 0);//run speed
        this.space.addBody(this.body);
    },

    initShape:function (type) {
        this.shape = new cp.BoxShape(this.body,
                        this.runningSize.width, this.runningSize.height);
        this.space.addShape(this.shape);
    },
});

一些重要的注意事项:

1. JS的方式来定义一个runner状态的枚举。跑步者有许多状态,但对于这一章中,我们只关心的运行状态。

2. cc.PhysicsSprite 没有扩展方法。所以Runner类从cc.Node里扩展。

3. 跑步者将被创建并放置在物理世界的PlayLayer里。所以在构造函数里面引用物理空间和精灵表单。

4. 在你调用cc.PhysicsSprite.createWithSpriteFrameName创建物理精灵之前,你需要在内存里初始化通过TexturePacker创建的精灵表。这部分工作将在PlayLayer完成。“runner0.png”是第一帧图片。

5. 在initAction里, 从帧缓存创建一个帧动画, 让这个动画循环播放。注意 “this.runningAction.retain()”这行代码retain()将避免CCObject被GC。

6. 在initBody里, 创建runner的物理body, 并设置初始速度。

7. 在initShape里,创建与精灵大小相等的chipmunk形状。

8. 让物理引擎对象和精灵对象关联起来。

9. 让精灵播放动画。

10. 精灵添加到精灵表单的子节点。

11. 记录状态。我们在后面章节将会使用。

12. 重写onExit释放runningAction。如果你重写这个方法,记住调用this._super()。

13. 这个助手函数在PlayLayer里用于计算相机的移动。

切换到PlayScene.js添加下面的代码到文件头部:

require("Runner.js");

定义新的类成员变量。

spriteSheet:null,
runner:null,
lastEyeX:0,

跳转到init()函数做如下修改:

// create sprite sheet of PlayLayer
cc.SpriteFrameCache.getInstance().addSpriteFrames("parkour.plist");
this.spriteSheet = cc.SpriteBatchNode.create("parkour.png");
this.addChild(this.spriteSheet);

this.runner = new Runner(this.spriteSheet, this.space);
// runner is base on Node, addChild to make scheduleOnce and onExit call.
this.addChild(this.runner);

然后跳转到update()函数做如下修改:

// move Camera
this.lastEyeX = this.runner.getPositionX() - this.runner.offsetPx;
var camera = this.getCamera();
var eyeZ = cc.Camera.getZEye();
camera.setEye(this.lastEyeX, 0, eyeZ);
camera.setCenter(this.lastEyeX, 0, 0);

runner的新位置回由物理世界在每帧计算，相机需要跟随runner的移动步伐。

编译并运行这个程序,然后你可以看到一个男孩在屏幕上运行。

Chapter 7: Gesture Recognizer

到目前为止runner可以向前移动。在给runner添加用户控制前,你需要处理玩家的输入。

在游戏中我们用跳上、跳下和转圈这三个手势来控制runner。

$1 Unistroke Recognizer是一个开源库。支持包含花圈在内的16个手势识别，有javaScript版本,可以很容易的导入到Cocos2dx JSB项目里。

但是它有个缺点:很难区分向上滑动和向下滑动。必须由你自己去识别这两个手势。

Simple Recognizer

Simple Recognizer可以识别简单手势包括swipe up, swipe down, swipe left and swipe right.

创建一个名为“SimpleRecognizer.js”的js文件。替代内容如下:

// 1.
function Point(x, y)
{
    this.X = x;
    this.Y = y;
}

// class define
function SimpleRecognizer()
{
    this.points = [];
    this.result = "";
}

SimpleRecognizer.prototype.beginPoint = function(x, y) {
    this.points = [];
    this.result = "";
    this.points.push(new Point(x, y));
}

SimpleRecognizer.prototype.movePoint = function(x, y) {
    this.points.push(new Point(x, y));

    if (this.result == "not support") {
        return;
    }

    var newRtn = "";
    var len = this.points.length;
    // 2.
    var dx = this.points[len - 1].X - this.points[len - 2].X;
    var dy = this.points[len - 1].Y - this.points[len - 2].Y;

    if (Math.abs(dx) > Math.abs(dy)) {
        // 3.
        if (dx > 0) {
            newRtn = "right";
        } else {
            newRtn = "left";
        }
    } else {
        // 4.
        if (dy > 0) {
            newRtn = "up";
        } else {
            newRtn = "down";
        }
    }

    // first set result
    if (this.result == "") {
        this.result = newRtn;
        return;
    }

    // if diretcory change, not support Recognizer
    if (this.result != newRtn) {
        this.result = "not support";
    }
}

SimpleRecognizer.prototype.endPoint = function(x, y) {
    if (this.points.length < 3) {
        return "error";
    }
    return this.result;
}

SimpleRecognizer.prototype.getPoints = function() {
    return this.points;
}

注意以下重要事项:

1. 定义与dallar库一样的Point。这使得项目可以很简单的使用这两个库。

2. 每当触点移动时,在当前触点和之前触点之间计算不同的x坐标和y坐标。

3. 在这种情况下,运动趋势的触点在x轴方向。

4. 在这种情况下,运动趋势的触点在y轴方向。

$1 Unistroke Recognizer

开web浏览器,并导航到http://depts.washington.edu/aimgroup/proj/dollar/dollar.js. 保存到本地磁盘,并将其拖到资源目录下。添加dollar.js到Xcode项目作为第五章项目。

使用这个库之前你需要做一些优化。

在本库里包含16个手势。每次匹配,它必须遍历所有手势。注释掉无用的可以节省cpu时间。但是你不能注释掉所有不用的,否则每个识别结果将是“圆”。你需要保留一些干扰项。

开始优化吧。

打开dollar.js 并且修改NumUnistrikes值。

var NumUnistrokes = 4;//16;

注释掉无用的但保留“三角形”、“圆”、“左方括号”和“右方括号”。修改这四个Unistrokes数组下标。

Integrated into the PlayLayer

切换到PlayScene.js,并且在文件的顶部添加下面内容:

require("SimpleRecognizer.js");
require("dollar.js");

定义新的类成员变量

recognizer:null,
dollar:null,

跳转到函数init()在this.initPhysics()后面添加下面的代码.

// enable touch
this.setTouchEnabled(true);
// set touch mode to kCCTouchesOneByOne
this.setTouchMode(1);

this.dollar = new DollarRecognizer();
this.recognizer = new SimpleRecognizer();

You enable the touch of the layer, and set touch mode to kCCTouchesOneByOne, which receive touch point one at a time in event callbacks.
打开这个层的触摸事件，并设置为一次只反馈一个触摸点的kCCTouchesOneByOne模式。

添加下面代码到PlayLayer:

onTouchBegan:function(touch, event) {
    var pos = touch.getLocation();
    this.recognizer.beginPoint(pos.x, pos.y);
    return true;
},

onTouchMoved:function(touch, event) {
    var pos = touch.getLocation();
    this.recognizer.movePoint(pos.x, pos.y);
},

onTouchEnded:function(touch, event) {
    var rtn = this.recognizer.endPoint();

    switch (rtn) {
        case "up":
            log("==jumping");
            break;
        case "down":
            log("==crouching");
            break;
        case "not support":
        case "error":
            // try dollar Recognizer
            // 0:Use Golden Section Search (original) 
            // 1:Use Protractor (faster)
            var result = this.dollar.Recognize(this.recognizer.getPoints(), 1);
            log(result.Name);
            if (result.Name == "circle") {
                log("==incredible");
            }
            break;
    }
},

onTouchCancelled:function(touch, event) {
    log("==onTouchCancelled");
},

简单的识别器识别速度超过$1 Unistroke Recognizer。由它先识别swipe up 和 swipe down。如果它不能识别,再使用$1 Unistroke Recognizer。
调试并运行,尝试swipe up, swipe down ,画一个圆。你将看到下面的日志。

Cocos2d: JS: ==jumping
Cocos2d: JS: ==crouching
Cocos2d: JS: circle
Cocos2d: JS: ==incredible

Chapter 8: Jumping and Crouching

这一节中将介绍如何添加一些跑酷游戏的常用的一些控制方式。

在修改runner类之前首先要在Utils.js中添加如下代码

if(typeof SpriteTag == "undefined") {
    var SpriteTag = {};
    SpriteTag.runner = 0;
    SpriteTag.coin = 1;
    SpriteTag.rock = 2;
};

需要定义一个标记chipmunk碰撞检测的枚举类型

打开Runner.js,通过添加如下代码来完成RunnerStat的定义:

RunnerStat.jumpUp = 1;
RunnerStat.jumpDown = 2;
RunnerStat.crouch = 3;
RunnerStat.incredible = 4;

为runner类定义几个新的成员变量

crouchSize:null,
jumpUpAction:null,
jumpDownAction:null,
crouchAction:null,

当游戏角色蹲下的时候它的形状将会发生改变,下面的代码会记录蹲下时候的大小。在init()中添加如下代码:

var tmpSprite = cc.PhysicsSprite.createWithSpriteFrameName("runnerCrouch0.png");
this.crouchSize = tmpSprite.getContentSize();

改变

this.initShape();

为

this.initShape("running");

当然还要修改initShape()中的代码。用下面的代码替换它的内容:

initShape:function (type) {
    if (this.shape) {
        this.space.removeShape(this.shape);
    }
    if (type == "running") {
        this.shape = new cp.BoxShape(this.body,
                this.runningSize.width, this.runningSize.height);
    } else {
        // crouch
        this.shape = new cp.BoxShape(this.body,
                this.crouchSize.width, this.crouchSize.height);
    }
    this.shape.setCollisionType(SpriteTag.runner);
    this.space.addShape(this.shape);
},

还有initAction()中的三个动画初始化函数:jumpUpAction, jumpDownAction和crouchAction

// init jumpUpAction
animFrames = [];
for (var i = 0; i < 4; i++) {
    var str = "runnerJumpUp" + i + ".png";
    var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
    animFrames.push(frame);
}

animation = cc.Animation.create(animFrames, 0.2);
this.jumpUpAction = cc.Animate.create(animation);
this.jumpUpAction.retain();

// init jumpDownAction
animFrames = [];
for (var i = 0; i < 2; i++) {
    var str = "runnerJumpDown" + i + ".png";
    var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
    animFrames.push(frame);
}

animation = cc.Animation.create(animFrames, 0.3);
this.jumpDownAction = cc.Animate.create(animation);
this.jumpDownAction.retain();

// init crouchAction
animFrames = [];
for (var i = 0; i < 1; i++) {
    var str = "runnerCrouch" + i + ".png";
    var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
    animFrames.push(frame);
}

animation = cc.Animation.create(animFrames, 0.3);
this.crouchAction = cc.Animate.create(animation);
this.crouchAction.retain();

已经完成了初始化,然后要做的是在Runner类中添加下面的函数:

jump:function () {
    if (this.stat == RunnerStat.running) {
        this.body.applyImpulse(cp.v(0, 250), cp.v(0, 0));
        this.stat = RunnerStat.jumpUp;
        this.sprite.stopAllActions();
        this.sprite.runAction(this.jumpUpAction);
    }
},

只需要给runner的body一个向上的冲力，runner就会跳起来，在将动画换成跳跃动画之前，通过调用sprite.stopAllActions()来停止当前动画。

跳跃的动作可以分为两个部分－－上升和下降。可以通过观察body的重心的线速度来检测从上升到下降状态的转换。

如果在Y轴的线速度小于0.1,跳跃的动作正在从上升状态切换到下降状态,这时将精灵的动画切换到jumpDownAction.

如果Y轴的线速度等于0说明精灵的从下降的状态切换到了跑动的状态,这时将精灵动画改成runningAction.

这些工作将在sprite.step()中完成,代码如下:

step:function (dt) {
    var vel = this.body.getVel();
    if (this.stat == RunnerStat.jumpUp) {
        if (vel.y < 0.1) {
            this.stat = RunnerStat.jumpDown;
            this.sprite.stopAllActions();
            this.sprite.runAction(this.jumpDownAction);
        }
        return;
    }
    if (this.stat == RunnerStat.jumpDown) {
        if (vel.y == 0) {
            this.stat = RunnerStat.running;
            this.sprite.stopAllActions();
            this.sprite.runAction(this.runningAction);
        }
        return;
    }
},

在蹲下的时候,只需要修改body的shape.把下面的函数添加到Runner类中:

crouch:function () {
    if (this.stat == RunnerStat.running) {
        this.initShape("crouch");
        this.sprite.stopAllActions();
        this.sprite.runAction(this.crouchAction);
        this.stat = RunnerStat.crouch;
        // after time turn to running stat
        this.scheduleOnce(this.loadNormal, 1.0);
    }
},

蹲下的状态不会持续太长的时间,可以通过调用this.scheduleOnce(this.loadNormal, 1.0)来返回到跑动状态.

loadNormal() 初始化跑动状态下body的shape.可以这样做:

loadNormal:function (dt) {
    this.initShape("running");
    this.sprite.stopAllActions();
    this.sprite.runAction(this.runningAction);
    this.stat = RunnerStat.running;
},

现在已经完成了Runner.js,用下面代码替换PlayScene.js中的onTouchEnded函数:

onTouchEnded:function(touch, event) {
    var rtn = this.recognizer.endPoint();

    switch (rtn) {
        case "up":
            this.runner.jump();
            break;
        case "down":
            this.runner.crouch();
            break;
        case "not support":
        case "error":
            // try dollar Recognizer
            // 0:Use Golden Section Search (original) 
            // 1:Use Protractor (faster)
            var result = this.dollar.Recognize(this.recognizer.getPoints(), 1);
            log(result.Name);
            if (result.Name == "circle") {
                this.runner.incredibleHulk();
            }
            break;
    }
},

添加下面代码来切换动画:

// runner step, to change animation
this.runner.step(dt);

编译运行之,上下滑动来看看跳跃和蹲下的效果。

Chapter 9: Map Loop

目前为止,游戏角色还很孤独的跑在一个黑色的世界,现在要做的是给游戏添加背景图片。背景由上下两部分组成,当游戏角色在两张图片中间的夹缝上跑动的时候,第一张背景图片会慢慢被第二张背景图片替换,第一张图片将重新加载。

下面代码是一个将整数转为一个特定长度的javascript函数,将以下代码添加到Utils.js文件中:

function FormatNumberLength(num, length) {
    var r = "" + num;
    while (r.length < length) {
        r = "0" + r;
    }
    return r;
}

创建一个名为Map.js的文件并添加到Xcode的项目中,添加下面的代码:

require("Utils.js");

var Map = cc.Class.extend({
    layer:null,
    space:null,
    spriteWidth:0,
    // 1.
    mapCount:2,// total map of resource
    map0:null,
    map1:null,
    ground0:null,
    ground1:null,
    curMap:0,// [0, n]

    ctor:function (layer, space) {
        this.layer = layer;
        this.space = space;

        // 2.
        this.map0 = cc.Sprite.create("Map00.png");
        this.map0.setAnchorPoint(cc.p(0, 0));
        this.map0.setPosition(cc.p(0, 0));
        this.layer.addChild(this.map0);

        // 3.
        this.ground0 = cc.Sprite.create("Ground00.png");
        this.ground0.setAnchorPoint(cc.p(0, 0));
        var size = this.ground0.getContentSize();
        this.ground0.setPosition(cc.p(0, g_groundHight - size.height));
        this.layer.addChild(this.ground0);

        this.spriteWidth = this.map0.getContentSize().width;

        this.map1 = cc.Sprite.create("Map01.png");
        this.map1.setAnchorPoint(cc.p(0, 0));
        // 4.
        this.map1.setPosition(cc.p(this.spriteWidth, 0));
        this.layer.addChild(this.map1);

        this.ground1 = cc.Sprite.create("Ground01.png");
        this.ground1.setAnchorPoint(cc.p(0, 0));
        this.ground1.setPosition(cc.p(this.spriteWidth, g_groundHight - size.height));
        this.layer.addChild(this.ground1);
    },

    getMapWidth:function () {
        return this.spriteWidth;
    },

    getCurMap:function () {
        return this.curMap;
    },

    checkAndReload:function (eyeX) {
        // 5.
        var newCur = parseInt(eyeX / this.spriteWidth);
        if (this.curMap == newCur) {
            return false;
        }

        var map;
        var ground;
        if (0 == newCur % 2) {
            // change mapSecond
            map = this.map1;
            ground = this.ground1;
        } else {
            // change mapFirst
            map = this.map0;
            ground = this.ground0;
        }
        log("==load map:" + (newCur + 1));
        this.curMap = newCur;

        // 6.
        var fileName = "Map" + FormatNumberLength((newCur + 1) % this.mapCount, 2) + ".png";
        var texture = cc.TextureCache.getInstance().addImage(fileName);
        map.setTexture(texture);
        map.setPositionX(this.spriteWidth * (newCur + 1));

        // load ground
        var fileName = "Ground" + FormatNumberLength((newCur + 1) % this.mapCount, 2) + ".png";
        var texture = cc.TextureCache.getInstance().addImage(fileName);
        ground.setTexture(texture);
        ground.setPositionX(this.spriteWidth * (newCur + 1));
        return true;
    },
});

几个重点:

1. MapCount应等于在资源文件夹中的文件数量。并应不少于两个。

2. 地图的上半部分是一个锚点改为(0,0)的精灵,用更改锚点来简化坐标的计算

3. 上层部分跟下层部分的不同之处是它们的位置坐标,将下层部分Y轴坐标设置为 g_groundHight – this.ground0.getContentSize().height来确保游戏角色的脚是踏在地面上的。

4. 第二张地图的开始位置是背景的宽度

5. 用这种方式计算地图坐标

6. 在一张背景跑完之后需要切换一张新的图片

在PlayScene.js的前面添加如下代码:

require("Map.js");

定义新的变量

map:null,

通过添加下面代码到init()初始化地图:

this.map = new Map(this, this.space);

将下面代码添加到update()函数中:

// check and reload map
if (true == this.map.checkAndReload(this.lastEyeX)) {
    //level up
    this.runner.levelUp();
}

编译运行后你将看到这样的界面:

Chapter 10: Adding Coins and Rocks

现在已经可以让游戏角色跑在一个有背景的世界了,但是要完成一个跑酷游戏的话还需要两个东西:金币和石头.

当游戏角色碰到了金币,金币将会消失但是石头不会消失,当他碰到石头,game over! 除了碰撞处理外它们没有任何区别,让我们从金币开始做吧。

创建一个Coin.js的javascript文件并将它导入到xcode的项目中,将下面代码添加到里面:

var Coin = cc.Class.extend({
    space:null,
    sprite:null,
    shape:null,
    // 1.
    _map:0,
    get map() {
        return this._map;
    }, 
    set map(newMap) {
        this._map = newMap;
    },

    ctor:function (spriteSheet, space, pos) {
        this.space = space;

        // 2.
        var animFrames = [];
        for (var i = 0; i < 8; i++) {
            var str = "coin" + i + ".png";
            var frame = cc.SpriteFrameCache.getInstance().getSpriteFrame(str);
            animFrames.push(frame);
        }

        var animation = cc.Animation.create(animFrames, 0.1);
        var action = cc.RepeatForever.create(cc.Animate.create(animation));

        this.sprite = cc.PhysicsSprite.createWithSpriteFrameName("coin0.png");

        // 3.
        var radius = 0.95 * this.sprite.getContentSize().width / 2;
        var body = new cp.StaticBody();
        body.setPos(pos);
        this.sprite.setBody(body);

        this.shape = new cp.CircleShape(body, radius, cp.vzero);
        this.shape.setCollisionType(SpriteTag.coin);
        // 4.
        this.shape.setSensor(true);

        this.space.addStaticShape(this.shape);

        // Needed for collision
        body.setUserData(this);

        // add sprite to sprite sheet
        this.sprite.runAction(action);
        spriteSheet.addChild(this.sprite, 1);
    },

    // 5.
    removeFromParent:function () {
        this.space.removeStaticShape(this.shape);
        this.shape = null;
        this.sprite.removeFromParent();
        this.sprite = null;
    },
});

// 6.
var gCoinContentSize = null;
Coin.getContentSize = function () {
    if (null == gCoinContentSize) {
        var sprite = cc.PhysicsSprite.createWithSpriteFrameName("coin0.png");        
        gCoinContentSize = sprite.getContentSize();
    }
    return gCoinContentSize;
};

同样提一些要点:

1. 金币属于哪个地图,这个值需要在ObjectManager.js中进行设置。

2. 初始化金币的动画

3. 金币采取使用静态的body方式来抵消重力

4. 传感器只是调用碰撞函数,并不会真的产生碰撞

5. 在ObjectManager.js中使用removeFromParent来删除元素

6. getContentSize是金币类中的一个静态方法,将在ObjectManager.js中用来计算坐标

接下来是石头,同样的方式创建一个Rock.js文件并添加下面的代码:

var Rock = cc.Class.extend({
    space:null,
    sprite:null,
    shape:null,
    _map:0,// which map belong to
    get map() {
        return this._map;
    }, 
    set map(newMap) {
        this._map = newMap; 
    },

    ctor:function (spriteSheet, space, pos) {
        this.space = space;

        // 1.
        if (pos.y >= (g_groundHight + Runner.getCrouchContentSize().height)) {
            this.sprite = cc.PhysicsSprite.createWithSpriteFrameName("hathpace.png");
        } else {
            this.sprite = cc.PhysicsSprite.createWithSpriteFrameName("rock.png");
        }

        var body = new cp.StaticBody();
        body.setPos(pos);
        this.sprite.setBody(body);

        // 2.
        this.shape = new cp.BoxShape(body,
            this.sprite.getContentSize().width,
            this.sprite.getContentSize().height);
        this.shape.setCollisionType(SpriteTag.rock);
        this.shape.setSensor(true);

        this.space.addStaticShape(this.shape);
        spriteSheet.addChild(this.sprite);

        // Needed for collision
        body.setUserData(this);
    },

    removeFromParent:function () {
        this.space.removeStaticShape(this.shape);
        this.shape = null;
        this.sprite.removeFromParent();
        this.sprite = null;
    },
});

var gRockContentSize = null;
Rock.getContentSize = function () {
    if (null == gRockContentSize) {
        var sprite = cc.PhysicsSprite.createWithSpriteFrameName("rock.png");
        gRockContentSize = sprite.getContentSize();
    }
    return gRockContentSize;
};

岩石跟金币有以下两个不同点:

1. 石头有两个可根据Ycoordinate的值选择的纹理

2. 石头的形状不是circle,而是box

现在已经有了金币跟岩石,但是如何将它们添加到游戏中呢?

创建一个名为”ObjectManager.js”的文件并将它添加到Xcode项目中,用下面代码替换文件中的内容:

require("Coin.js");
require("Rock.js");

var ObjectManager = cc.Class.extend({
    spriteSheet:null,
    space:null,
    // 1.
    objects:[],

    ctor:function (spriteSheet, space) {
        this.spriteSheet = spriteSheet;
        this.space = space;
        // objects will keep when new ObjectManager();
        // we need clean here
        this.objects = [];
    },

    // 2.
    initObjectOfMap:function (map, mapWidth) {
        var initCoinNum = 7;
        var jumpRockHeight = Runner.getCrouchContentSize().height + g_groundHight;
        var coinHeight = Coin.getContentSize().height + g_groundHight;

        // 2.1
        var randomCoinFactor = Math.round(Math.random()*2+1);
        var randomRockFactor = Math.round(Math.random()*2+1);
        var jumpRockFactor = 0;

        // 2.2
        var coinPoint_x = mapWidth/4 * randomCoinFactor+mapWidth*map;
        var RockPoint_x = mapWidth/4 * randomRockFactor+mapWidth*map;

        var coinWidth = Coin.getContentSize().width;
        var rockWith = Rock.getContentSize().width;
        var rockHeight =  Rock.getContentSize().height;

        var startx = coinPoint_x - coinWidth/2*11;
        var xIncrement = coinWidth/2*3;

        //add a rock
        var rock = new Rock(this.spriteSheet, this.space,
                cc.p(RockPoint_x, g_groundHight+rockHeight/2));
        rock.map = map;
        this.objects.push(rock);
        if(map == 0 && randomCoinFactor==1){
            randomCoinFactor = 2;
        }

        //add 7 coins
        for(i = 0; i < initCoinNum; i++)
        {
            // 2.3
            if((startx + i*xIncrement > RockPoint_x-rockWith/2)
                &&(startx + i*xIncrement < RockPoint_x+rockWith/2))
            {
                var coin1 = new Coin(this.spriteSheet, this.space,
                        cc.p(startx + i*xIncrement, coinHeight+rockHeight));
            } else{
                var coin1 = new Coin(this.spriteSheet, this.space,
                        cc.p(startx + i*xIncrement, coinHeight));
            }

            coin1.map = map;
            this.objects.push(coin1);
        }

        for(i=1;i<4;i++){
            if(i!=randomCoinFactor&&i!=randomRockFactor){
                jumpRockFactor = i;
            }
        }

        // 2.4
        var JumpRockPoint_x = mapWidth/4 * jumpRockFactor+mapWidth*map;
        var jumpRock = new Rock(this.spriteSheet, this.space,
                cc.p(JumpRockPoint_x, jumpRockHeight+rockHeight/2));
        jumpRock.map = map;
        this.objects.push(jumpRock);
    },

    // 3.
    recycleObjectOfMap:function (map) {
        while((function (obj, map) {
            for (var i = 0; i < obj.length; i++) {
                if (obj[i].map == map) {
                    obj[i].removeFromParent();
                    obj.splice(i, 1);
                    return true;
                }
            }
            return false;
        })(this.objects, map));
    },

    // 4.
    remove:function (obj) {
        obj.removeFromParent();
        // find and delete obj
        for (var i = 0; i < this.objects.length; i++) {
            if (this.objects[i] == obj) {
                this.objects.splice(i, 1);
                break;
            }
        }
    },
});

一些需要注意的地方:

1. 所有的金币跟岩石都被放在一个列表中

2. 地图初始化对象的主要逻辑

创建两个随机数来确定哪个点创建金币或岩石
通过随机因素来计算每张地图中金币和岩石的开始位置,将每个对象都添加到地图中
用金币来举个例子,如果金币的开始位置跟岩石的一样那么就要把它的点调得比石头高度高或者低于石头的底部

添加其他石头

3. 每一次地图重载,地图中的对象要回收。

4. 当游戏角色得到金币时,将这个金币从它的父类中和列表中移除

一切都搞定了,现在唯一剩下的事就是PlayScene.js中进行整合,

在PlayScene.js的前面添加下面的代码:

require("ObjectManager.js");

定义新的类成员变量

objectManager:null,
shapesToRemove:[],

在init()函数中this.addChild(this.runner)这一行后面添加下面的代码：

this.objectManager = new ObjectManager(this.spriteSheet, this.space);
this.objectManager.initObjectOfMap(1, this.map.getMapWidth());

在initPhysics()中设置chipmunk 的CollisionHandler

this.space.addCollisionHandler(SpriteTag.runner, SpriteTag.coin,
            this.collisionCoinBegin.bind(this), null, null, null);
this.space.addCollisionHandler(SpriteTag.runner, SpriteTag.rock,
            this.collisionRockBegin.bind(this), null, null, null);

在PlayLayer中添加两个碰撞回调函数

collisionCoinBegin:function (arbiter, space) {
    var shapes = arbiter.getShapes();
    this.shapesToRemove.push(shapes[1]);
},

collisionRockBegin:function (arbiter, space) {
    var rtn = this.runner.meetRock();
    if (rtn == true) {
        log("==gameover");
        director.pause();
    } else {
        // break Rock
        var shapes = arbiter.getShapes();
        this.shapesToRemove.push(shapes[1]);
    }
},

然后返回update()函数做如下更改:

// Simulation cpSpaceAddPostStepCallback
for(var i = 0; i < this.shapesToRemove.length; i++) {
    var shape = this.shapesToRemove[i];
    var body = shape.getBody();
    var obj = body.getUserData();
    //TODO add remove animation
    this.objectManager.remove(obj);
}
this.shapesToRemove = [];

// check and reload map
if (true == this.map.checkAndReload(this.lastEyeX)) {
    this.objectManager.recycleObjectOfMap(this.map.getCurMap() - 1);
    this.objectManager.initObjectOfMap(this.map.getCurMap() + 1, this.map.getMapWidth());
    //level up
    this.runner.levelUp();
}

现在,你已经完成了这个游戏的主要逻辑, 编译运行之,控制游戏角色去获取金币躲避岩石吧！骚年。

过期的码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chimpmunk + js 跑酷

Read as other languages：英语目录介绍关于作者关于编辑关于美术Chapter 1: Getting StartedCreating a multi-platform project of Cocos2d-xChapter 2: Setting up Multi-Resolution suppo
复制链接

扫一扫

专栏目录