【cocos2d-x 3.x】Actionを組み合わせて、ペラペラなSpriteを表現する

3466 ワード
Android iOS cocos2d-x Android テキストリンク

cocos2d-xのActionを組み合わせのみで、Spriteをペラペラ風に見せます。

回転の表現

[ポイントA]
1. 左右から潰す(X軸のアンカーポイントを中央にした状態で、Scallを0まで小さくする)
2. 絵を逆にする
3. 左右に膨らませる(1と逆の事をする)

1~3を順番に行う事で、クルっと回転した様に見えます。

Character.cpp
#define ANIM_TIME_TURN 0.4f
#define ANIM_TIME_JUMP 0.6f

//左右指定された方に方向転換する CHARA_DIRE_LEFT or CHARA_DIRE_RIGHT
void Character::turn(bool dir)
{
    //既にその方向を向いていたら何もしない
    if(dir == mDir)return;

    //ターン中やジャンプ中だったら何もしない
    if(kCharacterStateTurn == mCharaState || kCharacterStateJump == mCharaState)return;

    //回転中状態にする
    mCharaState = kCharacterStateTurn;

    //左向きになっていたら右向き(デフォルト)にする
    if(this->isFlippedX()){
        mDir = CHARA_DIRE_RIGHT;

    //右向きになっていたら左向き
    }else{
        mDir = CHARA_DIRE_LEFT;
    }

    //元々のスケールXを保存
    float defaultScaleX = this->getScaleX();
    //潰す
    auto scaleSmallAct = ScaleTo::create(ANIM_TIME_TURN/2, 0, this->getScaleY());
    //絵を逆にする
    auto callfuncTurnPng = CallFuncN::create([=](Node* sender) {
        this->setFlippedX(mDir);
    });
    //膨らませる(元のスケールに戻す)
    auto scaleBigAct = ScaleTo::create(ANIM_TIME_TURN/2,defaultScaleX,this->getScaleY());
    //状態を戻す
    auto callfuncSetState = CallFuncN::create([=](Node* sender) {
        mCharaState = kCharacterStateNone;
    });

    //[ポイントA]:
    auto seq = Sequence::create(scaleSmallAct, callfuncTurnPng, scaleBigAct,callfuncSetState, NULL);
    this->runAction(seq);
}

ジャンプの表現

[ポイントB]
1. 上から潰す(Y軸のアンカーポイントを下にした状態で、Scallを数％小さくする)
2. 1の状態で数秒待ち、溜めを表現
3. ジャンプ&Scaleを戻す

1~3を順番に行う事で、紙がぐにゃっと上から曲がって、そのまま飛び上がった感じになります。

Character.cpp
void Character::jump(int distance)
{
    //ターン中やジャンプ中だったら何もしない
    if(kCharacterStateTurn == mCharaState || kCharacterStateJump == mCharaState)return;

    //ジャンプ状態にする
    mCharaState = kCharacterStateJump;

    //左向きの場合は左にジャンプする様に距離をマイナスに
    int l_dis = distance;
    if(mDir == CHARA_DIRE_LEFT)l_dis = -distance;
    //デフォルトのスケールYを保存
    float defaultScaleY = this->getScaleY();

    //上部をぐにゅっと少し潰す
    auto scaleSmallAct = ScaleTo::create(ANIM_TIME_JUMP * 0.2f, this->getScaleX(),defaultScaleY * 0.5f );

    //溜めを作る
    auto delayAct = DelayTime::create(ANIM_TIME_JUMP * 0.2f);

    //潰していたのを戻す
    auto scaleBigAct = ScaleTo::create(ANIM_TIME_JUMP * 0.1f, this->getScaleX(), defaultScaleY);
    //ジャンプ
    auto jumpAct = JumpBy::create(ANIM_TIME_JUMP * 0.5f, Vec2(l_dis, 0), distance * 1.2f, 1);
    //大きさ戻すのとジャンプは同時
    auto spawn = Spawn::create(scaleBigAct, jumpAct, NULL);

    //状態を戻す
    auto callfuncSetState = CallFuncN::create([=](Node* sender) {
        mCharaState = kCharacterStateNone;
    });

    //[ポイントB]:
    auto seq = Sequence::create(scaleSmallAct, delayAct, spawn, callfuncSetState, NULL);
    this->runAction(seq);
}

その他

キャラクターの周りに白い枠を付けてやると、紙っぽさが増して、ペラペラ感がより出る気がします。