PhaserJS: анимационные объекты выпадают и вновь появляются во время анимации - PullRequest
Новая
       13

PhaserJS: анимационные объекты выпадают и вновь появляются во время анимации

0 голосов
/ 30 декабря 2018

У меня есть цикл * 20, создающий анимацию из набора случайно выбранных png (на данный момент это простые блоки).После создания они выполняют простую анимацию скольжения по оси X.

Во время анимации некоторые поля исчезают / всплывают.Позже, когда подростки заканчивают, некоторые снова появляются / появляются.

Я что-то пропустил, чтобы они не выскочили?У меня есть события onStart / onComplete, и они запускаются, когда они должны, поэтому может показаться, что все всплывающее окно не завершается раньше, а только удаляется с экрана.

(я попытался выполнить jsfiddle /codepen, но скрипт вообще не работал)

Вот код: 

<head>
<script src="phaser.min.js"></script>
<script>
const config = {
    preload: preload,
    create: create,
    update: update
};

const game = new Phaser.Game(1280, 480, Phaser.auto, '', config)

function preload () {
    game.load.image('qtrf', 'img/quarter_0000_quarter-fade.png');
    game.load.image('qtr', 'img/quarter_0003_quarter.png');
    game.load.image('halff', 'img/half_0001_half-fade.png');
    game.load.image('half', 'img/half_0004_half.png');
    game.load.image('fullf', 'img/full-fade.png');
    game.load.image('full', 'img/full.png');

}

function create () {
    game.stage.backgroundColor = "#90cfc7";

    const bars = [
        // field 1 = name of sprite and sprite definition
        // field 2 = drop rate for random picking
        {"qtr": game.add.sprite(-160,0, 'qtr'), "rate": 15 },
        {"qtrf": game.add.sprite(-160,0, 'qtrf'), "rate": 2},
        {"half": game.add.sprite(-320,0, 'half'), "rate": 20},
        {"halff": game.add.sprite(-320,0, 'halff'), "rate": 2},
        {"full": game.add.sprite(-640,0, 'full'), "rate": 5},
        {"fullf": game.add.sprite(-640,0, 'fullf'), "rate": 5}
    ];

    const barrates = [];
    const barsprites = [];
    bars.forEach(element => {
        barrates.push(element.rate);
        Object.entries(element).forEach(objE => {
            if (objE[0] != "rate") {
                barsprites.push(objE[1]);
            }
        });
    });
    let ratesum = barrates.reduce((a,b) => a+b, 0)
            ratetable = barrates.map(e => (Number.parseFloat(e / ratesum).toFixed(2)) * 100);

    for (let i = 0; i < 10; i++) {
        let randbar = game.rnd.between(1, 100);
        let randtime = game.rnd.between(5000, 20000);
        let randdelay = game.rnd.between(2000, 10000);
        let position = 0;
        for (let j = 0; j < ratetable.length; j++) {
            position += ratetable[j]
            if (randbar < position+1) {
                console.log(j, randtime, randdelay);
                game.add.tween(barsprites[j]).to({ x: game.width }, randtime, Phaser.Easing.Linear.None, true, randdelay, -1, true);
                break;
            }
        }
    }
}

function update () {
}

function getbar () {

}

    </script>

</head>
...