Kinetic.js Анимиране на множество групи, които съдържат форма и текст

Нов съм в Kinetic.js. Опитвам се да създам поредица от произволно движещи се групи, всяка от които съдържа една звезда и заглавие. Ето текущата скица: http://jsfiddle.net/dCw9e/.

Не мога да разбера защо всеки групов обект има уникален набор от граници в анимацията. Може ли някой да хвърли светлина върху това, което пропускам тук? Защо границите за всяка група не са еднакви? т.е. границите на родителския контейнер.

Това е анимацията:

var anim = new Kinetic.Animation(function(frame) {

newtime = frame.time;

// Acceleration due to gravity via time delay (chunks miliseconds)
if((newtime - oldtime) > framerate) { // every N milliseconds... (this emulated a frame rate)
    oldtime = newtime;

    var angularSpeed = Math.PI / 2;
    var angleDiff = [];


    var stage = MilestonesGame.stage;
    var stageKids = stage.getChildren();
    var starsLayer = stageKids[1];
    var stars = [];
    stars = starsLayer.getChildren();
    //console.log(stars[1].getX());

    for(var n= 0; n < groups.length; n++){
        angleDiff[n] = frame.timeDiff * angularSpeed / 10000 * rotDir[n];
    }   


    for(var j = 0; j < groups.length; j++) {



    /* Bounce stars off all stage parameter boundaries */

    // floor boundary
    if(groups[j].getY() > floor) {groups[j].setY(floor);}
    if(groups[j].getY() == floor) {

     $(window).resize(_.debounce(function(){
        floor = MilestonesGame.stage.getHeight()-7;
     }, 300));

        yvel[j] *= -1;

    }

    //Ceiling boundary
    if(groups[j].getY() < cieling){groups[j].setY(cieling);}
    if(groups[j].getY() == cieling){

        yvel[j] *= -1;

    }
    // right wall
    if(groups[j].getX() > rightwall) {groups[j].setX(rightwall);}
    if(groups[j].getX() == rightwall) {

        $(window).resize(_.debounce(function(){
            rightwall = MilestonesGame.stage.getWidth()-7;
        }, 300));

        xvel[j] *= -1;
    }
    // left wall
    if(groups[j].getX() < leftwall) {groups[j].setX(leftwall);}
    if(groups[j].getX() == leftwall) {

        xvel[j] *= -1;
    }

    groups[j].setX(groups[j].getX() + xvel[j]);                                 
    groups[j].setY(groups[j].getY() + yvel[j]);
    //stars[i].rotate(angleDiff[i]);
    }
}

}, this.starsLayer); anim.start();

Благодаря, Джон


javascript canvas html kineticjs
person user2517788    schedule 06.11.2013    source източник

Отговори (1)


arrow_upward
2
arrow_downward

Произходът [x,y] на всяка група по подразбиране е [0,0] спрямо нейния родител.

Във вашия случай всеки родител на групата е сцената.

Така че произходът на всичките ви групи - техните x/y, са относителни към сцената.

Малко наблюдения...

Извадете вашия манипулатор на събития за преоразмеряване извън всякакви цикли (лоша практика, ако има вътрешни цикли).

// resizing handler -- never put this in a loop!

$(window).resize(_.debounce(function(){
    rightwall = MilestonesGame.stage.getWidth();
    floor = MilestonesGame.stage.getHeight();
}, 300));

Нека вашите граници са в пълен размер, за да можете лесно да преоразмерите звездите си по-късно

// boundaries -- leave boundaries full width/height
// which lets you resize each star later

var leftwall = 0;
var rightwall = MilestonesGame.stage.getWidth();
var floor = MilestonesGame.stage.getHeight();
var cieling = 0;

Вашите гранични тестове за попадение могат да бъдат преработени по този начин за ефективност и яснота:

// Bounce stars off all stage parameter boundaries 

    for(var j = 0; j < groups.length; j++) {


    // temp save often used array references in vars

    var group=groups[j];
    var x=group.getX();
    var y=group.getY();
    var r=group.getOuterRadius();

    // ceiling boundary

    if(y-r<=cieling) {
        y=cieling+r;
        yvel[j] *= -1;
    }

    // floor boundary

    if(y+r>=floor) {
        y=floor-r;
        yvel[j] *= -1;
    }

    // left boundary

    if(x-r<=leftwall) {
        x=leftwall+r;
        xvel[j] *= -1;
    }

    // left and right boundary

    if(x+r>=rightwall) {
        x=rightwall-r;
        xvel[j] *= -1;
    }

    // move this star
    group.setX(x + xvel[j]);                                    
    group.setY(y + yvel[j]);

    }
person markE    schedule 06.11.2013
comment
Благодаря ти много! Когато казвате, че произходът на всички ваши групи - техните x/y, са относителни към сцената, прав ли съм, като предполагам, че имате предвид, че точката 0, 0 на всяка група трябва да бъде подравнена към точката 0, 0 на сцената? Това е контраинтуитивно за мен, защото точката 0, 0 на всяка група е странно компенсирана от разликата в атрибута x, y на всяка група...не мога да си обясня защо се случва това...някакви мисли? - person user2517788; 07.11.2013
comment
Да, групите[0]{x:0,y:0} са позиционирани на етап [0,0]. Така че вашите групи[0]{x:16,y:16} са на етап [16,16]. Всичко вътре в групите[0] ще започне на етап [16,16] плюс техните собствени x,y. Например правоъгълник в група [0], като този правоъгълник има свой собствен x:20,y:30, ще бъде на етап [16+20,16+30]. - person markE; 07.11.2013
comment
Добре, така че в моята анимация, когато се обадя: - person user2517788; 07.11.2013
comment
опа, когато се обадя, групи[j].setX(групи[j].getX() + xvel[j]); groups[j].setY(groups[j].getY() + yvel[j]);, не трябва ли това да премества групите в рамките на границата на сцената, така че всеки от техните "тавани" да е на сцената? - person user2517788; 07.11.2013