Since so little of Reincarnation Assistant is a normal RPG, the default menu just doesn't fit. Instead of finding or requesting a plugin, I decided to event it.
This isn't a tutorial, just a look at how I'm doing things. If y'all would like a more in-depth tutorial, leave a comment and let me know. First Iteration - Putting the basics in
Time to get the basics in. I only need Items, Save, and Exit really, so I can just start with three pictures and highlight the one the player is currently choosing.
◆Change Menu Access:Disable ◆Control Variables:#0001 Random # = 5 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 255, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 200, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 200, Normal ◆Loop ◆If:Script:(Input.isTriggered('right')) || (TouchInput.isTriggered('right')) ◆Control Variables:#0001 Random # += 1 ◆If:Random # = 8 ◆Control Variables:#0001 Random # = 5 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('left')) || (TouchInput.isTriggered('left')) ◆Control Variables:#0001 Random # -= 1 ◆If:Random # = 4 ◆Control Variables:#0001 Random # = 7 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('ok')) || (TouchInput.isTriggered('ok')) ◆If:Random # = 5 ◆Script:SceneManager.push(Scene_Item); ◆Break Loop ◆ :End ◆If:Random # = 6 ◆Script:SceneManager.push(Scene_Save); ◆ :End ◆If:Random # = 7 ◆Show Choices:Exit Game, Return to menu (Window, Middle, #1, #2) :When Exit Game ◆Script:SceneManager.goto(Scene_Title); ◆ :When Return to menu ◆ :End ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('cancel')) || (TouchInput.isTriggered('cancel')) ◆Break Loop ◆ :End ◆Comment:Change picture tints ◆If:Random # = 5 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 255, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 200, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 200, Normal ◆ :End ◆If:Random # = 6 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 200, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 255, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 200, Normal ◆ :End ◆If:Random # = 7 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 175, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 175, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 255, Normal ◆ :End ◆Wait:1 frame ◆ :Repeat Above ◆Script:for (var i = 5; i < 7+1; i++){ :Script:$gameScreen.erasePicture(i); }
A lot of the basics stay the same between each iteration, so I'll just go over the main things quickly.
◆Change Menu Access:Disable ◆Control Variables:#0001 Random # = 5 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 255, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 200, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 200, Normal
This sets up which picture the menu starts on, and adds all the images to the screen.
The rest of the event (minus the very last command) is put into a loop, so that it will repeat until the player want to leave the menu. ◆If:Script:(Input.isTriggered('right')) || (TouchInput.isTriggered('right')) ◆Control Variables:#0001 Random # += 1 ◆If:Random # = 8 ◆Control Variables:#0001 Random # = 5 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('left')) || (TouchInput.isTriggered('left')) ◆Control Variables:#0001 Random # -= 1 ◆If:Random # = 4 ◆Control Variables:#0001 Random # = 7 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('ok')) || (TouchInput.isTriggered('ok')) ◆If:Random # = 5 ◆Script:SceneManager.push(Scene_Item); ◆Break Loop ◆ :End ◆If:Random # = 6 ◆Script:SceneManager.push(Scene_Save); ◆ :End ◆If:Random # = 7 ◆Show Choices:Exit Game, Return to menu (Window, Middle, #1, #2) :When Exit Game ◆Script:SceneManager.goto(Scene_Title); ◆ :When Return to menu ◆ :End ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('cancel')) || (TouchInput.isTriggered('cancel')) ◆Break Loop ◆ :End
Some conditional branches to check which buttons are being pushed. If the player hits the right arrow key then the choice moves to the the right, and if the player hits enter then it selects the highlighted menu option.
The variable is set to not go beyond 5-7 just because those are the picture IDs I choose. There's no deep meaning to it, but it is important to know for the next part of the event: ◆Comment:Change picture tints ◆If:Random # = 5 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 255, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 200, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 200, Normal ◆ :End ◆If:Random # = 6 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 200, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 255, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 200, Normal ◆ :End ◆If:Random # = 7 ◆Show Picture:#5, menu_item_icon, Center (288,324), (100%,100%), 175, Normal ◆Show Picture:#6, menu_save_icon, Center (576,324), (100%,100%), 175, Normal ◆Show Picture:#7, menu_exit_icon, Center (864,324), (100%,100%), 255, Normal ◆ :End ◆Wait:1 frame
This is where the event changes the picture that's highlighted.
The wait is there because otherwise the event tries to run constantly, and lags the whole game. ◆Script:for (var i = 5; i < 7+1; i++){ :Script:$gameScreen.erasePicture(i); }
After leaving the menu, it's important to erase all the pictures so they're not in the way. Instead of using a bunch of Erase Picture commands, I use this one to get rid of all of them at once.
So the menu works, but it's not all the exciting... Time to complicate it! Second Iteration - You spin me right 'round baby
Instead of having the pictures stay static, it's a lot more interesting to have them move to be centered when they're selected. It doesn't take too much extra work to do it really, just have to set up some move picture commands in the conditional branches.
◆Change Menu Access:Disable ◆Control Variables:#0001 Random # = 5 ◆Show Picture:#5, menu_item_icon, Center (576,324), (100%,100%), 255, Normal ◆Show Picture:#6, menu_save_icon, Center (864,324), (75%,75%), 200, Normal ◆Show Picture:#7, menu_exit_icon, Center (288,324), (75%,75%), 200, Normal ◆Loop ◆Control Variables:#0009 namebox icon test = Random # ◆If:Script:(Input.isTriggered('right')) || (TouchInput.isTriggered('right')) ◆Control Variables:#0001 Random # += 1 ◆If:Random # = 8 ◆Control Variables:#0001 Random # = 5 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('left')) || (TouchInput.isTriggered('left')) ◆Control Variables:#0001 Random # -= 1 ◆If:Random # = 4 ◆Control Variables:#0001 Random # = 7 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('ok')) || (TouchInput.isTriggered('ok')) ◆If:Random # = 5 ◆Script:SceneManager.push(Scene_Item); ◆Break Loop ◆ :End ◆If:Random # = 6 ◆Script:SceneManager.push(Scene_Save); ◆ :End ◆If:Random # = 7 ◆Show Choices:Exit Game, Return to menu (Window, Middle, #1, #2) :When Exit Game ◆Script:SceneManager.goto(Scene_Title); ◆ :When Return to menu ◆ :End ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('cancel')) || (TouchInput.isTriggered('cancel')) ◆Break Loop ◆ :End ◆Comment:Change picture tints ◆If:Random # ≠ namebox icon test ◆If:Random # = 5 ◆Move Picture:#5, Center (576,324), (100%,100%), 255, Normal, 30 frames ◆Move Picture:#6, Center (864,324), (75%,75%), 200, Normal, 30 frames ◆Move Picture:#7, Center (288,324), (75%,75%), 200, Normal, 30 frames (Wait) ◆ :End ◆If:Random # = 6 ◆Move Picture:#5, Center (288,324), (75%,75%), 200, Normal, 30 frames ◆Move Picture:#6, Center (576,324), (100%,100%), 255, Normal, 30 frames ◆Move Picture:#7, Center (864,324), (75%,75%), 200, Normal, 30 frames (Wait) ◆ :End ◆If:Random # = 7 ◆Move Picture:#5, Center (864,324), (75%,75%), 200, Normal, 30 frames ◆Move Picture:#6, Center (288,324), (75%,75%), 200, Normal, 30 frames ◆Move Picture:#7, Center (576,324), (100%,100%), 255, Normal, 30 frames (Wait) ◆ :End ◆ :End ◆Wait:1 frame ◆ :Repeat Above ◆Script:for (var i = 5; i < 7+1; i++){ :Script:$gameScreen.erasePicture(i); }
I did need to add in a fail-safe though, since the menu will try to keep moving the pictures and lock up without them.
◆Control Variables:#0009 namebox icon test = Random #
I find another variable that doesn't need to remain the same during the game, and set it to equal the menu variable at the very start of the loop. That way it will not change even if the player hits left or right until the next loop occurs.
◆If:Random # ≠ namebox icon test ◆Conditional branches go here! :End
Then all I need to do is put all the move picture conditional branches in the above conditional branch. It simply checks to see if the player hit the arrow keys, if they did then the variables won't match and the pictures will move and if the variables do match then the event skips it.
Now the menu looks a lot more interesting, but there are still issues. The pictures are tied to IDs, which means some of them move under other pictures but over the last one and that can look a bit odd. I needed to find a way to alleviate that issue. Third Iteration - Adding some extra spin
My awesome coding buddy Galenmereth released a cool plugin that let me put in some fancy movement to the pictures, so I grabbed it and ran with it.
Instead of having the pics in a straight line, I set them up in an oval so it looks like they're rotating into place. To make it easier on the player to see, I put in a background to hide the map. I also added an Options menu option, since it makes sense to let the player change music volume and such while playing. ◆Change Menu Access:Disable ◆Control Variables:#0001 Random # = 5 ◆Show Picture:#1, SF_CyberSpace, Upper Left (0,0), (100%,100%), 255, Normal ◆Show Picture:#5, menu_item_icon, Center (576,324), (100%,100%), 255, Normal ◆Show Picture:#6, menu_save_icon, Center (864,250), (75%,75%), 200, Normal ◆Show Picture:#7, menu_options_icon, Center (576,150), (50%,50%), 150, Normal ◆Show Picture:#8, menu_exit_icon, Center (288,250), (75%,75%), 200, Normal ◆Loop ◆Control Variables:#0009 namebox icon test = Random # ◆If:Script:(Input.isTriggered('right')) || (TouchInput.isTriggered('right')) ◆Control Variables:#0001 Random # += 1 ◆If:Random # = 9 ◆Control Variables:#0001 Random # = 5 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('left')) || (TouchInput.isTriggered('left')) ◆Control Variables:#0001 Random # -= 1 ◆If:Random # = 4 ◆Control Variables:#0001 Random # = 8 ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('ok')) || (TouchInput.isTriggered('ok')) ◆If:Random # = 5 ◆Script:SceneManager.push(Scene_Item); ◆Break Loop ◆ :End ◆If:Random # = 6 ◆Script:SceneManager.push(Scene_Save); ◆ :End ◆If:Random # = 7 ◆Script:SceneManager.push(Scene_Options); ◆ :End ◆If:Random # = 8 ◆Show Choices:Exit Game, Return to menu (Window, Middle, #1, #2) :When Exit Game ◆Script:SceneManager.goto(Scene_Title); ◆ :When Return to menu ◆ :End ◆ :End ◆ :End ◆If:Script:(Input.isTriggered('cancel')) || (TouchInput.isTriggered('cancel')) ◆Break Loop ◆ :End ◆Comment:Change picture tints ◆If:Random # ≠ namebox icon test ◆Plugin Command:AnimationCurve BackOut ◆Script:if ($gameVariables.value(1) == 5 ) {var left = 8} else {var left = ($gameVariables.value(1) - 1)} :Script:$gameScreen.movePicture(left, 1, 288, 250, 75, 75, 200, 0, 30); ◆Plugin Command:AnimationCurve BackOut ◆Script:$gameScreen.movePicture($gameVariables.value(1), 1, 576, 324, 100, 100, 255, 0, 30); ◆Plugin Command:AnimationCurve BackOut ◆Script:if ($gameVariables.value(1) == 8 ) {var right = 5} else {var right = ($gameVariables.value(1) + 1)} :Script:$gameScreen.movePicture(right, 1, 864, 250, 75, 75, 200, 0, 30); ◆Plugin Command:AnimationCurve BackOut ◆Script:if ($gameVariables.value(1) == 7 ) { :Script:var back = 5} else if ($gameVariables.value(1) == 8 ) { :Script:var back = 6} else { :Script:var back = ($gameVariables.value(1) + 2)} :Script:$gameScreen.movePicture(back, 1, 576, 150, 50, 50, 150, 0, 30); ◆ :End ◆Wait:1 frame ◆ :Repeat Above ◆Script:for (var i = 1; i < 10+1; i++){ :Script:$gameScreen.erasePicture(i); }
While setting up the plugin commands for that plugin, I realized that I could condense all the conditional branches into a few script calls if I was smart.
◆Plugin Command:AnimationCurve BackOut ◆Script:if ($gameVariables.value(1) == 5 ) {var left = 8} else {var left = ($gameVariables.value(1) - 1)} :Script:$gameScreen.movePicture(left, 1, 288, 250, 75, 75, 200, 0, 30); ◆Plugin Command:AnimationCurve BackOut ◆Script:$gameScreen.movePicture($gameVariables.value(1), 1, 576, 324, 100, 100, 255, 0, 30); ◆Plugin Command:AnimationCurve BackOut ◆Script:if ($gameVariables.value(1) == 8 ) {var right = 5} else {var right = ($gameVariables.value(1) + 1)} :Script:$gameScreen.movePicture(right, 1, 864, 250, 75, 75, 200, 0, 30); ◆Plugin Command:AnimationCurve BackOut ◆Script:if ($gameVariables.value(1) == 7 ) { :Script:var back = 5} else if ($gameVariables.value(1) == 8 ) { :Script:var back = 6} else { :Script:var back = ($gameVariables.value(1) + 2)} :Script:$gameScreen.movePicture(back, 1, 576, 150, 50, 50, 150, 0, 30);
Using script calls meant that I could check the menu variable and up keywords (like 'left' and 'right') so that the proper picture is moved. It's a lot simpler than having four conditional branches that have all the commands for each layout possibility.
The menu is close to what I wanted now, so the last step is to add in just a few details to make it easier for the player to navigate. Current Iteration
Happy with the new spin, all the event needed was a few labels (added with kido0617's Window Manager plugin) so that it was clear which picture does what. For now, I've made what I wanted so I can move onto the next thing.
Now that I'm happy with my abilities to event again, I'm ready to jump back into getting the main mechanics implemented...
I see a lot of variables in my future.
Comments
|
hiddenone tries to make a gamePosts about game making. Possibly updates on my current project, tutorials on how to event some things, or just random ideas. Archives
May 2019
Categories
All
|