I have been having problem's scaling the camera for my game

[MaxGamz]

My character is 8x8 and I want to replicate the classic look of games from the past; however, because of this the character seems extremely tiny. I tried to scale it using love.graphics.scale and the push and pop but while it did make the character an ideal size, it wasn't centered in the camera view and even went out of view. I even tinkered with it making the camera follow "(player.x *2, player.y*2)" but it still looked exactly the same. Even when I took the players height and width into account.

testGame.love

(1.18 MiB) Downloaded 322 times

[pgimeno]

These are the changes that I've applied to your code, in diff format:

Code: Select all

$ diff -u main.lua.old main.lua.new --strip-trailing-cr
--- main.lua.old	2023-09-01 08:09:02.000000000 +0200
+++ main.lua.new	2023-09-01 16:29:43.845043823 +0200
@@ -16,6 +16,7 @@
     acc = 1000,
     maxSpeed = 500,
     factor = 1,
+    zoom = 3, -- or whichever
     isGrounded = false
 }
 
@@ -41,7 +42,14 @@
     Box_1 = Platform
     Box_2 = Platform2
 
-    world:add(Player, Player.x, Player.y, Player.w, Player.h)
+    -- Make the Bump object the same size as the zoomed player, and in the
+    -- correct position. Bump only accepts top left corners as coordinates,
+    -- therefore we need to apply half the zoomed width as X and the full
+    -- zoomed height as Y.
+    world:add(Player,
+              Player.x - Player.w * Player.zoom * 0.5,
+              Player.y - Player.h * Player.zoom,
+              Player.w * Player.zoom, Player.h * Player.zoom)
     world:add(Box_1, Box_1.x, Box_1.y, Box_1.w, Box_1.h)
     world:add(Box_2, Box_2.x, Box_2.y, Box_2.w, Box_2.h)
 
@@ -61,8 +69,10 @@
 end
 
 function collide(player, dt)
-    local finalX = player.x + player.xVel * dt
-    local finalY = player.y + player.yVel * dt
+    -- finalX and finalY need to be applied to the top left corner,
+    -- so that bump.lua can work with what it expects.
+    local finalX = player.x - player.w * player.zoom * 0.5 + player.xVel * dt
+    local finalY = player.y - player.h * player.zoom + player.yVel * dt
 
     local actualX, actualY, cols, len = world:move(player, finalX, finalY)
 
@@ -80,8 +90,10 @@
         end
     end
 
-    player.x = actualX
-    player.y = actualY
+    -- Our player.x and player.y have an offset with respect to what
+    -- bump.lua returns, so we apply it back here.
+    player.x = actualX + player.w * player.zoom * 0.5
+    player.y = actualY + player.h * player.zoom
 end
 
 function appGravity(dt)
@@ -153,7 +165,7 @@
     --love.graphics.push()
     --love.graphics.scale(2,2)
     cam:attach()
-        currAnim:draw(Player.img, Player.x, Player.y, nil, Player.factor, 1, 4)
+        currAnim:draw(Player.img, Player.x, Player.y, nil, Player.factor * Player.zoom, Player.zoom, 4, 8)
         love.graphics.rectangle("line", Box_1.x, Box_1.y, Box_1.w, Box_1.h)
         love.graphics.rectangle("line", Box_2.x, Box_2.y, Box_2.w, Box_2.h)
     cam:detach()

If you don't understand diff format, feel free to ask. The basic idea is that you have to delete the lines that start with "-" and add the lines that start with "+". The "@@"'s separate blocks of consecutive "pasted" lines.

With this change, the player's anchor is at the bottom centre, rather than at the top left (meaning that Player.x and Player.y represent where the sprite's bottom centre is). This may be important for you later on.

[MaxGamz]

These are the changes that I've applied to your code, in diff format:

Code: Select all

$ diff -u main.lua.old main.lua.new --strip-trailing-cr
--- main.lua.old	2023-09-01 08:09:02.000000000 +0200
+++ main.lua.new	2023-09-01 16:29:43.845043823 +0200
@@ -16,6 +16,7 @@
     acc = 1000,
     maxSpeed = 500,
     factor = 1,
+    zoom = 3, -- or whichever
     isGrounded = false
 }
 
@@ -41,7 +42,14 @@
     Box_1 = Platform
     Box_2 = Platform2
 
-    world:add(Player, Player.x, Player.y, Player.w, Player.h)
+    -- Make the Bump object the same size as the zoomed player, and in the
+    -- correct position. Bump only accepts top left corners as coordinates,
+    -- therefore we need to apply half the zoomed width as X and the full
+    -- zoomed height as Y.
+    world:add(Player,
+              Player.x - Player.w * Player.zoom * 0.5,
+              Player.y - Player.h * Player.zoom,
+              Player.w * Player.zoom, Player.h * Player.zoom)
     world:add(Box_1, Box_1.x, Box_1.y, Box_1.w, Box_1.h)
     world:add(Box_2, Box_2.x, Box_2.y, Box_2.w, Box_2.h)
 
@@ -61,8 +69,10 @@
 end
 
 function collide(player, dt)
-    local finalX = player.x + player.xVel * dt
-    local finalY = player.y + player.yVel * dt
+    -- finalX and finalY need to be applied to the top left corner,
+    -- so that bump.lua can work with what it expects.
+    local finalX = player.x - player.w * player.zoom * 0.5 + player.xVel * dt
+    local finalY = player.y - player.h * player.zoom + player.yVel * dt
 
     local actualX, actualY, cols, len = world:move(player, finalX, finalY)
 
@@ -80,8 +90,10 @@
         end
     end
 
-    player.x = actualX
-    player.y = actualY
+    -- Our player.x and player.y have an offset with respect to what
+    -- bump.lua returns, so we apply it back here.
+    player.x = actualX + player.w * player.zoom * 0.5
+    player.y = actualY + player.h * player.zoom
 end
 
 function appGravity(dt)
@@ -153,7 +165,7 @@
     --love.graphics.push()
     --love.graphics.scale(2,2)
     cam:attach()
-        currAnim:draw(Player.img, Player.x, Player.y, nil, Player.factor, 1, 4)
+        currAnim:draw(Player.img, Player.x, Player.y, nil, Player.factor * Player.zoom, Player.zoom, 4, 8)
         love.graphics.rectangle("line", Box_1.x, Box_1.y, Box_1.w, Box_1.h)
         love.graphics.rectangle("line", Box_2.x, Box_2.y, Box_2.w, Box_2.h)
     cam:detach()

If you don't understand diff format, feel free to ask. The basic idea is that you have to delete the lines that start with "-" and add the lines that start with "+". The "@@"'s separate blocks of consecutive "pasted" lines.

With this change, the player's anchor is at the bottom center, rather than at the top left (meaning that Player.x and Player.y represent where the sprite's bottom center is). This may be important for you later on.

Oh yeah I tried out the code and it worked! The only thing I'm confused about is why you multiplied the x values by 0.5?

[pgimeno]

Oh yeah I tried out the code and it worked! The only thing I'm confused about is why you multiplied the x values by 0.5?

To centre the position horizontally. The player's position is defined as its bottom centre. The horizontal centre is at the left corner plus half the width.

[MaxGamz]

Oh yeah I tried out the code and it worked! The only thing I'm confused about is why you multiplied the x values by 0.5?

To centre the position horizontally. The player's position is defined as its bottom centre. The horizontal centre is at the left corner plus half the width.

Oh I understand, thanks!