cha0s/silphius
1
1
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Q+D targeting prototype

Browse Source
This commit is contained in:
cha0s 2024-06-24 10:53:01 -05:00
parent 7212e55ba5
commit 450d7f10fd
2 changed files with 74 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/react-components/ecs.jsx
View File

@ -53,7 +53,8 @@ export default function EcsComponent() {
if (!mainEntity) {
return false;
}
const {Camera, Position} = ecs.get(mainEntity);
const entity = ecs.get(mainEntity);
const {Camera} = entity;
const {TileLayers} = ecs.get(1);
const [cx, cy] = [
Math.round(Camera.x - RESOLUTION.x / 2),
@ -67,10 +68,7 @@ export default function EcsComponent() {
<TileLayer tileLayer={TileLayers.layers[0]} />
<Entities entities={entities} />
{isTool && (
<TargetingGhost
x={Position.x}
y={Position.y}
/>
<TargetingGhost entity={entity} />
)}
</Container>
)

78
app/react-components/targeting-ghost.jsx
View File

@ -1,3 +1,4 @@
import {SCALE_MODES} from '@pixi/constants';
import {RenderTexture} from '@pixi/core';
import {Container} from '@pixi/display';
import {BlurFilter} from '@pixi/filter-blur';
@ -57,22 +58,86 @@ const TargetingGhostInternal = PixiComponent('TargetingGhost', {
}
}
innerGrid.mask = fade;
const target = new Graphics();
target.lineStyle(lineWidth, 0xffffff);
for (let y = 0; y < 1; ++y) {
for (let x = 0; x < 1; ++x) {
target.drawRect(
(x * tileSize.x) + (lineWidth / 2),
(y * tileSize.y) + (lineWidth / 2),
tileSize.x,
tileSize.y,
);
}
}
const targetInner = new Graphics();
targetInner.alpha = 0.6;
targetInner.pivot = {
x: tileSize.x / 2 + 0.0625,
y: tileSize.y / 2 + 0.0625,
};
targetInner.lineStyle(lineWidth * 4, 0xcccccc);
for (let y = 0; y < 1; ++y) {
for (let x = 0; x < 1; ++x) {
targetInner.beginFill(0xcccccc);
targetInner.drawRect(
(x * tileSize.x) + lineWidth / 2 + lineWidth,
(y * tileSize.y) + lineWidth / 2 + lineWidth,
tileSize.x - lineWidth * 1.5,
tileSize.y - lineWidth * 1.5,
);
}
}
const container = new Container();
container.addChild(fade, grid, innerGrid);
container.addChild(fade, grid, innerGrid, target, targetInner);
return container;
},
applyProps: (container, oldProps, {x, y, pulse}) => {
container.x = x - (x % tileSize.x) + (tileSize.x / 2) - (tileSize.x * (radius / 2));
container.y = y - (y % tileSize.y) + (tileSize.y / 2) - (tileSize.y * (radius / 2));
applyProps: (container, oldProps, {entity, pulse}) => {
const {Direction: {direction}, Position: {x, y}} = entity;
const tileX = x - (x % tileSize.x);
const tileY = y - (y % tileSize.y);
const gridX = (tileSize.x * (radius / 2));
const gridy = (tileSize.y * (radius / 2));
container.x = tileX + (tileSize.x / 2) - gridX;
container.y = tileY + (tileSize.y / 2) - gridy;
container.children[0].alpha = 0.5 + (pulse / 2);
container.children[0].x = x % tileSize.x - (tileSize.x / 2) ;
container.children[0].y = y % tileSize.y - (tileSize.y / 2) ;
const color = Math.round(255 - (pulse * 255));
container.children[2].tint = `rgb(${color}, ${color}, ${color})`;
container.children[4].angle = (1 - pulse) * 5.625;
container.children[4].scale.x = 0.2 + (0.6 * pulse);
container.children[4].scale.y = 0.2 + (0.6 * pulse);
switch (direction) {
case 0:
container.children[3].x = gridX - (tileSize.x / 2);
container.children[3].y = gridy - (tileSize.y * 1.5);
container.children[4].x = gridX;
container.children[4].y = gridy - tileSize.y;
break;
case 1:
container.children[3].x = gridX + (tileSize.x / 2);
container.children[3].y = gridy - (tileSize.y / 2);
container.children[4].x = gridX + tileSize.x;
container.children[4].y = gridy;
break;
case 2:
container.children[3].x = gridX - (tileSize.x / 2);
container.children[3].y = gridy + (tileSize.y / 2);
container.children[4].x = gridX;
container.children[4].y = gridy + tileSize.y;
break;
case 3:
container.children[3].x = gridX - (tileSize.x * 1.5);
container.children[3].y = gridy - (tileSize.y / 2);
container.children[4].x = gridX - tileSize.x;
container.children[4].y = gridy;
break;
}
},
})
export default function TargetingGhost({x, y}) {
export default function TargetingGhost({entity}) {
const app = useApp();
const [radians, setRadians] = useState(0);
useEffect(() => {
@ -86,8 +151,7 @@ export default function TargetingGhost({x, y}) {
return (
<TargetingGhostInternal
app={app}
x={x}
y={y}
entity={entity}
pulse={(Math.cos(radians) + 1) * 0.5}
/>
);