Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useContext } from "react";
import { useAppSelector } from "store/hooks";
import styled from "styled-components";
import {
spriteAnimationSelectors,
spriteSheetSelectors,
spriteStateSelectors,
} from "store/features/entities/entitiesSelectors";
import { MetaspriteCanvas } from "components/rendering/MetaspriteCanvas";
import { SceneContext } from "components/script/context/SceneContext";
import {
ActorDirection,
MonoOBJPalette,
Palette,
} from "shared/lib/resources/types";
interface SpriteSheetCanvasProps {
spriteSheetId: string;
direction?: ActorDirection;
frame?: number;
palettes?: Palette[];
previewAsMono?: boolean;
monoPalettes?: [MonoOBJPalette, MonoOBJPalette];
offsetPosition?: boolean;
}
const Wrapper = styled.div`
position: relative;
canvas {
display: block;
}
`;
const directions: ActorDirection[] = ["right", "left", "up", "down"];
const SpriteSheetCanvas = ({
spriteSheetId,
direction = "down",
frame = 0,
palettes,
previewAsMono,
monoPalettes,
offsetPosition,
}: SpriteSheetCanvasProps) => {
const sprite = useAppSelector((state) =>
spriteSheetSelectors.selectById(state, spriteSheetId),
);
const state = useAppSelector((state) =>
spriteStateSelectors.selectById(state, sprite?.states?.[0] || ""),
);
const animations = state?.animations || [];
// Determine animation to use based on type
let animationIndex = directions.indexOf(direction);
if (
state?.animationType === "fixed" ||
state?.animationType === "fixed_movement"
) {
animationIndex = 0;
} else if (state?.animationType === "platform_player") {
if (animationIndex > 1) {
animationIndex = 0;
}
}
const flipX = state?.flipLeft && direction === "left";
if (flipX) {
animationIndex = 0;
}
if (animationIndex < 0) {
animationIndex = 3;
}
const animationId = animations[animationIndex] || "";
const animation = useAppSelector((state) =>
spriteAnimationSelectors.selectById(state, animationId),
);
const frames = animation?.frames || [];
const metaspriteId = frames[frame % frames.length] || "";
const context = useContext(SceneContext);
if (!sprite || !state) {
return <div />;
}
return (
<Wrapper
style={
offsetPosition
? {
top: -sprite.canvasHeight + 8 - sprite.canvasOriginY,
left:
Math.min(0, 8 - sprite.canvasWidth / 2) - sprite.canvasOriginX,
}
: undefined
}
>
<MetaspriteCanvas
spriteSheetId={spriteSheetId}
metaspriteId={metaspriteId}
palettes={palettes}
flipX={flipX}
previewAsMono={previewAsMono}
monoPalettes={monoPalettes}
spriteMode={context.spriteMode}
/>
</Wrapper>
);
};
export default SpriteSheetCanvas;
|