Develop Reference

LibGDX float with camera position causing black lines with Tiled map

I am creating a top-down shooter game, and whenever I move the camera, or zoom, black likes appear like a grid
I am using Tiled to create the map, and I have the camera following my centered box2d body. I have found that making the camera position equal the position of the box2d body with an int cast results in the black lines disappearing like this:
The problem though, is that because I have the game scaled down, the player will move for a second or two and then when the player reaches the next whole number on either axis, the camera snaps to the player, which is not what I want for the game as it's jarring. The player's movement is granular, but, while rounded, the camera's is not. I do not know if this is a problem with my tile sheet or if it's something I can fix by altering some code. I have tried all different kinds of combinations of padding, and values of spacing and margins. So ultimately, how can I have the camera match the player's position smoothly and not cause the black lines? I'd greatly appreciate any help or recommendations. Thank you in advance!
Where I am type casting the player's float position to an int in game class:
public void cameraUpdate(float delta) {
//timeStep = 60 times a second, velocity iterations = 6, position iterations = 2
world.step(1/60f, 6, 2); //tells game how many times per second for Box2d to make its calculations
cam.position.x = (int)playerOne.b2body.getPosition().x;
cam.position.y = (int)playerOne.b2body.getPosition().y;
cam.update();
}
Majority of player class:
public class PlayerOne extends Sprite implements Disposable{
public World world; // world player will live in
public Body b2body; //creates body for player
private BodyDef bdef = new BodyDef();
private float speed = 1f;
private boolean running;
TextureAtlas textureAtlas;
Sprite sprite;
TextureRegion textureRegion;
private Sound runningSound;
public PlayerOne(World world) {
this.world = world;
definePlayer();
textureAtlas = new TextureAtlas(Gdx.files.internal("sprites/TDPlayer.atlas"));
textureRegion = textureAtlas.findRegion("TDPlayer");
sprite =new Sprite(new Texture("sprites/TDPlayer.png"));
sprite.setOrigin((sprite.getWidth() / 2) / DunGun.PPM, (float) ((sprite.getHeight() / 2) / DunGun.PPM - .08));
runningSound = Gdx.audio.newSound(Gdx.files.internal("sound effects/running.mp3"));
}
public void definePlayer() {
//define player body
bdef.position.set(750 / DunGun.PPM, 400 / DunGun.PPM);
bdef.type = BodyDef.BodyType.DynamicBody;
//create body in the world
b2body = world.createBody(bdef);
FixtureDef fdef = new FixtureDef();
CircleShape shape = new CircleShape();
shape.setRadius(12 / DunGun.PPM);
fdef.shape = shape;
b2body.createFixture(fdef);
}
public void renderSprite(SpriteBatch batch) {
float posX = b2body.getPosition().x;
float posY = b2body.getPosition().y;
float posX2 = (float) (posX - .14);
float posY2 = (float) (posY - .1);
sprite.setSize(32 / DunGun.PPM, 32 / DunGun.PPM);
sprite.setPosition(posX2, posY2);
float mouseX = Level1.mouse_position.x; //grabs cam.unproject x vector value
float mouseY = Level1.mouse_position.y; //grabs cam.unproject y vector value
float angle = MathUtils.atan2(mouseY - getY(), mouseX - getX()) * MathUtils.radDeg; //find the distance between mouse and player
angle = angle - 90; //makes it a full 360 degrees
if (angle < 0) {
angle += 360 ;
}
float angle2 = MathUtils.atan2(mouseY - getY(), mouseX - getX()); //get distance between mouse and player in radians
b2body.setTransform(b2body.getPosition().x, b2body.getPosition().y, angle2); //sets the position of the body to the position of the body and implements rotation
sprite.setRotation(angle); //rotates sprite
sprite.draw(batch); //draws sprite
}
public void handleInput(float delta) {
setPosition(b2body.getPosition().x - getWidth() / 2, b2body.getPosition().y - getHeight() / 2 + (5 / DunGun.PPM));
this.b2body.setLinearVelocity(0, 0);
if(Gdx.input.isKeyPressed(Input.Keys.W)){
this.b2body.setLinearVelocity(0f, speed);
}if(Gdx.input.isKeyPressed(Input.Keys.S)){
this.b2body.setLinearVelocity(0f, -speed);
}if(Gdx.input.isKeyPressed(Input.Keys.A)){
this.b2body.setLinearVelocity(-speed, 0f);
}if(Gdx.input.isKeyPressed(Input.Keys.D)){
this.b2body.setLinearVelocity(speed, 0f);
}if(Gdx.input.isKeyPressed(Input.Keys.W) && Gdx.input.isKeyPressed(Input.Keys.A)){
this.b2body.setLinearVelocity(-speed, speed);
}if(Gdx.input.isKeyPressed(Input.Keys.W) && Gdx.input.isKeyPressed(Input.Keys.D)){
this.b2body.setLinearVelocity(speed, speed);
}
if(Gdx.input.isKeyPressed(Input.Keys.S) && Gdx.input.isKeyPressed(Input.Keys.A)){
this.b2body.setLinearVelocity(-speed, -speed );
}if(Gdx.input.isKeyPressed(Input.Keys.S) && Gdx.input.isKeyPressed(Input.Keys.D)){
this.b2body.setLinearVelocity(speed, -speed);
}
Where I declare the pixels per meter scale:
public class DunGun extends Game{
public SpriteBatch batch;
//Virtual Screen size and Box2D Scale(Pixels Per Meter)
public static final int V_WIDTH = 1500;
public static final int V_HEIGHT = 800;
public static final float PPM = 100; //Pixels Per Meter
Game render and resize methods:
#Override
public void render(float delta) {
cameraUpdate(delta);
playerOne.handleInput(delta);
//clears screen
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
if (Gdx.input.isButtonPressed(Input.Buttons.LEFT)) {
cam.zoom -= .01;
}
if (Gdx.input.isButtonPressed(Input.Buttons.RIGHT)) {
cam.zoom += .01;
}
mapRenderer.render();
b2dr.render(world, cam.combined); //renders the Box2d world
mapRenderer.setView(cam);
//render our game map
//mapRenderer.render(); // renders map
//mapRenderer.render(layerBackround); //renders layer in Tiled that p1 covers
game.batch.setProjectionMatrix(cam.combined); //keeps player sprite from doing weird out of sync movement
mouse_position.set(Gdx.input.getX(), Gdx.input.getY(), 0);
cam.unproject(mouse_position); //gets mouse coordinates within viewport
game.batch.begin(); //starts sprite spriteBatch
playerOne.renderSprite(game.batch);
game.batch.end(); //starts sprite spriteBatch
//mapRenderer.render(layerAfterBackground); //renders layer of Tiled that hides p1
}
#Override
public void resize(int width, int height) {
viewport.update(width, height, true); //updates the viewport camera
}

I solved it by fiddling around with the padding of the tilesets in GDX Texture Packer. I added 5 pixels of padding around the 32x32 tiles. I set the margins to 2, and spacing to 4 in Tiled. I had tried a lot of different combinations of padding/spacing/margins that didn't work which made me think it was a coding problem, but those settings worked, and I didn't have to round the floats.

display sprite on tile map libgdx

I am creating a game in LibGDX. I have taken the tiles used in Pixel Dungeon and created a tile map using Tiled.
The main character's class is a subclass of Actor, and because the character is animated, I am using this code to draw the sprite:
if (direction.isEastwards() || direction.isNorthwards()) {
Vector3 projectedPosition = getLocation().getCamera().project(
new Vector3(16 * getX() + 1, Gdx.graphics.getHeight()
- (16 * getY()) - 15, 0));
batch.draw(current.getKeyFrame(
animTime += Gdx.graphics.getDeltaTime(), true),
projectedPosition.x, projectedPosition.y);
} else {
Vector3 projectedPosition = getLocation().getCamera().project(
new Vector3(16 * getX() + 13, Gdx.graphics.getHeight()
- (16 * getY()) - 15, 0));
batch.draw(current.getKeyFrame(
animTime += Gdx.graphics.getDeltaTime(), true),
projectedPosition.x, projectedPosition.y);
}
When I launch the game in Eclipse, the sprite initially appears in the correct location. However, if I resize the screen, the sprite ceases to be in the correct location and eventually will disappear off the map.
The same thing happened before I started using projection, and I figured the problem was related to projection. As this is an area I have not explored before I decided after an hour of being able to solve this to ask for help.
The animation flips depending on which direction the character faces, which is why the if/else clause is there.
Addendum: The stage is created with new Stage(new ExtendViewport(800,600),batch);, the resize method updates the camera, and the batch is set to the projection matrix.
Here is more relevant code:
Camera and map initialisation:
camera=new OrthographicCamera();
camera.setToOrtho(false,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
mapRenderer=new OrthogonalTiledMapRenderer(map,batch);
Render method:
camera.update();
batch.setProjectionMatrix(camera.combined);
mapRenderer.setView(camera);
mapRenderer.render();
stage.act();
stage.draw();
Resize method:
camera.viewportWidth=width;
camera.viewportHeight=height;
camera.update();
Actor draw method:
#Override
public void draw(Batch batch, float parentAlpha) {
Color color = getColor();
batch.setColor(color.r, color.g, color.b, color.a * parentAlpha);
if (direction.isEastwards() || direction.isNorthwards()) {
Vector3 projectedPosition = getLocation().getCamera().project(
new Vector3(16 * getX() + 1, Gdx.graphics.getHeight()
- (16 * getY()) - 15, 0));
batch.draw(current.getKeyFrame(
animTime += Gdx.graphics.getDeltaTime(), true),
projectedPosition.x, projectedPosition.y);
} else {
Vector3 projectedPosition = getLocation().getCamera().project(
new Vector3(16 * getX() + 13, Gdx.graphics.getHeight()
- (16 * getY()) - 15, 0));
batch.draw(current.getKeyFrame(
animTime += Gdx.graphics.getDeltaTime(), true),
projectedPosition.x, projectedPosition.y);
}
// Walk animation displays for 0.2 seconds
if (current == walk && animTime >= 0.2) {
current = idle;
animTime = 0;
}
}

I think the problem it caused because you dont combine the sprite with camera projection. set your spriteBatch like this :
spriteBatch.setProjectionMatrix(camera.combined);
And dont miss update viewport in resize method :
public void resize(int width, int height) {
camera.viewportWidth = width;
camera.viewportHeight = height;
camera.update();
}
With that, you can resize or zoomin zoomout, the spriteBatch it scalled to the camera projection.

Remove ShaperRenderer offset

I want to use libgdx ShapeRenderer to mock my graphics but i get a small nevertheless annoying mismatch of coordinates. As mentioned at libgdx wiki, screen coordinates range: (0,0) (lower left corner) to (Gdx.graphics.getWidth()-1, Gdx.graphics.getHeight()-1) (upper right corner).
Here is a code sample of what i'm trying to do:
public static final int APP_WIDTH = 160;
public static final int APP_HEIGHT = 120;
private SpriteBatch batch;
private ShapeRenderer shapeRenderer;
private Texture texture;
...
public void render() {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
if (DEBUG_MODE) {
shapeRenderer.setAutoShapeType(true);
shapeRenderer.setColor(Color.RED);
shapeRenderer.begin();
shapeRenderer.rect(0, 0, APP_WIDTH - 1, APP_HEIGHT - 1);
shapeRenderer.end();
} else {
batch.begin();
batch.draw(texture, 0, 0);
batch.end();
}
}
And the result i get:
image link
As you can see, texture (160x120) is drawn exactly like it should be but rectangle (that was drawn with shapeRenderer) has -1 x-axis offset.
Of course, I can just draw everything at x+1 but maybe I'm doing something wrong and there is a way to make coordinates match?

Java LibGDX Moving to Touch Position on Android

I'm using this code but somethings aren't perfect. It's working but not smooth. First it goes touchX and then goes touchY. But I want this at the same time. I tried different codes but didn't work. How can I fix it? What's the problem?
package com.anil.game1;
import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.math.Vector3;
public class Game1 extends ApplicationAdapter {
private SpriteBatch batch;
private OrthographicCamera camera;
private Texture player1Texture;
private Rectangle player1Rectangle;
private Vector3 touchPos;
#Override
public void create () {
batch = new SpriteBatch();
camera = new OrthographicCamera(480, 800);
player1Texture = new Texture("Player1.png");
player1Rectangle = new Rectangle();
player1Rectangle.set(240, 0, 64, 64);
touchPos = new Vector3();
}
#Override
public void render () {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
if (Gdx.input.isTouched()) {
touchPos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
camera.unproject(touchPos);
//player1Rectangle.setPosition(new Vector2(touchPos.x, touchPos.y));
}
if (touchPos.x > player1Rectangle.x)
player1Rectangle.x += 5;
else
player1Rectangle.x -= 5;
if (touchPos.y > player1Rectangle.y)
player1Rectangle.y += 5;
else
player1Rectangle.y -= 5;
batch.draw(player1Texture, player1Rectangle.x - 32, player1Rectangle.y - 32);
batch.end();
}
#Override
public void dispose () {
batch.dispose();
player1Texture.dispose();
}
}

In this section:
if (touchPos.x > player1Rectangle.x)
player1Rectangle.x += 5;
else
player1Rectangle.x -= 5;
if (touchPos.y > player1Rectangle.y)
player1Rectangle.y += 5;
else
player1Rectangle.y -= 5;
You are forcing the rectangle to always move in the X and Y directions by a set amount. It's never allowed to just sit still or slow down. Also, you probably don't want to be handling X and Y separately, because then its speed will be slower in the cardinal directions and faster in the diagonal directions, which would look weird. And finally, you need to work with speed and time to keep a stable movement speed.
So first of all, define a speed for your object. Also, you're going to want a Vector2 handy for calculations.
private static final float SPEED = 300f; //world units per second
private final Vector2 tmp = new Vector2();
Now after you have calculated touch position, you want to figure out what direction to move in, and how far to move along that direction. So right after your isTouched block:
//how far the player can move this frame (distance = speed * time):
float maxDistance = SPEED * Gdx.graphics.getDeltaTime();
//a vector from the player to the touch point:
tmp.set(touchPos.x, touchPos.y).sub(player1Rectangle.x, player1Rectangle.y);
if (tmp.len() <= maxDistance) {// close enough to just set the player at the target
player1Rectangle.x = touchPos.x;
player1Rectangle.y = touchPos.y;
} else { // need to move along the vector toward the target
tmp.nor().scl(maxDistance); //reduce vector length to the distance traveled this frame
player1Rectangle.x += tmp.x; //move rectangle by the vector length
player1Rectangle.y += tmp.y;
}

Libgdx/Java ShadowMap and Framebuffer update using Cameras

im working on a little rpg game and today i tried to add shadows.
I saw this tutorial here which is good :)
Pixel Perfect Shader
So following problem :
Test example from the tutorial site, works fine. Theres one cam and the shadows are on the right place.
As soon i use Orthographic cameras from my player sprite, the shadow isnt there where it should be and when im moving the shadow moves with me, he is on the same spot on the display screen but in the world the shadow is moving _/ that looks so :
The SpriteSheet should cast shadows ... but they are on the wrong place :/
Here i didnt moved :
It is very dark, because of the day/night cycle ...
And here i moved a little bit to left :
I dont know why it wont work ... im giving the Orthographic camera out of my main class to the shadow class. Or did i miss something ? :/
My code should be fine, but if anyone wanna see it here is some code :
public class LightSystemShader {
private int lightSize = 500;
private float upScale = 1f; //for example; try lightSize=128, upScale=1.5f
SpriteBatch batch;
OrthographicCamera cam;
BitmapFont font;
FPSLogger fps;
TextureRegion shadowMap1D; //1 dimensional shadow map
TextureRegion occluders; //occluder map
FrameBuffer shadowMapFBO;
FrameBuffer occludersFBO;
Texture casterSprites;
Texture enmyAnimation;
Texture light;
ShaderProgram shadowMapShader, shadowRenderShader;
Array<Light> lights = new Array<Light>();
boolean additive = true;
boolean softShadows = true;
float xKoord = 600;
public static ShaderProgram createShader(String vert, String frag) {
ShaderProgram prog = new ShaderProgram(vert, frag);
if (!prog.isCompiled())
throw new GdxRuntimeException("could not compile shader: " + prog.getLog());
if (prog.getLog().length() != 0)
Gdx.app.log("GpuShadows", prog.getLog());
return prog;
}
public LightSystemShader() {
batch = new SpriteBatch();
ShaderProgram.pedantic = false;
//read vertex pass-through shader
final String VERT_SRC = Gdx.files.internal("data/pass.vert").readString();
// renders occluders to 1D shadow map
shadowMapShader = createShader(VERT_SRC, Gdx.files.internal("data/shadowMap.frag").readString());
// samples 1D shadow map to create the blurred soft shadow
shadowRenderShader = createShader(VERT_SRC, Gdx.files.internal("data/shadowRender.frag").readString());
//the occluders
casterSprites = new Texture("data/cat4.png");
//
enmyAnimation = new Texture("EnemyAnimations/BugIdleStand.png");
//the light sprite
light = new Texture("data/light.png");
cam = new OrthographicCamera(0,0);
cam.setToOrtho(false);
updateMaps();
font = new BitmapFont();
Gdx.input.setInputProcessor(new InputAdapter() {
public boolean touchDown(int x, int y, int pointer, int button) {
float mx = x;
float my = Gdx.graphics.getHeight() - y;
lights.add(new Light(mx, my, randomColor()));
return true;
}
public boolean keyDown(int key) {
if (key==Keys.SPACE){
clearLights();
return true;
} else if (key==Keys.A){
additive = !additive;
return true;
} else if (key==Keys.S){
softShadows = !softShadows;
return true;
}
return false;
}
});
clearLights();
}
public void renderLightSystemShader(OrthographicCamera screenCam){
screenCam = new OrthographicCamera(0,0);
screenCam.setToOrtho(false);
Gdx.gl.glClearColor(0,0,0,0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
float mx = Gdx.input.getX();
float my = Gdx.graphics.getHeight() - Gdx.input.getY();
if (additive)
batch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE);
for (int i=0; i<lights.size; i++) {
Light o = lights.get(i);
if (i==lights.size-1) {
o.x = mx;
o.y = my;
}
renderLight(o, screenCam);
}
if (additive)
batch.setBlendFunction(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
//STEP 4. render sprites in full colour
batch.setProjectionMatrix(screenCam.combined);
batch.begin();
batch.setShader(null); //default shader
drawShaderBatch(batch);
//DEBUG RENDERING -- show occluder map and 1D shadow map
/*batch.setColor(Color.BLACK);
batch.draw(occluders, Gdx.graphics.getWidth()-lightSize, 0);
batch.setColor(Color.WHITE);
batch.draw(shadowMap1D, Gdx.graphics.getWidth()-lightSize, lightSize+5);
//DEBUG RENDERING -- show light
batch.draw(light, mx-light.getWidth()/2f, my-light.getHeight()/2f); //mouse
batch.draw(light, Gdx.graphics.getWidth()-lightSize/2f-light.getWidth()/2f, lightSize/2f-light.getHeight()/2f);
*/
//draw FPS
batch.end();
System.out.println(Gdx.graphics.getFramesPerSecond());
}
// draw Lights
void renderLight(Light o, OrthographicCamera screenCam) {
float mx = o.x;
float my = o.y;
screenCam = new OrthographicCamera(0,0);
screenCam.setToOrtho(false);
//STEP 1. render light region to occluder FBO
//bind the occluder FBO
occludersFBO.begin();
//clear the FBO
Gdx.gl.glClearColor(0f,0f,0f,0f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
//set the orthographic camera to the size of our FBO
screenCam.setToOrtho(false, occludersFBO.getWidth(), occludersFBO.getHeight());
//translate camera so that light is in the center
screenCam.translate(mx - lightSize/2f, my - lightSize/2f);
//update camera matrices
screenCam.update();
//set up our batch for the occluder pass
batch.setProjectionMatrix(screenCam.combined);
batch.setShader(null); //use default shader
batch.begin();
// ... draw any sprites that will cast shadows here ... //
batch.draw(casterSprites, 0, 0);
batch.draw(enmyAnimation,xKoord,600,300,100);
//end the batch before unbinding the FBO
batch.end();
//unbind the FBO
occludersFBO.end();
//STEP 2. build a 1D shadow map from occlude FBO
//bind shadow map
shadowMapFBO.begin();
//clear it
Gdx.gl.glClearColor(0f,0f,0f,0f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
//set our shadow map shader
batch.setShader(shadowMapShader);
batch.begin();
shadowMapShader.setUniformf("resolution", lightSize, lightSize);
shadowMapShader.setUniformf("upScale", upScale);
//reset our projection matrix to the FBO size
screenCam.setToOrtho(false, shadowMapFBO.getWidth(), shadowMapFBO.getHeight());
batch.setProjectionMatrix(screenCam.combined);
//draw the occluders texture to our 1D shadow map FBO
batch.draw(occluders.getTexture(), 0, 0, lightSize, shadowMapFBO.getHeight());
//flush batch
batch.end();
//unbind shadow map FBO
shadowMapFBO.end();
//STEP 3. render the blurred shadows
//reset projection matrix to screen
screenCam.setToOrtho(false);
batch.setProjectionMatrix(screenCam.combined);
//set the shader which actually draws the light/shadow
batch.setShader(shadowRenderShader);
batch.begin();
shadowRenderShader.setUniformf("resolution", lightSize, lightSize);
shadowRenderShader.setUniformf("softShadows", softShadows ? 1f : 0f);
//set color to light
batch.setColor(o.color);
float finalSize = lightSize * upScale;
//draw centered on light position
batch.draw(shadowMap1D.getTexture(), mx-finalSize/2f, my-finalSize/2f, finalSize, finalSize);
//flush the batch before swapping shaders
batch.end();
//reset color
batch.setColor(Color.WHITE);
//xKoord+=1;
}
void clearLights() {
lights.clear();
lights.add(new Light(Gdx.input.getX(), Gdx.graphics.getHeight()-Gdx.input.getY(), Color.WHITE));
}
static Color randomColor() {
float intensity = (float)Math.random() * 0.5f + 0.5f;
return new Color((float)Math.random(), (float)Math.random(), (float)Math.random(), intensity);
}
void drawShaderBatch(SpriteBatch batch){
batch.draw(casterSprites, 0, 0);
batch.draw(enmyAnimation,600,600,300,100);
}
void updateMaps(){
occludersFBO = new FrameBuffer(Format.RGBA8888, lightSize, lightSize, false);
occluders = new TextureRegion(occludersFBO.getColorBufferTexture());
occluders.flip(false, true);
//our 1D shadow map, lightSize x 1 pixels, no depth
shadowMapFBO = new FrameBuffer(Format.RGBA8888, lightSize, 1, false);
Texture shadowMapTex = shadowMapFBO.getColorBufferTexture();
//use linear filtering and repeat wrap mode when sampling
shadowMapTex.setFilter(TextureFilter.Linear, TextureFilter.Linear);
shadowMapTex.setWrap(TextureWrap.Repeat, TextureWrap.Repeat);
//for debugging only; in order to render the 1D shadow map FBO to screen
shadowMap1D = new TextureRegion(shadowMapTex);
shadowMap1D.flip(false, true);
}
public void doDispose(){
batch.dispose();
font.dispose();
shadowMapFBO.dispose();
shadowMapShader.dispose();
shadowRenderShader.dispose();
casterSprites.dispose();
enmyAnimation.dispose();
light.dispose();
occludersFBO.dispose();
}
}

Found it out myself ^^ i forgot to add this to void renderLights :
cam.position.set(positionX,positionY, 0);