0

我有这段代码可以生成圆圈并使它们漂浮在舞台的边界内。虽然它停留在舞台上，但它也有一些让步，让圈子通过我喜欢的少量。

是否可以这样做但使用自定义形状并将圆圈限制在此形状内？

这是我的代码：

//number of balls
var numBalls:uint = 200;
var defaultBallSize:uint = 8;
var colors:Array = [0x79B718, 0x2D91A8, 0xB019BC, 0xF98715, 0xDB1616];

//init
makeDots();

function makeDots():void {
//create desired number of balls
for (var ballNum:uint=0; ballNum<numBalls; ballNum++){
var c1:Number = randomColor();
var c2:Number = randomColor();

//create ball
var thisBall:MovieClip = new MovieClip();
thisBall.graphics.beginFill(c1);
//thisBall.graphics.lineStyle(defaultBallSize, 0);
thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
thisBall.graphics.endFill();

addChild(thisBall);

//coordinates
thisBall.x = Math.random() * stage.stageWidth;
thisBall.y = Math.random() * stage.stageHeight;
//percieved depth
thisBall.ballNum = ballNum;
thisBall.depth = ballNum/numBalls;
thisBall.scaleY = thisBall.scaleX = 
////thisBall.alpha = 
ballNum/numBalls;
//velocity
thisBall.vx = 0;
thisBall.vy = 0;
thisBall.vz = 0;

//ball animation
thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
}
}

var dampen:Number = 0.90;
var maxScale:Number = 1.3;
var minScale:Number = .3;
var maxAlpha:Number = 1.3;
var minAlpha:Number = .3;
function animateBall(e:Event):void{
var thisBall:Object = e.target;
//apply randomness to velocity
thisBall.vx += Math.random() * 0.2 - 0.1;
thisBall.vy += Math.random() * 0.2 - 0.1;
thisBall.vz += Math.random() * 0.002 - 0.001;

thisBall.x += thisBall.vx;
thisBall.y += thisBall.vy;
//thisBall.scaleX = thisBall.scaleY += thisBall.vz;
//thisBall.alpha += thisBall.vz;
thisBall.vx *= dampen;
thisBall.vy *= dampen;
thisBall.vz *= dampen;

if(thisBall.x > stage.stageWidth) {
thisBall.x = 0 - thisBall.width;
}
else if(thisBall.x < 0 - thisBall.width) {
thisBall.x = stage.stageWidth;
}
if(thisBall.y > stage.stageHeight) {
thisBall.y = 0 - thisBall.height;
}
else if(thisBall.y < 0 - thisBall.height) {
thisBall.y = stage.stageHeight;
}

if (thisBall.scaleX > maxScale){
thisBall.scaleX = thisBall.scaleY = maxScale;
}
else if (thisBall.scaleX < minScale){
thisBall.scaleX = thisBall.scaleY = minScale;
}
if (thisBall.alpha > maxAlpha){
thisBall.alpha = maxAlpha;
}
else if (thisBall.alpha < minAlpha){
thisBall.alpha = minAlpha;
}
}

function randomColor():uint
{
return colors[int(Math.random()*colors.length)];
}

代码信用：

最初来自这里：圆立方

此处的其他帮助：预定义颜色列表中的随机颜色

4

3 回答 3

2

是的你可以。发生的情况是，当每个圆圈移动时，会检查它是否在 x 和 y 轴上的舞台边界内，如果超出，则“校正”。您可以修改确定这一点的代码部分，以检查圆圈是否在您的自定义形状内。

其复杂性将取决于您的自定义形状以及检测圆形/对象是否在您的自定义形状内的方法。

您可以尝试的“最简单的自定义形状”是矩形或正方形，因为舞台已经是一个大矩形。要开始此操作，请查看您给定的代码以找到限制舞台尺寸的 x 和 y 位置的代码行，并将它们更改为您的自定义矩形/正方形的尺寸。如果您的自定义形状矩形/正方形不像舞台那样源自 0、0，您可能必须添加位置偏移量。如果您想尝试其他形状，我建议将这部分（实际上是基本的碰撞检测）分解为一种方法。

编辑

我编辑了我的答案，以包含重新设计的原始代码以使用随机正方形作为自定义形状 - 如我的原始答案中所述，最容易尝试的形状。希望您可以比较两者并查看我所做的更改以尝试找出其背后的逻辑。

对于圆形或任何其他完全随机的形状，它会有点困难，但相同的想法/概念。

//number of balls
var numBalls:uint = 200;
var defaultBallSize:uint = 8;
var colors:Array = [0x79B718, 0x2D91A8, 0xB019BC, 0xF98715, 0xDB1616];

// new custom shape bounds, a square that is 200, 200 px and is at 175, 100 on the stage
var customSquare:Rectangle = new Rectangle(175, 100, 200, 200);

