Hello Guest

Author Topic: Hourglass  (Read 6176 times)

m4ko

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 75
    • View Profile
Hourglass
« on: March 14, 2013, 12:39:41 pm »
Hi,

I am trying to make a 2D hourglass but I am a little lost. Currently I have the following sprites:
Hourglass Front
Hourglass Back
Sand Top
Sand Bottom

My plan was to just layer these front > sand top, sand bottom > background. This works quite well.

The problem is when I want to "substract" from the top pile and "add" to the bottom. The only thing that comes to mind is scaling those textures (top y shrinks downwards, bottom y grows upwards). However an hourglass is pretty angled. Therefore: The top sand will "break out of the glass" while the bottom part fills up in the center and never reaches its sides until its at 100%. It is not possible to just cover up this mess because there are no sprites allowed to the sides of the hourglass.

Is it possible to instead of scale the sprite just draw a specific part of it? If the sprite is 100x100 pixels. Can I draw 100x80 of it? I think that would look much better. Or is it possible to add a mask to the sprite? So that it could just be a square which is masked on the sides of the hourglass?

Or if you have any other ideas on how to fill angled sprites with fluids/sand/etc. throw in your ideas please.
« Last Edit: March 14, 2013, 12:47:57 pm by m4ko »

m4ko

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 75
    • View Profile
Re: Hourglass
« Reply #1 on: March 14, 2013, 02:18:55 pm »
I got it working using a second camera and the clipping feature. It's a little complicated for such a simple thing (2 extra cameras, one for growing bottom up and one for shrinking downwards) and the positioning of the cameras when attached to a gameobjects is awkward.

Example:
Gameobject Pos: 600, 230, -5
     Sprite Pos: -25, 9, 0   (Child of Gameobject, Totals to 575, 239, -5)   <- hidden for normal camera. it sits in the transparentfx layer.

Then I attach the clipping camera (which only shows TransparentFX) to the gameobject because I want to make it a prefab with attached script that will increase/decrease the clipping cameras Region.height to simulate an increase/decrease in sand through its clipping.

I then need to set the transform.position of the camera to -600, -230 and the Viewport Clipping to 575, 239.

The problem with that is: If I decide to move the whole gameobject (repositioning the clock) then the clip camera will stick. It will not move with the gameobject. This makes layout horrible. Especially with multiple cameras.

Am I doing something wrong? Is there a better way?


Next idea:
I will try the newest beta with "sprite hard clipping" as soon as an admin completes my registration.
« Last Edit: March 14, 2013, 02:23:07 pm by m4ko »

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Hourglass
« Reply #2 on: March 14, 2013, 09:03:20 pm »
Clipped sprites could potentially work for you. Definitely worth a go as its really simple to try out.

Also look for the barber pole sample here, this uses a shader to clip. You can do more complex things with this.
http://unikronsoftware.com/2dtoolkit/forum/index.php/topic,398.0.html

m4ko

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 75
    • View Profile
Re: Hourglass
« Reply #3 on: March 15, 2013, 10:30:37 am »
The clipped sprite works quite nice for this! Thank you very much.

Example for reference:
1. Make the "Sand in bottom of the hourglass" sprite a "clipped sprite"
2. Set the Clip Region height to 0
3. In the script do the following to make the sand gain/pile up 10% in the hourglass:
Code: [Select]
SPRITE.ClipRect = new Rect(SPRITE.ClipRect.x, SPRITE.ClipRect.y, SPRITE.ClipRect.width, SPRITE.ClipRect.height + 0.1f);
Amazingly simple code. This should work perfectly fine for many "progres bar" like objects. Even "round edged" progress bars.

Also this would make a fine solution to the barber pole example. Just move the sprite top-bottom and right-left while clipping the desired boundaries at the same time.

unikronsoftware

  • Administrator
  • Hero Member
  • *****
  • Posts: 9709
    • View Profile
Re: Hourglass
« Reply #4 on: March 15, 2013, 11:25:39 am »
Yup it would work with the barbershop sample too, but the barbershop one uses shader clipping, and would be easier to do much more complex stuff with.

m4ko

  • 2D Toolkit
  • Jr. Member
  • *
  • Posts: 75
    • View Profile
Re: Hourglass
« Reply #5 on: March 19, 2013, 12:11:34 pm »
Probably true. But I am a Unity (two weeks), GameDev (two weeks) and Shader (0 seconds) newbie. Therefore I really like the simplicity of your new clipping sprite.

Showing and hiding the upper and lower sand piles according to "percent of time passed" is just these two lines:
Code: [Select]
p_csprite_sandBottom.ClipRect = new Rect(0, 0, 1, float_percent);
p_csprite_sandTop.ClipRect = new Rect(0, 0, 1, (1 - float_percent));


I didn't fully grasp how the barberpole thing works. Will come back and learn from it when I got the time. I will probably need the advanced stuff you can do with shaders soon enough.