background image as level background (love2d)

[flaschenzug]

Hey there,

I would like to have a character that is followed by a camera.
And the character should be able to walk around in a world (a big image) that is in the background (no tiles needed).

But I can't find a working solution or even an example of that.

So what I am looking for is:

1. - we have a big image in the background ... e.g. 5000x5000 px (could be smaller later and just repeating itself like described here: https://stackoverflow.com/questions/358 ... ter-love2d)
2. - we see only part of the background-image (like the size of our screen)
3. - we start in the middle of the map

If the character walks around, the camera is keeping it in the center (I am using camera.lua for it: https://github.com/vrld/hump/blob/master/camera.lua)

Thanks for any ideas and/or hints.
And of course: Merry Christmas :-)

[BrotSagtMist]

Your char is at the center.
Have you asked yourself why you need a camera?
Your char is at the center.
Like its not moving, its a picture positioned at half the screen size.

As for using giant pictures as a map, this may work, but i would personally stay away from it.
There is a chance it will fail on some hardware or causes high resource usage.
But sure if you want, just use love.graphics.translate with the position of your player before drawing the player, then just reset it so its drawn to the center. (I have no clue how you even plan to use a camera lib in that scenario)

[flaschenzug]

Thanks Brot.
So you would suggest that I move the other elements instead?

This is my idea (mostly to learn a lot about how lua/löve works):
- There should be a spaceship (centered).
- There is a background.
- There are planets (the spaceship is not supposed to touch the planets)
- There are asteroids (same as planets - no touch)
- if possible: a defined space (lets say 10.000px x 10.000px but in a circle -> the ship can't leave that space

To make the flight a bit more interesting, there should be a background (stars e.g.).

From your experience: How would you implement the background? If not a big one, probably one that is repeating itself over and over again? And if I use this approach: https://stackoverflow.com/questions/358 ... ter-love2d , is this performing better?

[knorke]

Hi,
Do you already have the rest of your game working?
If you have the planets and asteroids working then you could do background stars in the same way - just without collision.

I would not use a dozen-thousand pixels image as background. Space is mostly empty anyway.
Instead draw individual stars.

You did not post what code you have written so far, so it is difficult to give advice.
One rarely finds an example/solution that exactly fits the problem. It is more important to understand the basic principles/math/logic and then you can create your own solutions.
Your link contains code for a moving character. It is a good starting point. However, if that is your current skill level then I would suggest some smaller steps before attempting a scrolling star field.
Try to draw one planet or star, without scrolling. Then draw multiple stars. Then add scrolling and camera and so on.
Break down the big problem into smaller problems.

[BrotSagtMist]

From your experience: How would you implement the background?

That is actually a tricky question as solutions usually pop up during code. And a background is not really an important part of the game. So i would fill in a dummy until the game is playable.

If the question however is "how would you create a dedicated background scene for a space battle?" then the answer is:
By using single images for each planet/asteroid.
Thing is that since the background is supposed to show objects that are far away they move at a different speed as your spaceship, even more, if they move the same speed its impossible to distinguish the background from the actual game objets.
Imagine passing a planet, then this moves slower then an enemy heading towards you, at the same time the stars in the background dont move at all.
This can only be done if each object has 3 values stored, X,Y and Z for the distance.
Aaaaand i am totally throwing an even more complicated solution at you.
You actually need to try out stuff for yourself/code something at this point.

[flaschenzug]

Do you already have the rest of your game working?
If you have the planets and asteroids working then you could do background stars in the same way - just without collision.

I would not use a dozen-thousand pixels image as background. Space is mostly empty anyway.
Instead draw individual stars.

You did not post what code you have written so far, so it is difficult to give advice.

Nothing works yet :-). I really just started but I am struggeling with a lot of problems :-).
This is why I didn't post any code.

Actually I was working on 2 things:

1. I wanted to add a background - it just looks boring, if you fly through dark space and nothing is happening.

2. I tried to apply kind of realistic space-physics to the spaceship.
So you always keep moving in the same direction until you change something using thrust.
So there is forward thrust, backward thrust, and sidwards to rotate the ship.
But when you rotate the ship, you keep flying in the same direction.


Here is what I have so far:

Code: Select all

math.randomseed(os.time())

basic_settings = require "basic-settings"


local game = {
    difficulty = 1,
    state = {
        menu = true,
        ingame = false,
        paused = false,
        ended = false,
    },
    score = 0,
    score_spawn_new_enemie = 5,
}

