[cocos2d-x]图层的旋转缩放效果

要实现一个两个图层叠加在一起,然后点击其中的一个图层,实现另外一个图层的旋转缩放的效果。

预期效果:

1.实现两个layer添加在一个场景中。

2.实现点击一个场景能实现另一个场景的旋转缩放的功能。

3.实现layer中精灵的随机生成和自由走动。

4.实现场景中具有触摸事件的精灵。

效果图:

实现步骤:

1.首先分析一下这个效果是由两个图层组成的,先来实现一下上面的一个黄色图层

GameLayer.h:

#ifndef _______GameLayer__
#define _______GameLayer__

#include <iostream>
#include "cocos2d.h"
using namespace cocos2d;
class GameLayer:public CCLayer
{
public:
    CCPoint gameLayerPosition;
    CCPoint lastTouchLocation;
    bool init();

    CREATE_FUNC(GameLayer);
    virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
    virtual void registerWithTouchDispatcher(void);

    void addRandomThings();
    void runRandomMoveSequence(CCNode* node);
};
#endif /* defined(_______GameLayer__) */

GameLayer.cpp:

#include "GameLayer.h"
#include "HelloWorldScene.h"
#include "Spider.h"
bool GameLayer::init()
{
    if (!CCLayer::init()) {
        return false;
    }

    CCSize size = CCDirector::sharedDirector()->getWinSize();
    CCSprite * background = CCSprite::create("grass.png");
    background->setPosition(CCPointMake(size.width/2, size.height/2));
    this->addChild(background);
    CCLabelTTF *label = CCLabelTTF::create("GameLayer", "Marker Felt", 44);
    label->setColor(ccBLACK);
    label->setPosition(CCPointMake(size.width/2, size.height/2));
    label->setAnchorPoint(CCPointMake(0.5f, 1));
    this->addChild(label);
    this->GameLayer::addRandomThings();
    this->setTouchEnabled(true);
    return true;
}

void GameLayer::registerWithTouchDispatcher()
{
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, true);
}

bool GameLayer::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    //记录点击下的坐标点
    lastTouchLocation = HelloWorld::locationFromTouch(pTouch);

    return true;
}

void GameLayer::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCPoint currentTouchLocation = HelloWorld::locationFromTouch(pTouch);
    //获得两点之间的差值
    CCPoint moveTo = ccpSub(lastTouchLocation, currentTouchLocation);
    moveTo = ccpMult(moveTo, -1);

    lastTouchLocation = currentTouchLocation;
    //将当前图层移动到鼠标移动的地方
    this->setPosition(ccpAdd(this->getPosition(), moveTo));
    CCLog("gameLayertouchMoved");
}

void GameLayer::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    //恢复一开始的position(gameLayerPosition(0,0))
    CCMoveTo* move = CCMoveTo::create(1, gameLayerPosition);
    CCEaseIn* ease = CCEaseIn::create(move, 0.5f);
    ease->setTag(103);
    this->runAction(ease);
    CCLog("gameLayertouchEnded");
}

void GameLayer::addRandomThings()
{
    CCSize screenSize = CCDirector::sharedDirector()->getWinSize();
    //向图层加太阳
    for (int i=0; i<4; i++) {
        CCSprite* firething = CCSprite::create("firething.png");
        firething->setPosition(CCPointMake(CCRANDOM_0_1() * screenSize.width, CCRANDOM_0_1() * screenSize.height));
        this->addChild(firething);
        this->runRandomMoveSequence(firething);
    }
    //向图层加蜘蛛
    for (int j=0; j<10; j++) {
        //添加用CCNode封装了的Spider精灵,Spider具有触摸事件
        Spider::spiderWithParentNode(this);
    }
}

void GameLayer::runRandomMoveSequence(CCNode* node)
{
    float duration = CCRANDOM_0_1() * 5 + 1;
    CCMoveBy* move1 = CCMoveBy::create(duration, CCPointMake(-180, 0));
    CCMoveBy* move2 = CCMoveBy::create(duration, CCPointMake(0, -180));
    CCMoveBy* move3 = CCMoveBy::create(duration, CCPointMake(180, 0));
    CCMoveBy* move4 = CCMoveBy::create(duration, CCPointMake(0, 180));
    CCSequence* sequence = (CCSequence*)CCSequence::create(move1,move2,move3,move4,NULL);
    CCRepeatForever* repeat = CCRepeatForever::create(sequence);
    node->runAction(repeat);
}

2.其次实现下面的那个绿色草坪的图层

UserInterfaceLayer.h:

#ifndef _______UserInterfaceLayer__
#define _______UserInterfaceLayer__

#include <iostream>
#include "cocos2d.h"
using namespace cocos2d;
class UserInterfaceLayer:public CCLayer
{
public:
    bool init();
    CREATE_FUNC(UserInterfaceLayer);
    bool isTouchForMe(CCPoint touchLocation);
    virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);
    virtual void registerWithTouchDispatcher(void);
};
#endif /* defined(_______UserInterfaceLayer__) */

UserInterfaceLayer.cpp:

#include "UserInterfaceLayer.h"
#include "HelloWorldScene.h"
#include "GameLayer.h"
bool UserInterfaceLayer::init()
{
    if (!CCLayer::init()) {
        return false;
    }

    CCSize size = CCDirector::sharedDirector()->getWinSize();
    CCSprite * background = CCSprite::create("ui-frame.png");
    background->setPosition(CCPointMake(size.width/2, size.height));
    background->setAnchorPoint(CCPointMake(0.5, 1));
    this->addChild(background,0,101);

    CCLabelTTF* label = CCLabelTTF::create("Here be your Game Scores etc", "Courier", 22);
    label->setColor(ccBLACK);
    label->setPosition(CCPointMake(size.width/2, size.height));
    label->setAnchorPoint(CCPointMake(0.5f, 1));
    this->addChild(label);

    this->setTouchEnabled(true);
    return true;
}

void UserInterfaceLayer::registerWithTouchDispatcher()
{
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, 0, false);
}

//判断是否点击了我所在的范围
bool UserInterfaceLayer::isTouchForMe(CCPoint touchLocation)
{
    CCNode * node = this->getChildByTag(101);
    //boundBox方法是返回当前node所占的rect
    return node->boundingBox().containsPoint(touchLocation);
}

bool UserInterfaceLayer::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCPoint location = pTouch->getLocation();

    bool isTouchHandled = this->isTouchForMe(location);
    if (isTouchHandled) {
        CCNode * node = this->getChildByTag(101);

        ((CCSprite*)node)->setColor(ccRED);
    }

    GameLayer *gameLayer = HelloWorld::sharedhelloworld()->gameLayer();
    CCRotateBy * rotate = CCRotateBy::create(16, 360);
    //gameLayer->runAction(rotate);

    CCScaleTo * scale1 = CCScaleTo::create(8, 0);
    CCScaleTo *scale2 = CCScaleTo::create(8, 1);
    CCSequence* sequence = CCSequence::create(scale1,scale2,NULL);
    sequence->setTag(111);
    gameLayer->stopActionByTag(111);
    gameLayer->setRotation(0);
    gameLayer->setScale(1);
    gameLayer->runAction(rotate);
    gameLayer->runAction(sequence);
    return true;
}

void UserInterfaceLayer::ccTouchMoved(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCNode* node = this->getChildByTag(101);
    ((CCSprite*)node)->setColor(ccGREEN);
    CCLog("uiLayertouchMoved");
}

void UserInterfaceLayer::ccTouchEnded(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCNode * node = this->getChildByTag(101);
    ((CCSprite*)node)->setColor(ccWHITE);
    CCLog("uiLayertouchEnded");
}

3.接着是一个带有触摸功能的Spider类

Spider.h:

#ifndef _______Spider__
#define _______Spider__

#include <iostream>
#include "cocos2d.h"
using namespace cocos2d;
//CCLayer是默认继承了触摸协议的,这里蜘蛛类只要是继承CCNode类然后继承CCTargetedTouchDelegate
class Spider:public CCNode,public CCTargetedTouchDelegate
{
public:
    CCSprite* spiderSprite;
    int numUpdates;
    static Spider* spiderWithParentNode(CCNode* parentNode);
    bool initWithParentNode(CCNode* parentNode);

