上一章分析了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