开发者

Pulling a bowstring [Flash as3]

I've picked up some action scripting lately and I decided to make myself a simple bow and arrow game. So far I've made the arrow fly in an arced way. So up next is making my bow and being able to actually pull the string.

So far I figured I would draw the bow as an MC and use a graphic to draw the string. I'm at the point where I should actually pull the string and I've got 开发者_StackOverflow中文版no clue how to advance from here. Any advice would be very appreciated.

If possible just give me a pointer i would like to code the thing myself, I'm not asking for a finished result.

Code:

package  {

    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.display.Stage;
    import flash.events.MouseEvent;


    public class bow extends MovieClip {
        var myStage:Stage;
        var bowString:Shape;
        var bowStringMc:MovieClip;

        public function bow(stageRef) {
            this.myStage = stageRef;

            myStage.addChild(this);
            this.x = myStage.stageWidth / 2;
            this.y = myStage.stageHeight / 2;

            this.drawBowstring();
        }

        public function drawBowstring() {
            bowString   = new Shape();
            bowStringMc = new MovieClip();

            bowStringMc.addChild(bowString);
            myStage.addChild(bowStringMc);

            bowString.graphics.lineStyle(2, 0x000000);
            bowString.graphics.curveTo(-50,this.height/2,0,(this.height-10));

            bowStringMc.x = this.x-1;
            bowStringMc.y = this.y - this.height / 2 + 5;

            bowStringMc.addEventListener(MouseEvent.MOUSE_DOWN, pullBowstring);
        }

        public function pullBowstring(e:MouseEvent) {
            // Have to start redrawing the graphic i gess but how?
        }
    }

}

Update

Thx vvMINOvv & Slomojo, both answers helped me! I currently have 2 lines which are graphics i redraw when the bow is pulled back.

If anyone else want to see how i did it, heres a rough snipped:

    public function drawBowstring() {
        bowStringTop    = new Shape();
        bowStringBottom = new Shape();
        bowStringMc     = new MovieClip();

        bowStringMc.addChild(bowStringTop);
        bowStringMc.addChild(bowStringBottom);

        myStage.addChild(bowStringMc);

        bowStringTop.graphics.lineStyle(2, 0x000000);
        bowStringTop.graphics.moveTo(0, 0);
        bowStringTop.graphics.lineTo(0, this.height / 2);

        bowStringBottom.graphics.lineStyle(2, 0x000000);
        bowStringBottom.graphics.moveTo(0, this.height-10);
        bowStringBottom.graphics.lineTo(0, this.height / 2);

        bowStringMc.x = this.x-1;
        bowStringMc.y = this.y - this.height / 2 + 5;

        this.hand.addEventListener(MouseEvent.MOUSE_DOWN, pullBowstring);
    }

    public function pullBowstring(e:MouseEvent) {
        myStage.addEventListener(MouseEvent.MOUSE_MOVE, reDrawBowstring);
        myStage.addEventListener(MouseEvent.MOUSE_UP, releaseBowstring);
    }

    public function releaseBowstring(e:MouseEvent) {
        myStage.removeEventListener(MouseEvent.MOUSE_MOVE, reDrawBowstring);
        myStage.removeEventListener(MouseEvent.MOUSE_UP, releaseBowstring);
    }

    public function reDrawBowstring(e:MouseEvent) {
        if (this.hand.x < -18 || this.hand.x > 0) {
            this.releaseBowstring(e);
        }
        this.hand.x = mouseX;
        this.arrow.x = mouseX;

        bowStringTop.graphics.clear();
        bowStringBottom.graphics.clear();

        bowStringTop.graphics.lineStyle(2, 0x000000);
        bowStringTop.graphics.moveTo(0, 0);
        bowStringTop.graphics.lineTo(this.hand.x, (this.height / 2)-5);

        bowStringBottom.graphics.lineStyle(2, 0x000000);
        bowStringBottom.graphics.moveTo(0, this.height-10);
        bowStringBottom.graphics.lineTo(this.hand.x, (this.height / 2)-5);
    }


You can use the draw class in flash. So a quick example would maybe look like this.

myString.graphics.clear();
myString.graphics.lineStyle(1);
myString.graphics.moveTo(bowTopX,bowTopY);
myString.graphics.curveTo(mouseX,mouseY,bowBottomX,bowBottomY);

This would draw a line from the top of the bow, to the bottom, and curve it in the direction of where your mouse is at. You could have that code run in a function which would be called every time flash refreshes the display or something, or on mouse move. What the clear() allows you to do is clear that specific shape and redraw it, which if done at a fast enough interval will look like its being animated

Hopefully this gives you a bit of perspective on what is possible


Best thing at this stage is to define exactly how you would like to interact with the bow.

Depending on the rendering scale, you will only need to draw the bow string so that it follows the mouse pointer on mousedown, but constrained to your preferred limits.

On the pull back, you'd best draw the string as two lines from either end of the bow, to the constrained mouse position.

When you release the bow, you'd probably want to draw the string as a single curve, at a given point (probably when the bow string reaches the flat point), so that you can draw the elastic stage of the string movement. (as it comes to rest.)

Hopefully you are familiar with tweening engines, if not, have a look at something like Desuades Motion Package, or Tweensy. (You can find them on http://fluxdb.fluxusproject.org)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