Animated sprites in UI

Help & Support
#1

Hello!

So I have a use-case where I need to combine text as well as animated sprites in a single object. Now, Text is only available as a UI-Element, while animated sprites are not available as UI-Element. This seems like an oversight? Or am I missing something?

I noticed that ElementComponent has a spriteFrame property and made a quick script to update it based on an fps attribute:

var UiSpriteAnim = pc.createScript('uiSpriteAnim');

UiSpriteAnim.attributes.add('fps', {type: 'number', default: 15});
UiSpriteAnim.attributes.add('delay', {type: 'number', default: 0});
UiSpriteAnim.attributes.add('loop', {type: 'boolean', default: true});

UiSpriteAnim.prototype.initialize = function() {
    this._frameCount = this.entity.element.sprite.frameKeys.length;
    this._interval = 1.0/this.fps;
    this.restart();
};

UiSpriteAnim.prototype.update = function(dt) {
    if (this._isComplete) 
        return;
    
    this._timer += dt;
    if (this._timer > this._interval) {
        var nextFrame = this.entity.element.spriteFrame + 1;
        if (nextFrame >= this._frameCount)
        {
            if (this.loop === true)
                nextFrame = 0;
            else
                this._isComplete = true;
        }
        
        this.entity.element.spriteFrame = nextFrame;
        this._timer -= this._interval;
    }
};

UiSpriteAnim.prototype.restart = function() {
    this.entity.element.spriteFrame = 0;
    this._timer = -this.delay;
    this._isComplete = false;
};

This seemed preferable to attempting to keep sprite world transform in sync with UIElement screen transform.Or making/integrating a spritefont script/lib. It seems to work fine though, which makes me curious why it isn’t an option to begin with.

Animated Sprite as an UI element?
Animated sprite play on button pressed
Animated Sprite component
#2

Added a feature request for this: https://github.com/playcanvas/engine/issues/new

I just don’t think it has been done yet. :sweat_smile:

2 Likes
Animated Sprite component
#3

Small addendum:

Just setting the spriteFrame on the element doesn’t update it’s size or pivot. So need to add this:

			this.entity.element.spriteFrame = nextFrame;
			const frameKey = this.entity.element.sprite.frameKeys[nextFrame];
			const frame = this.entity.element.sprite.atlas.frames[frameKey];
			this.entity.element.width = frame.rect.z;
			this.entity.element.height = frame.rect.w;
			this.entity.element.pivot = frame.pivot;

And everything should be dandy :slight_smile:

1 Like