参考文章http://cn.cocos2d-x.org/tutorial/show?id=1322
ParallaxNode就是视差节点的意思,当我们面对一个背景画面的时候,如果背景在滚动的时候可以使用这个节点,它的功能就是让子节点拥有不同的移动速率,这样,我们就可以让某一些子节点移动的慢一些,而某些子节点移动的快一些。这样营造出的效果就是远处的景物移动的快,而近处的景物移动的快,给人一种更加真实的感觉。
直接上代码怎样使用ParallaxNode
在.h文件定义
ParallaxNode *parallax; 视差节点类
Sprite* bg1; 背景1
Sprite* bg2; 背景2
void update(float dt); 如要要是背景自动移动就使用计时器,在update里面写移动距离
bool onTouchBegan(Touch* touch,Event* event);
void onTouchMoved(Touch* touch,Event* event);
void onTouchEnded(Touch* touch,Event* event);
.cpp文件里面
首先在init()里面添加
//定义背景1和背景2
//bg1 = Sprite::create("bg.png"); bg2 = Sprite::create("city.png"); //视差节点定义添加 parallax = ParallaxNode::create(); this->addChild(parallax); //定义速度 Point dustSpeed = Point(1,0); Point bgSpeed = Point(0.5,0); //第一个参数是要添加的节点,
<// 第二个参数是zorder,决定显示的顺序,
//<span style="font-family: Arial,sans-serif;"> 第三个参数是速率,这个如何理解,就是如果你的node移动的速度是1,那么节点的速度是相对于这个1的多少,比如Point是(0.5,0)意思就是当我的parallax向左移动1个单位的时候,bg1移动的就是0.5个单位,y方向上没有速度,</span>
<span style="font-family: Arial,sans-serif;">//</span><span style="font-family: Arial,sans-serif;"> 最后一个是坐标,注意这个坐标是相对于node节点的坐标,而不是当前的层。运行起来游戏,我们就会看到bg1移动的慢,而sprite移动的快,这样给人的感觉就会比较真实了。(在图片的原先位置上偏移的距离)</span>
parallax->addChild(bg1,1,dustSpeed,Point(200,300)); parallax->addChild(bg2,2,bgSpeed,Point(0,0)); //this->scheduleUpdate();如果要想自动移动就使用计时器,如果要是触摸滑动就使用下面的触摸事件 auto listener = EventListenerTouchOneByOne::create(); //listener->setSwallowTouches(true); 屏蔽下面的层 listener->onTouchBegan = CC_CALLBACK_2(Apage::onTouchBegan,this); listener->onTouchMoved = CC_CALLBACK_2(Apage::onTouchMoved,this); listener->onTouchEnded = CC_CALLBACK_2(Apage::onTouchEnded,this); _eventDispatcher->addEventListenerWithSceneGraPHPriority(listener,this);
void Apage::update(float dt){//背景自动滑动的时候使用计时器实现 Point backgroundScrollVel = Point(-1000,0); parallax->setPosition(parallax->getPosition()+backgroundScrollVel*dt); } //使用触摸滑动的时候实现的视差移动 void Apage::onTouchMoved(Touch *touch,Event *unused_event){ Point touchLocation = this->convertTouchToNodeSpace(touch);//获取移动后的当前坐标,并从屏幕坐标点转换成opgl坐标点 Point oldTouchLocation =convertToNodeSpace(touch->getPrevIoUsLocation());//获取移动前的坐标,以及转换 Point translation = touchLocation - oldTouchLocation;//移动的点的差距 parallax->setPosition(parallax->getPosition()+translation);//从新定位 } bool Apage::onTouchBegan(Touch* touch,Event* event) { return true; } void Apage::onTouchEnded(Touch* touch,Event* event) { }
坑爹的parallax没有做边界值判断,你移动的移动就除了边界了
判断视差节点的边界
void Apage::onTouchMoved(Touch *touch,Event *unused_event){ Point touchLocation = this->convertTouchToNodeSpace(touch); Point oldTouchLocation =convertToNodeSpace(touch->getPrevIoUsLocation()); Point translation = touchLocation - oldTouchLocation; Point newPos = parallax->getPosition()+translation; Size visibleSize = Director::getInstance()->getVisibleSize(); auto bg2= this->getChildByTag(103); newPos.x = MIN(newPos.x,0); newPos.x = MAX(newPos.x,-2003+visibleSize.width);//2003是你的最大边界值 parallax->setPosition(newPos); CCLog("---parallax->getPosition()=%f------translation=%f----newpos.x=%f---parallax->getContentSize().width=%f",parallax->getPosition().x,translation.x,newPos.x,parallax->getContentSize().width); }
上面是使用精灵作为背景移动是的视差节点移动
在开发中一般是使用的2个层作为背景的,可以新建2个层,每个层里面放自己想要的东西,层的继承要使用Node,这样在开发中很方便