fix: outer frame

This commit is contained in:
cha0s 2024-07-22 03:17:02 -05:00
parent 02acecfb5c
commit 73c6d991a7

View File

@ -1,30 +1,61 @@
import {RenderTexture} from '@pixi/core'; import {RenderTexture} from '@pixi/core';
import {Container} from '@pixi/display'; import {Container} from '@pixi/display';
import {Graphics} from '@pixi/graphics';
import {PixiComponent, useApp} from '@pixi/react'; import {PixiComponent, useApp} from '@pixi/react';
import {Sprite} from '@pixi/sprite'; import {Sprite} from '@pixi/sprite';
import '@pixi/spritesheet'; // NECESSARY! import '@pixi/spritesheet'; // NECESSARY!
import {CompositeTilemap} from '@pixi/tilemap'; import {CompositeTilemap} from '@pixi/tilemap';
import {useAsset} from '@/react/context/assets.js'; import {useAsset} from '@/react/context/assets.js';
import {CHUNK_SIZE} from '@/util/constants.js'; import {CHUNK_SIZE, RESOLUTION} from '@/util/constants.js';
import {deferredLighting} from './lights.js'; import {deferredLighting} from './lights.js';
const TileLayerInternal = PixiComponent('TileLayer', { const TileLayerInternal = PixiComponent('TileLayer', {
create: ({group, tileLayer}) => { create: ({group, tileLayer}) => {
const container = new Container(); const container = new Container();
const cy = Math.ceil(tileLayer.area.y / CHUNK_SIZE); const {area, tileSize} = tileLayer;
const cx = Math.ceil(tileLayer.area.x / CHUNK_SIZE); const g = new Graphics();
g.beginFill(group === deferredLighting.diffuseGroup ? 0x000000 : 0x7777ff);
// outer frame
g.drawRect(
-RESOLUTION.x / 2,
-RESOLUTION.y / 2,
area.x * tileSize.x + RESOLUTION.x,
RESOLUTION.y / 2,
);
g.drawRect(
-RESOLUTION.x / 2,
-RESOLUTION.y / 2,
RESOLUTION.x / 2,
area.y * tileSize.y + RESOLUTION.y,
);
g.drawRect(
area.x * tileSize.x,
0,
RESOLUTION.x / 2,
area.y * tileSize.y,
);
g.drawRect(
0,
area.y * tileSize.y,
area.x * tileSize.x,
RESOLUTION.y / 2,
);
g.parentGroup = group;
container.addChild(g);
const cy = Math.ceil(area.y / CHUNK_SIZE);
const cx = Math.ceil(area.x / CHUNK_SIZE);
for (let iy = 0; iy < cy; ++iy) { for (let iy = 0; iy < cy; ++iy) {
for (let ix = 0; ix < cx; ++ix) { for (let ix = 0; ix < cx; ++ix) {
const tilemap = new CompositeTilemap(); const tilemap = new CompositeTilemap();
const renderTexture = RenderTexture.create({ const renderTexture = RenderTexture.create({
width: tileLayer.tileSize.x * CHUNK_SIZE, width: tileSize.x * CHUNK_SIZE,
height: tileLayer.tileSize.y * CHUNK_SIZE, height: tileSize.y * CHUNK_SIZE,
}); });
const sprite = new Sprite(renderTexture); const sprite = new Sprite(renderTexture);
sprite.x = tileLayer.tileSize.x * CHUNK_SIZE * ix; sprite.x = tileSize.x * CHUNK_SIZE * ix;
sprite.y = tileLayer.tileSize.y * CHUNK_SIZE * iy; sprite.y = tileSize.y * CHUNK_SIZE * iy;
sprite.parentGroup = group; sprite.parentGroup = group;
sprite.tilemap = tilemap; sprite.tilemap = tilemap;
container.addChild(sprite); container.addChild(sprite);
@ -41,7 +72,7 @@ const TileLayerInternal = PixiComponent('TileLayer', {
} }
for (const i in tileLayer.$$chunks) { for (const i in tileLayer.$$chunks) {
if (!oldTileLayer || oldTileLayer.$$chunks[i] !== tileLayer.$$chunks[i]) { if (!oldTileLayer || oldTileLayer.$$chunks[i] !== tileLayer.$$chunks[i]) {
const {texture, tilemap} = container.children[i]; const {texture, tilemap} = container.children[parseInt(i) + 1];
tilemap.clear(); tilemap.clear();
const ax = Math.ceil(tileLayer.area.x / CHUNK_SIZE); const ax = Math.ceil(tileLayer.area.x / CHUNK_SIZE);
const cy = Math.floor(i / ax); const cy = Math.floor(i / ax);