Материя. Js масштабирование спрайта (связано с другими переменными) - PullRequest
Новая
       60

Материя. Js масштабирование спрайта (связано с другими переменными)

0 голосов
/ 18 января 2020

Я использую Материя. Js для интерактивной анимации. Одна функция, над которой я работаю, - это масштабирование некоторых моих тел относительно их расстояния до курсора. Моя проблема в том, что я не могу масштабировать спрайт, который покрывает эти тела. Я пытался масштабировать сами тела, но размер спрайта фактически не менялся. Поэтому я решил, что мне просто нужно масштабировать размер спрайта. Однако я не могу получить какую-либо конфигурацию Matter.Body.set() для этого изменения. Читая источник, я не уверен, что это возможно.

Документация гласит: «При заданном свойстве и значении (или карте) задает свойство (я) тела , используя соответствующие функции установки, если они существуют. Предпочитают использовать фактические функции установки в критических ситуациях производительности. "

Я пытался: 

Body.set(body, {
  render: {
    sprite: {
      texture: // url to sprite reset here incase of overwrite,
      xScale: scaleFactor,
      yScale: scaleFactor
    }
  }
});

Это просто кажется, чтобы удалить спрайт и любые другие параметры рендеринга, поэтому я ничего не вижу.

Я пробовал: 

Body.set(body, 'render.sprite.xScale', scaleFactor);

Это, похоже, ничего не делает и не меняет рендеринг.

Разве невозможно установить значения объекта спрайта в любой момент, кроме создания тела? Или я просто неправильно ориентирую эти значения в вызовах функций?

1 Ответ

0 голосов
/ 27 января 2020

Вы можете установить масштаб непосредственно в свойствах спрайта и масштабировать тело с помощью Body.scale: 

body.render.sprite.xScale = box.render.sprite.xScale * scaleX;
body.render.sprite.yScale = box.render.sprite.yScale * scaleY;
Matter.Body.scale( body, scaleX, scaleY);

, вот пример игрушки. 

var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies,
  Body = Matter.Body;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
width: 800,
height: 400,
wireframes: false
  }
});

engine.world.gravity.y = 0;

var box = Bodies.rectangle(460, 120, 40, 40, { render: { strokeStyle: '#ffffff',
                sprite: {
                    texture: '//cdn.rawgit.com/liabru/matter-js/2560a681/demo/img/box.png'
                }
            }
        });

World.add(engine.world, [box]);

Engine.run(engine);

Render.run(render);

$('.scale').on('click', function () {
box.render.sprite.xScale = box.render.sprite.xScale * 1.5;
box.render.sprite.yScale = box.render.sprite.yScale * 1.2;
Body.scale( box, 1.5, 1.2);
});

$('.rotate').on('click', function () {
Body.rotate( box, Math.PI/6);
});

$('.translate').on('click', function () {
Body.translate( box, {x: -10, y: 20});
});
body {
  text-align: center;
  margin: 10px;
}

canvas {
  margin: 20px auto;
}

button {
  color: white;
  background: orange;
  border: none;
  padding: 10px;
  font-weight: 300;
  font-size: 1.2em;
  font-family: 'Lato';
  margin: 10px;
  cursor: pointer;
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.11.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="scale">Scale</button>
<button class="rotate">Rotate</button>
<button class="translate">Translate</button>
<br>

Обратите внимание, что текстура спрайта масштабируется в начальных координатах (локальных), в то время как тело (в данном случае поле) будет масштабироваться с поворотом система координат, если вращение было применено ранее.

...