【Foxy's】"【Foxy's】Profiles Menu" extension customization

[FoxySeta]

Tutorial topic: how to let the player select an outfit (hence the title)
Brief description
Since it appears the documentation I provided for my extension turned out to be insufficient for some users, here's something more detailed. This tutorials covers various edits you can do to my extension (some of them are just copy-paste from the extension's comments), so if you are interested in something in particular, just jump to the desired section.
Template used for this tutorial: Sample 1080p (Action-based UI)
Requirements​

• Having read the Beginner's Guide. I can't help you either otherwise.
• Having 【Foxy's】Profiles Menu installed (I'll use version 1.0.0 for this tutorial) We're going to work on it, after all.

Tutorial Body
Opening the Profiles Menu at the same page it was at when the player closed it the last time

Spoiler

1. Name a global variable of your choice "[FS] Profiles Menu's Active Page" or something​
2. Initialize it at 1 at some time before the player can access the Profile Menu for their first time (for example, in your Start Scene)​
3. Open the scene named "[FS] Profiles Menu"​
4. Here's what you need to do:

   

Choosing the number of characters shown in the Profiles Menu

Spoiler

1. Open the scene named "[FS] Profiles Menu"
2. Here's what you need to do:
   
3. Remember to pay attention to the indentation and don't forget you can use another number/a global variable instead of that 12 over there

Using custom arrows/buttons

Spoiler

1. This one can be done pretty easily, actually. Open the scene named "[FS] Profiles Menu"
2. Here's the scene command describing the controls:
3. Remember that your images have to be of the right size for your game's resolution, and that you should change your hotspots' positions according to them

Background customization

Spoiler

1. Open the scene named "Show background"
2. You'll see a single scene command: "Show Picture". The picture used by it is the background of the Profiles Menu. You can replace it with one of your choice
3. You can also add more than one picture, or use animations; still, please keep in mind that you should use the

   @default

   domain
4. When commands you added personally to the scene (like, setting the duration and choosing between "wait" and "continue"), be aware that this scene is called by the main one as one of its first steps

Frame customization

Spoiler

1. Open the scene named "Show Selection"
2. There's a single "Show Picture" scene command. You can select the picture used to frame the active page's name here. Please note that the "frame" visual type is selected by default.
3. Finally, you may want to adjust the frame's position: you can do so in this very same scene command, but that is not sufficient. The next steps are about applying these changes to the "Refresh Page" common event.
4. Open the common event called "Refresh Page"
5. Here're the two values you are supposed to set the same way you did at step 3:

Editing the names' layout

Spoiler

1. Editing the name's layout can be useful both when you have more than 12 characters (and you need to make the names smaller because of that) and when you have a different screen resolution (so you'd like to adjust the names' size a bit). If this is your current situation, or you'd simply like to give the Profile Menu a different appearence, then go ahead
2. Open the common event called "Show Names"
3. Here're the values you can edit:
4. Obviously, if you change your names' list disposition, you need to make sure to position the frame picture accordingly as well (see Frame Customization)

Customizing the name list appearence

Spoiler

1. Open the common event called "Show Names"
2. Go to this scene command here:
3. You are free to edit with every field of this "Text Settings" command

Adding and removing parameters

Spoiler

1. First of all, let's add/remove the (un)desired parameters from all of our character's records. You can use switches, texts or numbers
2. Open the common event called "Refresh Page"
3. You should now be able to see a list of "Get Parameter" scene commands:
4. If you want to remove any parameters, just clear the name of the local variable their corresponding "Get Parameter" scene command uses as "Store in" parameter, then delete the very same command
5. If you want to add any parameters, for each and every one of them follow the steps below (in the suggested order):
   1. add a new "Get Parameter" scene commands below the Others
   2. set (for the time being) "Character" to one of the characters in your database who has that parameter defined
   3. set "Parameter" to the desired parameter
   4. change "Character" to L[0001: Profile's Character's ID]
   5. set Value to the type of parameter you're using (switch, text or number)
   6. choose a new local variable to use as "Store In" parameter (naming it in an appropriate way as well)
6. You can even create a new text parameter called "Full Name" to use in place of the standard character name used by the extension!
   
7. Once you have ultimated your custom "Get Parameter" list, look for a "Show Text" scene command right under it:
8. After revising VNM's Text Codes, define a template for all of the Profiles Menu's pages here. Remember to check what local variables you need to use as well!

Customizing the profile pictures

Spoiler

1. The extension uses each character's "Profile Picture" text parameter to determine the profile picture to use each time, so you're free to use the picture you want for each of your characters. Still, if you'd like to to stuff like editing the picture position, then follow these steps
2. Open the common event called "Refresh Page"
3. The last scene command should be a "Show Picture". You can freely customize it.

Adapting the extension for other resolutions (720p is the default one)

Spoiler

Well, it's basically all about repositioning/resizing stuff, so here's a list of previous sections of this tutorial you may find useful:

• Using custom arrows/buttons
• Frame Customization
• Editing the names' layout
• Customizing the profile pictures

Patron: @animesock52

 

[FoxySeta]

@animesock52 If there's still anything you do not understand, jut go and ask here! I hope this turns out to be useful for you.

 

[LRDean_Socks]

Tried it out. So far its trial in error, but in a good way.
Things that looked foreign to me before now seem very obvious. . .Some of them I feel silly for missing. I understand things very visually, so the images have been of great help. I'm learning quickly. This should definitely help me understand even other plugins going forward.

I think working through this tutorial will be very useful to others like myself who have no idea what they are doing. It's so nice to be able to fiddle and adjust things without worrying about completely messing it up.

Right now I am working on positions which has gone well so far. However, I got stuck at "Choosing number of characters" and "Frame Position"
Frame position may just be a guessing game on the right numbers to line it up. So, i may just need to work more at it.

The character number section points to the script, which I read, but don't really know what its asking me to do. I may need to just spend more time learning how things work, but that's kind of my initial experience so far. I changed the value to 6 hoping that would do something, but I realize there is more to it.

Other than that it's looking great so far.

Spoiler

 

[FoxySeta]

Right now I am working on positions which has gone well so far. However, I got stuck at "Choosing number of characters"

6 is a valid number (below should be explained what to do to make it work).

and "Frame Position"
Frame position may just be a guessing game on the right numbers to line it up. So, i may just need to work more at it.

Good question. Yes, you are supposed to use live preview to help you find the right position.

Also, if you detatch the live preview (ctrl+d or something) while you are in the main scene, then go to the frame scene and select the frame position via "Direct" method, you should be able to see the live preview as background.

You can also deduce the desored position from your name's list repositioning.
For example: the list was 50 px from the left margin of the screen but you set it to 75 px instead? Then your selection frame's X should be 65 px instead than 40 as well!

Regardless of the method you use, remember to edit the related values inside "Refresh Page" as well.

The character number section points to the script, which I read, but don't really know what its asking me to do.

You may have noticed that that script command looks indented in my tutorial, while it does not in the original extension. That's because a right arrow means "push me right". You don't need to know JS at all: just use the right arrow key on your keyboard with this very same script selected. (Obviously, this means that a left arrow means "push me left" instead: that's why all of these arrows were previously indented.)

Other than that it's looking great so far.

Happy to hear that