The mystery has been solved.  Thanks, everyone!

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!

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!

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:

[https://dl.dropboxusercontent.com/u/60419063/bad-button.png]

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.

[https://dl.dropboxusercontent.com/u/60419063/bad-button-screen.png]

Thanks for the help!

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!

I'll give this a try.  Thank you!

Is there a preferred technique for creating text which is outlined?  In my case, I'm want to have dark text on a darkish game map.  I want to create a tidy light outline around the text to make it more readable.

Many thanks!

Matthew