Блог

Главная - Вопросы по программированию - Упрощенный способ с Pixi.js

Упрощенный способ с Pixi.js

#javascript #pixi.js

#javascript #pixi.js

Вопрос:

Я пытаюсь воспроизвести это http://scottmcdonnell.github.io/pixi-examples/index.html?s=demosamp;f=strip-demo.jsamp;title=Strip который сделан с использованием версии v3 из pixi.js . Я работаю с версией 5, и, похоже, я не могу заставить ее работать даже после замены всех устаревших фрагментов кода.

Мой код:

 var renderer = new PIXI.Renderer(800, 600, { view: $('.canvas') });

// create the root of the scene graph
var stage = new PIXI.Container();

var count = 0;

// build a rope!
var ropeLength = 918 / 20;

var points = [];

for (var i = 0; i < 20; i  )
{
    points.push(new PIXI.Point(i * ropeLength, 0));
}

var strip = new PIXI.SimpleRope(PIXI.Texture.from('https://lh3.googleusercontent.com/proxy/vhIArUv8tvygt7nxZwB_md9SdQXvMFczJcywCpCLhLDxlEP_S0XC2mNjXlAvVDjXcI1i0uXQ32xMAgSGnHs8r8qY'), points);

strip.x = -459;

var snakeContainer = new PIXI.Container();
snakeContainer.position.x = 400;
snakeContainer.position.y = 300;

snakeContainer.scale.set(800 / 1100);
stage.addChild(snakeContainer);

snakeContainer.addChild(strip);

// start animating
requestAnimationFrame(animate);

function animate() {

    count  = 0.1;

    // make the snake
    for (var i = 0; i < points.length; i  ) {

        points[i].y = Math.sin((i * 0.5)   count) * 30;

        points[i].x = i * ropeLength   Math.cos((i * 0.3)   count) * 20;

    }

    // render the stage
    renderer.render(stage);

    requestAnimationFrame(animate);
} 
 .canvas {
  height: 75vh;
  width: 100%;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="canvas" id="board"></div>