Cool, I will check that out. 
OK, naturally I have to pull it out of my engine, do you have any sheets you would like me to have a bash at?
Just go with something you want. Nothing special I have in mind.
OK, Ill try and find something interesting, might use that sheet you provided, see what I can hack out of it lol
I used this one here and got basic animation working.
https://www.spriters-resource.com/fullview/129981/
What is the right way to enable transparency? For debugging it was fine with the background color, because I had to fiddle around with the values until I found the right offsets for the animation and the right values for the frame sizes… I guess AlphaBlending and when importing the texture setting the KeyColor value or something? I remember something like that from the XNA times but I never really needed it and skipped the topic 
Are there recommended tools for working with pixel graphics like in this case finding the right values and offset?
EDIT: I removed the code with the values, because they were wrong…
Yah, setting KeyColor on the texture property to that green value would probably do it. Or you could use if color = green then Clip(-1) in the shader to reject a particular color. Or you could use GetData, SetData to convert green to transparent after load but I probably wouldn’t do that.
The way I’d do it is load it into photoshop(if you have it) and go into blending options and select Blend-If: green and then move the slider on the green side of the gradient to the right and alt-slide the right half of the slider to fine-tune the edges.
If the image is crisp to begin with though, I’d be thinking setting KeyColor for the texture should be a very good option (and setting use-keycolor property to true). I think that’s all you’d need.
I’m also interested to learn what sprite-sheet animation tools are being used.
You may or may not be interested in how I did it but for anyone interested:
Right now I’m using my own editor. I use the script export in photoshop for my animation (as layers to files in a folder with sequential #'s on end of each to put them in order). Next, in my editor I can add animation by folder and it packs it onto a sprite-sheet while keeping track of the rectangle sources in a list for each animation. Then I can use edit-animation which plays back the source-rects for that animation and each one has a centered origin by default and slower timing by default. < , > to go through the frames 1 at a time and then use mouse and arrows to adjust the exact position of that frame on the canvas which updates that frame’s origin (and use + , - to increase or reduce time-delay between frames). On the left side I choose and edit frames and on the right side of the screen it shows how the animation play-back would look in the game. I then export packed png sprite-sheett and the data as a simple text file to load using tags&switch-responses to maintain version compatibility.
It took me a lot longer than I expected to make the tool - so it’s probably better to use other software out there already made for this stuff. I’d be interested to know what’s out there myself. ^^
1 Like
Yea, in mine I can group multiple clips ont the animation player and tell it which one i want. I can also use a lerp value rather than time, this is useful with my shop sprite so I can roll it left and right without running the full animation cycles.
1 Like
Nice features, sounds great 
1 Like
Reserve your judgement for when you see it lol
1 Like
Record a video of it
I think custom tools are nice because they can be adapted over time if you need more features. And also going with simple text files has advantages.
Hey @Kwyrky,
I have just added this to my samples, it might be a little clunky as I have ripped it from my engine, so does not come with my actual sprite code, but this sample should show how you can use this in your own project
It’s by no means finished, but as I say, gives you something to look at.
I have done a tweet showing a gif of it running here.
It’s not checked in yet, will do it in the next 10 minutes, ill post again here when it’s in
Hope you find this helpful. I will do a Patreon post on this (lowest subscription tutorial tier) to, so I can add a bit more detail to it.
1 Like
1 Like
Nice I will check it out, thanks
I worked out the actual values for the above animation I think. Here is a recording of it (using a custom shader now).
SpriteAnimation primm;
private const int Scale = 30;
private const int FrameWidth = 21;
private const int FrameHeight = 31;
private const int Frametime = 1000;
private const int FramesOffsetX = 96;
private const int FramesOffsetY = 33;
private const int FrameCountX = 6;
private const int FrameCountY = 1;
// ...
int positionX = (GraphicsDevice.PresentationParameters.BackBufferWidth / 2) - (int)((FrameWidth * Scale) / 2.0f);
int positionY = (GraphicsDevice.PresentationParameters.BackBufferHeight / 2) - (int)((FrameHeight * Scale) / 2.0f);
Vector2 position = new Vector2(positionX, positionY);
primm = new SpriteAnimation();
primm.Initialize(GraphicsDevice, SpriteSheet: primmSpriteSheet, Position: position, FrameWidth: FrameWidth, FrameHeight: FrameHeight, FrameCountX: FrameCountX, FrameCountY: FrameCountY, Frametime: Frametime, Color.White, Scale: Scale, Looping: true, SpriteSheetEffect: SpriteSheetEffect, FramesOffsetX: FramesOffsetX, FramesOffsetY: FramesOffsetY);
1 Like
The explosion animations look very good, impressive what can be done using sprite sheets 
1 Like
Got distracted playing around with the displacement / refraction / scrolling shader 
2 Likes
I am using SpriteBatch with SourceRectangle to “select” the different frames and at the moment I am passing some values to the shader to calculate normalized UV coordinates / UV coordinates in the [0,1] range in both directions. Since I am using SpriteBatch with a custom effect I just have a pixel shader available I guess?! If I had access to the VertexShader I would probably pass a copy of the position or doing the calculation there (position to UV).
The question is if there is a simple way to access / get some normalized UV coordinates? Meaning without calculating the value by myself beforehand on the CPU or inside the pixelshader?
Another question came up. I noticed some timing and repetition values inside this SpriteSheet
in the second row the 8th animation “Grab+Shake+Throw down Chest”.
The animation can be seen here:
If I want to support animations which have different timings what is the canonical or recommended way of implementing this? Should I go with the option of having different Keyframes having 0,5x, 2x, 3x, 4x… etc speed?
Another question is if it is better in general to define one TimeSpan for one animation consisting of a bunch of Keyframes or to set a TimeSpan for each Keyframe on its own? I mean everything is possible but I have no experience with 2D animation and just thought maybe there is some recommended way which I should try to implement?
1 Like
That’s interesting…
But, are you using that sheet or are you creating your own? I suppose you could just duplicate the sprite for a number of frames, .5s is not critical, just an artist’s choice, but it would be interesting to see variable sprite animation timings in code form… I mean an array with a time flag or something could be one idea…
I implement 2D animation with a TimeSpan per animation, not per frame. I also set the timing based on the animation. For example, my walk animation is at 4 frames per second and my idle is at 16 frames per second. The actual walk animation is made up of 8 frames and the idle is made up of 28. Each has independent timers. I calculate the timing in the individual animation and don’t use a scaling factor. If you’re interested I can share the code.
At the moment I am using that sheet but it is just for testing out the 2D animation classes. Yes sure that would be possible to duplicate the frames a couple of times. But ideally one could just set a start and end keyframe and repetition value. What do you mean with an array with a time flag? How would that work then?