fix: outer frame
This commit is contained in:
parent
02acecfb5c
commit
73c6d991a7
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user