Spritesheet with different frame size

[paulocoutinhox]

Hi,

How can i load a .plist spritesheet but with frames with different size and centralize all of they? Example:

<key>explosion_1_1</key>
<dict>
      <key>spriteOffset</key>
      <string>{ 0, 0 }</string>
      <key>spriteSize</key>
      <string>{ 60, 60 }</string>
      <key>spriteSourceSize</key>
      <string>{ 60, 60 }</string>
      <key>textureRect</key>
      <string>{ { 758, 890 }, { 60, 60 } }</string>
      <key>textureRotated</key>
      <false />
      <key>aliases</key>
      <array />
</dict>
<key>explosion_1_2</key>
<dict>
      <key>spriteOffset</key>
      <string>{ 0, 0 }</string>
      <key>spriteSize</key>
      <string>{ 57, 56 }</string>
      <key>spriteSourceSize</key>
      <string>{ 57, 56 }</string>
      <key>textureRect</key>
      <string>{ { 879, 890 }, { 57, 56 } }</string>
      <key>textureRotated</key>
      <false />
      <key>aliases</key>
      <array />
</dict>
<key>explosion_1_3</key>
<dict>
      <key>spriteOffset</key>
      <string>{ 0, 0 }</string>
      <key>spriteSize</key>
      <string>{ 64, 63 }</string>
      <key>spriteSourceSize</key>
      <string>{ 64, 63 }</string>
      <key>textureRect</key>
      <string>{ { 565, 890 }, { 64, 63 } }</string>
      <key>textureRotated</key>
      <false />
      <key>aliases</key>
      <array />
</dict>
<key>explosion_1_4</key>
<dict>
      <key>spriteOffset</key>
      <string>{ 0, 0 }</string>
      <key>spriteSize</key>
      <string>{ 46, 45 }</string>
      <key>spriteSourceSize</key>
      <string>{ 46, 45 }</string>
      <key>textureRect</key>
      <string>{ { 696, 952 }, { 46, 45 } }</string>
      <key>textureRotated</key>
      <false />
      <key>aliases</key>
      <array />
</dict>
<key>explosion_1_5</key>
<dict>
      <key>spriteOffset</key>
      <string>{ 0, 0 }</string>
      <key>spriteSize</key>
      <string>{ 53, 52 }</string>
      <key>spriteSourceSize</key>
      <string>{ 53, 52 }</string>
      <key>textureRect</key>
      <string>{ { 938, 944 }, { 53, 52 } }</string>
      <key>textureRotated</key>
      <false />
      <key>aliases</key>
      <array />
</dict>

They have different size but i need show it in some place with all frames centralized and not "dancing".

Thanks for any help.

[rh101]

The sprite sheet only defines the frames, and has nothing to do with displaying them. Check the code related to displaying the animation already has support for this, and if not, override the functionality to display the frames based on their center point.

You would have to ensure that all the frames listed in the sprite sheet are centered at a common point. If you are generating the sprite sheet using a tool that strips the transparent regions, then it is unlikely that frames are centered correctly.

The animation is usually handled by the Animate action, which is passed an ax::Animation. This action is then applied to a Sprite, so if you set the sprite to have anchor point Vec2(0.5f, 0.5f), then it may work. It is important that all frames in the sprite sheet share a common center point, since there is no way to calculate that value.

[GamesStudioTwo]

Set the AnchorPoint( 0.5 ,0.5 );

if your having trouble with you can try my Remap function.

float MapTo( float x, float in_min, float in_max, float out_min, float out_max ) {
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

                                  Get half the sprite     Remap this               To this scale

float anchorX = MapTo( SpriteWidth / 2 , 0.0 , SpriteWidth , 0.0 , 1.0 );
float anchorY = MapTo( SpriteHeight / 2 , 0.0 , SpriteHeight , 0.0 , 1.0 );

I Use it to offset sprites with box2d when I set I want to rotate from a different point and scale.

[smilediver]

Friendly tip, use this to format code:

```cpp
float MapTo( float x, float in_min, float in_max, float out_min, float out_max ) {
    return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
```

It will look like this:

float MapTo( float x, float in_min, float in_max, float out_min, float out_max ) {
    return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

[GamesStudioTwo]

Thank you, That looks a lot better.

[paulocoutinhox]

I made some class to show effects, so in my case is this class:

#pragma once

#include <string>
#include <vector>

#include "effect/BaseEffect.h"
#include "helper/EnvironmentHelper.h"

namespace game::effect {

class SpriteAnimationEffect : public BaseEffect {
public:
    bool init() override {
        auto frames = getAnimationFrames();

        if (frames.empty()) {
            return false;
        }

        game::helper::EnvironmentHelper::resizeNode(this);

        float duration = getAnimationDuration();
        _animation = ax::Animation::createWithSpriteFrames(frames, duration / frames.size());
        _animate = ax::Animate::create(_animation);

        _sprite = ax::Sprite::createWithSpriteFrame(frames.front());
        addChild(_sprite);

        auto size = getSpriteSize();
        if (size != _sprite->getContentSize()) {
            _sprite->setScale(size.width / _sprite->getContentSize().width, size.height / _sprite->getContentSize().height);
        }

        _sprite->setAnchorPoint(getSpriteAnchorPoint());

        return true;
    }

    virtual std::vector<std::string> getFrameNames() const = 0;

    virtual float getAnimationDuration() const {
        return 1.0f;
    }

    virtual ax::Size getSpriteSize() const {
        return _sprite ? _sprite->getContentSize() : ax::Size::ZERO;
    }

    virtual ax::Vec2 getSpriteAnchorPoint() const {
        return ax::Vec2::ANCHOR_MIDDLE;
    }

    void startEffect(const ax::Vec2 &position, float rotation) override {
        this->setPosition(position);
        this->setRotation(rotation);

        _sprite->runAction(ax::Sequence::create(
            _animate,
            ax::CallFunc::create([this]() {
                this->removeFromParent();
            }),
            nullptr));
    }

    void stopEffect() override {
        _sprite->stopAllActions();
        this->removeFromParent();
    }

private:
    ax::Sprite *_sprite;
    ax::Animation *_animation;
    ax::Animate *_animate;

    ax::Vector<ax::SpriteFrame *> getAnimationFrames() const {
        ax::Vector<ax::SpriteFrame *> frames;
        auto frameNames = getFrameNames();

        for (const auto &frameName : frameNames) {
            ax::SpriteFrame *frame = ax::SpriteFrameCache::getInstance()->getSpriteFrameByName(frameName);

            if (frame) {
                frames.pushBack(frame);
            }
        }

        return frames;
    }
};

} // namespace game::effect

So you mean that i need set sprite scale?

float anchorX = MapTo( SpriteWidth / 2 , 0.0 , SpriteWidth , 0.0 , 1.0 );
float anchorY = MapTo( SpriteHeight / 2 , 0.0 , SpriteHeight , 0.0 , 1.0 );
_sprite->setAnchorPoint(Vec2(anchorX, anchorY));