I don’t think you can use anything other than a sprite created from a texture atlas with the sprite component. Hope I’m wrong since it would be quite useful, but I don’t see any way in the API.
If it’s not possible indeed, you would have to create your own animator script, use a standard plane/material and update the diffuse texture per frame or on a similar FPS to simulate the animation.
As Leonidas mentioned, the sprite component doesn’t support individual sprites/assets for animation. It needs all the frames to be on one texture atlas.
Additionally, having one texture per frame means that every frame is a single HTTP request which makes downloading them generally slower. It has to do a round trip to the server per request.
You can pack the frames in a texture packer like this one https://www.codeandweb.com/tp-online
And use the generated JSON to auto create the frames for you via this button in the sprite editor
Also worth noting that unfortunately, the UI doesn’t support animated sprites. You have to advance the frame manually in code.
can you please explain this workflow a little more using this web https://www.codeandweb.com/tp-online ,I have got json file for frames but now how to go into texture atlast window
I have uploaded my json sprite sheet pack in this texture atlas window and they are scaled so much
,few more steps be handy ,I am planning on creating tutorials for playcanvas it would cover everything which I have struggled to find , Tuts of playcanvas is like finding a ring in a desert
Here’s a quick video:
Thanks a lot it worked !!!
I now understood the entire work flow
But cant understand the code behind it to work in UI,in this Animated sprites in UI - #2 by yaustar
You can see i HAVE A big cube besides score ,I want the animation to play as soon score let say crosses 5
If you are using this for UI in screenspace, then you can’t use the Sprite component. You have to use the Element component for positioning and anchoring
https://developer.playcanvas.com/en/user-manual/user-interface/
The Element component use a sprite asset but cannot animate it.
To ‘animate’ it, you have to change the frame manually in code over time which is what that forum post is doing:
my Frame option are located only in sprite component not in image element
Low.png is the initial texture used
whereelse Box rotationanim is sprite animation
Please see my previous post.
Don’t set the texture for the UI element. Use the sprite asset.
I am not using sprite component still my settings are different than yours,I m pretty confused right now! Haha this is what happens when official manual is incomplete
Please help me with steps where to go on from here , sending links for manual is not really helping and honestly speaking manual is more confusing than anything!
Also the previous step you answered me through video is exactly what’s the best solution, short and precise but seriously what the playcanvas team thinks,how a total begginer would grab this concept on his own , without having it mentioned on anywhere on web or official manual. I m not at all begginer in game development but believe me I never had such problem with any other software before, atleast official documentation has to b proper,
I was curious why not many people use this software,when software has lot to offer, its documentation and tutorials ,they are hurting play Canvas future users really bad!!!
Let’s just take unity manual as an example everything is mentioned with an example,I m not saying to have it same for PC but for major components it should b!
I know forum is super useful but do you think when someone is doing an official project on it and they have to wait an entire Day for update, would they stick with this software for longg?
Unity has quite literally 50-100 times the size of team that we have 
Not that is an excuse. There are holes in our documentation and we’ve been more focused on getting new features out over keeping up with our documentation, otherwise we start falling behind our competition in the same space.
There’s several pages of features in the releases Releases · playcanvas/editor · GitHub that aren’t in the documentation 
Our documentation is open sourced so anyone can help if they choose to: GitHub - playcanvas/developer.playcanvas.com: Developer resources website for the PlayCanvas Game Engine
As a side note, the majority of our recurring users are paid users so you won’t see much of their presence or work in the forums most of the time.
What you see on Made with PlayCanvas | Learn PlayCanvas is only a small handful of our paid userbase games and applications.
I’ve been meaning to do an example tutorial for UI for a while now but it’s not a small amount of work to do properly and haven’t yet had the focus time for it.
Thanks a lot for detailed post, one thing I would suggest is that how many features are there, have complete and proper documentation of them and wherever needed throw in a short tut,
Documentation has to b made keeping a begginer in mind not experienced users,but if your main target is experienced user , that then justifies your current documentation.
Using PlayC right now it feels its not a begginer friendly and prerequisite has to b some other engine preferably Unity
Okay coming back to question ,It worked and good to go now how to update keyframe in code ??
provide me a simpler version please ,the example from october 2020 is too complex for me to understand
Honestly, that is about as simple as it gets to animate the UI element via code. It sets an animation speed (frames per second) and changes the frame index to match the animation speed.
Thanks but A “simple coding example” would solve everything!
In the old example of October 2020 that is almost unusable
Also
I decided to make another look manual by going through Ui in manual (haha)
The sprite and other important parts was just left on user imagination 
,haha I mean why would you do that .Yeah I know you guys dont have time but that would not require more than a day to complete it
Just go through this page Image Elements | Learn PlayCanvas
and tell me why this part was never discussed
I am sure I missed it but I couldnt find it anywhere
Sprite Editor is covered by 2D | Learn PlayCanvas
The connection between UI and Sprites is not though. Like I said, there’s holes in the documentation where updated features haven’t been added or even connection between certain features.
Honestly, if we did have that, we would do it. We are pretty much flat out here focusing on features in the Engine and Editor that makes it really difficult to switch gears to pure document writing.
Good tutorials and documentation take time to do right. For example, this took around 3 days to do in terms of planning, producing and reviewing: Importing your first Model and Animation | Learn PlayCanvas
Lets hope its more proper in future ,I feel what is need of feature if there is no way told how to use it .
anyway back to question help me with few more steps regarding scripting of animating frame so this thread can solved
I got help from chatGPT and it said
var spriteComponent = this.entity.getComponent("sprite");
var currentFrame = 0;
this.entity.on("click", function () {
currentFrame = (currentFrame + 1) % spriteComponent.sprite.frames.length;
spriteComponent.frame = currentFrame;
});
Unfortunately chatGPT is wrong
I’ve found ChatGPT to be better at explaining existing code. I would try pasting the code from the other thread and ask it to explain it