Custom rectangle class not rendering/moving correctly

[DerSchwarzePeter]

I'm trying to develop a small "Application" to visualize the shadowrun sessions of my group.
Löve may lack a simple manipulatable rectangle, which I'd like to use to highlight the selected tiles, so I created it myself.
I've previously coded this functionality in C++/SFML (working), so it's more or less copy & paste (what i thought atleast).
But unfortunately the created rectangle does not move accordingly/does not get rendered correctly based on the submitted coordinates.

My rectangle class:

Code: Select all

Rectangle = {}
Rectangle.__index = Rectangle

function Rectangle:create(size, color, thickness)
    --rectangle class to use as Rectangle
    local rctngl = {}
    setmetatable(rctngl, Rectangle)
    rctngl.size = size
    rctngl.color = color
    rctngl.thickness = thickness
    rctngl.x = 0
    rctngl.y = 0
    rctngl.vertex1 = {rctngl.x, rctngl.y, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--TopLeftOutside
    rctngl.vertex2 = {rctngl.x + rctngl.size.x, rctngl.y, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--TopRightOutside
    rctngl.vertex3 = {rctngl.x + rctngl.size.x, rctngl.y + rctngl.size.y, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--BottomRightOutside
    rctngl.vertex4 = {rctngl.x, rctngl.y + rctngl.size.y, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--BottomLeftOutside
    rctngl.vertex5 = {rctngl.x + rctngl.thickness, rctngl.y + rctngl.thickness, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--TopLeftInside
    rctngl.vertex6 = {rctngl.x + rctngl.size.x - rctngl.thickness, rctngl.y + rctngl.thickness, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--TopRightInside
    rctngl.vertex7 = {rctngl.x + rctngl.size.x - rctngl.thickness, rctngl.y + rctngl.size.y - rctngl.thickness, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--BottomRightInside
    rctngl.vertex8 = {rctngl.x + rctngl.thickness, rctngl.y + rctngl.size.y - rctngl.thickness, 0, 0, rctngl.color.red, rctngl.color.green, rctngl.color.blue, rctngl.color.alpha}--BottomLeftInside    
    rctngl.verticies = {rctngl.vertex1, rctngl.vertex2, rctngl.vertex5,
    rctngl.vertex2, rctngl.vertex5, rctngl.vertex6,
    rctngl.vertex2, rctngl.vertex3, rctngl.vertex6,
    rctngl.vertex3, rctngl.vertex6, rctngl.vertex7,
    rctngl.vertex3, rctngl.vertex4, rctngl.vertex7,
    rctngl.vertex4, rctngl.vertex7, rctngl.vertex8,
    rctngl.vertex4, rctngl.vertex5, rctngl.vertex8,
    rctngl.vertex4, rctngl.vertex5, rctngl.vertex1
    } 
    rctngl.mesh = love.graphics.newMesh(rctngl.verticies, "triangles", "dynamic")
    
    return rctngl
end

The move function:

Code: Select all

function Rectangle:moveTo(x,y)
    self.x = x
    self.y = y
    self.vertex1 = {self.x, self.y, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--TopLeftOutside
    self.vertex2 = {self.x + self.size.x, self.y, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--TopRightOutside
    self.vertex3 = {self.x + self.size.x, self.y + self.size.y, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--BottomRightOutside
    self.vertex4 = {self.x, self.y + self.size.y, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--BottomLeftOutside
    self.vertex5 = {self.x + self.thickness, self.y + self.thickness, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--TopLeftInside
    self.vertex6 = {self.x + self.size.x - self.thickness, self.y + self.thickness, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--TopRightInside
    self.vertex7 = {self.x + self.size.x - self.thickness, self.y + self.size.y - self.thickness, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--BottomRightInside
    self.vertex8 = {self.x + self.thickness, self.y + self.size.y - self.thickness, 0, 0, self.color.red, self.color.green, self.color.blue, self.color.alpha}--BottomLeftInside    
    self.verticies = {self.vertex1, self.vertex2, self.vertex5,
    self.vertex2, self.vertex5, self.vertex6,
    self.vertex2, self.vertex3, self.vertex6,
    self.vertex3, self.vertex6, self.vertex7,
    self.vertex3, self.vertex4, self.vertex7,
    self.vertex4, self.vertex7, self.vertex8,
    self.vertex4, self.vertex5, self.vertex8,
    self.vertex4, self.vertex5, self.vertex1
    }
    self.mesh:setVertices(self.verticies, 1)
    print("UppaLeft")
    print("Rectangle X:\t", self.x, "\tRectangle Y:\t", self.y)
    print("LowwaRight")
    print("Rectangle X:\t", self.x + self.size.x, "\tRectangle Y:\t", self.y + self.size.y)
    self:draw()
end

I'm invoking this function via an instance of the player class using:

Code: Select all

function Player:moveIndicator()
    x, y = love.mouse.getPosition()
    print("Mouse X:\t", x, "\tMouse Y:\t", y)
    self.indicator:moveTo(levelValue(x, self.indicator.size.x), levelValue(y, self.indicator.size.y))
end

The levelValue function is supposed to perfectly allign the rectangle with the tiles:

Code: Select all

function levelValue(x, y)
    local a = math.floor( x )
    local b = math.floor( y )
    if a % b ~=  0 then
        local fac = a % b
        print("LevelValue:\t", a-fac)
        return a - fac
    else
        print("LevelValue:\t", a)
        return a
    end
end

A similar issue occured using C++/SFML, but was fixed by switching to fullscreen window mode.
I've checked my code several times and I've come to the conclusion that I'm either blind or dumb.
It might also be a misconfiguration or a bug.
If someone could have a look at this I'd be grateful.

The current mouse position is represented by the white dot

Screenshot from 2017-08-28 17-18-58.png (8.19 KiB) Viewed 6406 times

The Issue
(the "gap" increases the further you go)

Screenshot from 2017-08-28 17-19-02.png (8.21 KiB) Viewed 6406 times

Cheers,
DerSchwarzePeter

[grump]

I haven't checked all of your code thoroughly. It's pretty messy and I'm not even trying to understand it, but I assume you just want a quick solution for your problem that the click position does not evaluate to the correct grid cell, so here it is:

Code: Select all

-- replace your current function levelValue with this:
function levelValue(x, y)
	return math.floor(x / math.max(1, y)) * 32;
end

8 KB code to draw a rectangle is remarkable tho There's a love.graphics.rectangle function that you could use instead.

[DerSchwarzePeter]

Thank you Grump for your help.
Your function fixed the issue.
I've checked into the debugging prints to find out that although I've only used 64 as size for the rectangle,
it is actually 32 pixels in size.
I don't know if this is intended behaviour or I missed out on playing with .toPixels().
Nonetheless this topic can be closed.

8 KB code to draw a rectangle is remarkable tho There's a love.graphics.rectangle function that you could use instead.

Yeah if you want a "take-your-single-use-rectangle-and-suffer" rectangle then love.graphics.rectangle is fine.
From https://love2d.org/wiki/love.graphics.rectangle:

Returns
Nothing.

^Basically triggers me.
I need something to work with and if love2d doesn't come with the features I need, I gotta write them myself.
Also my class can be extended and it comes with more options to play with than love.graphics.rectangle and love.physics.newRectangleShape combined.
As long as it's not 8k LOC to draw a rectangle, it's fine.

It's pretty messy and I'm not even trying to understand it...

WIP, get your free sample of cancer now, we'll fix it after release
Sorry, tho <3

[grump]

8 KB code to draw a rectangle is remarkable tho There's a love.graphics.rectangle function that you could use instead.

Yeah if you want a "take-your-single-use-rectangle-and-suffer" rectangle then love.graphics.rectangle is fine.
From https://love2d.org/wiki/love.graphics.rectangle:

Returns
Nothing.

^Basically triggers me.

It draws a rectangle. What do you want it to return?

As long as it's not 8k LOC to draw a rectangle, it's fine.

Sure, if you insist on reinventing the wheel and doing things the most complicated and convoluted way possible. The 8 KB abomination could be reduced to maybe 10 or 15 lines with the same features and without all the bugs. But it's your time and your own sanity after all

[zorg]

Alternatively, one draws a grid with long-ass love.graphics.lines going horizontally and vertically, then overlays 4 more lines with another color for unfilled selected rectangle... that said, i can understand wanting to use meshes and stuff.

[DerSchwarzePeter]

It draws a rectangle. What do you want it to return?

I need an manipulatable object.

Sure, if you insist on reinventing the wheel and doing things the most complicated and convoluted way possible.

Might it be that we are talking about different things?
You always reference love.graphics.rectangle, but I need this.

The 8 KB abomination could be reduced to maybe 10 or 15 lines with the same features and without all the bugs. But it's your time and your own sanity after all

The source still contains some debuggings code (6.8kB clean), but I'd love to see your implementation of a fully modifiable rectangle class in 15 LOC or less.
You can skip the setColor2 function if you want.
@zorg Could you be our adjudicator for this?

Alternatively, one draws a grid with long-ass love.graphics.lines going horizontally and vertically, then overlays 4 more lines with another color for unfilled selected rectangle... that said, i can understand wanting to use meshes and stuff.

Those lines are temporary until the tilemap is finished and loaded(I didn't have a look at sti).
Meshes are life, meshes are love.

[grump]

Sure, here you go, untested code.

Code: Select all

local Rectangle = {}

function Rectangle.create(x, y, w, h, color, thickness)
	local self = {}
	self.x, self.y, self.w, self.h, self.color, self.thickness = x, y, w, h, color or {255, 255, 255}, thickness or 1
	setmetatable(self, { __index = Rectangle })
	return self
end

function Rectangle:draw()
	love.graphics.setColor(self.color)
	love.graphics.setLineWidth(self.thickness)
	love.graphics.rectangle("line", self.x, self.y, self.x + self.w, self.y + self.h)
end

Does everything your code does.

Code: Select all

local rect = Rectangle.create(1, 2, 3, 4)
rect.color = {255, 0, 0, 255} -- setcolor
rect.color[4] = 128 -- setalpha
rect.x, rect.y = 100, 100 -- moveto
rect.w, rect.h = 200, 200 -- resize
rect:draw()

If you insist on your convenience functions, they're trivial to add.

[DerSchwarzePeter]

Sure, here you go, untested code.

Code: Select all

local Rectangle = {}

function Rectangle.create(x, y, w, h, color, thickness)
	local self = {}
	self.x, self.y, self.w, self.h, self.color, self.thickness = x, y, w, h, color or {255, 255, 255}, thickness or 1
	setmetatable(self, { __index = Rectangle })
	return self
end

function Rectangle:draw()
	love.graphics.setColor(self.color)
	love.graphics.setLineWidth(self.thickness)
	love.graphics.rectangle("line", self.x, self.y, self.x + self.w, self.y + self.h)
end

Does everything your code does.

Code: Select all

local rect = Rectangle.create(1, 2, 3, 4)
rect.color = {255, 0, 0, 255} -- setcolor
rect.color[4] = 128 -- setalpha
rect.x, rect.y = 100, 100 -- moveto
rect.w, rect.h = 200, 200 -- resize
rect:draw()

If you insist on your convenience functions, they're trivial to add.

Ohh, seems nice
Nonetheless I'm going to use my complicated and convoluted Code.
I wrote it and even if it's crap, I'm still proud of it.
Comming from C++/Python it's arkward to see your function calls, they look like you are trying to access members.
Need to learn a lot about Lua, as this is my first attempt.

[grump]

Sure, dude. Have fun! Baby steps are always the hardest!

[Beelz]

Comming from C++/Python it's arkward to see your function calls, they look like you are trying to access members.
Need to learn a lot about Lua, as this is my first attempt.

Using semicolon notation is syntactic sugar in Lua making the first argument self.

These:

Code: Select all

function rect:update(dt)
	--stuff
end

rect:update(dt)

Are the same as:

Code: Select all

function rect.update(self, dt)
	--stuff
end
	
rect.update(rect, dt)