    //spider触摸事件
    void update(float delta);
    void moveAway(float duration,CCPoint moveTo);
    virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
};
#endif /* defined(_______Spider__) */

Spider.cpp:

#include "Spider.h"
#include "HelloWorldScene.h"
Spider* Spider::spiderWithParentNode(CCNode* parentNode)
{
    //类似宏定义CREAT_FUNC创建对象
    Spider* pRet = new Spider();
    if (pRet&&pRet->initWithParentNode(parentNode)) {
        pRet->autorelease();
        return pRet;
    }
    else
    {
        delete pRet;
        pRet = NULL;
        return pRet;
    }
}

bool Spider::initWithParentNode(CCNode* parentNode) //参数指GameLayer层
{
    //注意:要执行某个节点的scheduleUpdate方法必须要把它添加到层上去
    parentNode->addChild(this);//this指当前具有触摸事件的node节点
    CCSize screenSize = CCDirector::sharedDirector()->getWinSize();
    spiderSprite = CCSprite::create("spider.png");
    spiderSprite->setPosition(CCPointMake(CCRANDOM_0_1()*screenSize.width, CCRANDOM_0_1()*screenSize.height));
    this->addChild(spiderSprite);

    //添加触摸事件
    CCDirector* pDirector = CCDirector::sharedDirector();
    pDirector->getTouchDispatcher()->addTargetedDelegate(this, -1, true);

    this->scheduleUpdate();
}

//点击蜘蛛随机移动
void Spider::moveAway(float duration, cocos2d::CCPoint moveTo)
{
    spiderSprite->stopAllActions();
    CCMoveBy* move = CCMoveBy::create(duration, moveTo);
    spiderSprite->runAction(move);
}

void Spider::update(float delta)
{
    numUpdates++;
    if (numUpdates > 50) {
        numUpdates = 0;
        CCPoint moveTo = CCPointMake(CCRANDOM_0_1()*200 - 100, CCRANDOM_0_1()*100 - 50);
        this->moveAway(2, moveTo);
    }
}

bool Spider::ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent)
{
    CCPoint touchLocation = HelloWorld::locationFromTouch(pTouch);

    bool isTouchHandled = spiderSprite->boundingBox().containsPoint(touchLocation);
    if (isTouchHandled) {
        numUpdates = 0;
        CCPoint moveTo;
        float moveDistance = 60;
        //float rand = CCRANDOM_0_1();
        if (CCRANDOM_0_1() < 0.25f)
        {
            moveTo = CCPointMake(moveDistance, moveDistance);
        }
        else if (CCRANDOM_0_1() <0.5f)
        {
            moveTo = CCPointMake(-moveDistance, moveDistance);
        }
        else if(CCRANDOM_0_1() <0.75)
        {
            moveTo = CCPointMake(moveDistance, -moveDistance);
        }
        else
        {
            moveTo = CCPointMake(-moveDistance, -moveDistance);
        }
        this->moveAway(0.1f, moveTo);
    }
    return isTouchHandled;
    return true;
}

4.然后是合成界面,也就是主场景界面

HelloworldScene.h:

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "GameLayer.h"
using namespace cocos2d;
class HelloWorld : public cocos2d::CCLayer
{
public:
    // Method 'init' in cocos2d-x returns bool, instead of 'id' in cocos2d-iphone (an object pointer)
    virtual bool init();

    // there's no 'id' in cpp, so we recommend to return the class instance pointer
    static cocos2d::CCScene* scene();

    static CCPoint locationFromTouch(CCTouch* touch);
    // preprocessor macro for "static create()" constructor ( node() deprecated )
    CREATE_FUNC(HelloWorld);

    static HelloWorld* sharedhelloworld();

    GameLayer* gameLayer();
};

#endif // __HELLOWORLD_SCENE_H__

HelloWorldScene.cpp:

#include "HelloWorldScene.h"
#include "SimpleAudioEngine.h"
#include "GameLayer.h"
#include "UserInterfaceLayer.h"
using namespace cocos2d;
using namespace CocosDenshion;

static HelloWorld * helloWorld = NULL;

CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();

//    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::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 HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !CCLayer::init() )
    {
        return false;
    }
    helloWorld = this;
    GameLayer* gameLayer = GameLayer::create();
    this->addChild(gameLayer,1,201);

    UserInterfaceLayer* userInterfaceLayer = UserInterfaceLayer::create();
    this->addChild(userInterfaceLayer,2,202);

    return true;
}

HelloWorld*HelloWorld::sharedhelloworld()
{
    return helloWorld;
}

GameLayer*HelloWorld::gameLayer()
{
    CCNode * node = this->getChildByTag(201);
    return (GameLayer *)node;
}

CCPoint HelloWorld::locationFromTouch(CCTouch* touch)
{
    return touch->getLocation();
}

源码下载:http://download.csdn.net/detail/s10141303/6247313

时间: 2024-10-23 15:01:03

[cocos2d-x]图层的旋转缩放效果的相关文章

Photoshop图层样式“缩放效果”的妙用

很多人都会用到Photoshop的图层样式,但却很少有人会用到图层样式的缩放效果.使用Photoshop图层样式中的"缩放效果"命令,可以同时缩放图层样式中的各种效果,而不会缩放应用了图层样式的对象.当对一个图层应用了多种图层样式时,"缩放效果"则更能发挥其独特的作用.由于"缩放效果"是对这些图层样式同时起作用,能够省去单独调整每一种图层样式的麻烦. "缩放效果"命令隐藏在"图层|图层样式"子菜单中,位于&

图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)

以前要实现图片的旋转或翻转,只能用ie的滤镜来实现,虽然canvas也实现,但ie不支持而且不是html标准. css3出来后,终于可以用标准的transform来实现变换,而canvas也已成为html5标准的一部分. css3和html5使web变得越来越强大,各种新奇的技术正等待我们发掘. 本程序分别通过滤镜(ie).ccs3和canvas来实现图片的旋转.缩放和翻转变换效果,可以用作图片查看器. 有如下特色: 1,用滤镜.ccs3和canvas实现相同的变换效果: 2,可任意角度旋转:

[Unity3d]3D车展之汽车开门关门和旋转缩放的效果的实现

最近在一个3D汽车虚拟展示的项目,将其中的汽车开门关门的脚本简单的介绍一下吧,主要的原理就是通过从摄像机发射一个到屏幕点击的位置的一个射线,然后判断这个射线是否碰到你想要碰到的位置,如果碰到则实现逻辑过程.旋转缩放就是将摄像机围绕着汽车为轴心进行旋转,缩放就是改变摄像机的视角范围,原理就是这么简单,接着上代码: 1.开关车门: using UnityEngine; using System.Collections; public class opendoor : MonoBehaviour {

Android图片旋转,缩放,位移,倾斜,对称完整示例(二)——Bitmap.createBitmap()和Matrix

MainActivity如下: package cc.c; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Matrix; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.widget.ImageView; /** * Demo描述: * 利用B

jQuery实现图像旋转动画效果_jquery

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

Photoshop图层制作投影字效果

在Photoshop中,图层的使用是最基本也是最重要的编辑方法,所以在各种图形的设计和制作过程中不可避免地使用到图层.图层是photoshop中最有特点的工具之一,具体可以分为普通图层,调节图层,填充图层,形状图层和文字图层共5类. 接下来小编给大家介绍一下如何使用图层效果制作简单的特效字. (1)首先,编者可任意打开一幅图片作为背景(如图1). 图1 背景图片 (2)使用工具箱中的横向文字蒙版工具,在该图层中输入"zol"字样,再单击工具箱中的任一选框工具,你就会在画面中看到一个文字

js实现鼠标滚轮控制图片缩放效果的方法

 这篇文章主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

javascript-[可视化]想用JS做一个关键词球状旋转的效果,求推荐工具

问题描述 [可视化]想用JS做一个关键词球状旋转的效果,求推荐工具 要实现类似这样的效果:http://ictclas.nlpir.org/nlpir/#box-6 求推荐类似echarts的开放接口,echarts里本人找过没有找到 解决方案 JavaScript标签云

Jquery图片缩放效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-