참고)
https://brm.io/matter-js/
https://paulie.dev/posts/2020/08/react-hooks-and-matter-js/
리액트에서 Matter.js를 사용하여 바닥을 만들고 공을 생성해보기
npm i matter-js
혹은
yarn add matter-js
export default function MatterTest() {
const containerRef = useRef();
const canvasRef = useRef();
...
...
...
return (
<div
ref={containerRef}
style={{
width: 600,
height: 600
}}
>
<canvas ref={canvasRef} />
</div>
);
}
useEffect(() => {
let Engine = Matter.Engine;
let Render = Matter.Render;
let World = Matter.World;
let Bodies = Matter.Bodies;
let engine = Engine.create();
/**
* @element - canvas를 담을 HTMLelement
* @engine - 사용할 engine
* @canvas - 렌더링할 캔버스
* option: {
* @width - 렌더링의 넓이
* @height - 렌더링의 높이
* @background - 렌더링 기본 색상 (배경)
* @wireframes - 해당 캔버스가 wireframes만 렌더링할 것인지
* }
*/
let render = Render.create({
element: containerRef.current,
engine: engine,
canvas: canvasRef.current,
options: {
width: 600,
height: 600,
background: 'skyblue',
wireframes: false
}
});
/**
* @param x
* @param y
* @param width
* @param height
* @param option
*
* option {
* @param isStatic 물체를 고정시킬지에 대한 flag
* @param fillStyle 도형을 채울 색상 (default: 랜덤)
* }
*/
const floor = Bodies.rectangle(300, 600, 600, 30, {
isStatic: true,
render: {
fillStyle: '#99dd33'
}
})
/**
* @param x
* @param y
* @param radius
* @param restitution 물체의 restitution (elasticity) 정도
*/
const ball = Bodies.circle(300, 0, 50, 50, {
restitution: 0.9,
});
Bodies를 통해 원하는 도형을 선택하여 그릴 수 있음
World.add(engine.world, [floor, ball]);
Matter.Runner.run(engine);
Render.run(render);
import { useEffect, useRef } from "react";
import Matter from "matter-js";
export default function MatterTest() {
const containerRef = useRef();
const canvasRef = useRef();
useEffect(() => {
let Engine = Matter.Engine;
let Render = Matter.Render;
let World = Matter.World;
let Bodies = Matter.Bodies;
let engine = Engine.create();
let render = Render.create({
element: containerRef.current,
engine: engine,
canvas: canvasRef.current,
options: {
width: 600,
height: 600,
background: 'skyblue',
wireframes: false
}
});
const floor = Bodies.rectangle(300, 600, 600, 30, {
isStatic: true,
render: {
fillStyle: '#99dd33'
}
})
const ball = Bodies.circle(300, 0, 50, {
restitution: 0.9,
});
World.add(engine.world, [floor, ball]);
Matter.Runner.run(engine);
Render.run(render);
}, []);
return (
<div
ref={containerRef}
style={{
width: 600,
height: 600
}}
>
<canvas ref={canvasRef} />
</div>
)
}