How to convert a image into a body in Lua ??

[-Bangester-]

--I'm new to this language--

I'm trying to make a maze game and I need an image that can act as a body
I need to set the image to a static body type and I'm not sure how to do that .
I want the square that is drawn to not go through the image .
if there is any other way to do that or a solution for this that would be very helpful
I'm also getting an error because I tried a solution from my head but it doesn't work
Any Help Would be GREATLY Appreciated

THIS IS MY CODE
|
v
____________________________________________




function love.load()
canvas = love.graphics.newCanvas(800, 600)

-- square = love.graphics.newImage("Mymaze-removebg-preview.png")
love.graphics.line( 30, 50, 332, 145)



-- rect = Collider:addRectangle(200,400,400,20)

-- Rectangle is drawn to the canvas with the regular/default alpha blend mode ("alphamultiply").
love.graphics.setCanvas(canvas)

-- love.graphics.setBlendMode("alpha")
--love.graphics.setColor(1, 0, 0, .5)
-- love.graphics.rectangle("line", 0,0, 100,100)

love.graphics.setCanvas()


world = love.physics.newWorld(0,0, true)

--body1 = love.physics.newBody( world, player_x, player_y, "dynamic" )
--shape = love.physics.newRectangleShape( 50, 50 )
--fixture = love.physics.newFixture( body1, shape, 10 )

-- body2 = love.physics.newBody( world, player_x, player_y, "dynamic" )
--shape = love.physics.newRectangleShape( 90, 90 )
-- fixture = love.physics.newFixture( body2, shape, 10 )
-- body1 = Shape:getBody( )





Player ={}
player_x=100
player_y=100
local point

-- local distance = (maze.Position - square.Position).magnitude


objects = {} -- table to hold all our physical objects
--let's create a ball
objects.square = {}
objects.square.body = love.physics.newBody(world, player_x, player_y, "dynamic") --place the body in the center of the world and make it dynamic, so it can move around

objects.square.shape = love.physics.newRectangleShape( 50,50) --the ball's shape has a radius of 20
objects.square.fixture = love.physics.newFixture(objects.square.body, objects.square.shape, 1) -- Attach fixture to body and give it a density of 1.
-- objects.ball.fixture:setRestitution(0.9) --let the ball bounce


---------------------------------------------------------------

-- table to hold all our physical objects
--let's create a ball
-- objects.square12 = {}
-- objects.square12.body2 = love.physics.newBody(world, 100, 100, "static") --place the body in the center of the world and make it dynamic, so it can move around

--objects.square12.shape = love.physics.newRectangleShape( 100,50) --the ball's shape has a radius of 20
--objects.square12.fixture = love.physics.newFixture(objects.square12.body2, objects.square12.shape, 1) -- Attach fixture to body and give it a density of 1.
-- objects.ball.fixture:setRestitution(0.9) --let the ball bounce

--Player = body1
--maze =body2


--player.x = player_x
--player.y = player_y
local points = {}
----------------------------------------------------------------------------------------------
local getX
local getY

--objects.maze = {}
-- objects.maze.body = love.physics.newBody(world, 100, 100, "static") --place the body in the center of the world and make it dynamic, so it can move around
--


-- objects.maze.fixture = love.physics.newFixture(objects.maze.body, objects.maze.shape, 1) -- Attach fixture to body and give it a density of 1.
-- objects.ball.fixture:setRestitution(0.9) --let the ball bounce
objects.square12 = {}

objects.square12.body2 = love.physics.newBody( world, 100, 100, "static" )
-- objects.square12.image = love.physics.newRectangleShape(50,50 ) --the ball's shape has a radius of 20

objects.square12.shpe = objects.square12.image("maze")

objects.square12.fixture = love.physics.newFixture(objects.square12.body2, objects.square12.shape, 1) -- Attach fixture to body





--objects.square12.body2 = maze




end





-- create the point object









function love.update(dt)
local distancex
local distancey

world:update(dt)











x, y = objects.square.body:getPosition( )







if love.keyboard.isDown("d") then

--if objects.square12.body2 == maze then
--touching = objects.square.body:isTouching(objects.square12.body2)

if touching == true then
objects.square.body:setLinearVelocity( 0, 0 )
end

--end
--player_x =player_x + 2

objects.square.body:setLinearVelocity( 70, 0 )
else






end
if love.keyboard.isDown("a") then
player_x =player_x -2
objects.square.body:setLinearVelocity( -70, 0)
objects.square.body:setLinearVelocity( -70, 0)
objects.square.body:setLinearVelocity( -70, 0 )


