silphius/app/react-components/tile-layer.jsx
2024-06-24 09:19:24 -05:00

39 lines
1.0 KiB
JavaScript

import {PixiComponent} from '@pixi/react';
import '@pixi/spritesheet'; // NECESSARY!
import {CompositeTilemap} from '@pixi/tilemap';
import useAsset from '@/hooks/use-asset.js';
const TileLayerInternal = PixiComponent('TileLayer', {
create: () => new CompositeTilemap(),
applyProps: (tilemap, {tileLayer: oldTileLayer}, props) => {
const {asset, tileLayer} = props;
const extless = tileLayer.source.slice('/assets/'.length, -'.json'.length);
const {textures} = asset;
if (tileLayer === oldTileLayer) {
return;
}
tilemap.clear();
let i = 0;
for (let y = 0; y < tileLayer.area.y; ++y) {
for (let x = 0; x < tileLayer.area.x; ++x) {
tilemap.tile(textures[`${extless}/${tileLayer.data[i++]}`], tileLayer.tileSize.x * x, tileLayer.tileSize.y * y);
}
}
},
})
export default function TileLayer(props) {
const {tileLayer} = props;
const asset = useAsset(tileLayer.source);
if (!asset) {
return false;
}
return (
<TileLayerInternal
{...props}
asset={asset}
/>
);
}