trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: convert missing texture into a data url

Browse source
This commit is contained in:
trafficlunar 2024-12-23 13:29:16 +00:00
parent 2772577a7b
commit bea25fc115
4 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/blocks/missing.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 82 B

16
src/components/canvas/Blocks.tsx
View file

@ -4,6 +4,8 @@ import * as PIXI from "pixi.js";
import { useApp } from "@pixi/react";
import { CompositeTilemap, settings } from "@pixi/tilemap";
import constants from "@/constants";
import _blockData from "@/data/blocks/programmer-art/data.json";
const blockData: BlockData = _blockData;
@ -24,8 +26,6 @@ settings.use32bitIndex = true;
function Blocks({ blocks, setBlocks, textures, solidTextures, image, imageDimensions, coords, scale, setLoading }: Props) {
const app = useApp();
const [missingTexture, setMissingTexture] = useState<PIXI.Texture>();
const tilemapRef = useRef<CompositeTilemap>();
const tileBlocks = () => {
@ -36,24 +36,16 @@ function Blocks({ blocks, setBlocks, textures, solidTextures, image, imageDimens
// Tile solid colors at smaller scales
if (scale >= 0.5) {
blocks.forEach((block) => {
tilemap.tile(textures[`${block.name}.png`] ?? missingTexture, block.x * 16, block.y * 16);
tilemap.tile(textures[`${block.name}.png`] ?? constants.MISSING_TEXTURE, block.x * 16, block.y * 16);
});
} else {
blocks.forEach((block) => {
tilemap.tile(solidTextures[`${block.name}`] ?? missingTexture, block.x * 16, block.y * 16);
tilemap.tile(solidTextures[`${block.name}`] ?? constants.MISSING_TEXTURE, block.x * 16, block.y * 16);
});
}
};
useEffect(() => {
// Load the missing texture
const loadMissingTexture = async () => {
const mTexture = await PIXI.Texture.from("/blocks/missing.png");
setMissingTexture(mTexture);
};
loadMissingTexture();
// Create tilemap
const tilemap = new CompositeTilemap();
tilemapRef.current = tilemap;
tilemap.cullable = true;

5
src/components/toolbar/SelectedBlock.tsx
View file

@ -1,5 +1,7 @@
import { useContext } from "react";
import constants from "@/constants";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { TexturesContext } from "@/context/Textures";
@ -11,9 +13,8 @@ function SelectedBlock() {
const convertToDataUrl = (textureName: string): string => {
// Show missing texture if fail
if (!textures["stone"])
return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg==";
const texture = textures[textureName];
if (!texture) return constants.MISSING_TEXTURE;
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");

4
src/constants.ts Normal file
View file

@ -0,0 +1,4 @@
export default {
MISSING_TEXTURE:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg==",
};