Image Manipulator & 8direction behavior

Hi there i'm here to ask two stuff.

1. I want to make HP and MP gauge, by cropping the graphic

With Image Manipulator. But I can't find the way how should i do it.

I tried several methods but they all don't work.

The HP gauge sprite has hotspot on (0,16),

And MP gauge sprite has hotspot on (220,16).

Both of them uses image of 220x32.

So this means I want to crop HP gauge from right to left as

HP decreases, and opposite for MP.

2. 8direction movement is smooth, but ot seems it is very bad

When it comes to give moving route/path. Is there any more efficient way

To do this?

For cropping sprites, the tiled background is good, setting its width and height. But for cropping from left to right, I probably would use the canvas object by destroying pixels.

Well... I think i need more explicit instructions.

Okay. I just find out that tiled sprite is a solution. Thanks.

But how should i do it with Canvas?

Okay, the posts were written in mobile so there wasn't enough explanation.

I'll explain the problem more thoroughly.

<img src="http://i339.photobucket.com/albums/n460/zi0808/HUD_HP.png" border="0" />

<img src="http://i339.photobucket.com/albums/n460/zi0808/HUD_MP.png" border="0" />

Theses are the gauge images I want to crop. (HP and MP)

I did HP gauge with Tiled Sprite, But the problem is the MP gauge.

I have to crop the gauge from LEFT TO RIGHT.

but the tiled sprite object seems only to be cropped from right to left.

I tried cropping with image manipulator, but It won't work properly.

<img src="http://i339.photobucket.com/albums/n460/zi0808/sc.png" border="0" />

This is the result.

Here:

dl.dropbox.com/u/52670878/left%20to%20right%20crop%20example.cap

Basically I used a negative width of a canvas to reverse the effect of the tiled background object.

Aah didn't know that you had such an easy hp bar. Thought you had an entire image that need to be cropped. I'll post my solution a bit later here. But shadowlords solution, was that, what I had in mind for "any" picture you want to get smaller relative to the hp.

That's the way I would do it: Link

edit: mousewheel up/down or click on the hp-bars to see what happens.

Both of your replies helped me a lot. Thank you guys.