rectangle - different border color for each side

Solar2D General Questions/Discussion
#1

Hi,

how do i color each side of the border of my rect, with a different color,

or just color up just one border and the rest leave transparent?

#2

Corona only supports one color for the entire border.  

You can achieve this using a rectangle and four lines.

-- Something like this (not tested;may contain typos) -- local rect = display.newRect( 100, 100, 100, 100 ) local rleft= display.newLine( rect.x - rect.contentWidth/2, rect.y - rect.contentHeight/2, rect.x - rect.contentWidth/2, rect.y + rect.contentHeight/2 ) local rtop = display.newLine( rect.x - rect.contentWidth/2, rect.y - rect.contentHeight/2, rect.x + rect.contentWidth/2, rect.y - rect.contentHeight/2 ) local rright = display.newLine( rect.x + rect.contentWidth/2, rect.y - rect.contentHeight/2, rect.x + rect.contentWidth/2, rect.y + rect.contentHeight/2 ) local rbot = display.newLine( rect.x - rect.contentWidth/2, rect.y + rect.contentHeight/2, rect.x + rect.contentWidth/2, rect.y + rect.contentHeight/2 ) rleft.strokeWidth = 2 rleft:setStrokeColor(1,0,0) rtop.strokeWidth = 2 rtop:setStrokeColor(0,1,0) rright.strokeWidth = 2 rright:setStrokeColor(0,0,1) rbot.strokeWidth = 2 rbot:setStrokeColor(1,0,1)
#3

You trying to get something like the game “Color Switch”?

#4

roaminggamer - too many objects…

Infisnyp  - No, why?

p.s Im building some kind of maze

#5

@itaylike Regarding your “too many objects” remark, I don’t think you have much of a choice. If you want code-generated rectangles with multiple border colors, you will need multiple objects. Other options include using images and shaders. Personally, if it was me, I would use roaminggamers proposed approach. I would also figure out how to minimize the number of lines so that if two red lines, for example, are adjacent, I would use just one polyline.

#6

Ok, thanks.

#7

or if each block needs to be treated as one you can put them in a display.newGroup() or display.newContainer() and treat them all as one.

#8

Corona only supports one color for the entire border.  

You can achieve this using a rectangle and four lines.

-- Something like this (not tested;may contain typos) -- local rect = display.newRect( 100, 100, 100, 100 ) local rleft= display.newLine( rect.x - rect.contentWidth/2, rect.y - rect.contentHeight/2, rect.x - rect.contentWidth/2, rect.y + rect.contentHeight/2 ) local rtop = display.newLine( rect.x - rect.contentWidth/2, rect.y - rect.contentHeight/2, rect.x + rect.contentWidth/2, rect.y - rect.contentHeight/2 ) local rright = display.newLine( rect.x + rect.contentWidth/2, rect.y - rect.contentHeight/2, rect.x + rect.contentWidth/2, rect.y + rect.contentHeight/2 ) local rbot = display.newLine( rect.x - rect.contentWidth/2, rect.y + rect.contentHeight/2, rect.x + rect.contentWidth/2, rect.y + rect.contentHeight/2 ) rleft.strokeWidth = 2 rleft:setStrokeColor(1,0,0) rtop.strokeWidth = 2 rtop:setStrokeColor(0,1,0) rright.strokeWidth = 2 rright:setStrokeColor(0,0,1) rbot.strokeWidth = 2 rbot:setStrokeColor(1,0,1)
#9

You trying to get something like the game “Color Switch”?

#10

roaminggamer - too many objects…

Infisnyp  - No, why?

p.s Im building some kind of maze

#11

@itaylike Regarding your “too many objects” remark, I don’t think you have much of a choice. If you want code-generated rectangles with multiple border colors, you will need multiple objects. Other options include using images and shaders. Personally, if it was me, I would use roaminggamers proposed approach. I would also figure out how to minimize the number of lines so that if two red lines, for example, are adjacent, I would use just one polyline.

#12

Ok, thanks.

#13

or if each block needs to be treated as one you can put them in a display.newGroup() or display.newContainer() and treat them all as one.