SC2Mapster Forums

Development > Triggers

[Solved]: Stacking Images and Slowly Removing Top Image

  • 17 posts
    #1 Feb 03, 2013 at 02:22 UTC - 0 likes

    Hello,

    I'm having some issues with having 2 dialog images on top of each other and having the upper-most one disappear over time and reveal the one under it. My end goal is to create a type of custom boss bar which uses the Zerg load bar frame, unhighlighted loading bar and the highlighted loading bar.

    So far I've laid out the frame and positioned both loading bars so it looks like a complete object. I have the unlit bar created first and then the highlighted one on top. My concern is I'm not sure how to remove or 'cover up' the highlighted version without doing some weird resizing as that just looks weird as its shrinking.

    I'm fairly confident it has to do with the order the images are created and the blend mode, but I've tried so many variations over the course of a few projects and always have been stuck settling for some failed workaround. Posted below are my 'best' attempts in getting to my goal:

    I created a 1x1 pixel in Photoshop and saved it as a .dds. — I made one in Black and one in White in case it mattered. I created another dialog image which used this pixel and scaled it to the height of the loading bar. I positioned it to the far right part of the loading bar and as it grows left it covers the bar which acts as though it is going away. The problem here is that it isn't really revealing the image under it, but instead it is covering it in black (or darkening in some tests).

    Can someone please guide me to a thread that covers this or let me know of how this can be managed as I'm confident it can be. I've tried looking for similar thread topics but have not found one.

    Thank you greatly!

    #2 Feb 03, 2013 at 05:58 UTC - 0 likes

    you could use the fade dialog item transparency to x transparency over y secs action to make it appear as thought it goes away. Other wise look at my asset in my signature to help you.

    #3 Feb 03, 2013 at 07:52 UTC - 0 likes

    @XxZeroxX: Go

    It may also be significant to you that the latter dialog item created will be on top by default. If you want the top dialog item to fade away, you will have to create it last.

    Trigger, layout, interface specialist for Aeon of Storms.

    #4 Feb 03, 2013 at 09:32 UTC - 0 likes

    @willuwontu: Go

    Well, I'm not exactly looking to fade an entire image here. It's basically the filled energy bar on top of the empty energy bar. I currently have a 3rd image which grows in size left as the bar loses value so that it covers the filled on and acts as though it has been used up. The issue though is that I'm not sure how to only filled on and leave the emptied one appearing under it ;0.

    As for the assets, I don't really feel as though that matches up with the needs either ;(. I usually tend to avoid most libraries as I'm very picky on having things personalized and self-made. Probably a little too much as some of these projects take much longer than needed.

    @MasterWrath: Go

    My order of events is: Create empty version of the loading bar. Create filled version of the loading bar. Create 'coverup' bar which is currently used to cover the bar in pure black to make the 'lost energy/hp' effect.

    I'm trying to not just put a black image over it, but instead I believe there has to be a way to say "Set the transparency of the image directly under this to 0." I'm pretty confident it has to do with either the filled bar being an alpha or the 'coverup' bar being alpha and doing something from there ;0.

    #5 Feb 03, 2013 at 10:44 UTC - 0 likes

    Not sure if this'll help or if it's what you're looking for, but I just logged in after months of inactivity to point you to this link:

    http://www.sc2mapster.com/forums/resources/trigger-libraries/14873-library-boss-bars-b04b/

    Signing out.

    Works
    AoS2
    Coder
    Boss Bars+
    Custom boss bars
    GXML
    Dialog XML parser
    Project W
    Coder
    RandNAligning dialog labels

    #6 Feb 03, 2013 at 21:36 UTC - 0 likes

    @FuzzYD: Go

    I actually came across your boss bars a while back when looking through the libraries =0. I'm not entirely sure you'll even see this, but I do appreciate the link even though I will likely have to pass =(. I'm a little set on the style that is set right now and do have 1-2 fallbacks to rely on in case there is no solution/nobody that knows how to stops by.

    (I feel like an ass being like "No, not going to use it." =( )

    Last edited Feb 03, 2013 by XxZeroxX
    #7 Feb 04, 2013 at 14:22 UTC - 0 likes

    @XxZeroxX: Go

    I'm starting to get a little confused as to what you want, specifically. Could you try to rephrase it? Alternatively, you could upload a map containing the triggers in question, and I'm sure I could easily find a solution from there.

    #8 Feb 04, 2013 at 20:55 UTC - 0 likes

    @MasterWrath: Go

    Not a problem. I know I happen to be vague in early explaining because I'm not entirely sure to what extreme I need to go to fully get my point across. I don't want to spend an hour setting up an original post if the fix is literally a 2-minute thing xD.

    Alright, posted below are all the layouts I'm intending to shoot for but cannot fully figure out:

    Zerg Boss Bar Frame http://i23.photobucket.com/albums/b379/Shadow-777/ExampleZergBossBar_zps9258a9de.png

    Zerg Frame with Empty Energy Bar http://i23.photobucket.com/albums/b379/Shadow-777/ExampleZergBossBarwithBackdrop_zpsf785c6ab.png

    Zerg Frame with Full Energy Bar http://i23.photobucket.com/albums/b379/Shadow-777/ExampleZergBossBarwithFilledBackdrop_zps33de3b7e.png

    Final Examples of HP Remaining http://i23.photobucket.com/albums/b379/Shadow-777/ExampleZergBossBar80HP_zpsa7e9d4d8.png http://i23.photobucket.com/albums/b379/Shadow-777/ExampleZergBossBar50HP_zpsbc646dbe.png http://i23.photobucket.com/albums/b379/Shadow-777/ExampleZergBossBar2HP_zpsd89766c2.png

    In-game currently I have the dialog images getting created in the following manor: Empty Energy Bar Full Energy Bar Zerg Frame

    I need the Frame last since the Protoss frame has parts of the energy bar covered with the frame. I'm not entirely sure if you're still in need of an example map or trigger picture, but I don't feel as though there is enough to it to need such a thing. Honestly all that is triggered is laying out those 3 dialog images and manually positioning them so that it looks like its all one connected image.

    Finally, as I mentioned prior, I do have another bar that is mocking the energy depletion, but it is purely a fallback and not something I'm really trying to mess with here as its not what I'm after. Just to explain how I have it currently:

    I have a 0-width 40-height pure black dialog image and positioned it to be exactly at the further right part of the energy bar itself (not the frame). As energy depletes it grows in width towards the left which acts as though it is losing energy. I assume this very general approach will be what is needed to get the results like listed in the picture.

    I hope this help clarify the confusion and as always I greatly appreciate any help people give!

    Last edited Feb 04, 2013 by XxZeroxX
    #9 Feb 04, 2013 at 22:57 UTC - 0 likes

    This is pretty simple, the solution is using a panel. I will make an example map, give me a few minutes.

    #10 Feb 04, 2013 at 22:59 UTC - 1 like

    Well, the method that you are using should work, albeit if you want the bar to be black while the energy depletes. You really have two options, though:

    1. Have an image cover the full bar image as the energy depletes.
    2. Have the full bar image shrink as the energy depletes.

    Now, having the full bar image shrink as the energy depletes can look very ugly, as the bar is not designed like most energy bars. Most energy bars have the same vertical set of pixels in each X position, meaning that they can be shrunk along the X length and look exactly the same, but this one is not like that.

    One option I can think of is to have the filled bar image shrink by having it in a separate dialog and shrinking the dialog. The way this works is that the image of the filled bar does not shrink/distort at all, instead appropriate areas of it simply vanish as the dialog shrinks and there is no longer room for it.

    I know that sounds really complicated, so I'm attaching a map that demonstrates this.

    I hope that's what you were looking for!

    Name Description Size MD5
    Test.SC2Map Demo Map 11.8 KiB 2422135dee47...
    #11 Feb 04, 2013 at 23:41 UTC - 1 like

    MasterWrath and I are using pretty much the same principle but I think that using a panel instead of a separate dialog is the cleaner way to go. Using separate dialogs can make things really complicated when using "Top" "Center" or "Bottom" anchors. With a panel you only have one dialog, so if you ever need to move it it's really easy.

    Here is the example map I made:

    Last edited Feb 04, 2013 by rtschutter
    Name Description Size MD5
    LoadingBarMap.SC2Map Loading Bar Example 15.3 KiB ec0d4801615c...
    #12 Feb 04, 2013 at 23:55 UTC - 0 likes

    @rtschutter: Go

    I'm actually inclined to agree with rtschutter. I didn't even know panels existed because I've never had to use one. You should use his method!

    #13 Feb 05, 2013 at 00:20 UTC - 0 likes

    Panels are really fantastic. I actually have some situations in my map where I have panels inside of panels inside of panels I think. They make it so much easier to manage your dialog items.

    They take a bit longer to setup though as you have to set each property of an item separately (size, position, image, text). But they help so much it's worth it. I do wish I had used action definitions to create my items inside of panels, I would recommend that to anyone getting started with them.

    #14 Feb 05, 2013 at 02:20 UTC - 0 likes

    Also with dialogs, no matter the render priority you set, the latest one is always on top, whereas with panels you can change the render priority and thus have one appear to be on top of the other, even if you make the one you want on top first.

    #15 Feb 05, 2013 at 12:47 UTC - 1 like

    Alright, I know it hasn't even been 24 hours since my last post, but I've never expected so much assistance so quickly. =0. I guess I have a lot to say in response in addition to the fact that I think this may actually be solved (and exactly as hoped for xD!).

    First off, MasterWrath, the way you ended up setting up the map is very similar to how I ended up having it done prior to putting this thread up. The only thing that sticks out that I never thought of was having them all in different dialogs and shrinking in that way to prevent distortion. I'm a huge fan of logic and seeing ideas like that are amazing =D. I'd say the only thing I can't confirm is if the backdrop and frame would give the desired result in that manor, but it makes sense that it would.

    Next would be rtschutter, I cannot believe something I've toyed with for probably 5-6 hours in total to try and tweak around was done in about an hour xD. I must say that I have never messed with panels in the past, but it is crazy what kind of things there are that people can overlook. To be honest this map has provided a lot of experience with things I never knew how to use prior, including: sliders, various bank functions, records, actor events and even for the most part action definitions overall.

    I will most definitely study your map as I was never a fan of the copy/paste approach and I already know I'll likely redo my smaller unit energy bar using panels as I have a similar workaround I did due to the same issue. The Galaxy Editor will never cease to amaze me as it can do almost everything imaginable (except convert Text to String -.-).

    And willuwontu, it is good knowing that as I honestly wouldn't be surprised that I come across a scenario where I'd be doing some weird "Hide X" "Show X" to re-rending things on top. All-in-all though, I will post back probably later today when I can for sure say if things are how I'm hoping they'll be. All your help is greatly appreciated and I hope anyone else that comes across similar issues will gain from this as well =). Thanks!

    #16 Feb 06, 2013 at 23:02 UTC - 0 likes

    @XxZeroxX: Go

    A day late from when I thought I'd have time xD.

    I have a few things to note regarding the panel layout that I had to adjust to make work correctly. The first tweak was that the actual frame needs to be created last so as to have the energy bars under it. This doesn't really show up at all in the Terran setting, very lightly in the Zerg one, but most prominently in the Protoss one where there the frame actually covers part of the bar.

    Second thing to note is that the energy bar themselves are larger than the bar itself. This made it so when the boss had really low or really full HP, the bar wouldn't really reshape because the panel was resizing and just cutting off the transparent siding of the energy bar. This was fixed by sizing up the energy bar so that they actually expand further left and right and basically already cut off that invisible outline.

    Other than that I definitely believe this is exactly what was needed =D. The panel idea works the same as reshaping dialogs except panels are items of that dialog and if I move the boss bar, it doesn't have to have any anchor work done.

    Again, I'd like to thank both MasterWrath and rtschutter for the example maps and large help with fixing this, as well as willuwontu for the additional input on the rendering ability for panel usage. If you have any questions or comments about this, please feel free to respond back, but I will mark this as solved for now =).

    #17 Feb 06, 2013 at 23:22 UTC - 0 likes

    @XxZeroxX: Go

    • Dialog
      • Background Image
      • Panel
        • Full sized filled bar image

    adjust the width of the panel to represent the value of the bar. In this the panel becomes a visible mask for the filled bar.

    panels are fun

    Skype
    KageNinpo = SN

    My Libraries
    DialogLeaderboard & TeamSort

    My Projects
    SPACEWAR Tribute
    Infinite TD

  • 17 posts

You must login to post a comment. Don't have an account? Register to get one!