[SOLVED]Help with 5 meters inside a circle

(Joao Goncalves) #1

Hello everybody.

Im having trouble achieving something and I guess this is the best place to get help since Im using Flashpunk after all. :stuck_out_tongue:

Im trying to create a circle that is divided into 5 slices and each slice is its own bar that gets filled with a different colors during the game.

Something like this, the colors inside the slices move up and down as the player gets or spends resources.

Anyone as a good way to implement this? I’ve tried alot of stuff so far and all of it failed. :frowning:

Thanks in advance. :wink:

PS: Something I tried was using a image of a circle without a slice, converting it to BitmapData and the using it to remove everything but the slice from a drawn circle using this:

Draw.setTarget(powerGemBMD);

Draw.circlePlus(80, 80, 80, 0xc3181b, 1, true); var mtx:Matrix = new Matrix();

mtx.translate(80, 80);

powerGemBMD.draw(pieRemoverBMD, mtx, null, BlendMode.ERASE);

Draw.resetTarget();

powerGemImage.updateBuffer(true);

It was my best bet and it failed. :frowning:

(rostok) #2

Here’s one way of doing it. Not perfect though.

override public function render():void 
{
    //super.render();
    var clrs:Array = [0xfd4c92, 0x4cfd79, 0xfdd24c, 0x6c11c5, 0x4c7bfd];
    var lvls:Array = [0.6, 0.8, 1, 0.25, 0.5];

    var a:int = 45;
    var cx:int = 50;
    var cy:int = 50;
    var r:int = 40;
    var i:int = 0;
    for (var py:int = -r; py <= r; py++)
    for (var px:int = -r; px <= r; px++) 
    {
        if (px * px + py * py < r * r) 
        {
            i = ((FP.angle(cx, cy,cx+ px, cy+py)+a)%360) / 360.0 * 5.0;
            if (px * px + py * py < r * r * lvls[i] * lvls[i]) Draw.setPixel(cx + px, cy + py, clrs[i]);
        }
    }

    Draw.circlePlus(cx, cy, r, 0x0, 1, false, 2);
    for (i = 0; i < 5; i++) Draw.linePlus(cx, cy, cx + Math.cos(i / 5.0 * Math.PI * 2 - a / FP.DEG) * r, cy + Math.sin(i / 5.0 * Math.PI * 2- a / FP.DEG) * r, 0, 1, 2);
}

Probably you don’t have the Draw.setPixel() so try getting this one : https://github.com/rostok/FlashPunk/blob/master/net/flashpunk/utils/Draw.as#L383

(Joao Goncalves) #3

Many thanks rostok!

After a few changes to the code you posted, I managed to make it exactly as I wanted. :wink:

Its great. :smiley: