Why can't I draw a clean looking button?

By mjbellantoni Date 2013-07-21 09:58

I'm trying to create a clickable button and I'm having a hard time getting it to look the way I want. What I want is a filled rectangle with a tidy one pixel border. I've tried a couple of different approaches both without success. Specifically, I have a light grey background, a light blue button, and a dark blue border for the button. There are no gradients.

Approach #1: Draw it using quads. The colors are correct, but I can't reliably get the bottom border to show up. The way I do this is to draw a dark blue quad and then on top draw a light blue quad which is two pixels skinnier and shorter.

Approach #2: Draw it using images. The borders show up, but the leftmost one is too light. In fact, all of the colors in the button have different RGB values than the original. Also, a slight gradient is introduced between the light blue fill of the button and the dark blue border. Here's the code for that:

@blue_button = Gosu::Image.new(@window , "assets/blue-button.png", true)
@blue_button.draw(@x, @y, 100, 1, 1, 0xffffffff, :default)

Any ideas on the best way to do this or any thoughts about what I'm doing wrong?

Thank you!

By oli.obk Date 2013-07-21 10:50

looks good in general.
the only thing that i can think of is that your x and y are not integers, then some interpolation is bound to happen, causing odd stuff :)

another way would be a light blue box and then manually draw 4 lines on the sides.
but then again, drawing lines is odd, too, since it sometimes looses pixels at the beginning or end.

By mjbellantoni Date 2013-07-21 15:01

I tried the quad-and-four-lines approach but those results were also problematic. Specifically, I one of the corners was missing a pixel. I've verified that my x and y are integers. Thanks for the good thoughts though!

By jlnr (dev) Date 2013-07-21 12:38

I don't think I've seen a machine where the quad approach wouldn't work. Does this look right on your computer?


require 'rubygems'
require 'gosu'

class Window < Gosu::Window
  def draw_rect x, y, w, h, c
    draw_quad x, y, c,
              x + w, y, c,
              x, y + h, c,
              x +w, y + h, c, 0
  end
  
  def draw
    draw_rect 100, 100, 200, 200, Gosu::Color::RED
    draw_rect 100+1, 100+1, 200-2, 200-2, Gosu::Color::GREEN
  end
end
Window.new(400, 400, false).show

Are you maybe opening a window that is so large that is has to be scaled down to fit your screen? That could explain the missing bottom border.

By mjbellantoni Date 2013-07-21 14:58

The code you just provided (thank you!) works, but when I use the same code in my own project (included) I get the results you see here:

As you can see, the line on the bottom is missing. Here's my code:


class GameControlView

  def initialize(options)
    @area = options[:area]
    @window = options[:window]
    @outline_color = Gosu::Color.from_rgba_quad(229, 229, 229)
    @background_color = Gosu::Color.from_rgba_quad(241, 241, 241)
  end

  def draw_rect_g x, y, w, h, c
    @window.draw_quad x, y, c,
              x + w, y, c,
              x, y + h, c,
              x +w, y + h, c, 0
  end

  def draw
    # Draw the panel
    @window.fill_rect(@area, @background_color)
    @window.draw_line(
      @area.left,  @area.top, @outline_color,
      @area.right, @area.top, @outline_color)

    draw_rect_g @area.left + 10, @area.top + 10, 50, 50, Gosu::Color::RED
    draw_rect_g @area.left + 10 + 1, @area.top + 10 + 1, 50-2, 50-2, Gosu::Color::GREEN
  end

end

@area is a Chingu::Rect and the values for left and top are 0 and 700. The background color is RGBA (241, 241, 241, 255). This is sitting in a 1280x800 window that fits easily onto my MacBook's screen.

Thanks for the help!

By jlnr (dev) Date 2013-07-21 20:26

The quad in your screenshot is only 44x44px, are you sure the window is not being scaled down to fit your screen? What is your resolution? Maybe Gosu is being too conservative (v0.7.47+ should have fixed that).

By mjbellantoni Date 2013-07-22 12:12

My window was being scaled by Gosu! Shrinking the window from 1280x800 (which is my Mac's screen size) to 1024x68 solves the problem. I had incorrectly assumed that Gosu would just create a larger-than-screen window instead of scaling the window to fit onto the screen.

Thanks for the help!

By Spooner Date 2013-07-21 20:53

I use a single white pixel Image for this sort of thing. By altering its color and scale (in Image#draw), I can draw pixel perfect rectangles of any size and colour.

By jlnr (dev) Date 2013-07-21 21:44

That comes down to almost the same GL code, ± glEnable(GL_TEXTURE_0) :)