Why there is no anchor and rotations?????

[ejamshidiasl]

Why???

is there any way to set anchor point and rotate sprite?

[thewrath]

Hi 👋

It seems that there is no simple way to change the anchor of an engineObject. However, you can easily accomplish this by using a parent. Here's an example:

'use strict';

let parentObj;
let obj;

engineInit(
() => {
    const tileInfo = new TileInfo(vec2(0),vec2(160));
    parentObj = new EngineObject(vec2(0), vec2(2), tileInfo, 0, new Color(0,0,0,0));
    obj = new EngineObject(vec2(0), vec2(2), tileInfo);

    parentObj.addChild(obj);

    // we apply an offset to the child (equivalent to an anchor)
    obj.localPos = vec2(1);
}, 
() => {
    parentObj.angle += 0.1;
}, () => {}, () => {}, () => {}); 

you can simply extend EngineObject to add these behavior, but a "useless" parent will be added to the rendering chain, which isn't necessarily a good thing. It depends on how often you need to apply a rotation with an anchor other than the object center...

[KilledByAPixel]

It is true, in LJS sprites just rotate around their center by default!

The solution thewrath is a good workaround when you do need characters to rotate by a different point.

You can also reposition it in the tile sheet so it is off center.

I hope that helps!

[ejamshidiasl]

these ways are useful for simple games, for games with lots of objects are not good.

for example: 2.000 enemy soldiers with rifle that rifle rotate towards player

[KilledByAPixel]

these ways are useful for simple games, for games with lots of objects are not good.

for example: 2.000 enemy soldiers with rifle that rifle rotate towards player

Actually, you'd be surprised. These ways would work perfectly fine for way 2,000 objects with some child objects attached!

For games with many objects one simple optimization I would do is put a quick check to see if the obejcts are far enough from the player to skip the update/render.

[ejamshidiasl]

ok, i will test this way today.

@KilledByAPixel I just found out who you are. ha ha ha

i looked at source code and searched about pivot point in webgl and found that it is too easy to implement:

var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
matrix = m3.translate(matrix, x, y);
matrix = m3.rotate(matrix, angle);
matrix = m3.scale(matrix, sx, sy);
matrix = m3.translate(matrix, centerOffsetX, centerOffsetY);

and vertex shader: gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);

BUT i dont know how to do it now (i am working on it) 😄

sorry for my bad english

[KilledByAPixel]

I think you may be over thinking things. If you are making a game with a huge number of objects like 2000 soldiers at once, my advice would be to do some tests to see what the upper bound is.

Changing the webgl shader is not necessary here but I hope you have fun and continue learning.