I was checking animate sprite component and only place where there was little explanation of it was
this
https://developer.playcanvas.com/en/user-manual/packs/components/sprite/
How to make animation clip ??
can you atleast explain it further ??
,at least playcanvas team can explain by giving an example for main components atleast??
Okay for start how can I make an animation clip in playcanvas for 2D to be used in animated sprite .
@Nofil_khan I hope that this YouTube example is what you are looking for. Maybe some more searching in other resources will help. I have found YouTube and others very easy to find great information.
I have these frames ,I have rendered an animation as png seq,I have searched everywhere but could not find how to make an animation clip out of them , texture atlas and sprite asset is pretty confusing.
Please dont tell me I can only use 2D animated textures if they are in from of sprite sheet ,if that is case ,how you guys think one can make sprite sheet for 150 odd frames haha
So Let me ask my question again
i am just doing it for test purpose to know playcanvas is capable of
I have a 2D image in my UI
as soon I collect 10 objects ,2d Image in UI would play an animation ,like the frames you can see
Now I am from UNity and it very easy to do ,you have to make animation states and drag and drop frames to animation state but I am unable to do it in PLaycanavas
I only want to know how to use these frames in my UI as animation ,scripting is still second step for now
here is screen shot
edit: I know how to do it by using spirte sheets but I want it do by Unity way ,which is of course is best i,e is drag and dropping png images into each animation state
@Nofil_khan Maybe you have not seen this part of Playcanvas. If you right click on your sprite sheet in your directory you can select create texture Atlas. Once created you can then double click on it which will bring up the atlas editor where you create the animations you want. In my example I am using a 5X5 sheet.
Now I go over to the grid select on the right and enter 5 x 5 and then generate frames. There are some other settings you can use here to take away unwanted boards etc.
Once you have done this you will see a grid and all the frames cut up on the left side. I have selected the first 5 and when you do so you will see the animation run on right. You can take away or add at any time just like you would in Unity.
You can then select new sprite from selection and a file will be created for you only containing 5 frames. If I continue this process eventually I will end up with 5 single sprite animations containing 5 frames a piece.
It looks like you may be trying to create the animation using separate files maybe and not a sprite sheet. Loading these could be done maybe programmatically.
Thanks for help but I Just wish you had read my question or thread carefully, would have saved you lot of typing,
I clearly said I know how to not do it by by sprite sheet old way ,and I don’t have sprite sheet,I have individual png frames which I want to use,
Again" i have individual png frames which I want to use not a Sprite sheet,"
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.