else



end

if love.keyboard.isDown("s") then
player_y =player_y +2
objects.square.body:setLinearVelocity( 0, 70 )
else


end

if love.keyboard.isDown("w") then
player_y =player_y -2
objects.square.body:setLinearVelocity( 0, -70 )
else


end


if love.keyboard.isDown("x") then
player_y =player_y -2
objects.square.body:setLinearVelocity( 0, 0 )
else
end








--function title(maze)
-- love.graphics.draw(maze)
--end
end



function love.draw()
--title(maze)
--love.graphics.rectangle("fill",player_x,player_y, 20,20)
--love.draw.image("Mymaze-removebg-preview-removebg-preview.png")
love.graphics.draw( objects.square12.shape , 100, 100)
--love.graphics.draw(square, 20, 20)
--maze=body2
--draw.add("rect", 10, 50, 220, 200, "blue", 3)
--draw.overdraw()
--love.graphics.shape("fill", player_x, player_y, 50, 50, 2, 2,"2")
--love.graphics.rectangle("fill", objects.square12.body2:getX(), objects.square12.body2:getY(),20,20)

love.graphics.setColor(0.76, 0.18, 0.05) --set the drawing color to red for the ball
--love.graphics.rectangle("fill",player_x,player_y, 20,20 )
love.graphics.rectangle("fill", objects.square.body:getX(), objects.square.body:getY(),20,20)

-------------------------------
--love.graphics.rectangle("fill", objects.square12.body2:getX(), objects.square12.body2:getY(),100,100)
--love.graphics.draw(maze.image, objects.square12.body2:getX(), objects.square12.body2:getY(), objects.square12.body2:getAngle(), 1, 1, objects.square12.body2s.image:getWidth()/2, objects.square12.body2.image:getHeight()/2)
----------------------------------------------
--love.graphics.rectangle("fill", objects.square12.body2:getX(), objects.square12.body2:getY(),50,50)
if objects.square12.body2.image then
touching = objects.square.body:isTouching(objects.square12.body2 )

if touching == true then
objects.square.body:setLinearVelocity( 0, 0 )
end

end


red= 115/255
green = 27/255
blue = 135/255
alpha = 50/100
love.graphics.setBackgroundColor( red, green, blue, alpha)



end

[Andlac028]

Please wrap your code to code tags to make it more readable:
[code]
-- your code here (will be rendered and highlighted)
[/code]

[BrotSagtMist]

Pretty unclear what you are trying to perform here.
But really think about if you really need the physics module to do it.
This thing isnt easy to use and its rarely helpful in easy games.

[Bigfoot71]

I believe it's something like this what he wants (image from Defold engine documentation):


I tried to do the same quickly and very roughly using my polygon library (which is still working), there is certainly a much more optimized way to do it:

Code: Select all

local pm = require("polyman")

function love.load()

    -- Load image data and image
    imageData = love.image.newImageData("image.png")
    image = love.graphics.newImage(imageData)

    -- Get the dimensions of the image
    width, height = image:getDimensions()

    -- Create a table that will contain the points of each opaque pixel
    -- (this is a crude method, avoided on large images)

    points = {}
    for x = 0, width - 1 do
        for y = 0, height - 1 do

            -- Get alpha value of pixel
            local _, _, _, alpha = imageData:getPixel(x, y)

            -- Apply a threshold to the alpha value
            if alpha >= .5 then
                table.insert(points, x)
                table.insert(points, y)
            end

        end
    end

    -- Apply convex hull
    points = pm.operations.convexHull(points)
    
    -- Apply color background
    love.graphics.setBackgroundColor(0,.5,0)

end

function love.draw()

    love.graphics.draw(image)
    love.graphics.polygon("line", points)

end

Here is the result:


Note that love.physics.newPolygonShape only accepts 8 vertices max so it will still be necessary to reduce the number of vertices.

However, as the others say, you don't need to worry so much and use such a heavy solution for such a game
If dealing with collisions is bothering you, you can use the BUMP library for example.

Otherwise the best would be to export these vertex lists corresponding to each image and store them in separate files, and not calculate them each time the game starts, as an engine like Defold would do for example.

[darkfrei]

I think it can be the map from image:

Code: Select all

