Error to process draw newRect

Audio and Graphics
#1

Hi,

I’m trying to create a Switch button with grid effect, similar than attached in this thread. To do it I created the following code:

 --Switch part local switchTop = display.newGroup() switchTop.anchorChildren = true switchTop.x = -15 switchTop.state = false switchTop:addEventListener( "touch", onSwitch ) group:insert(switchTop) local s = display.newRoundedRect(switchTop, 0, 0, 30, 25, 5) s.stroke = {type="image", filename="resource/images/stroke\_4.png"} s.strokeWidth = 2 s:setStrokeColor( .5 ) for i = 1, 7 do local l = display.newRect(switchTop, -12+(i\*3), 10, 1, 1) l:setFillColor( .5 ) local m = display.newRect(switchTop, -12+(i\*3), 8, 1, 1) m:setFillColor( .5 ) local n = display.newRect(switchTop, -12+(i\*3), 6, 1, 1) n:setFillColor( .5 ) local o = display.newRect(switchTop, -12+(i\*3), 4, 1, 1) o:setFillColor( .5 ) local p = display.newRect(switchTop, -12+(i\*3), 2, 1, 1) p:setFillColor( .5 ) local u = display.newRect(switchTop, -12+(i\*3), 0, 1, 1) p:setFillColor( .5 ) local q = display.newRect(switchTop, -12+(i\*3), -2, 1, 1) q:setFillColor( .5 ) local r = display.newRect(switchTop, -12+(i\*3), -4, 1, 1) r:setFillColor( .5 ) local s = display.newRect(switchTop, -12+(i\*3), -6, 1, 1) s:setFillColor( .5 ) local t = display.newRect(switchTop, -12+(i\*3), -8, 1, 1) t:setFillColor( .5 ) end

But when I process to console terminal it doesn’t show simetrically between them. What happens?

Thanks at all,

#2

I would suggest that you not pour any energy into solving this.  If you want a grid texture on your toggle-button, then I’d use an image. 

textured_buttton.png

Using individual display.newRect() objects will:

  • Alias and look bad
  • Not always align as expected due to scaling and rounding issues.  This is one of these cases where a small error shows up in the micro-scale (your attempt to implement a grid on a button), but is not visible in the macro (say a large grid of elements on the screen).
  • Is VERY inefficient and a waste of memory and rendering cycles.

A texture on the other hand would be easy to implement, save memory and render time, and be easily adjusted later if you should choose to change it.

PS - On a final note, when you see a visual aberration, do not trust what you see in the simulator.  Verify it on a device.  The simulator is great (awesome really), but it has to work within certain constraints imposed by the OS, your screen, video card drivers, etc.,  and may not reflect exactly what the app will look like on the device.

#3

I would suggest that you not pour any energy into solving this.  If you want a grid texture on your toggle-button, then I’d use an image. 

textured_buttton.png

Using individual display.newRect() objects will:

  • Alias and look bad
  • Not always align as expected due to scaling and rounding issues.  This is one of these cases where a small error shows up in the micro-scale (your attempt to implement a grid on a button), but is not visible in the macro (say a large grid of elements on the screen).
  • Is VERY inefficient and a waste of memory and rendering cycles.

A texture on the other hand would be easy to implement, save memory and render time, and be easily adjusted later if you should choose to change it.

PS - On a final note, when you see a visual aberration, do not trust what you see in the simulator.  Verify it on a device.  The simulator is great (awesome really), but it has to work within certain constraints imposed by the OS, your screen, video card drivers, etc.,  and may not reflect exactly what the app will look like on the device.