Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

How to fade an image in and out? [RESOLVED]

I am working on my first script attempt: A custom splash screen to display before the title screen! Yes I know there are very capable splash screen scripts out there, but that's not the point! I want to learn RGSS, so I have to do it my own way right?

This is my first script so I'm focusing on proper syntax, spacing, commenting... you know, overall tidiness!

Anyway, take a look at what I have so you will know where I'm at...

Code:
#==============================================================================

# ** Scene_Splash

#------------------------------------------------------------------------------

#  This class performs Splash screen processing

#==============================================================================

 

class Scene_Splash

  #--------------------------------------------------------------------------

  # * Main Processing

  #--------------------------------------------------------------------------

  def main

    # Make Splash Screen graphic

    @splash = Sprite.new

    @splash.bitmap = RPG::Cache.title("001-Splash01")

    # Execute transition

    Graphics.transition

    # Main loop

    loop do

      # Update game screen

      Graphics.update

      # Update input information

      Input.update

      # Frame update

      update

      # Abort loop if screen is changed

      if $scene != self

        break

      end

    end

    # Prepare for transition

    Graphics.freeze

    # Dispose of Splash Screen graphic

    @splash.dispose

  end

  #--------------------------------------------------------------------------

  # * Frame update

  #--------------------------------------------------------------------------

  def update

    # If C button was pressed

    if Input.trigger?(Input::C)

      # Switch to title screen

      $scene = Scene_Title.new

    end

    # Update Graphics

    @splash.update

  end

end

I got most of this from Scene_Title and changed what was necessary to turn it into a splash screen. There are still a few lines that I don't understand but for the most part I am learning a lot! Now here come a few questions.

1. How can I have the splash screen fade in and out? I have tried things like:

Code:
 

if @splash.opacity != 255

   @splash.opacity += 5

 

etc... I must be missing something because I can never get it to fade in or out.

2. How can I have the splash display for a set amount of time, and then automatically go to Scene_Title?

Any help from the masters will be GREATLY appreciated!!!
 
That code (in update) will make the image fade in.
However, you need to start out with the opacity at 0
Right after you instance (@splash = Sprite.new) the sprite, set it's opacity to 0
@splash.opacity = 0

You can do all 3 (fade in, pause, fade out) using a counter. (or you could use the built in counter Graphics.frame_count, which counts frames from the beginning of the game)

#main
counter = 0
pause_frames = 51
#update
if counter < 51 ## 255 / 5
opacity += 5
if counter > pause_frames + 51
opacity -= 5
if counter > pause_frames + 102
$scene = Scene_Title.new
 
Awesome! Thanks for the reply Brewmeister! I was able to get the image to fade-in using your code, but I don't understand a few things...

Code:
#main

counter = 0

pause_frames = 51

#update

if counter < 51 ## 255 / 5

opacity += 5

if counter > pause_frames + 51

opacity -= 5

if counter > pause_frames + 102

$scene = Scene_Title.new

I see that in line 2 you are creating a variable which refers to a value of zero. Now, in line 5 you state that if that variable (counter) is less than 51, add 5 to the opacity. This works and the image fades in with this alone, but I don't understand the significance of the variable or the number 51.

I achieved the same effect using:

Code:
if opacity != 255

opacity += 5

Next I understand that in line 3, you create a variable (pause_frames) which refers to a value of 51. In line 7 you state that if counter is greater than pause_frames + 51, then subtract opacity by 5. The problem here is that counter's value is 0 and is never altered, so when will it be greater than 102?

Sadly, I don't understand the significance of the pause_frames variable or line 7 through 9. Using the code you wrote as it is, my splash sprite will fade in but will do nothing else, and I never reach Scene_Title. If I delete lines 7 through 9 entirely, it doesn't effect anything.

I'm sorry to be a nuisance but am I missing something here? This is only my first week coding so please be gentle! :angel:
 
51 is just 255/5 (totally opaque divided by 5). Your code would take 51 frames to fade in.

I should have put a counter += 1 at the end of the update method

pause_frames is a variable to hold the number of frames that you want the splash screen to stay opaque. (how long to display before fade out)

So...

#add to main
counter = 0
pause_frames = 51 ## how long to display image before fade out

#add to update
if counter < 51 ## fade in
opacity += 5
end
if counter > pause_frames + 51 ## fade out
opacity -= 5
end
if counter > pause_frames + 102 ## done. go to Scene_Title
$scene = Scene_Title.new
end
counter += 1
 
:biggrin: AHA! So simple yet so completely AWESOME!!! Thanks a million Brewmeister! Thank you for explaining each line to me, that's exactly what I needed. Now that I see it, I feel like I should have thought about counter += 1 at the end of the method... Oh well, at least I understand what's going on! (But I do have another question!)

When I create a variable and assign a value to it, is that value always based on frames?

This has got me thinking. Would it be more efficient to base the counter on actual time rather than frames? Wouldn't basing it on frames cause a slight variation on different computers? (Probably not with this small counter but for the record, how would I go about this?)

You've been a great help Brewmeister!
 
NFP.

If you want to use seconds, you can use

Graphics.frame_rate * seconds

to calculate frames. i.e.

fade_time = 10 ## seconds
pause_time = 10 ## seconds

then in your update method, use

if counter < fade_time * Graphics.frame_rate ## fade in
if counter > (fade_time + pause_time) * Graphics.frame_rate ## fade out
if counter > (fade_time * 2 + pause_time) * Graphics.frame_rate ## end scene
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top