trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 14:44:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: use spritesheets instead of loading every image individually

Browse source
This commit is contained in:
trafficlunar 2024-12-07 16:45:04 +00:00
parent 2670fbb1e8
commit 63d81a45f2
274 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/blocks.tsx
View file

@ -1,13 +1,19 @@
import { useEffect, useState } from "react";
import { useEffect } from "react";
import { Texture } from "pixi.js";
import { Sprite } from "@pixi/react";
import blocksData from "@/lib/data/blocks/programmer-art/average_colors.json";
import welcomeBlocksData from "@/lib/data/welcome.json";
import { Sprite } from "@pixi/react";
function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispatch<React.SetStateAction<Block[]>> }) {
const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({});
function Blocks({
blocks,
setBlocks,
textures,
}: {
blocks: Block[];
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>;
textures: Record<string, Texture>;
}) {
const findClosestBlock = (r: number, g: number, b: number, a: number) => {
let closestBlock = "";
let closestDistance = Infinity;
@ -24,17 +30,6 @@ function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispa
};
useEffect(() => {
// Load images
const loadedImages: { [key: string]: HTMLImageElement } = {};
for (const name of Object.keys(blocksData)) {
const image = new Image();
image.src = `/blocks/programmer-art/${name}.png`;
loadedImages[name] = image;
}
setImages(loadedImages);
// TESTING: convert image to blocks
const image = new Image();
image.src = "/bliss.png";
@ -72,9 +67,15 @@ function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispa
return (
<>
{blocks.map((block, index) => (
<Sprite key={index} image={images[block.name]} x={block.x * 16} y={block.y * 16} />
))}
{blocks.map((block, index) => {
const texture = textures[block.name];
if (!texture) {
console.warn(`Texture not found for block: ${block.name}`);
return null;
}
return <Sprite key={index} texture={texture} x={block.x * 16} y={block.y * 16} />;
})}
</>
);
}