examples/test2d.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/js/spritejs.js"></script>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script>
const textureURL = 'https://p4.ssl.qhimg.com/t012170360e1552ce17.png';
const el = new spritejs.Sprite();
el.attr({
size: [100, 100],
anchor: 0.5,
borderWidth: 10,
borderColor: 'rgba(0,0,0,1)',
bgcolor: 'red',
pos: [256, 256],
// transform: 'rotate(45deg)',
opacity: 0.2,
transformOrigin: [50, 50],
});
const el2 = el.cloneNode();
el2.attr({
anchor: 0,
texture: textureURL,
textureRect: [50, 50, 100, 100],
// textureRepeat: true,
});
const canvas = document.querySelector('canvas');
const layer = new spritejs.Layer({
canvas,
// contextType: '2d',
});
const group = new spritejs.Group();
group.appendChild(el);
// group.appendChild(el2);
group.attr({
transformOrigin: [256, 256],
});
layer.appendChild(group);
function update(t) {
group.attr({
transform: `rotate(${0.1 * t})`,
});
requestAnimationFrame(update);
}
update(0);
</script>
</body>
</html>