I do not understand the code version of time based sprite animation?

I’m Universo and for the longest time had coding issues around the concept of time-based sprite animation basically, do not know how to implement it and any code or explanation simple or complex that I’ve found has been extremely confusing to me and was hoping to have a kind person walk me through the code step by step, explaining exactly how this is implemented correctly.

Here’s what, I believe to know about the concept and or idea for time-based sprite animation it is to construct a delay or halt of some code statement using time of some kind in milliseconds with a collection of moving images and or sprites however any attempts from the tutorial’s or my own brain have resulted in inaccurate various speed sprite animations and not the consistent stable speed, Id appreciate and be grateful for here’s some code to show my progress and perhaps help you understand my position in this mess baring in mind, I prefer my code be as extremely simple and speedy as possible within the limitations, of course:

JavaScript with HTML5 Canvas

window.onload = function () {      var canvas = document.getElementById("canvas");      var ctx = canvas.getContext("2d");      var FrameSize = 120; //120 pixels     var FrameNumber = 0; //obvious     var img = new Image();     img.src = 'sprite_ani.png';     var last = 0; // no idea         function Render() {        ctx.clearRect(0,0 ,640,480);       now = performance.now();       delta = now - last; // last is 0, how does this work?       last = now; // last is now, why?        if(delta > 20 //what does this value represent) {          FrameNumber += FrameNumber + 1;          delta = 20;       }                 if(FrameNumber>=4){               FrameNumber = 0;       }          ctx.drawImage(img,FrameSize*FrameNumber,0,120,120,0,0,120,120);          window.requestAnimationFrame(Render);     }     window.requestAnimationFrame(Render);    }     

As you can see, it’s extremely simple yet, I’m still struggling to not only understand it but extremely simply implement it, I’m not a fan of over-complicated coding hence why I ditched c++ ages ago.

Could someone in extremely simple english guide me through time-based sprite animation in the context of JavaScript preferably, Id also really appreciate various time-based sprite animation methods being explained too in extremely simple terms but not holding out, I thank you for reading this far.

solid color to sprite (javascript game)

Hi I recently created a javascript game, in this game, math random is used to pick a random shape.

The shapes are in strings, and the associated numbers within the string are then used to show a color.

Is there any way to replace the simple hex colors with an image?

For example:

else if (shape === "H"){     return [[8,8,8],             [8,8,8],             [8,8,8]]; 

The "8" ties into the following string to get the #F10B38 color.

const color = [null,"#FF2D00","#FF9300","#51FF00","#00FF93","#0087FF","#4E49A7","#9649A7","#F10B38"]; 

Attempt to fix sprite sheet pixel bleeding in OpenGL 2D causing sprite distortion

While working on a project, I encountered the common problem of pixel bleeding when trying to draw subregions of my sprite sheet. This caused sort of "seams" to appear at the edges of my sprites. You can see the issue here, on the right and top of the sprite .

Doing some searching, I found others with a similar problem, and a suggested solution (here, and here for example) was to offset my texture coordinates by a bit, such as 0.5. I tried this, and it seemed to work. But I have noticed that sometimes, depending on where the sprite or camera is, I get a bit of distortion on the sprites. Here, the left side appears to be cut off, and here, the bottom seems to have expanded. (I should note, the distortion happens on all sides, I just happened to take screenshots of it happening on the bottom and left.) It may be a little difficult to see in screenshots, but it is definitely noticeable in motion. For reference, here is the part of the sprite sheet that is being displayed here

Does anybody have any idea what is going on here? I didn’t actually notice this issue until recently. I originally set out to resolve the pixel bleeding when I saw it occurring between my tile sprites. This new issue does not occur with them using my current half-pixel offset solution (or if it does, it’s not noticeable).


Texture parameters


Texture coordinate calculation

std::vector<glm::vec4> Texture2D::GetUVs(int w, int h) { std::vector<glm::vec4> uvs; int rows = Width/ w; int columns = Height / h;  for(int c = 0; c < columns; c ++) {     for(int i = 0; i < rows; i ++)     {         float offset = 0.5;         uvs.emplace_back(glm::vec4(float(((i) * w + offset))/Width,                               float(((1 + i) * w - offset))/Width,                               float(((c) * h + offset))/Height,                               float(((1 + c) * h - offset))/Height));     } } return uvs; 

Where Width and Height are the dimensions of the sprite sheet, and w and h are the dimensions of the subregion, in this case 32 and 32.

How I pass the uvs to the shader

GLfloat verticies[] = {     uv.x, uv.w,     uv.y, uv.z,     uv.x, uv.z,      uv.x, uv.w,     uv.y, uv.w,     uv.y, uv.z };  this->shader.Use().SetVector2fv("uvs", 12, verticies); 

Where uv is the uv at an index in the uvs vector that was returned above in the GetUVs function.

Vertex shader

#version 330 core layout (location = 0) in vec2 vertex;   out vec2 TextureCoordinates;  uniform vec2 uvs[6]; uniform mat4 model; uniform mat4 projection;  void main() {     const vec2 position [6] = vec2[]     (         vec2(0.0f, 1.0f),         vec2(1.0f, 0.0f),         vec2(0.0f, 0.0f),          vec2(0.0f, 1.0f),         vec2(1.0f, 1.0f),         vec2(1.0f, 0.0f)     );     TextureCoordinates = uvs[gl_VertexID];    gl_Position = projection * model * vec4(position[gl_VertexID], 0.0, 1.0); } 

Fragment shader

#version 330 core in vec2 TextureCoordinates; out vec4 color;  uniform sampler2D image; uniform vec4 spriteColor;  void main() {         color = vec4(spriteColor) * texture(image, TextureCoordinates); }   

Thanks for reading. I have asked this question a few places and not gotten any response, so any help is greatly appreciated.

Naked Sprite Familiars?

There were two question about the new Sage Advice:

  • Does Flock of Familiars produce endless wealth in the same manner as Find Familiar?
  • What is a sprite familiar's AC?

My answer to one and comment on another is that infinite wealth from a Warlock isn’t possible because the Sprite is summoned without gear or clothes. A DM may rule otherwise (I do at the moment, but I’m wondering if it is RAW), but is there anything in the Rules of find familiar as they are Written that suggests that a Warlock’s Sprite Familiar arrives with no objects? Where is rules support for the spell creating these items in the first place. So, do the rules say they get the equipment, and if so where?

A quick relevant note to head it off, the stat blocks in the DMG are typical monsters encountered in the wild, and variations are possible. The ability to use the bow and sword doesn’t mean the one summoned has one, unless I’m mistaken.

Can a Pact of Chain Sprite familiar create poisons?

The Monster Manual says this of Sprites:

Poison Brewers. In their forest domains, sprites brew toxins, unguents, antidotes, and poisons , including the sleep poison with which they coat their arrows. They venture far into the woods to harvest rare flowers, mosses, and fungi, sometimes crossing dangerous territory to do so. If desperate, sprites even steal their ingredients from the gardens of hags.

However the stat sheet doesn’t list proficiency in herbalism or alchemy. So, is the above quote just flavor text to explain the arrows, or could the Sprite familiar make other poisons (and possibly potions) as well based on the text above?

If so, I’d imagine it to work the same way as a character making poison and potion (1/2 the cost plus a certain amount of time, so that the Sprite doesn’t just become a poison factory).

What is a sprite familiar’s AC?

The most recent Sage Advice erratas find familiar so that familiars are now stripped naked when de-summoned. The Pact of the Chain’s Sprite familiar is initially summoned wearing leather armor, which is listed in its description as the source of its armor class. Is there a system in place for calculating what the AC is if the warlock desummons and then later resummons the sprite?

It looks like using the formula for player characters, viz. 11+Dex, would be consistent with the published dexterity, but we know that the rest of the sprite’s equipment (longsword, longbow) work differently because its a monster so I’d prefer DM-facing monster adjustment rules for this.

How to use an overlapping shader so that it uses layers sort from sprite renderer and its transparent

Im using the shader from question question

, but once I put it in the game, and my character gets close to it, it will be hidden by the shadow of the tree:

enter image description here

Any way to make the shader transparent and/or maybe use the sprite renderer sort layer system

I have been trying to use stencil configurable shader with no luck Thank you for your help

Not sure what combination of these should work: enter image description here

The character is using a normal sprite renderer.

How can I cast light onto a sprite in 3D environment?

I’m making a 2.5D game, where 2D sprites are in a 3D environment. I’m using URP and I have a problem with lighting the sprites. The sprites are lighting up from behind, and not front. I tried with directional, spot and point lights but the result is the same no matter what official shader I use they only light up when they receive light from behind. Front light has no effect whatsoever on the sprites.

I spent the entire day looking for a solution but I’ve got almost nothing. Only solution I saw someone else mention is making the game object with the "sprite renderer" on, a child of another gameobject and rotate it 180 degrees on Y. But that is not an option for me cause I’m using custom scripts to rotate that game object already.

So can there be a custom shader? Can one be created using shadergraph maybe? I know some others have faced the same problem but did anyone really solve it?


How to decide sprite size for isometric tile textures?

enter image description here

I want to draw isometric tiles with arbitrary tile sizes. For example above picture there are 1×1 and 3×2 sized tiles.

The textures have arbitrary height because of decoration. a is the tile’s height b is texture’s height c is tile’s width. I can’t figure out what the sprite size should be when I lay these out on screen.

Maybe I should have exact tile sizes cover the whole texture without decorations (a == b). But still what the sprite size should be?

Does a sprite familiar’s equipment count against its carrying capacity?

Under Lifting and Carrying (PHB 176) it says:

Your carrying capacity is your Strength score multiplied by 15. This is the weight (in pounds) that you can carry… You can push, drag, or lift a weight in pounds up to twice your carrying capacity (or 30 times your Strength score).

and also specifies that a tiny creature can carry half as much

A sprite familiar summoned through a warlock’s Pact of Chain feature has a strength score of 3 and so has a carrying capacity of 22.5 pounds and a push, drag, lift limit of 45 pounds. The sprite stat block also specifies, however, that they wear leather armor and carry a longsword and shortbow.

Supposedly these weigh 10 pounds, 3 pounds and 2 pounds respectively but considering they are smaller than those worn by a medium humanoid it is unlikely that they weigh as much.

Is there any official guidance as to how much the sprite familiar’s equipment counts against its carrying capacity?