56 lines
1.5 KiB
JavaScript
56 lines
1.5 KiB
JavaScript
import {Container} from '@pixi/display';
|
|
import {PixiComponent} from '@pixi/react';
|
|
import '@pixi/spritesheet'; // NECESSARY!
|
|
import {CompositeTilemap} from '@pixi/tilemap';
|
|
|
|
import {useAsset} from '@/context/assets.js';
|
|
|
|
const TileLayerInternal = PixiComponent('TileLayer', {
|
|
create: () => {
|
|
const container = new Container();
|
|
container.addChild(new CompositeTilemap());
|
|
return container;
|
|
},
|
|
applyProps: (container, {mask: oldMask, tileLayer: oldTileLayer}, props) => {
|
|
const {asset, mask, tileLayer} = props;
|
|
const extless = tileLayer.source.slice('/assets/'.length, -'.json'.length);
|
|
const {textures} = asset;
|
|
if (tileLayer === oldTileLayer) {
|
|
return;
|
|
}
|
|
if (oldMask) {
|
|
container.removeChildAt(1);
|
|
container.mask = undefined;
|
|
}
|
|
if (mask) {
|
|
container.addChild(mask);
|
|
container.mask = mask;
|
|
}
|
|
const tilemap = container.children[0];
|
|
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 {mask, tileLayer} = props;
|
|
const asset = useAsset(tileLayer.source);
|
|
if (!asset) {
|
|
return false;
|
|
}
|
|
return (
|
|
<>
|
|
<TileLayerInternal
|
|
{...props}
|
|
asset={asset}
|
|
mask={mask}
|
|
/>
|
|
</>
|
|
);
|
|
}
|