Life bar but with non-stretch graphics inside.

From the Asset Store
Custom animated Health Bar - check youtube video to make it yourself
  • Hello!

    I looked up the tutorial "Making a Fancy lifebar". It looks quite well what I wanted.

    But not exactly.

    It works so that you resize the graphic to fit the width of current "meter position". Common to do so.

    But if let's say, I want to use a graphic as a whole, let's say 256 pixels height when 100%, but starting at 0%, which cropping the graphic to nothing, 1 procent = crop to 1x256 pixels... Cropping instead for resizing the graphic, if you understand what I mean?

    I also thought of splitting the graphic into 1 pixel thickness slices but maybe it is too much work and there are simpler way?

    Just thinking out loud here.... You are welcome to give me your ideas. :) <img src="smileys/smiley9.gif" border="0" align="middle" />

  • Maybe putting a black sprite over the "bar sprite" that you're trying to crop? You make the black sprite grow OVER the other one. It's a trick and it will keep your original intact, but it will hide part of it? I don't know if that's what your looking for, but that's what I used for my game and it worked just fine.

  • try using tile background?

  • Black graphic would work if the background is black, but I am doing this harder, the meter background is transparent because I am simulating a test tube, and the graphic background behind that is the level background that is not fixed.

    :)

  • c4sp3r89,

    Could you elaborate?

    As the suggestion for the "container" for my idea of splitting the graphic into 1px thickness slices? I had the idea of putting it as animation, and choose frame number according to the (even) percent number.

    Ok nevermind, of course it is better to have 100 frames with the ever growing meter, not 100 slices.

    But still if there's a method to magically crop the picture, then shoot me with it! :)

  • add tile background object into your project.

    add image to the tile background.

    Resize.

  • helena Did you mean something like this? [r155]

    HealthBarCrop.capx

  • and another for you to look at

    click the red lego button to reduce health

    and the capx

    capx (155)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • RamPackWobble : Nice implementation. <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Beautiful demo!

    I do not have the paid version (and thus not the latest version) because I just got into this a few days ago and I want to evaluate it first. But I think I am gonna buy, because I have put quite a lot of thought and work now. ;)

    One of the reasons of me considering construct 2 is that the community seem to be helpful in a nice clear forum view.

    Ok not very constructive reply but still. ;)

    Oh hey, returned to look at the demo, not seeing the code, so I worry about the background since it is black or solid color or fixed graphic. The background in my project is a scrolling background. The "Liquid" itself can be solid but the test tube is transparent and the bottom of the tube is rounded.

  • I am not sure if it is what you are looking for but have you considered using a 9patch?

    It basically allows you to choose on the image what parts you want to stretch... and what parts you dont.

  • Interesting idea.

  • in Cannonball Bash I used 9patch to make my graduated box over a tiled background object. The 9 patch is set on repeat, so it is actually only one segment wide, and the background is transparent.

    so you can see how one would work here: http://cannonballbash.clay.io/

  • I can't use masking object because of the transparency to background everywhere.. ;)

    Not perfect but I solved it by two pieces of graphic, one solid color for the end cap (the rounded at bottom of tube) and then one gradient object, that is two color gradient. I settled for it instead for rainbow easier to implement.. Level change by change size of the object..

    I did the 100% of the coding myself (I feel proud, I am not so well versed in math)

    Now to solve so it will grow smoothly from one position to another.. (like from 16% to 33%)

    And oh btw I bought Construction 2 from free to user license. Now I need more incentive to finish this game.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)