[SOLVED] Timed Drawing of an Object from the Top Down

[Paco604]

***Solved this. I wasn't closing the stencil function. I'll post up an update a little later on for anyone else in the future who might have similar problems.***

I'll try to be brief and with no links so I won't get disapproved again.

Okay, I want to create an affect like the earlier Final Fantasies where a menu/dialogue box is drawn from the top down. In the early games, it looks like the menu is rendered but it's initially set to transparent. In a split second, it's drawn from the top down giving it an animated effect.

I tried recreating that effect using inverted stencils where I called a rectangle stencil to set up transparency, drew the dialogue window, and then animated the stencil's position based on the width, height, x and y pos of the dialogue window. I thought this would just sort of mask the image its on top of but stencils seem to cut all the way to the background color and don't just stop at the previous layers.

Is there a way to do what I described with or without stencils?

[veethree]

There's always a way. I'm not a 100% sure what you mean, Any chance you could elaborate? Perhaps a link to a video or something from that final fantasy game you mentioned where this happens?

[Paco604]

The battles in this video show what I'm talking about:



When a menu is called, it sort of scrolls down as it's drawn. Then when it's dismissed, it scrolls back up. It looks like the menus are completely rendered, since the text is already drawn as the animation scrolls down, but the programmers probably did it this way so that the menus do not just appear from nowhere.

[RedHot]

All I'm seeing her is that the menu is separated into several rows and each row is drawn separately with a ~150ms delay.

[davisdude]

It looks to me like you would have to load all the lines separately or store them all in a table as a composite image.

Code: Select all

text  = {}
text.__index = text

function love.load()
  menu = { 
    text.create( "This is a menu", 400, 300 )
    text.create( "Press anything to continue", 400, 350 )
  }
end

function love.draw()
  for i, m in ipairs(menu) do
    m:draw()
  end
end

function text.create( text, x, y, w, h )
  t = {}
  setmetatable( t, text )
  table.insert( t, { text, x, y, w, h } )
  return t
end

function text:draw()
  love.graphics.setColor( 0, 0, 255 )
  love.graphics.rectangle( "fill", self.x, self.y, self.w, self.h )
  love.graphics.setColor( 255, 255, 255 )
  love.graphics.print( self.text, self.x + 16, self.y + ( self.h/ 2 ) )
end

2 things:
1) It would be beneficial for you to post a .love of your game, even if it doesn't worlk.
2) You could go more in-depth with this, adding things like color and offset (so that the text is centered).

Good luck!

[Paco604]

@RedHot I thought about that too, where I can just draw rows of the menu and each one is delayed. But that just seems needlessly complicated. Especially since I counted 14 different menu sizes in my battle screen alone. Splitting each one into rows then drawing each one is too much of a headache.

I created a window class that just draws a window frame on the screen of any dimension I set the argument to. If I could just get it to slowly reveal itself then slowly retreat back somehow, I would save myself a ton of time.

[RedHot]

You are heavily overthinking something here. It's the most simple way I can think of. Make the routine customizable so it would depend on the number of rows. Divide each menu box into 3 parts : top, middle and bottom. Each time draw the top and the bottom and draw the middle row as many times as needed so it would fit your size.

[davisdude]

Here is the code I PM'd you about.
Enjoy!