In my previous post I showed how to make graphics work with different resolution.But if you are using images in application, you need to use SVG image to make sure that images looks good in all resoltion.
When I started to replace my game images with SVG image, I need to make changes in my sprite class.With normal images I was drawing only certain portion of image from Sprite sheet like code in this post, but I could not make that thing work with SVG. Then to make my sprite class work I made following changes.
In following code, I am using SVG file which contain each frame with unique id and in code on next frame I am rendering SVG element with id for particular frame.
Code for animatedsvgitem.h
#ifndef ANIMATEDSVGITEM_H
#define ANIMATEDSVGITEM_H
#include <QGraphicsSvgItem>
#include <QTimer>
class AnimatedSvgItem : public QGraphicsSvgItem
{
Q_OBJECT
public:
AnimatedSvgItem();
QRectF boundingRect() const;
private slots:
void nextFrame();
private:
QTimer *timer;
QStringList frames;
int currentFrame;
};
#endif // ANIMATEDSVGITEM_H
Code for animatedsvgitem.cpp
#include "animatedsvgitem.h"
AnimatedSvgItem::AnimatedSvgItem()
:QGraphicsSvgItem( QString(":/egg.svg") )
{
//svg element id of frame in svg file
frames << "egg1" << "egg2" << "egg3" << "egg4" << "egg5" << "egg6" << "egg7" << "egg8";
currentFrame = 0;
this->setElementId( frames[currentFrame] );
timer = new QTimer(this);
QObject::connect(timer,SIGNAL(timeout()),this,SLOT(nextFrame()));
timer->start(400);
}
QRectF AnimatedSvgItem::boundingRect() const
{
return QRectF(0,0,20,20);
}
void AnimatedSvgItem::nextFrame()
{
currentFrame = ++currentFrame % 8;
this->setElementId( frames[currentFrame]);
this->moveBy(5,0);
update();
}
So this was all, Sprite sheet used for above code is like this but in SVG format.Here video from sample code.
The SVG frame IDs and timer-based animation here show why a quick visual check helps before a game import. I use SpriteFuse's spritesheet to GIF converter to review the frame sequence while keeping the original artwork unchanged.
ReplyDeleteSwitching the SVG element ID makes the frame selection much easier to follow than treating the vector file like a cropped bitmap. The fixed bounding rectangle is also worth checking when adapting this example to differently sized artwork. For a narrated video of that comparison, VideoBGRemover for tutorial presenter footage can prepare a cutout of the speaker so the code and animation remain visible in the edit.
ReplyDelete