Как сделать частицы дыма с помощью matterjs

Question

Я создаю игру с прокруткой, используя Matter.JS, в этой игре один из героев сделан из огня, поэтому ему нужно немного дыма, но я не знаю, как сделать частицы, плавающие в воздухе, как я могу сделать плавающее тело в Материи. JS?

Я хочу что-то вроде этого: https://www.youtube.com/watch?v=b-QhKcae-6E

Смотрите мое codepen здесь: http://codepen.io/vanuatu/pen/VeQMpp

console.clear() 
// 
var canvas = document.getElementById("canvas-container"); 

// Matter module aliases 
var Engine   = Matter.Engine, 
    World   = Matter.World, 
    Body   = Matter.Body, 
    Bodies   = Matter.Bodies, 
    Events   = Matter.Events, 
    Constraint  = Matter.Constraint, 
    Composite  = Matter.Composite, 
    Composites  = Matter.Composites, 
    Bounds   = Matter.Bounds, 
    Mouse   = Matter.Mouse, 
    MouseConstraint = Matter.MouseConstraint; 

// create a Matter.js engine 
var engine = Engine.create(document.body, { 
    enableSleeping: false, // def = false 
    render: { 
    options: { 
     showAngleIndicator : true, 
     wireframes   : true, 
     showVelocity  : true, 
     showCollisions  : true, 
     enableSleeping  : true, 
     hasBounds   : true 
    } 
    } 
}); 


// add a mouse controlled constraint 
var mouseConstraint = MouseConstraint.create(engine); 
World.add(engine.world, mouseConstraint); 

// create the ground the stack will sit on 
var ground = Bodies.rectangle(200, 250, 1500, 10, { 
    isStatic: true 
}); 

// create the wrecking ball 
var ball = Bodies.circle(260, 60, 20, { density: 1, frictionAir: 0.001}); 

// create the rope the ball will swing on 
var ballRope = Constraint.create({ 
    pointA: { x: 340, y: 60 }, 
    bodyB: ball 
}); 

// basket ball 
var basketBall = Bodies.circle(60, 60, 20, { restitution: 0.9 }); 

// bubble ball 
var bubbleBall = Bodies.circle(120, 60, 40, { 
    //frictionAir: 1, 
    density : 1, 
    slop  : 2, 
    friction : 1 
}); 

// 
initialEngineBoundsMaxX = engine.render.bounds.max.x 
initialEngineBoundsMaxY = engine.render.bounds.max.y 
centerX = - 200 
centerY = - 200 

// 
var square = Bodies.rectangle(180, 60, 20, 20); 

// 
var counter = 0; 
var infCounter = -1000; 
Events.on(engine, 'beforeUpdate', function(event) { 
    counter += 1; 
    infCounter += 1; 

    // 
    hero = bubbleBall 

    // Fallow Hero X 
    engine.render.bounds.min.x = centerX + hero.bounds.min.x 
    engine.render.bounds.max.x = centerX + hero.bounds.min.x + initialEngineBoundsMaxX 

    // Fallow Hero Y 
    engine.render.bounds.min.y = centerY + hero.bounds.min.y 
    engine.render.bounds.max.y = centerY + hero.bounds.min.y + initialEngineBoundsMaxY 

    // 
    Mouse.setOffset(mouseConstraint.mouse, engine.render.bounds.min); 


    // every 1.5 sec 
    if (counter >= 60 * 1.5) { 
    Body.setVelocity(basketBall, { x: 0, y: 10 }); 
    Body.setAngle(square, -Math.PI * 0.26); 

    // reset counter 
    counter = 0; 
    scaleFactor = 1; 
    } 
}); 


// 
Events.on(mouseConstraint, 'startdrag', function(event) { 
    //console.log(event); 
}) 

// add all of the bodies to the world 
World.add(engine.world, [ball, ballRope, basketBall, bubbleBall, square, ground]); 

// run the engine 
Engine.run(engine); 

// 
document.body.addEventListener("keydown", function(e){ 
    speed = 10; 
    switch(e.which){ 
     case 65: 
     Body.setVelocity(hero, {x: -speed, y: 0}) 
     break; 

     case 68: 
     Body.setVelocity(hero, {x: speed, y: 0}) 
     break; 

     case 87: 
     Body.setVelocity(hero, {x: 0, y: -speed}) 
     break; 
    } 
}) 

Answer 1

Я сделал этот вопрос в Официальном хранилище в GitHub, и @liabru мне отвечает:

То, что вы ищете, является системой частиц. Ничего нет , который в настоящее время встроен в двигатель для этого, это нечто большее, чем , которое вы найдете в игровом движке, поэтому оно немного выходит за рамки.

Вы можете создать свой собственный, к определению объект частиц (положение, скорость, срок службы и т.д.), а затем использовать событие обновления двигатель для обновления позиции частиц, а затем вынести их на тот же холст, как физики объектов , Встроенный тип кузова может быть несколько повторно использован для (не добавляйте его в мир, вместо этого создайте свою собственную частицу мир).