Sprite with rotation support

Help & Support
1

Hi, hopefully a simple question;

I need to have a sprite with rotation; I’m using the sprite.js file from the github project, but I’m unfamiliar with GLSL or shaders in general and can’t figure out how to add simple rotation support. Can anyone help me out ?

Thanks.

2

Found link text, but can’t figure out how to apply the example or if it would even translate to use with PlayCanvas’ sprite. Anyone have any ideas ?

3

Do you absolutely need to use a sprite for this? Would some HTML suffice perhaps? You can easily rotate HTML elements using CSS.

4

I assume it needs to be a sprite, it’s in game below other sprites, not an overlay that I could just place HTML ontop of the canvas. Is it overly difficult to add rotation to the shader (I’m talking simple 2d rotation, not 3d) ?

5

I’ve been able to get to the following point;

using the following shader definition;

vshader: [
    "attribute vec2 aPosition;",
    "attribute vec2 aUv0;",
    "varying vec2 vUv0;",
    "uniform vec2 uResolution;",
    "uniform vec2 uOffset;",
    "uniform vec2 uScale;",
    "",
    "void main(void)",
    "{",
    "    gl_Position = vec4(2.0 * ((uScale * aPosition.xy + uOffset) / uResolution) - 1.0, -0.9, 1.0);",
    "    vUv0 = aUv0;",
    "}"
].join("\n"),
fshader: [
    "precision " + gd.precision + " float;",
    "varying vec2 vUv0;",
    "uniform vec4 vTint;",
    "uniform sampler2D uColorMap;",
    "",
    "void main(void)",
    "{",
    "    float mid = 0.5;",
    "    float rot = -0.5;",
    "    vec2 rotated = vec2(cos(rot) * (vUv0.x - mid) + sin(rot) * (vUv0.y - mid) + mid, cos(rot) * (vUv0.y - mid) - sin(rot) * (vUv0.x - mid) + mid);",
    "    vec4 color = texture2D(uColorMap, rotated);",
    "    gl_FragColor = vec4(color.rgb * vTint.rgb, color.a * vTint.a);",
    "}"
].join("\n")

Is anyone aware of any setting or something that defines how the image is cropped/wrapped?

1 Like
6

Hey there,

I don’t think this is going to work if you are rotating in the fragment shader, because the quad is still square on. You need to apply the rotation in the vertex shader script to rotate the vertices. The fragment shader should be able to remain unchanged.

7

Ah, that makes sense. Do you have any idea on how to accomplish this ? (I have no idea what I’m looking at, this shader stuff is pretty alien still).

Thanks.

8

I’m not an expert…

gl_Position = vec4(2.0 * ((uScale * aPosition.xy + uOffset) / uResolution) - 1.0, -0.9, 1.0);

This section 2.0 * ((uScale * aPosition.xy + uOffset) / uResolution) is transforming a [x,y] co-ordinate aPosition.xy into a scaled, offset position.

The mesh is made up of two triangle using corners (0,-h), (w, -h), (w, 0), (0, 0) (w = width, h = height)

It should be relative straightforward to rotate these points by some angle… but I’ll need a pen and paper :slight_smile:

9

Pretty much finished implementing a minimap until I hit this issue.

Fix: Be lazy and make the player icon a circle instead of a triangle heh heh heh… Argh why doesn’t the sprite.js have rotation support? :stuck_out_tongue: