"Animated" Menu

Reading Article
Author: Ariachan
Posted on 12/15/2009
A custom menu built around an optical illusion to make it seem like it's animated, uses the anation frames concept.

S

So Devinfire tells me you guys don't have a moving menu tutorial.. well i did this myself then found out there was a tutorial else where for it... so i'll be nice and share the info i recieved... from my own coding and from the tutorial.

NOTE: This moving menu was made in RPG Maker XP... it should be able to convert to VX and maybe back to 2k.

first you want to open your script editor and insert a blank script called... well whatever you want really... mine was "Title Screen"

now heres the big secret to making it work...

place the following two lines of code into the script.

SEPERATE_CONTINUE_DISABLED_IMAGES = true
TRANSITION_FRAMES = 5

this establishes that there are a total of 6 images used.

now you have to laod everything the menu does on it's own, so go into the Scene_Title (default name) and copy from "class Scene_Title" to "@sprite = Sprite.new". This is the basics for the loading screen and well the rest of the game.

now under that place

@back_sprite = Sprite.new
@back_sprite.z = @sprite.z - 10

and the counters

@index = 0
@count = -1
@delta = 255 / TRANSITION_FRAMES

now that we've established the grounds for the menu we have to check for a save file so we can display "Load" or "Continue" as valid or not we do so with teh following code using our index.

@continue_enabled = false
for i in 0..3
if FileTest.exist?("Save#{i+1}.rxdata")
@continue_enabled = true
end
end

If we have found a save file we will assume that's what they want to do and move the cursor there, else we will want tostay on new game (default) and grey out the continue option.

if @continue_enabled
@index = 1
@sprite.bitmap = RPG::Cache.title("1")
else
if SEPERATE_CONTINUE_DISABLED_IMAGES
@sprite.bitmap = RPG::Cache.title("0d")
else
@sprite.bitmap = RPG::Cache.title("0")
end
end

this gives us a starting point for the cursor all that's left is to play the music and get the updates.

# Play title BGM
$game_system.bgm_play($data_system.title_bgm)
# Stop playing ME and BGS
Audio.me_stop
Audio.bgs_stop

and get the updates as they happen.

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 title graphic
@sprite.bitmap.dispose
@sprite.dispose
@back_sprite.dispose
end

Your more than halfway to completing this tutorial on moving title screens... hehe

However we need to make the frame update, Which is called via the update command in the main loop of the title screen.

def update
if @count > -1
if @count == 0
if SEPERATE_CONTINUE_DISABLED_IMAGES and !@continue_enabled
@sprite.bitmap = RPG::Cache.title(@index.to_s + 'd')
else
@sprite.bitmap = RPG::Cache.title(@index.to_s)
end
@sprite.opacity = 255
else
@sprite.opacity -= @delta
end
@count -= 1
return
end

but we also need to make the inputs too.. seeing as how we've just overwritten everything that Scene_Title does basically... We do this like so... using our index as the point for where we are in the menu. Clever huh?

if Input.repeat?(Input::UP) or Input.repeat?(Input::LEFT)
$game_system.se_play($data_system.cursor_se)
@index = (@index - 1) % 3
@count = TRANSITION_FRAMES
if SEPERATE_CONTINUE_DISABLED_IMAGES and !@continue_enabled
@back_sprite.bitmap = RPG::Cache.title(@index.to_s + 'd')
else
@back_sprite.bitmap = RPG::Cache.title(@index.to_s)
end
end

if Input.repeat?(Input::DOWN) or Input.repeat?(Input::RIGHT)
$game_system.se_play($data_system.cursor_se)
@index = (@index + 1) % 3
@count = TRANSITION_FRAMES
if SEPERATE_CONTINUE_DISABLED_IMAGES and !@continue_enabled
@back_sprite.bitmap = RPG::Cache.title(@index.to_s + 'd')
else
@back_sprite.bitmap = RPG::Cache.title(@index.to_s)
end
end

# If C button was pressed
if Input.trigger?(Input::C)
# Branch by command window cursor position
case @index
when 0 # New game
command_new_game
when 1 # Continue
command_continue
when 2 # Shutdown
command_shutdown
end
end
end
end

Once all of that is complete you will need a total of 6 images. Named as the following.

0, 0d, 1, 1d, 2, 2d

These will differentiate each type of menu, Continue active and continue inactive. Any picture with a d next to it like "0d" is used for when the Load function is available.

you can make the screen how ever you like, and have the 3 main selections anywhere on the screen, But you can experiment with that. For you have finished coding the Moving Menu and it's up to you to design the GUI now. Good luck and have fun.

~ Ariachan =^.^=

Credit isn't needed but appreciated, it should go to Ariachan and BurningFetus, thank you.

Active Users (0)