经过这几天的学习对Cocos也差不多有所了解,今天我以一个简单的小Deom来讲解一个简单的动画、地图的滚动,以及触摸(拖动)事件。
话不多说我先来演示下大概的效果。Emmmmmm。。。虽说上面显示是多人联机但仅仅是单人
开始界面:
进入后:
一段时间后:
从这么几幅图也已经看出了子弹的移动、飞机的拖动、还有地图的移动。之后我们来讲解一下具体的实现问题。
首先是地图的移动
地图的移动实际上就是一张大的图不断的改变位置。来达到移动的效果,请看下面的实例图:
我们可以让背景图不断改变位置来达到移动的效果。我们这个要做的是地图的自动移动,所以我们可以考虑一直改变这个背景图的锚点来实现这个效果
我的代码实现锚点位置可能有所不同其原理也都大差不差,我们来看看我得代码实现:
bool PlaneScene::init(){
if (!Scene::init())
{
return false;
}
//背景精灵的创建
BackGround = Sprite::create("bg1.png");
BackGround->setAnchorPoint(Vec2(0,0)); //将锚点设置为(0,0)位置
BackGround->setPosition(0, 0); //设置图片初始防止位置
this->addChild(BackGround, 0);
this->schedule(schedule_selector(PlaneScene::MapAutoMove), 0.01);//类似定时器第一个参数是要调用的函数,第二个是调用的时间间隔
}
//地图移动
void PlaneScene::MapAutoMove(float dt) {
//Frame是一个提前定义好的变量来控制锚点的移动
if (Frame >0.4999) { //我的背景图是由2张图拼接出来的为了不让他把地图走完一直循环当走到一半是把它置为0
Frame = 0;
BackGround->setAnchorPoint(Vec2(0, 0));
}
BackGround->setAnchorPoint(Vec2(0, Frame += 0.0002));//修改锚点
}
之后我们来实现精灵的拖动问题
精灵的触摸事件
触摸事件含有三种事件及其触发时机:
bool onTouchBegan(Touch touch, Event event) 开始触摸屏幕时
void onTouchMoved(Touch touch, Event event) 触摸屏幕,同时在屏幕上移动时
void onTouchEnded (Touch touch, Event event) 结束触摸屏幕时
我们通过触摸事件不断更新坐标下面请看代码:
bool PlaneScene::init(){
if (!Scene::init())
{
return false;
}
//飞机创建
spriterCache = cocos2d::SpriteFrameCache::getInstance();
spriterCache->addSpriteFramesWithFile("Player.plist");
auto SpriteFrame = spriterCache->getSpriteFrameByName("aircraft_2.png");
Player = cocos2d::Sprite::createWithSpriteFrame(SpriteFrame);
Player->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
this->addChild(Player, 2);
curr = Player->getPosition();
//事件监听
auto TouchListener = EventListenerTouchOneByOne::create();
TouchListener->onTouchBegan = CC_CALLBACK_2(PlaneScene::onTouchBegan, this);
TouchListener->onTouchMoved = CC_CALLBACK_2(PlaneScene::onTouchMoved, this);
EventDispatcher * eventDispatcher = Director::getInstance()->getEventDispatcher();
eventDispatcher->addEventListenerWithSceneGraphPriority(TouchListener, this);
//不断更新飞机的位置
this->schedule(schedule_selector(PlaneScene::updatePoint));
}
void PlaneScene::updatePoint(float dt) {
Player->setPosition(Player->getPosition() + (curr - Player->getPosition())*0.5);
}
bool PlaneScene::onTouchBegan(cocos2d::Touch* touch, cocos2d::Event* event) {
auto touchLocation = touch->getLocation();
if (Player->getBoundingBox().containsPoint(touchLocation)) {
curr = touchLocation;
}
return true;
}
void PlaneScene::onTouchMoved(cocos2d::Touch* touch, cocos2d::Event* event) {
curr = touch->getLocation();
}
精灵的动画
我们的飞机有两个动画 一个是子弹的移动一个是我们飞机喷射器的动画。
飞机喷射器动画简单点就是说两张不同的图片不断的切换。我们直接看代码把
bool PlaneScene::init(){
if (!Scene::init())
{
return false;
}
//飞机创建
spriterCache = cocos2d::SpriteFrameCache::getInstance();
spriterCache->addSpriteFramesWithFile("Player.plist");
auto SpriteFrame = spriterCache->getSpriteFrameByName("aircraft_2.png");
Player = cocos2d::Sprite::createWithSpriteFrame(SpriteFrame);
Player->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
this->addChild(Player, 2);
curr = Player->getPosition();
//动画控制
Vector<cocos2d::SpriteFrame*> animaFrames;//创建一个存放动画图片的容器
animaFrames.pushBack(spriterCache->getSpriteFrameByName("aircraft_2.png"));
animaFrames.pushBack(spriterCache->getSpriteFrameByName("aircraft_1.png"));
Animation* PlayerAnimation = Animation::createWithSpriteFrames(animaFrames, 0.1);//第二个参数为图片间切换的速度
Animate* animate = Animate::create(PlayerAnimation);
Player->runAction(RepeatForever::create(animate));
}
//设置子弹的移动 此方法仅供简单的小案例不适用于后期的游戏制作
void PlaneScene::updateBullet(float dt) {
auto SpriteFrame = spriterCache->getSpriteFrameByName("bullet.png");
auto bullet = cocos2d::Sprite::createWithSpriteFrame(SpriteFrame);
bullet->setPosition(curr);
this->addChild(bullet, 1);
auto MoveBy = MoveBy::create(1,Vec2(0, 960));
bullet->runAction(MoveBy);
}
此次学习源码和上一期一样直接去上一期下载就好
博主也是个小白,写这些东西希望能帮助其他同样和我一样热爱游戏的小白们,也希望能和大家一块学习共同进步。文中有什么不妥望指出