refactor: offsets
This commit is contained in:
parent
fb4959916a
commit
56ab4d73e5
|
@ -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>
|
||||||
|
|
|
@ -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>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user