Centering text in Gosu

Question

I've been having trouble centering text in the Gosu library to the absolute middle of the screen.

require 'gosu'

class GameWindow < Gosu::Window
  def initialize (width=800, height=600, fullscreen=false)
    super
    self.caption = 'Hello'
    @message = Gosu::Image.from_text(
        self, 'HELLO WORLD', Gosu.default_font_name, 45)
  end

  def draw
    @message.draw(377.5,277.5,0)
  end
end

window = GameWindow.new
window.show

My first approach was to take the height of the screen, subtract it by the height of the text 45, and then divide by 2. Now that seemed to work when aligning vertically.

However, horizontally is a different story...It seems to be taking the top left corner of the text and centering it which I expected it to do, instead of the middle of the text.

Anyone got a formula for this ? I tried a whole bunch of things, and only came close.

Have you tried [`draw_rot`](https://www.libgosu.org/rdoc/Gosu/Image.html#draw_rot-instance_method)? — toniedzwiedz, Aug 23 '15 at 18:33

score 4 · Accepted Answer · answered Aug 23 '15 at 18:42

4

class GameWindow < Gosu::Window
  def initialize (width=800, height=600, fullscreen=false)
    super
    self.caption = 'Hello'
    @message = Gosu::Image.from_text(
        self, 'HELLO WORLD', Gosu.default_font_name, 45)
  end

  def draw
    @message.draw(377.5,277.5,0)
  end
end

Your @message is an instance of Gosu::Image

As far as I can see, the class has a method that allows you to align the image's rotational center to a specified point, draw_rot

Using draw_rot instead of draw should work for you once you've found the center of the frame.

answered Aug 23 '15 at 18:42

toniedzwiedz

17,895
9
86
131

I tried `@message.draw_rot(377.5,277.5, 0, center_x = 0.5, center_y = 0.5)` But it appears to still be off http://puu.sh/jLR2r/a85482b491.png – PrimRock Aug 23 '15 at 19:05
1

@IZUHU where did you get the point coordinates? I imagine `277.5` is a bit off `300` (half the window height) because of the bar above the window but where does `337.5` come from? Shouldn't the horizontal position closer to `400` or simply `400`? – toniedzwiedz Aug 23 '15 at 19:11
Ohhhhh!! See I was subtracting the font size `45` from the from the screen width before dividing `2`. I thought maybe centering the text object was similar to how you would do it in css. In css you would take the size of a `container` subtract if from the `width`, and then divide by `2`. Alternatively when I didn't see that working I multiplied `45` by the amount of characters in the string. I assumed that each character was 45 pixels, then I subtracted it from the width finally dividing by `2`. I was doing this whole thing wrong haha! – PrimRock Aug 23 '15 at 19:34

score 0 · Answer 2 · answered Oct 07 '18 at 10:55

I know this is an old question, but I was having this issue earlier today and came up with this solution.

  def draw_centered_text(text, size, font)
    centered_text = Gosu::Image.from_text(text, size, {:width => WIDTH, :align => :center, :font => font})
  end

The above function converts the passed text to an image with a width equal to WIDTH (which in my case is a constant that stores the window width) and the text centred. You can then call the function like so:

draw_centered_text("Your text", 20, "Arial Bold").draw(0, 50, 0, 1, 1, Gosu::Color::WHITE)

You can replace 20 and 50 with any line height (font size) and y-position you want, just as you can change "Arial Bold" to "Arial" or any other font on your system. However, keep the 0 for the x-position (first parameter of draw()), since the centred text image is the same width as the window width.

See the links below for further information on from_text() and draw():

score 0 · Answer 3 · answered Oct 25 '21 at 19:11

Better late than never...

No need to convert your text to an image. Just center the text using two parameters available on the Font.draw_text_rel method: rel_x and rel_y. See your code (modified a bit) below.

See: https://www.rubydoc.info/gems/gosu/Gosu%2FFont:draw_text_rel

require 'gosu'

class GameWindow < Gosu::Window
  def initialize (width=800, height=600, fullscreen=false)
    super
    self.caption = 'Hello'
    # @message = Gosu::Image.from_text(
    #     self, 'HELLO WORLD', Gosu.default_font_name, 45)
    @font = Gosu::Font.new(45)
    @message = "HELLO WORLD"
  end

  def draw
    @font.draw_text_rel(@message, width / 2, height / 2, 1, rel_x = 0.5, rel_y = 0.5)
  end
end

window = GameWindow.new
window.show

Centering text in Gosu

3 Answers3