-- Convert an image to a 2D brightness map
function imageToMap(image)
    print('image', image)

    -- Create an image data object from the provided image
    local imageData = love.image.newImageData(image)

    -- Create an empty 2D array to represent the map (map[y][x])
    local map = {}

    -- Get the width and height of the image
    local width, height = imageData:getDimensions()

    -- Iterate through the rows and columns of the image
    for y = 1, height do
        map[y] = {}
        for x = 1, width do
            -- Get the color of the pixel at coordinates (x, y)
            local r, g, b, a = imageData:getPixel(x - 1, y - 1)

            -- Convert color values from [0..1] to [0..255]:
            r, g, b, a = love.math.colorToBytes(r, g, b, a)

            -- Calculate the brightness of the pixel (in the range 0-255)
            local brightness = math.floor((r + g + b) / 3)

            -- Set the value of the map at position (y, x) to the calculated brightness
            map[y][x] = brightness -- Ranges from 0 to 255
        end
    end

    -- Return the generated brightness map
    return map
end

After that convert tiles to rectangles and set the physics objects.

[Bigfoot71]

I think it can be the map from image:

Code: Select all

local function image_to_map(image)
  local imageData = love.graphics.newImageData (image)
-- map as map[y][x]
  local map = {}
  -- get the width and height of the image
local width, height = imageData:getDimensions()

-- iterate through the rows and columns of the image
    for y = 1, height do
	map[y] = {}
	for x = 1, width do
		-- get the color of the pixel at (x,y)
		local r, g, b, a = imageData:getPixel(x-1, y-1)
		
		-- convert [0..1] to [0..255]:
		r, g, b, a = love.math.colorToBytes( r, g, b, a )

		-- calculate the brightness of the pixel (0-255)
		local brightness = (r + g + b) / 3

		-- set the value of the map at (y,x) to the brightness
		map[y][x] = brightness -- 0 to 255
	end
end

return map
  

How and in what context is this function used? It just calculates a gray average for each pixel, am I missing something?

[darkfrei]

How and in what context is this function used? It just calculates a gray average for each pixel, am I missing something?

I am using such maps as collision maps, for example if the value is more than 127 then collision with it.

See code of levels in
https://itch.io/jam/love2d-jam-2023/rate/1943984
0 means free tile,
1 means wall,
2 is ladder
3 is player default position and free tile under it,
4 is an enemy default position and free tile, etc.

[knorke]

Hi
Your code gives an error if I copy&paste it from your post.

I'm trying to make a maze game and I need an image that can act as a body
I need to set the image to a static body type and I'm not sure how to do that .

From technical view that does not make sense.
An image can not "act as a body", it is just a graphic and has no influence on the box2D physics simulation.
What you can do is however read the coordinates of the body and then draw an image at those coordinates.

It seems like you used this tutorial? https://love2d.org/wiki/Tutorial:Physics
So I based my example on that.

The tutorial draws the ball like this:

Code: Select all

   -- set the drawing color to red for the ball
  --love.graphics.setColor(1,0,0,0.5)
  --love.graphics.circle("fill", objects.ball.body:getX(),
  --                     objects.ball.body:getY(), objects.ball.shape:getRadius())

So I added this line to load an image:

Code: Select all

  ballImage = love.graphics.newImage("Osphere.png")

and replaced the ball drawing code with this:

Code: Select all

  love.graphics.draw(ballImage, objects.ball.body:getX(),  objects.ball.body:getY() ,0,_,_ , 32,32)

The image I used is sized 64x64 pixels, so I also changed the ball radius to 32 so that physics-body and graphic-image fit together.
The 0 is the rotation when drawing.
_,_ means empty two parameters, those would be for rescaling the image in x & y axis - not needed here, so left empty.
32,32 is for moving the drawing origin of the image to the center of the physics-body.

If you want to replace the drawing of the floor and walls/blocks with images then you can do so in a similar way.

[Bigfoot71]

How and in what context is this function used? It just calculates a gray average for each pixel, am I missing something?

I am using such maps as collision maps, for example if the value is more than 127 then collision with it.

See code of levels in
https://itch.io/jam/love2d-jam-2023/rate/1943984
0 means free tile,
1 means wall,
2 is ladder
3 is player default position and free tile under it,
4 is an enemy default position and free tile, etc.

Ah okay I see, I stayed on the idea of ​​polygons, my apologies (although I'm not sure about the optimization of such a technique, might as well exported an already built vertex list)

[darkfrei]

Ah okay I see, I stayed on the idea of ​​polygons, my apologies (although I'm not sure about the optimization of such a technique, might as well exported an already built vertex list)

It's nice to make maps as pictures:
(See white as walls)

(From Reaction diffusion https://love2d.org/forums/viewtopic.php?f=5&t=92650)


Update: See Image to polygon converter