Image-Based Menu Help

Discussion in 'RPG Maker MV' started by Aeonex, Mar 16, 2017.

  1. Aeonex

    Aeonex Veteran Veteran

    Messages:
    67
    Likes Received:
    12
    First Language:
    English
    Primarily Uses:
    RMMV
    Hello! I'm trying to create an image-based title screen. The problem is that I don't know how to enable arrowkey control to select an option in the menu. I also need help with detecting whether the cursor has selected an option, so I can change the image to a highlighted version and indicate that that option is selected...
    ...using eventing similar to that used here:



    Thank you very much!
     
    Last edited: Mar 18, 2017
    #1
  2. White Flare

    White Flare Villager Member

    Messages:
    20
    Likes Received:
    5
    First Language:
    English
    Tested something out and got it working. It's pretty simple way of doing it and you will need to make some tweeks to fine tune it but this was my method.
    Sorry for bad audio I'm near the end of a cold.

     
    Last edited: Mar 17, 2017
    #2
    Aeonex likes this.
  3. Aeonex

    Aeonex Veteran Veteran

    Messages:
    67
    Likes Received:
    12
    First Language:
    English
    Primarily Uses:
    RMMV
    Thank you so much! I had no idea that RPG Maker MV had key input options.
    I'll probably be using YAMI_SkipTitle plugin to bypass the start screen.
    :thumbsup-left::D:thumbsup-right:
     
    #3
  4. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Hiya! Is there a way to do this that also includes mouse compatibility so you can either scroll through with a keyboard or click on the pictures? And if there is, will this also be possible?
    I've heard that you can do mouse hovers with TDDP – MouseSystemEx but from what I can tell it's more about changing the mouse cursor rather than the picture.

    EDIT: SumRndmDde's Picture Choices Plugin has mouse compatibility, but the hover scales the images which doesn't really fit my games aesthetics, and idk how you could change this to highlighting instead. Also it's not that customisable (though you can change the layout, I'm not really sure how you would change stuff like image spacing or create your own layout,) so it's usable in a pinch, but I'd really like to know if it's possible with eventing (or if someone could update this plugin XD)
     
    Last edited: Apr 2, 2017
    #4
  5. Aeonex

    Aeonex Veteran Veteran

    Messages:
    67
    Likes Received:
    12
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm not sure how to add scroll or mouse hover compatibility, but you can use Yanfly or Triacontane's picture common event plugins to make so that you can click on the options. As far as I know, there's no way to do this with eventing.
     
    #5
  6. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Unfortunately my Japanese is not good enough to be able to try and figure out Triacontane's plugins :kaocry: With Yanfly's you can click on images, but I don't think you can also choose with a keyboard. Ideally I'd really like to give the player a choice. Maybe I should try to mix eventing and plugins.. But probably I'll have to pay someone who knows Java :kaoswt: Thanks for the recs though :)
     
    #6
  7. Astfgl66

    Astfgl66 Veteran Veteran

    Messages:
    670
    Likes Received:
    517
    First Language:
    French
    @Rhino To add mouse compatibility the only non native function you need is to be able to get the mouse coordinates.
    Here is a script snippet for you:
    Code:
    See the other post
    
    Just paste it into a text file, name doesn't matter and save as a .js.

    This small snippet stores the mouse X and Y location each time it is moved in variables 1 and 2. You can change the number besides idX and idY to what you want.

    Using a loop you have to calculate the coordinates of the boundaries of each option and then check the mouse coordinates. You basically just have to check if the two mouse coordinates are contained within a rectangle for each of your options.
    If it's within the rectangle of new game, highlight that one. Same for all other functions.
    Then you can use "TouchInput.isTriggered()" as a condition: script to do whatever you want depending on what is highlighted when the mouse is triggered.


    Below is a solution in pseudo code if you're stumped.
    I encourage you to actually try things out before reading, you'll learn a lot more.
    Your event would look like this:

    Let's say this is your rectangle:
    x1,y1 ------ x2
    !----------------!
    y2-------------!

    Loop
    • If mouse is in rectangle "new game" (mouse x >= x1 and <= x2 and mouse y >= y1 and mouse y <= y2)
    1. Highlight new game (switch images, play cursor sound,...)
    2. Store 0 in variable index
    • If mouse is in rectangle "continue" (redefine rectangle coordinates)
    1. Highlight continue
    2. Store 1 in variable index
    • If touchinput is triggered
    1. If index = 0 -> trigger new game stuff, break loop
    2. If index = 1 -> trigger continue stuff, break loop
    • Wait 1 frame
    End loop

    Of course as usual with UI stuff it's more efficient to do it with a plugin, but well that's not what this thread is about.
     
    Last edited: Apr 6, 2017
    #7
  8. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Wow, this looks complicated, but I'll try my best XD Thank you!

    I think I've figured out the co-ordinates, so my option 1 is being shown at X 396 and Y 241, and the image itself is 321x60px which makes it
    x396,y241 ------ x717
    !----------------!
    y301-------------!

    This is what I've got on my event page so far.. I know you said to try and figure it out without your example, but I didn't even know where to start :guffaw: I added the .js like a normal plugin.
    mouse.png

    Also, sometimes when I open the game, I get "Uncaught TypeError: Cannot read property 'setValue' of null" but if just close and re-open it without making any changes, it works, which is a little weird..


    I'm sorry if I've done something really simple wrong. It took me a while just to get this far ^^'
     
    #8
  9. Astfgl66

    Astfgl66 Veteran Veteran

    Messages:
    670
    Likes Received:
    517
    First Language:
    French
    @Rhino
    The error you get is because I was dumb.
    Here have a proper code snippet:
    Code:
    //=============================================================================
    // TouchInput alias
    // by Astfgl
    // Date: 03/04/2017
    // Revision: 06/04/2017
    // Free to use in any way, credits not necessary.
    //=============================================================================
    
    /*:
     * @plugindesc TouchInput alias
     * @author Astfgl
     * @help This will allow you to get the mouse coordinates each time the mouse is moved
     */
    
    (function() {
    var TIOMM = TouchInput._onMouseMove
    TouchInput._onMouseMove = function(event) {
        TIOMM.call(this,event);
        this._mouseX = Graphics.pageToCanvasX(event.pageX);
        this._mouseY = Graphics.pageToCanvasY(event.pageY);
    }
    })()
    

    My images are rectangles, size 318 x 81 and are placed at 0,100.
    That makes my rectangle
    0,100 -> 318, 100
    !----------------------!
    0,181 -> 318, 181
    "Hovering" is a big green rectangle and "Unselect" a big red one.

    Spoilered below my event and results: Big image warning.
    [​IMG]

    To get mouse coordinates use "TouchInput._mouseX" and "TouchInput._mouseY" in a control variable: script.
    Also was dumb and the proper code is "TouchInput.isTriggered()" for action selection.
    Got rid of the loop because autorun and parallel events loop automatically anyway.
     
    Last edited: Apr 6, 2017
    #9
  10. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Woo Hoo! It works! :kaoluv:

    Well, I do have one more question to bug you about, and then hopefully I'll be able to figure out keyboard input from White Flares example. (Having the mouse as a parallel event maybe? I'll just have to mess about with that XD)

    But I can't get it to work with more than one option. For each choice, I've made a new variable index, but I can only get one option to appear during playtesting. I guess it's because the mouse search needs to be in a loop like it was before? But if I just loop the mouse part, neither picture shows up since they come in later, and if I loop the pictures with/out the input trigger part, I just get the options alternating and not being clickable, so I don't really know what to do :kaocry:
     
    #10
  11. Astfgl66

    Astfgl66 Veteran Veteran

    Messages:
    670
    Likes Received:
    517
    First Language:
    French
    Here have a screenshot:
    [​IMG]

    Basically you display each option with a different picture which you modify when the index matches the option.

    For basic controls you can just do the following:
    index = 1 instead of = 0 at the beginning.
    When up is pressed: index -= 1; use "Input.isTriggered("Up")"
    When down is pressed index += 1; use "Input.isTriggered("Down")"
    If index < 1, index = max number of options
    If index > max number of options, index = 1;
    When ok is pressed: do whatever depending on index. (1-> first option, 2-> second option, ...). Use "Input.isTriggered("Ok")"

    Keep it all in the same event.
     
    Last edited: Apr 6, 2017
    #11
  12. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Aaaah, mouse finally works correctly! I'd accidentally set both pictures to use ID 1 which is why they weren't showing ^^'''''

    I'm so sorry to have to bother you again, but how would you add "When X is pressed"? I'm assuming it's not a conditional branch, since when I tried that, it doesn't work. I also tried using the default if: "button x is pressed down" which half works, but not really hahaha.
     
    #12
  13. Astfgl66

    Astfgl66 Veteran Veteran

    Messages:
    670
    Likes Received:
    517
    First Language:
    French
    It's in a conditional: script.
     
    #13
  14. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Hm.. That's what I've been using, but it just isn't picking it up.
    Input.png
    I tried changing it to have ' instead of " since that's how it looks on the RMMV Script Calls Spreadsheet, which didn't change anything. Whether I use WASD, the arrow keys or the num keys I'm not getting a response.

    I don't think it's the pictures, since when I used the button press option, they were highlighting.

    EDIT: I moved set variable index=1 to a new page which solved an issue I was having where it would highlight option 1 whenever a key press was released, but now I'm testing with three options, and whilst pressing up/down does change the picture, it seems to be doing it sporadically. Like pressing down repeatedly goes option 1 > option 3 > option 2, option 2 > option 1 :kaomad2:

    I thought this would be a pretty simple thing, I'm not sure how it keeps going so wrong! (Probably bc I am a n00b) but honestly thank you for your godly patience XD
     
    Last edited: Apr 7, 2017
    #14
  15. Astfgl66

    Astfgl66 Veteran Veteran

    Messages:
    670
    Likes Received:
    517
    First Language:
    French
    Again I was dumb. There's no uppercase letters in the key names.
    Have a look at my event. Works as advertised for 3 options.
    [​IMG]
     
    #15
    Rhino likes this.
  16. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Haha, I can't believe using a capital is so powerful! Once I changed it, everything was fixed :kaoluv:

    Thank you sooooooo much!!!!! This is such a great alternative to plugins! I think you should add it to the tutorials tbh, it gives hope to people who don't know much java but still want to have cool options :kaojoy:Thanks for everything!
     
    #16
  17. Rhino

    Rhino ~Inactive~ Veteran

    Messages:
    482
    Likes Received:
    785
    First Language:
    English
    Primarily Uses:
    RMMV
    Sorry to bother you again, but it seems to have stopped working. :kaoeh:

    I updated MV, and it's no longer picking up the mouse hover, even though the keyboard and click controls are still fine. I double checked by re-building the event in a new project, but still nothing. (I did make sure the code you wrote was added to the plugin section, I know that's the kind of dumb mistake I would make XD)

    EDIT: I installed TDDP_Mouse System EX and it seems to be working now. :D As well as the menu I want to add some point and click gameplay too so this is great ^^
     
    Last edited: Apr 26, 2017
    #17
    Aeonex likes this.

Share This Page