//init
makeDots();
function makeDots():void {
    //create desired number of balls
    for (var ballNum:uint=0; ballNum < numBalls; ballNum++){
        var c1:Number = randomColor();
        var c2:Number = randomColor();

        //create ball
        var thisBall:MovieClip = new MovieClip();
        thisBall.graphics.beginFill(c1);
        //thisBall.graphics.lineStyle(defaultBallSize, 0);
        thisBall.graphics.drawCircle(defaultBallSize, defaultBallSize, defaultBallSize);
        thisBall.graphics.endFill();

        addChild(thisBall);

        //coordinates - this part of the code is setting the initial positions of the circles based on the stage size
        //thisBall.x = Math.random() * stage.stageWidth;
        //thisBall.y = Math.random() * stage.stageHeight;
        //
        // changed so they use the "customSquare" rectangle instead, note that the custom shape has an x and y pos now that doesn't start at 0 (unlike the stage)
        thisBall.x = (Math.random() * customSquare.width) + customSquare.x;
        thisBall.y = (Math.random() * customSquare.height) + customSquare.y;

        //percieved depth
        thisBall.ballNum = ballNum;
        thisBall.depth = ballNum / numBalls;
        thisBall.scaleY = thisBall.scaleX = ballNum / numBalls;

        //velocity
        thisBall.vx = 0;
        thisBall.vy = 0;
        thisBall.vz = 0;

        //ball animation
        thisBall.addEventListener(Event.ENTER_FRAME, animateBall);
    }
}

var dampen:Number = 0.90;
var maxScale:Number = 1.3;
var minScale:Number = .3;
var maxAlpha:Number = 1.3;
var minAlpha:Number = 0.3;

function animateBall(e:Event):void{
    var thisBall:Object = e.target;

    //apply randomness to velocity
    /*thisBall.vx += Math.random() * 0.2 - 0.1;
    thisBall.vy += Math.random() * 0.2 - 0.1;
    thisBall.vz += Math.random() * 0.002 - 0.001;*/
    // increased velocity ranges to add more speed to see the effects easier
    thisBall.vx += Math.random() * 1.2 - 0.6;
    thisBall.vy += Math.random() * 1.2 - 0.6;
    thisBall.vz += Math.random() * 0.012 - 0.006;

    thisBall.x += thisBall.vx;
    thisBall.y += thisBall.vy;
    //thisBall.scaleX = thisBall.scaleY += thisBall.vz;
    //thisBall.alpha += thisBall.vz;
    thisBall.vx *= dampen;
    thisBall.vy *= dampen;
    thisBall.vz *= dampen;

    // =====================================================================================================================================
    // this part of the code is determining if each ball is going outside of the bounds of the stage and repositioning them if they are
    // this part is the 'collision detection', changed to use the bounds of the "customSquare" rectangle instead
    //
    // this part is detecting the position going out of bounds along the X axis
    /*if(thisBall.x > stage.stageWidth) {
        thisBall.x = 0 - thisBall.width;
    } else if(thisBall.x < 0 - thisBall.width) {
        thisBall.x = stage.stageWidth;
    }*/
    if(thisBall.x > (customSquare.width + customSquare.x)) {
        thisBall.x = customSquare.x - thisBall.width;
    } else if(thisBall.x < customSquare.x - thisBall.width) {
        thisBall.x = customSquare.width + customSquare.x;
    }

    // this part is detecting the position going out of bounds along the Y axis
    /*if(thisBall.y > stage.stageHeight) {
        thisBall.y = 0 - thisBall.height;
    } else if(thisBall.y < 0 - thisBall.height) {
        thisBall.y = stage.stageHeight;
    }*/
    if(thisBall.y > (customSquare.height + customSquare.y)) {
        thisBall.y = customSquare.y - thisBall.height;
    } else if(thisBall.y < customSquare.y - thisBall.height) {
        thisBall.y = customSquare.height + customSquare.y;
    }
    // =====================================================================================================================================


    if (thisBall.scaleX > maxScale){
        thisBall.scaleX = thisBall.scaleY = maxScale;
    } else if (thisBall.scaleX < minScale){
        thisBall.scaleX = thisBall.scaleY = minScale;
    }

    if (thisBall.alpha > maxAlpha){
        thisBall.alpha = maxAlpha;
    } else if (thisBall.alpha < minAlpha){
        thisBall.alpha = minAlpha;
    }
}

function randomColor():uint{    return colors[int(Math.random()*colors.length)];    }
于 2013-01-08T10:08:45.590 回答
0

从 Flash 中的动画中，我可以告诉你做这种事情的 Flash 方式是通过图层蒙版。这在代码中也应该是可能的。像这样松散的东西：

addChild(thisBall);

var layermask:Shape=new Shape();
addChild(layermask);
thisBall.mask=maskingShape;
于 2013-01-08T15:13:00.560 回答
0

假设您所要求的只是封闭区域周围的边界，您可以执行以下操作：

var container:MovieClip = new MovieClip;
container.graphics.lineStyle(1,0,1);
container.graphics.drawRect(0, 0, container.width, container.height);
container.graphics.endFill();
addChild(container);

并替换：

addChild(thisBall);

和 ：

container.addChild(thisBall);
于 2013-01-08T09:41:10.247 回答