Gage Images

Discussion in 'JS Plugin Requests' started by Sharm, Dec 12, 2017.

  1. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    menu.png battles.png


    I'm looking for a way to use images instead of the computer generated gages that are default in RPG Maker. I've tried out Rocketmancer's Pretty Gages plugin, and while it does add a lot of nice options, it doesn't work as well for doing gages in a game that uses pixel art. The art I'm using has a 3x3 pixel size, so anti-aliased edging and computer generated gradients look very out of place. I'd also like the ability to be a little fancier with it, maybe make the border something really custom. I've tried to find other plugins that could get me there but all I could find was a video tutorial that resulted in a slightly broken plugin that only worked on one menu if you didn't change anything and a few options where it was way too fully integrated into an entire menu change to be used in a different way. I apologize in advance if I'm asking for something unreasonable. I don't have enough programming knowledge to even guess at how hard or easy any of these ideas would be. If this is too large and something I would need to hire someone for, I totally understand. It's not important enough to my project that I can't live without it, just something that I would really like to have and think would be cool in multiple games. I'm mostly hoping that someone will see this request and think it's something interesting and useful for the whole community.

    My goals are:

    • Have gages that are visually consistent with my enlarged pixel graphics.
    • Be able to add a little visual flair.
    • Be compatible with multiple menu styles.
    • Input the gage information once and have it show up in multiple menu scenes.

    I'm thinking that the easiest way to do that would be a series of images. One image for the background and one for the gage. Even better would be some way to slice the gage image so that you could have a separate start and end cap graphic that didn't get stretched or repeated like the center. Oh, being able to chose stretched or repeated would be super nice too. If the end cap idea doesn't work, it'd be nice if there could be some sort of masking to the graphic to cut the end off so I can have a differently shaped end when it's full but not have that end get warped or squashed when it's not. I'd like to use it on HP, MP, and TP with the option to turn them individually off and on depending on what bars I'm using for the entire game. If possible I'd also like to use it for user defined gages like if I'm using a plugin that adds a Exp gage or something. The resulting display would need to be able to be pixel precise. I don't know how difficult that is but in my attempt to get that video tutorial's plugin to work I found that it stretched my image vertically even when defined at precisely the right image height, and I ended up with some very strange banding as the program tried to blur my pixel art. If you could get the gage to only show user defined increments of movement that could be extra nice, easier to get things to match up visually with pixel graphics. I am using Galv's Bust Menu in my current project, so compatiblity with that would be ideal.

    If you want to update Rocketmancer's plugin instead that would also work for me (but be less ideal since I like the idea of graphically building the gages). I would need the plugin to let me define the outline thickness. I would also like it to render the curved or slanted edges with the pixel jaggies it would have if I had upscaled some pixel art. Perhaps a user defined pixel size like 2x2 or 3x3. Most enlarged pixel graphics for MV are at 3x3 but I know of at least one pack that uses 2x2 and I'd love to be able to use it in the future. Honestly I don't think this is easy or even possible getting the jagged edges this way, but if you can and think it'd be easier than images, go for it. I can make due with flat ends, but it would be rather dull.

    If you're feeling particularly ambitious, I had a few ideas for useful extras. The ability to have an image that overlays the gage so that the gage itself is caged between two image layers could be fun, add a little extra bling to it. The ability to add some animation frames to the gage, both as a kind of idle animation and as a way to indicate the gage is full would also be cool, especially if people have some sort of special skill that can only be used when a gage is full. Allowing the stat numbers to overlay the gage would also be pretty cool.

    I am willing to make whatever graphics you'd need to test and show off the different options, and you'd be free to distribute them with the plugin for others to freely use (as long as I got credited for the art).

    Thanks to everyone who's taking the time to read through this wall of text. Any suggestions on how this could be worded more clearly or if you need more images to test things out with or if this needs to altered in any way that would make it easier for the scripter to do, please let me know.

    CursorBorderA.png exp.png hp.png tp.png mp.png mt.png
    For now I'd like to ask that people not use these images except for testing to get a plugin for this working. I want to make specific images for people to use, these are for my game.
     
    Last edited: Dec 13, 2017
    #1
  2. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    This would be totally do-able if you treat the gauge images like the windowskin images. The only issue would be what to do if the gauge was so small that combining the left and right ends was actually too big.

    My glasses are at work and my eyes are blurry. Is your starting image showing how it looks now, or how you want it to look? Do you have a full-size version of each?
     
    #2
  3. Joy Diamond

    Joy Diamond Talkative Veteran

    Messages:
    135
    Likes Received:
    172
    First Language:
    English
    Primarily Uses:
    RMMV
    Sharm,

    I'm confused also with your starting image.

    Also what is a gauge?

    upload_2017-12-12_9-2-3.png
    Also:

    I'm still confused. So this is basically the edges around the boxes above? And you want this or something larger?

    Basically I would summarize:
    • What you want is certainly doable
    • But I can't understand exactly what you want.
    I *THINK* You want to to create a whole bunch of small images (for frill's around gauges, assuming I understand what a gauge is) & then you want to be able dynamically to join them together & have them appear on the screen:
    • A question would be how many of these tiny images you want on the screen at once; because if a few, it's easy;
    • But if many, and it start's to overload the drawing abilities of the cpu; then you need to dynamically make them into a single image & then only draw the single image (which is way harder)
    Finally:

    Hmm, I think a fellow artist would understand what you want way easier then me -- since, yes, as you surmised, I got confused reading your original post. Crossing the language barrier (between artists & programmers) is one of our hardest challenges in this forum:
    • A good next step, if you are interested, is to collaboratively create an architecture document.
    • In case it was not obvious, the architecture document is a response to this phrase "worded more clearly".
    • (architecture documents are used in programming to design things before programming. Similar to the idea of creating an architecture drawing for a building before starting construction).
    Joy Diamond.
     
    #3
  4. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    The starting example shows what I'd like. It's not flashy so I can see the confusion. Here's the gages as they look by default:

    zoomorig.png

    And here's an example of the prettier ones:

    zoomwanted.png

    I'm not sure what to do with the "too small" either. I see three options, just leaving them as close together as possible and not having an accurate gage in the last few points, some sort of masking so that less of the end is visible the lower you go (can you do that with programming or would you need another image?), or making it so that when the ends touch it starts squishing those images. If the end cap thing isn't going to work that's fine. It just seemed like the easiest way to get a more interesting image.

    Yep, that's the gage. Sorry I wasn't clearer with my reference images.

    Yes, that's exactly what I want. I'm flexible with the number of images required. How would you define images though? The gage with separate end caps could be placed into a single file, just laid out in a specific way to let the program know where to cut it up. The same could be done with any animation frames. At its absolute messiest with each part in it's own image and all my wishful thinking hopes with how fancy it could be and having 5 gages in one menu (too much!) I think there would need to be 17 images on screen at once, some of them drawn in more than one place. We could also cut things down even more by having a grayscale gage fill image that gets colorized by the program for each part. Not quite as pretty but it would allow you to have lots of gages each a different color without overloading the cpu. So at its slimmest, 2 images on screen at once, but drawn multiple times and handled differently in some parts than others.

    Haven't the slightest clue how to do that or what would be useful to put into one. Since it's a programming tool I think it would work better if a programmer built the document and filled it with what they think I want and then I could go in and adjust it. Would one really be necessary though for such a small segment of a menu layout?
     
    #4
  5. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    I understand exactly what you're after. I'd be interested in giving this a go. Do you have a list of other plugins you're using - especially any that might also use, or adjust gauges?
     
    #5
    Parallax Panda, Sharm and Joy Diamond like this.
  6. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    That'd be great!

    I'm still slowly building my menu and haven't gotten into rearranging the sub menus or battles or a lot of core gameplay elements yet. It's backwards, I know, but it suits me. Currently the only plugin in my project that alters where the gages are placed is Galv's Bust Menu (which I totally forgot to link earlier, I'm so sorry!). I've been trying to stick to the high profile programmers with lots of plugins under their belt like Yanfly, Victor Sant, Tsukihime, SumRndmDde, Mr. Trivel, Hudell, Quxios, Moghunter, Galv, and of course you Shaz, since the more prominent they are, the less likely I am to run into conflicts and the less likely they are to have sloppy code.

    So far I've used Galv's Bust Menu. Moghunter's cursor border, Galv's Single Actor Menu, dbchest's Currency Icon, Galv's Roll Credits, Victor Engine's Basic Module, Victor Engine's SFont, and Atreyo Ray's Command Icons. That's the order too. I will likely use Yanfly's Battle Status Window and Victory Aftermath for the battle scenes, but I haven't looked over the options yet or tried to see where the conflicts are (pretty worried that Victor's engine and Yanfly's won't mix).
     
    #6
  7. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks. I'll take a look at those and see what they do. I'll have a play over the weekend (or before, if I have the time) and let you know what I come up with :)
     
    #7
    Sharm likes this.
  8. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    I've just reread your post and noticed you asked for animations. I don't think I'd be able to do those. If you're happy for just plain ol' gauges and want me to continue, is there any chance you could send me your plugins.js file and your js/plugins/ folder, as you have them set up in your project? Also any resources I might need to use to run them properly.
     
    #8
    Joy Diamond likes this.
  9. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Not doing animations is just fine, it was just a suggestion of something that I thought could be cool to have as an option in a plugin like this. I have no plans for the use of animation at the moment. Would it be alright if I just sent the entire project? I'm a little brain dead today and so figuring out which resources I need to send you and which I don't is currently too much, plus it doesn't have much more to it than what's needed to get the plugins running anyway.
     
    #9
  10. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    That would be just fine :)
     
    #10
  11. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    Here you go, @Sharm

    menu.png

    battle.png

    This is specifically written for your project, to be compatible with Galv's Bust Menu plugin. The defaults are all set to use your images and settings, so you should only need to add the plugin at the bottom and not need to change any values, unless you want to make adjustments while testing.

    Note, this plugin has an option to show text in front of or behind the gauges - this won't work with Galv's plugin - EXP text will always be shown in front. Yanfly's engine also alters gauges, but this plugin overwrites that behaviour. I think it's okay - seemed to work as intended for me.

    I also initially used the decorative ends, but it didn't look good with those over the gauges and the text over that, so I removed them. This made the whole plugin more simple (only Y offsets, not X offsets for different layers).

    Enjoy, and shout if you have any troubles with it :)
     
    Last edited: Dec 25, 2017
    #11
    Oscar92player, Joy Diamond and Sharm like this.
  12. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Thanks so much Shaz. I'll check it out later when it's not the holidays.
     
    #12
  13. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    The requirement as far as images goes is that the end caps are mirror images. They can be any shape. As the gauge gets smaller and smaller, it'll take as close to equal as possible portions from the left and right sides, so eventually you'll get a two-pixel-wide gauge with just the single pixel from each end, and then just one pixel, and then nothing. If the ends are not mirror images, this will look weird as the edges won't join.

    Edit: I've also set it up so the images should be included when you select Exclude Unused Resources but I haven't tested it, and I haven't set them up this way before. So if you get that far and it doesn't work, please just let me know and I'll take a look.
     
    Last edited: Dec 25, 2017
    #13
  14. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Okay, that's an easy requirement. Thank you!
     
    #14
  15. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Tested it out, even tried adding on other scripts to see how it reacted. Everything seems to be working really well. It's doing something strange to the corners, though. Both the background and the gage fill seem to go out to the corners regardless of the shape of the original image. If they have to be square to function then that's fine, but from what you were saying about how it should work that seems like a bug.
     
    #15
  16. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    mmm ... I used the images that were in your project. It looks like they do go out to the corners and don't have any transparency, unlike the ones you provided in your first post.

    I'll take a look at that tonight and see if I can figure out what's happening.

    Do you have a closeup you could post to show what's going on?
     
    #16
  17. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    The transparency is there, I double checked the zip I sent. Your own screencaps are showing the problem very well. But I figured out why the corners are getting squared. The middle is being repeated all the way to the very ends, so it's showing up behind any transparency of the end parts. Since the middle has a black outline too, it makes it look like the outline just extends to the corners. Here's some images with the ends curved the other direction for you to test it out with. Curving it this way makes the problem more obvious.
     

    Attached Files:

    • hp.png
      hp.png
      File size:
      332 bytes
      Views:
      9
    • mt.png
      mt.png
      File size:
      301 bytes
      Views:
      8
    #17
  18. Shaz

    Shaz Veteran Veteran

    Messages:
    36,911
    Likes Received:
    10,849
    Location:
    Australia
    First Language:
    English
    Primarily Uses:
    RMMV
    Brilliant! I had put some clearRect calls in to remove the ends of the "full" bar, but I must have taken them out when I got rid of all the logging after it started working.

    Now that they're back in again, it works as it should. The post above contains, and links to, the updated version.
     
    #18
  19. Sharm

    Sharm Pixel Tile Artist Global Mod

    Messages:
    12,361
    Likes Received:
    9,515
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    That fixed it! Thank you Shaz!
     
    #19
  20. IAmJakeSauvage

    IAmJakeSauvage Veteran Veteran

    Messages:
    416
    Likes Received:
    658
    Location:
    Hamilton, ON
    First Language:
    English
    Primarily Uses:
    RMMV
    Your plugin is super useful! Would you consider making it available for public use with TOS? :3

    Actually, the only problem would be that anyone using Yanfly's core couldn't use it because it seems like gauges are impossible to tinker with (at least for me). This looks really good though!
     
    Last edited: Jan 10, 2018
    #20

Share This Page