我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景（二）
上一章分析了Live场景中各个元素的作用，这一章开始来分析最关键的部分——打击物件的实现。
上一章放出的视频很模糊，先来看一个清晰版的复习一下：http://www.bilibili.com/video/av1087466/
然后说一下我使用的环境：Win8.1 + VS2013 + Cocos2d-x3.2
接下来为后文作点准备工作：
1、 创建一个空的cocos2d-x项目；
2、 把HelloWorldScene类和它的两个源码文件改名。我使用的名称是LiveScene；
3、 删掉LiveScene类中多余的代码，比如添加一个“Hello World”的Label这种的（说实话cocos2d-x创建空项目每次都要带个这个类挺蛋疼，因为99.99999%的情况我们的项目中根本不需要它，直接创建一个干净的空项目多好）；
4、 删掉Resource文件夹中的所有文件；
5、 在AppDelegate类中修改设计分辨率为960×640，像下面这样：
bool AppDelegate::applicationDidFinishLaunching() {
// ...
if(!glview) {
glview = GLView::create("My Game");
glview->setFrameSize(960, 640);
director->setOpenGLView(glview);
glview->setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL);
}
// ...
}
准备工作做完后，可以先编译运行一下。如果跑起来一片黑，那么就OK可以继续了。
准备工作完成，开始分析打击物件。从视频看，打击物件有个3D透视效果：近大远小。Cocos2d-x 3.x的版本已经支持3D模型，可以制作3D游戏了。但是对于这个比较简单的效果，直接上3D有点大炮打蚊子的感觉。可以运用3D透视公式，根据物件的Z轴距离计算出在屏幕上的X和Y坐标以及缩放。
等等，仔细看看那个视频，感觉物件飞过来的过程，和真正的3D比还是有点违和啊……于是，LL（《Love Live!学院偶像祭》，以后都简称LL）中真的是用的3D吗？
此时需要检测一下了。先说一下我的思路：对于下图所示的三个三连打物件，他们的时间间隔是一样的。如果使用了3D透视，那么后两个的屏幕坐标间距一定小于前两个，近大远小嘛。
还是不大能理解？来看看这么一张图（图片源自网络）：
不要吐槽远景那些莫名其妙的东西……我们来看铁轨，是不是从画面上看，越远处的枕木越密集？但是实际上枕木和枕木之间的间距是一样的。这个现象用计算机图形学的术语讲，其实就是世界坐标系到摄像机坐标系的变换形成的。因为屏幕上没有Z轴，只有X和Y，物体的Z轴变化只能通过移动位置和缩放来表现。
扯远了，用这一点来验证LL是否使用了3D透视，就是因为物件飞过来的时候，它们的Z轴速度肯定是一定的（从一个音乐游戏来讲，如果是变速运动这游戏基本上没法玩了），而三个物件的时间间隔相同，那么经过坐标变换必然形成后两个的屏幕坐标间距一定小于前两个。
那么打开神奇PS，将三个圆的中心标出来，连上线。不会PS没关系，我把图做好了。背景有点花？盖个黑色图层：
能明显看出，三个圆之间的屏幕距离是相等的。于是乎，这个效果根本没有使用3D透视变换。也就是说，物件在飞向屏幕的过程中，在屏幕上移动的速度也是不变的。
于是事情变得简单了，不需要去计算透视变换了。对于单个的一列，物件飞过来就是X轴不变，Y轴匀速运动。再从飞出来的点拉两条射线出来：
艾玛，缩放也是匀变化的，取值就是一个f(x) = kx + b的一元线性方程嘛。接下来我们来求这个方程的参数k和b。
为了方便测量，以最中间的按钮为准。从视频看这个游戏的长宽比是3:2的，所以文章开始说的的设计分辨率要取960×640。测量值写在图片上了（怎么测量属于PS的应用，与这一系列文章无关，这里就不做介绍了）：
所以就可以知道：物件在0px高度的时候，缩放是0，在-400px高度的时候，缩放是1（这里定义列的锚点是物件出现的点，以方便后续做旋转操作，所以物件的y是从0开始逐渐变小的）。所以可以求得缩放方程式是
scale = -0.0025 * y
可以看出对于圆圈物件，就是一个Sprite对象。对于长条物件，是一个Sprite做头，一个Sprite做中间，一个Sprite做尾。
对于圆圈物件来说，我只要处理缩放和坐标就行。而对于Sprite的中间，则是一个随时在变化的梯形。
Cocos2d-x提供了setSkew方法对Sprite进行扭曲，但是这个扭曲只是一个平行四边形变换，并不是梯形。我们知道OpenGL渲染图形是先渲染顶点，再渲染像素的。所以修改Sprite的四个顶点可以达到想要的效果。说到顶点，自然就想到了顶点着色器，想到了GLSL。不过，这个效果怎么说也不复杂，杀鸡焉用牛刀呢。其实，在Sprite类中有一个成员（CCSprite.h 563行）：
// vertex coords, texture coords and color info V3F_C4B_T2F_Quad _quad;
注释说，这个成员就是Sprite的四个顶点。V3F_C4B_T2F_Quad又是个啥玩意？看看结构定义（ccTypes.h 291行）：
//! 4 Vertex3FTex2FColor4B
struct V3F_C4B_T2F_Quad
{
//! top left
V3F_C4B_T2F tl;
//! bottom left
V3F_C4B_T2F bl;
//! top right
V3F_C4B_T2F tr;
//! bottom right
V3F_C4B_T2F br;
};
里面果然是四个成员，分别表示左上，左下，右上，右下四个顶点。而顶点的结构V3F_C4B_T2F是这样的（ccTypes.h 245行）：
//! a Vec2 with a vertex point, a tex coord point and a color 4B
struct V3F_C4B_T2F
{
//! vertices (3F)
Vec3 vertices; // 12 bytes
//! colors (4B)
Color4B colors; // 4 bytes
// tex coords (2F)
Tex2F texCoords; // 8 bytes
};
这三个成员分别表示：顶点坐标，顶点颜色和UV纹理贴图坐标。我们只需要处理位置即可。然而，_quad成员是一个protected对象，Sprite类也没有对外提供访问接口。因为对象时protected的，我们可以派生一个Sprite类的子类，提供访问_quad的接口。
在项目中添加VertexSprite.h和VertexSprite.cpp，将接口暴露出来（憋了这么久，终于可以敲代码了）。首先是头文件：
#ifndef __VERTEX_SPRITE_H__
#define __VERTEX_SPRITE_H__
#include "cocos2d.h"
USING_NS_CC;
class VertexSprite : public Sprite
{
public:
static VertexSprite* create(const std::string& filename);
bool initWithFile(const std::string& filename);
/*
* 设置四个顶点的坐标
* @param pTL 左上角顶点坐标
* @param pBL 左下角顶点坐标
* @param pTR 右上角顶点坐标
* @param pBR 右下角顶点坐标
*/
void SetVertex(const Vec2& pTL, const Vec2& pBL, const Vec2& pTR, const Vec2& pBR);
private:
VertexSprite(){}
};
#endif // __VERTEX_SPRITE_H__
然后是实现文件：
#include "VertexSprite.h"
VertexSprite* VertexSprite::create(const std::string& filename)
{
auto ret = new VertexSprite();
if (ret->initWithFile(filename))
{
ret->autorelease();
}
else
{
CC_SAFE_DELETE(ret);
}
return ret;
}
bool VertexSprite::initWithFile(const std::string& filename)
{
return Sprite::initWithFile(filename);
}
void VertexSprite::SetVertex(const Vec2& pTL, const Vec2& pBL, const Vec2& pTR, const Vec2& pBR)
{
// Top Left
//
this->_quad.tl.vertices.x = pTL.x;
this->_quad.tl.vertices.y = pTL.y;
// Bottom Left
//
this->_quad.bl.vertices.x = pBL.x;
this->_quad.bl.vertices.y = pBL.y;
// Top Right
//
this->_quad.tr.vertices.x = pTR.x;
this->_quad.tr.vertices.y = pTR.y;
// Bottom Right
//
this->_quad.br.vertices.x = pBR.x;
this->_quad.br.vertices.y = pBR.y;
this->setContentSize(Size(0, pTL.y - pBL.y));
}
可以看到SetVertex方法的最后做了一下setContentSize的操作。为什么呢？因为Sprite绘制的时候，会判断自己是否在显示区域内，如果不在，则不绘制（CCSprite.cpp 586行）：
// draw
void Sprite::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
// Don't do calculate the culling if the transform was not updated
_insideBounds = (flags & FLAGS_TRANSFORM_DIRTY) ? renderer->checkVisibility(transform, _contentSize) : _insideBounds;
if(_insideBounds)
{
_quadCommand.init(_globalZOrder, _texture->getName(), getGLProgramState(), _blendFunc, &_quad, 1, transform);
renderer->addCommand(&_quadCommand);
#if CC_SPRITE_DEBUG_DRAW
_customDebugDrawCommand.init(_globalZOrder);
_customDebugDrawCommand.func = CC_CALLBACK_0(Sprite::drawDebugData, this);
renderer->addCommand(&_customDebugDrawCommand);
#endif //CC_SPRITE_DEBUG_DRAW
}
}
所以设置顶点坐标后，还需要手动设置它的_contentSize。如果不设置，这个值默认就是我们使用的贴图的大小，即1px × 1px。所以在没设置的情况下，这个Sprite稍微移出显示区域一点，整个Sprite就不会显示了。所以我们需要在设定顶点后，手动去修改它的_contentSize。为了节约运算资源，以及考虑到可能出现的情况（只会是梯形，不会出现凹四边形等情况），这里直接设置_contentSize的高度就行了，可以减少一定的运算量。
目前只写了一个从文件创建对象的create方法。当然，今后为了各种需求可以也可以加入其他的比如createWithSpriteFrame等等。
有了一个可设定顶点坐标的类，接下来就可以编写物件类：BeatObject类了。根据框架设计，画面表现部分和数据部分是分开的，所以BeatObject类不能存放这个BeatObject出现的时间等数据，外部仅能改变BeatObject的位置。
当外部调用BeatObject的setPositionY方法（物件只会纵向移动，不应当修改x坐标）时，应当会做如下操作：
1、 计算出头的缩放值；
2、 如果这个BeatObject的类型是Strip，则根据BeatObject的长度计算出尾部的坐标和缩放值；
3、 如果这个BeatObject的类型是Strip，再计算出中间部分的四个顶点坐标。
四个顶点的坐标和尾部的缩放怎么计算呢？请看图：
如图所示是一个Strip物件的示意图。下面的圆是头部，上面的圆是尾部，中间红色的梯形就是我们要进设置顶点的中间部。TL, BL, TR, BR则是四个顶点，直接对应_quad成员中的四个成员。
Length值是由外部设置进去的，表示头部圆心到尾部圆心的长度，也就是梯形的高。头部圆的缩放的公式上文推导出了，尾部圆的缩放公式则是
-0.0025 * (y + length)
y值就是这个坐标系中的原点相对于Colume节点的高度。
我使用的图中，头部尾部的图像虽然是128px×128px，但是圆圈本身有个外发光，导致圆圈实际没有128px那么大。这里我取124px作为中间部一倍缩放宽度。实际制作的时候，这个宽度值应当根据使用的图像作出适当调整。于是，四个顶点的坐标取值如下：
TL: x = -尾部缩放 × 124 / 2, y = length
BL: x = -头部缩放 × 124 / 2, y = 0
TR: x = 尾部缩放 × 124 / 2, y = length
BR: x = 头部缩放 × 124 / 2, y = 0
我使用一个enum来区分BeatObject的类型。这个enum存放在Common.h中，因为在使用物件数据的时候还会用上。圈叫Block因为在传统下落式音乐游戏中那玩意叫“块”。Common.h的内容如下：
#ifndef __COMMON_H__
#define __COMMON_H__
enum BeatObjectType : int
{
Invalid = 0x0000,
Block = 0x0001,
Strip = 0x0002,
SameTime = 0x0004,
Star = 0x0008
};
#define WASSERT(__COND__) if(!(__COND__)){ DebugBreak(); }
#endif // __COMMON_H__
WASSERT宏用于在断言符合时产生一个断点，而不是生成报错对话框，这样可以方便调试。
如下是BeatObject类的代码，首先是头文件：
#ifndef __BEAT_OBJECT_H__
#define __BEAT_OBJECT_H__
#include "cocos2d.h"
#include "Common.h"
#include "VertexSprite.h"
USING_NS_CC;
class BeatObject : public Node
{
public:
/*
* 创建一个BeatObject实例
* @param pType BeatObject类型，参考BeatObjectType
* @param pLength BeatObject的长度，仅当该实例为Strip类型时有效
*/
static BeatObject* create(int pType, float pLength = 0);
~BeatObject(){}
public: // Getter
bool IsBlock();
bool IsStrip();
public: // Setter
void setPositionY(float y) override;
void setRotation(float rotation) override;
private:
BeatObject();
bool init(int pType, float pLength = 0);
// 不允许外部修改BeatObj的坐标
void setPosition(const Vec2& position){ Node::setPosition(position); }
void setPositionX(float x){ Node::setPositionX(x); }
private:
int m_nType;
Sprite* m_pHead;
Sprite* m_pTail;
VertexSprite* m_pBody;
float m_fLength;
float m_fCurLength;
};
#endif // __BEAT_OBJECT_H__
实现：
#include "BeatObject.h"
namespace
{
inline float GetMoveScale(float pY)
{
if (pY >= 0)
{
return 0;
}
return -0.0025f * pY;
}
inline bool TypeContains(int pType, const BeatObjectType& pTarType)
{
return (pType & pTarType) == pTarType;
}
}
//////////////////////////////////////////////////////////////////////////
// BeatObject
BeatObject::BeatObject()
: m_nType(BeatObjectType::Invalid)
, m_pHead(nullptr)
, m_pTail(nullptr)
, m_pBody(nullptr)
, m_fLength(0)
, m_fCurLength(0)
{
}
BeatObject* BeatObject::create(int pType, float pLength /* = 0 */)
{
auto ret = new BeatObject();
if (ret->init(pType, pLength))
{
ret->autorelease();
}
else
{
CC_SAFE_DELETE(ret);
}
return ret;
}
bool BeatObject::init(int pType, float pLength /* = 0 */)
{
if (!Node::init())
{
return false;
}
this->m_nType = pType;
WASSERT(TypeContains(this->m_nType, BeatObjectType::Invalid));
// 不允许对Block类型设置Length
// 以及不允许设置Strip类型的Length小于等于0
//
if (pLength > 0)
{
WASSERT(this->IsStrip());
}
else if (pLength < 0)
{
WASSERT(false);
}
this->m_fLength = pLength;
if (this->IsStrip())
{
this->m_pBody = VertexSprite::create("Strip_Body.png");
this->m_pTail = Sprite::create("Strip_Tail.png");
this->m_pBody->setAnchorPoint(Vec2(0.5f, 0));
this->addChild(this->m_pBody);
this->addChild(this->m_pTail);
this->m_pTail->setVisible(false);
}
this->m_pHead = Sprite::create("Block.png");
this->addChild(this->m_pHead);
if (TypeContains(this->m_nType, BeatObjectType::Star))
{
auto s = Sprite::create("Star.png");
s->setPosition(this->m_pHead->getContentSize() / 2);
this->m_pHead->addChild(s);
}
if (TypeContains(this->m_nType, BeatObjectType::SameTime))
{
auto st = Sprite::create("SameTime.png");
st->setPosition(this->m_pHead->getContentSize() / 2);
this->m_pHead->addChild(st);
}
return true;
}
bool BeatObject::IsBlock()
{
return TypeContains(this->m_nType, BeatObjectType::Block);
}
bool BeatObject::IsStrip()
{
return TypeContains(this->m_nType, BeatObjectType::Strip);
}
void BeatObject::setPositionY(float y)
{
Node::setPositionY(y);
// 设置圆圈的缩放。若缩放太小直接不显示
//
auto headScale = GetMoveScale(y);
this->m_pHead->setScale(headScale);
this->m_pHead->setVisible(headScale > 0.05f);
// 如果该物件是一个Strip，则需要处理其身体和尾部
//
if (this->IsStrip())
{
// 模拟无限远处飞来的效果，保证尾部的y坐标小于0
//
if (y + this->m_fLength > 0)
{
this->m_fCurLength = -y;
}
else if (this->m_fCurLength != this->m_fLength)
{
this->m_fCurLength = this->m_fLength;
this->m_pTail->setPositionY(this->m_fLength);
}
auto tailScale = GetMoveScale(this->getPositionY() + this->m_fCurLength);
this->m_pTail->setScale(tailScale);
this->m_pTail->setVisible(tailScale > 0.05f);
auto harfHeadWidth = headScale * 124 / 2.0f;
auto harfTailWidth = tailScale * 124 / 2.0f;
this->m_pBody->SetVertex(
Vec2(-harfTailWidth, this->m_fCurLength),
Vec2(-harfHeadWidth, 0),
Vec2(harfTailWidth, this->m_fCurLength),
Vec2(harfHeadWidth, 0));
}
}
void BeatObject::setRotation(float rotation)
{
this->m_pHead->setRotation(rotation);
}
BeatObject类开放并重写setPositionY方法，屏蔽setPosition和setPositionX，不允许外部直接修改BeatObject的坐标。这里还重写了setRotation方法，但是并没有调用基类的setRotation，原因后面来讲。
BeatObject类目前就是这样了，今后需要其他功能再逐渐添加。接下来我们创建BeatObject的父节点类：BeatObjectColume。
每个物件在运动的时候，都不会离开它们所在的列。换句话说，就是一个在第一列的物件，在任何时候都不会跑到第二列去。BeatObjectColume类就表示一个列。这个类目前比较简单，我就直接放代码了，头文件：
#ifndef __BEAT_OBJECT_COLUME_H__
#define __BEAT_OBJECT_COLUME_H__
#include "cocos2d.h"
#include "BeatObject.h"
USING_NS_CC;
class BeatObjectColume : public Node
{
public:
CREATE_FUNC(BeatObjectColume);
~BeatObjectColume();
public:
void AddBeatObject(BeatObject* pObj);
void ClearObjects();
void SetObjectPositionY(int pIndex, float pY);
private:
void addChild(Node *child){ Node::addChild(child); }
private:
BeatObjectColume();
bool init();
private:
std::vector<BeatObject*> m_BeatObjList;
};
#endif // __BEAT_OBJECT_COLUME_H__
实现：
#include "BeatObjectColume.h"
BeatObjectColume::BeatObjectColume()
{
}
bool BeatObjectColume::init()
{
if (!Node::init())
{
return false;
}
return true;
}
void BeatObjectColume::AddBeatObject(BeatObject* pObj)
{
pObj->setRotation(-this->getRotation());
this->addChild(pObj);
this->m_BeatObjList.push_back(pObj);
}
void BeatObjectColume::ClearObjects()
{
for (auto it : this->m_BeatObjList)
{
it->removeFromParent();
}
this->m_BeatObjList.clear();
}
void BeatObjectColume::SetObjectPositionY(int pIndex, float pY)
{
WASSERT(pIndex >= 0 && pIndex < this->m_BeatObjList.size());
this->m_BeatObjList.at(pIndex)->setPositionY(pY);
}
BeatObjectColume::~BeatObjectColume()
{
this->m_BeatObjList.clear();
}
注意在AddBeatObject这个方法中，对添加进去的BeatObject进行了一个旋转处理。为什么呢？因为列是呈扇形分开的，除开最中间的列，其他列都进行过旋转处理。而我们看视频截图：
可以看出在列旋转后，对于Block物件，它相对于屏幕其实是没有旋转的，对于Strip物件（图中没有），它的头对于屏幕也是没有旋转的。所以在添加BeatObject的时候，要对它进行一个和Colume方向相反，大小相同的旋转。而因为Strip物件只有头部进行了旋转，所以上文说的不必调用基类的setRotation。
然后我们在LiveScene类中加入一些东西，看看我们实现的成果（因为是临时使用的代码，变量使用不太规范）。头文件：
#ifndef __LIVE_SCENE_H__
#define __LIVE_SCENE_H__
#include "cocos2d.h"
#include "BeatObject.h"
#include "BeatObjectColume.h"
USING_NS_CC;
class LiveScene : public cocos2d::Layer
{
public:
// there's no 'id' in cpp, so we recommend returning the class instance pointer
static cocos2d::Scene* createScene();
// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
virtual bool init();
// implement the "static create()" method manually
CREATE_FUNC(LiveScene);
private:
void update(float dt);
private:
BeatObjectColume* m_pColume;
};
#endif // __LIVE_SCENE_H__
实现：
#include "LiveScene.h"
Scene* LiveScene::createScene()
{
// 'scene' is an autorelease object
auto scene = Scene::create();
// 'layer' is an autorelease object
auto layer = MainScene::create();
// add layer as a child to scene
scene->addChild(layer);
// return the scene
return scene;
}
// on "init" you need to initialize your instance
bool LiveScene::init()
{
if (!Layer::init())
{
return false;
}
// 加入背景图
//
auto bg = Sprite::create("bg.jpg");
bg->setPosition(480, 320);
this->addChild(bg);
// 加上黑色半透明蒙层
//
auto colorLayer = LayerColor::create(Color4B(0, 0, 0, 192));
this->addChild(colorLayer);
// 加上一个列
//
this->m_pColume = BeatObjectColume::create();
this->m_pColume->setPosition(480, 480);
this->addChild(this->m_pColume);
// 添加一个BeatObject
// 如果要添加Block类的Object，则
// auto obj = BeatObject::create(BeatObjectType::Block);
auto obj = BeatObject::create(BeatObjectType::Strip | BeatObjectType::SameTime, 256);
this->m_pColume->AddBeatObject(obj);
this->scheduleUpdate();
return true;
}
float moveY = 0;
void LiveScene::update(float dt)
{
this->m_pColume->SetObjectPositionY(0, moveY);
moveY -= 4;
if (moveY < -960)
{
moveY = 0;
}
}
编译运行，如果没有问题的话，看到这样的效果：
这一章就结束了。下一章我们来编写一个BeatObjectManager，将所有的Object管理起来，并通过数据显示我们想要的谱面。
本章所用到的资源：http://pan.baidu.com/s/1dDk0TXZ