local fonts = {
    medium = {
        font_size = 16,
        font = love.graphics.newFont(16),
    },
    large = {
        font_size = 20,
        font = love.graphics.newFont(20),
    },
    massive = {
        font_size = 60,
        font = love.graphics.newFont(60),
    }
}

--local enemies = {}

local function changeGameState(state)
    game.state.menu = state == "menu"
    game.state.ingame = state == "ingame"
    game.state.paused = state == "paused"
    game.state.ended = state == "ended"

    print(game.state.menu, state)
end

local function startNewGame()
    changeGameState("ingame")

    game.score = 0

end


function calculateFlightDirection(angle)
   player.orientation = math.rad(angle) 
end


function love.keypressed(key)
    if key == "w" then -- forward thrust
        player.speed = player.speed + 1
        player.draw_thrust = 1
        player.reset.thrust = 1
    end
    if key == "s" then -- backward thrust
        player.speed = player.speed - 1
        player.draw_thrust = 0
        player.reset.thrust = 1
    end

    if key == "a" then
        player.angle = player.angle - 3
        if player.angle <= 0 then player.angle = 360 end
        player.draw_thrust = 0
        player.reset.thrust = 1
    end
    -- right side thrust
    if key == "d" then
        player.angle = player.angle + 3
        if player.angle >= 360 then player.angle = 0 end
        player.draw_thrust = 0
        player.reset.thrust = 1
    end
end



function love.load()
    love.mouse.setVisible(false)

    player_image = love.graphics.newImage("images/spaceship-sprite.png")
    player = {
        radius = 20,
        x = 200,
        y = 200,
        ox = player_image:getWidth(), -- offset x (caluclate the width of the image)
        oy = player_image:getHeight(), -- offset y (caluclate the height of the image)
        speed = 0,
        angle = 0, -- 360 degree to fly around in space
        orientation = 0,
        image = player_image,
        sprite = {
            show = 0,
            width = 135,
            height = 80,
            count_sprites = 2,
        },
        draw_thrust = 0,
        reset = {
            thrust = 0, -- 0 if no need to reset, 1 = check if reset is needed (using thrust_count)
            thrust_count = 0,
        }
    }

    spaceship_array = {}
    for i=0, 1, 1 do
        spaceship_array[i] = love.graphics.newQuad(player.sprite.width * i, 0, player.sprite.width, player.sprite.height, player.sprite.width*player.sprite.count_sprites, player.sprite.height)
    end

    --background_image = love.graphics.newImage("images/universe-background.jpg")

    startNewGame()
end

function love.update(dt)

    -- adapt the speed to the actual direction of the player
    if player.speed ~= 0 then
        player.x = player.x + (.1 * player.speed) -- for both directions, because player.speed could be negative
    end

    if player.reset.thrust > 0 and player.reset.thrust_count < .5 then
        print("reset.thrust != 0", player.reset.thrust)
        player.reset.thrust_count = player.reset.thrust_count+dt
    else
        print("no need to reset, ", player.reset.thrust)
        player.reset.thrust = 0
        player.reset.thrust_count = 0
        player.draw_thrust = 0
    end

    calculateFlightDirection(player.angle)

end


function love.draw()
    love.graphics.setFont(fonts.medium.font)
    love.graphics.printf("FPS: " .. love.timer.getFPS(), fonts.medium.font, 10, love.graphics.getHeight()-30, love.graphics.getWidth())

    if game.state.ingame then
        
        print("draw thrust: ", player.draw_thrust, "reset thrust: ", player.reset.thrust, "reset thrust count: ", player.reset.thrust_count)

        love.graphics.draw(player.image, spaceship_array[player.draw_thrust], player.x, player.y,
                player.orientation, 1, 1, player.ox/4, player.oy/4)

    end

end

Rotation works (kind of).
Forward and backwards thrust too.
But actually the thrust is only applied to the x-axis ... Not sure how to solve that.

[knorke]

It is a good idea to move like Pacman before you move like a realistic spaceship.
Like a spaceship, Pacman is also always moving but his physics are simpler.

I can not run that code because I am missing spaceship-sprite.png and "basic-settings" file.

But actually the thrust is only applied to the x-axis ... Not sure how to solve that.

Your code only changes the x coordinate of the player:

Code: Select all

        player.x = player.x + (.1 * player.speed) -- for both directions, because player.speed could be negative

What did you try to change player.y ?
If you want to figure out the math yourself, here is a hint:
You have one velocity ( player.speed ) and need to break it up into x and y components.
https://www.khanacademy.org/science/phy ... components

[flaschenzug]

Thanks knorke, I love to figure out the math on my own :-).
Going to have a look at your link.

Happy new year :-)