Camera attachment in Lua for 2D Game

[Butros55]

I am currently learning Programming with lua via CS50.

Im currently making a throwaway Project to try something new and learn more about the language.

My Problem now is that i would like to attach a camera to my main Character but if i do so it semms it isnt Rendering or Drawing anything where try to attach the camera. in the below code i made some comments where i tryed to attach the camera so far with "--tryed camera attach here" but none of them worked.



Im using the hump camera from vrld:
https://github.com/vrld/hump

Also i using a StateMachine from:
http://howtomakeanrpg.com



I want that the camera follows my MainCharacter and Render the Map i created with Tiled based on the position of the Character.
But like at the top said, everytime i try to attach the camera everything in the "cam:attach()---cam:detach()" function isnt drawing anymore.
If you need more a detailed version of my code feel free to look at my GitHub repository or ask in comments
https://github.com/Butros55/MyGameProject/tree/camera

If anyone could help or look at it i would be greatly apprechiated.


My current Player code looks like this:

Code: Select all

Player = Class{}
doublejump = 0
gravity = 1000

-- initilases Player
function Player:init()
    self.img = love.graphics.newImage('graphics/maincharacter/idle/adventurer-idle-00.png')

    self.width = self.img:getWidth()
    self.height = self.img:getHeight()

    self.x = VIRTUAL_WIDTH / 2
    self.y = VIRTUAL_HEIGHT - 10 - self.height

    self.dx = 200
    self.dy = 200
end

--updates Player for move jump or collision
function Player:update(dt)
    self:move(dt)
    self.dy = self.dy + gravity * dt

    -- limit jump to doublejump
        if love.keyboard.wasPressed('space') then
            if doublejump < 2 then
                self.dy = -250
                doublejump = doublejump + 1
            end
        end

    self.y = self.y + self.dy * dt
    self:collision()
end

--Checks for collision with screen(window)
function Player:collision()
    if self.y < 0 then
        self.y = 0
    elseif self.y > VIRTUAL_HEIGHT - 10 - self.height then
        self.y = VIRTUAL_HEIGHT - 10 - self.height

        -- reset double jump
        doublejump = 0
    end

    if self.x > VIRTUAL_WIDTH - self.width then
        self.x = VIRTUAL_WIDTH - self.width
    elseif self.x < 0 then
        self.x = 0
    end
end

-- Checks for keyinput and changes x
function Player:move(dt)
    if love.keyboard.isDown('right') then
        self.x = self.x + self.dx * dt
    elseif love.keyboard.isDown('left') then
        self.x = self.x - self.dx * dt
    end
end


--Renders Player img at position
function Player:render()

    --tryed camera attach here
        if love.keyboard.isDown('right') then
            love.graphics.draw(self.img, self.x, self.y)
        elseif love.keyboard.isDown('left') then
            love.graphics.draw(self.img, self.x, self.y, 0, -1, 1)
        else
            love.graphics.draw(self.img, self.x, self.y)
        end
    --tryed camera attach here
end

It gets called if the State form the StateMachine is currently "Playstate"

Code: Select all

PlayState = Class{__includes = BaseState}

function PlayState:init()
    self.player = Player()
end


function PlayState:update(dt)
    self.player:update(dt)
end

function PlayState:render()

    --tryed camera attach here
        self.player:render()
    --tryed camera attach here
end

Heres is the current StateMachine:

Code: Select all

StateMachine = Class{}

-- initilase States with list
function StateMachine:init(states)
    self.empty = {
        render = function() end,
        update = function() end,
        enter = function() end,
        exit = function() end
    }
    self.states = states or {}
    self.current = self.empty

end

--change function for current State
function StateMachine:change(stateName, enterParams)
    assert(self.states[stateName]) --check if state exist
    self.current:exit()
    self.current = self.states[stateName]()
    self.current:enter(enterParams)
end

--update current State with dt
function StateMachine:update(dt)
    self.current:update(dt)
end

--Render current State
function StateMachine:render()
    self.current:render()
end

And my Main code where the drawing comes in:

Code: Select all

function love.draw()
    -- draw with push at virtual resolution

--tryed camera attach here
    push:apply('start')

    -- scale backround to Virtual resolution
    backgroundWidth = gbackgrounds['background_0']:getWidth()
    backgroundHeight = gbackgrounds['background_0']:getHeight()
    backgroundWidth = gbackgrounds['background_1']:getWidth()
    backgroundHeight = gbackgrounds['background_1']:getHeight()
    backgroundWidth = gbackgrounds['background_2']:getWidth()
    backgroundHeight = gbackgrounds['background_2']:getHeight()

    love.graphics.draw(gbackgrounds['background_0'],
        -- draw at x, y
        0, 0,
        -- no rotation
        0,

        VIRTUAL_WIDTH / (backgroundWidth -1) , VIRTUAL_HEIGHT / (backgroundHeight - 1))
    
    love.graphics.draw(gbackgrounds['background_1'],
        -- draw at x, y
        0, 0,
        -- no rotation
        0,

        VIRTUAL_WIDTH / (backgroundWidth -1) , VIRTUAL_HEIGHT / (backgroundHeight - 1))
    
    love.graphics.draw(gbackgrounds['background_2'],
        -- draw at x, y
        0, 0,
        -- no rotation
        0,

        VIRTUAL_WIDTH / (backgroundWidth -1) , VIRTUAL_HEIGHT / (backgroundHeight - 1))

    --tryed camera attach here
        GameMap:draw()
        gStateMachine:render()
    --tryed camera attach here

    push:apply('end')
--tryed camera attach here
end

[zorg]

You're drawing 3 background images at the same coordinates... are those layers?
Also, you're mixing push with vrld's camera, so that'll introduce a bit more complexity than you're probably ready to handle at this time... but in any case:

All a camera does, is that it moves the world into the view of the viewport that gets drawn to the screen
so, if a character is at 60000, 30000 in the world, you'd move the camera to around -60000,-30000 to have that area be on the screen. (I'm saying around, due to the fact that cameras might have their x,y coords be either their top-left edge, or their center, it depends.)

On top of that, push also changes the previously rendered content to fit any window that's not aligned to what it expects the screen size to be, so that should be the very last step you do.