refactor: offsets

This commit is contained in:
cha0s 2024-06-24 09:19:24 -05:00
parent fb4959916a
commit 56ab4d73e5
4 changed files with 20 additions and 31 deletions

View File

@ -60,23 +60,16 @@ export default function EcsComponent() {
Math.round(Camera.y - RESOLUTION.y / 2), Math.round(Camera.y - RESOLUTION.y / 2),
]; ];
return ( return (
<Container> <Container
<TileLayer x={-cx}
tileLayer={TileLayers.layers[0]} y={-cy}
x={-cx} >
y={-cy} <TileLayer tileLayer={TileLayers.layers[0]} />
/> <Entities entities={entities} />
<Entities
entities={entities}
x={-cx}
y={-cy}
/>
{isTool && ( {isTool && (
<TargetingGhost <TargetingGhost
px={Position.x} x={Position.x}
py={Position.y} y={Position.y}
cx={cx}
cy={cy}
/> />
)} )}
</Container> </Container>

View File

@ -26,7 +26,7 @@ function Crosshair({x, y}) {
); );
} }
export default function Entities({entities, x, y}) { export default function Entities({entities}) {
const renderables = []; const renderables = [];
for (const id in entities) { for (const id in entities) {
const entity = entities[id]; const entity = entities[id];
@ -45,8 +45,8 @@ export default function Entities({entities, x, y}) {
); );
} }
return ( return (
<Container x={x} y={y}> <>
{renderables} {renderables}
</Container> </>
) )
} }

View File

@ -61,17 +61,17 @@ const TargetingGhostInternal = PixiComponent('TargetingGhost', {
container.addChild(fade, grid, innerGrid); container.addChild(fade, grid, innerGrid);
return container; return container;
}, },
applyProps: (container, oldProps, {cx, cy, px, py, tint}) => { applyProps: (container, oldProps, {x, y, tint}) => {
container.x = px - (px % tileSize.x) - cx + (tileSize.x / 2) - (tileSize.x * (radius / 2)); container.x = x - (x % tileSize.x) + (tileSize.x / 2) - (tileSize.x * (radius / 2));
container.y = py - (py % tileSize.y) - cy + (tileSize.y / 2) - (tileSize.y * (radius / 2)); container.y = y - (y % tileSize.y) + (tileSize.y / 2) - (tileSize.y * (radius / 2));
container.children[0].x = px % tileSize.x - (tileSize.x / 2) ; container.children[0].x = x % tileSize.x - (tileSize.x / 2) ;
container.children[0].y = py % tileSize.y - (tileSize.y / 2) ; container.children[0].y = y % tileSize.y - (tileSize.y / 2) ;
const color = Math.round(255 - (tint * 255)); const color = Math.round(255 - (tint * 255));
container.children[2].tint = `rgb(${color}, ${color}, ${color})`; container.children[2].tint = `rgb(${color}, ${color}, ${color})`;
}, },
}) })
export default function TargetingGhost({cx, cy, px, py}) { export default function TargetingGhost({x, y}) {
const app = useApp(); const app = useApp();
const [radians, setRadians] = useState(0); const [radians, setRadians] = useState(0);
useEffect(() => { useEffect(() => {
@ -85,10 +85,8 @@ export default function TargetingGhost({cx, cy, px, py}) {
return ( return (
<TargetingGhostInternal <TargetingGhostInternal
app={app} app={app}
cx={cx} x={x}
cy={cy} y={y}
px={px}
py={py}
tint={(Math.cos(radians) + 1) * 0.5} tint={(Math.cos(radians) + 1) * 0.5}
/> />
); );

View File

@ -7,11 +7,9 @@ import useAsset from '@/hooks/use-asset.js';
const TileLayerInternal = PixiComponent('TileLayer', { const TileLayerInternal = PixiComponent('TileLayer', {
create: () => new CompositeTilemap(), create: () => new CompositeTilemap(),
applyProps: (tilemap, {tileLayer: oldTileLayer}, props) => { applyProps: (tilemap, {tileLayer: oldTileLayer}, props) => {
const {asset, tileLayer, x, y} = props; const {asset, tileLayer} = props;
const extless = tileLayer.source.slice('/assets/'.length, -'.json'.length); const extless = tileLayer.source.slice('/assets/'.length, -'.json'.length);
const {textures} = asset; const {textures} = asset;
tilemap.position.x = x;
tilemap.position.y = y;
if (tileLayer === oldTileLayer) { if (tileLayer === oldTileLayer) {
return; return;
} }