[Solved] Trying to center scaled images (solution at bottom)

[knuxyl]

I am having trouble centering an image once it is scaled.

I have these variables set

scaleX, scaleY = 1, 1

Then I have a function that is called at the beginning of love.draw

function getCords()
screenWidth = love.graphics.getWidth()
screenHeight = love.graphics.getHeight()
x = screenWidth/2
y = screenHeight/2
mapX = x-map:getWidth()/2
mapY = y-map:getHeight()/2
playerX = math.floor(x-sprite:getWidth()/2)
playerY = math.floor(y-sprite:getHeight()/2)
end

And here is where the map and player sprite is drawn

love.graphics.draw(map, mapX-8-moveX, mapY-6-moveY, 0, scaleX, scaleY)
love.graphics.draw(sprite, playerX, playerY, 0, scaleX, scaleY)

The -8 and -6 in map draw is for alignment fixing, you can ignore

I'm trying to make the map have 16x16 pixels and I want the sprite to always align to this grid. I'm not using tilemaps because it seems a lot easier to just create the map .png and load it is as the background. instead of using camera functions, im just having the map background to move and the sprite image to change.

when you press - or = it changes the scaleX and scaleY to -1 or +1 respectively.

But when this happens, it does not center either image correctly on the screen anymore. I have a video on youtube demonstrating this.

YOUTUBE VIDEO DEMONSTRATING PROBLEM
[youtube] tags do not seem to work btw
https://www.youtube.com/watch?v=_DtNbF5qRm0

Also if anyone wants to help with this project that would be great (pokemon remake for android, start in whichever region u want, anime and original storyline mix, 721 pokemon, etc,etc. what everyone wants in a pokemon game)

I've been working on this for like 4 days or somethings. switched from android studio to LOVE because this is so much easier and i hate javascript. thank you to the developers of this engine!

EDIT===================================

problem was fixed by changing the variables in the function getCords()
original
mapX = math.floor(x-map:getWidth()/2)
mapY = math.floor(y-map:getHeight()/2)
playerX = math.floor(x-sprite:getWidth()/2)
playerY = math.floor(y-sprite:getHeight()/2)

fixed
mapX = math.floor(x-map:getWidth()*scaleX/2)
mapY = math.floor(y-map:getHeight()*scaleY/2)
playerX = math.floor(x-sprite:getWidth()*scaleX/2)
playerY = math.floor(y-sprite:getHeight()*scaleY/2)

[laperen]

I'd highly recommend you look into using sprite atlas and sprite sheets for your game environment for your own sake and others. This tiny map is fine with the current method you are using, but will get tough when the map gets larger.

Designing a map from individual sprites, will make positioning of objects easier in general. Don't want to go in detail but just know functionally you will be saving yourself time by having the object behaviour linked to the sprite instead of figuring where in the map your object is.

how are you going to handle Y sorting if your map is one huge image? what if your character is supposed to be behind a tall tree or building? You can't sort objects with the map as a huge image, and the character would look like it climbed a tree by stepping behind it.

From what I can recall, the max texture size on android devices are 1024x1024 for low end, 2048x2048 for mid range, and 4096x4096 for high end. pokemon maps seem to be pretty big, and if you make them any larger than 1024x1024, you will be alienating somebody from the game.

In conclusion, sprite atlases provide advantages functionally and aesthetically. Do consider using them.

[knuxyl]

I can just love.graphics.draw another map file after the sprite for layering to make sprite be behind things.

The map file is 2560x1920 so it would fit all devices. The bigger screen you have, the more of the map you will be able to see at a time. I have a mid range phone, Moto E 2nd Gen and it's screen size is 540x960 and it has no problem running this app.

I had a hard time learning tileset usage. I understand the table { love.graphics.newQuad(), etc } but when it comes to drawing and positioning it I'm at a loss.

I used TileEd or Tiled (idr) with a gameboy advance tileset to create the background. It can export to .lua but it seems to include a lot of information that is not needed and I don't fully understand how to use it.

Btw I was absolutely new to programming for android 7 days ago and completely new to lua and love 4 days ago. I do have programming experience but not advanced stuff but I can learn quick.

I can see the need for tilesets because when I move the sprite I need it to do animation frames 1&2 if button is pressed for <=1 second, and move +16 if <= 1 second but move like 1 every .25 seconds and this (dt) stuff is hard to understand as well.

[zorg]

I can just love.graphics.draw another map file after the sprite for layering to make sprite be behind things.

Yes, but that will mean that you can't easily do dynamic changes to your map, without editing that one gigantic image, then reloading it.

Screen size and maximum texture size supported are two very different things. My desktop's screen dimensions are around the neighborhood of 6400 x 2464, regardless, my GPUs can do 16k x 16k texture sizes. If i were to use textures that big, as laperen said above, devices only supporting smaller texture sizes will not be able to run my game.

Also, textures need to be square and PO2, meaning that your 2560x1920 map, if it's one image, will only fit into a 4096 x 4096 size texture, since 2560 > 2048, since that's the next power of two that's greater than your texture's largest "side".

I'll let someone else explain tiling and ways to store them (1D arrays with a bit of maths or 2D arrays; what variables/fields to store for the tiles, etc.)

[laperen]

I can just love.graphics.draw another map file after the sprite for layering to make sprite be behind things.

Then you have another problem where the character will be under a tree/building/whatever when its below

The map file is 2560x1920 so it would fit all devices. The bigger screen you have, the more of the map you will be able to see at a time. I have a mid range phone, Moto E 2nd Gen and it's screen size is 540x960 and it has no problem running this app.

refer to zorg

I had a hard time learning tileset usage. I understand the table { love.graphics.newQuad(), etc } but when it comes to drawing and positioning it I'm at a loss.

I used TileEd or Tiled (idr) with a gameboy advance tileset to create the background. It can export to .lua but it seems to include a lot of information that is not needed and I don't fully understand how to use it.

Btw I was absolutely new to programming for android 7 days ago and completely new to lua and love 4 days ago. I do have programming experience but not advanced stuff but I can learn quick.

I can see the need for tilesets because when I move the sprite I need it to do animation frames 1&2 if button is pressed for <=1 second, and move +16 if <= 1 second but move like 1 every .25 seconds and this (dt) stuff is hard to understand as well.

Then I'd suggest you do some mini projects to learn stuff before you attempt this huge one.

Look into how game engine architecture is done. I came from a Unity3D background, so I've shaped my .love project around the features provided by Unity(scenes, components, etc). Won't claim to be an expert, but helps to know what features a designer wants in their game engine.

learn/relearn some basic trigonometry(sin,cos,tan) if you haventh.

[knuxyl]

Yeah this is the first game I've worked on, so I have a lot of learning. I'm working on learning the tilesets again. What I'm working on now is just to learn.