From f5ae0f179643a2fef95b197de62bfa38e44b4e06 Mon Sep 17 00:00:00 2001 From: yuna878 Date: Wed, 15 Apr 2020 20:42:54 +0900 Subject: [PATCH] Add support for different size assets & Fix coordinate for json export --- src/App.css | 2 +- src/App.js | 23 +++--- src/jsonParsing.js | 60 ++++++++------- src/tiles.js | 183 +++++++++++++++++++++++++++++++++++---------- 4 files changed, 187 insertions(+), 81 deletions(-) diff --git a/src/App.css b/src/App.css index 4c72733..92f9739 100644 --- a/src/App.css +++ b/src/App.css @@ -52,7 +52,7 @@ .AssetScroller { overflow: scroll; - height: 550px; + height: 500px; } .SelectedAssetImg { diff --git a/src/App.js b/src/App.js index 5cb2a8a..c66b864 100644 --- a/src/App.js +++ b/src/App.js @@ -41,7 +41,8 @@ class App extends React.Component { selectedAssetIsBackground: DEFAULT_SELECTED_ASSET_IS_BACKGROUND, selectedAssetFlipStatus: DEFAULT_SELECTED_ASSET_FLIP_STATUS, // 1: normal ; -1: flipped horizontally selectedAssetRotateStatus: DEFAULT_SELECTED_ASSET_ROTATE_STATUS, // Degrees - selectedAssetSizeRatio: DEFAULT_SELECTED_ASSET_SIZE_RATIO, + selectedAssetSizeWidth: DEFAULT_SELECTED_ASSET_SIZE_RATIO, + selectedAssetSizeHeight: DEFAULT_SELECTED_ASSET_SIZE_RATIO, assetBoardBackground: [], assetBoardItem: [], assetBoardHome: [], @@ -49,7 +50,7 @@ class App extends React.Component { assetBoardCharacter: [], flipAssetIndicator: [], // 2d array where each element is an array of ints indicating flip status rotateAssetIndicator: [], // 2d array where each element is array of ints indicating degree of rotation - largeAssetIndicator: [], // 2d array where each element is null or [size, x_coord relative to image, y_coord relative to image] + largeAssetIndicator: [], // 2d array where each element is null or [width, height, x_coord relative to image, y_coord relative to image] fileName: null, // file name for saving level json eraseMode: false, }; @@ -135,7 +136,8 @@ class App extends React.Component { selectedAssetIsBackground, selectedAssetFlipStatus, selectedAssetRotateStatus, - selectedAssetSizeRatio, + selectedAssetSizeWidth, + selectedAssetSizeHeight, flipAssetIndicator, rotateAssetIndicator, largeAssetIndicator, @@ -150,8 +152,8 @@ class App extends React.Component { } } else { // Go through all tile coordinates that the asset should cover - for (let i = 0; i < selectedAssetSizeRatio; i++) { - for (let j = 0; j < selectedAssetSizeRatio; j++) { + for (let i = 0; i < selectedAssetSizeHeight; i++) { + for (let j = 0; j < selectedAssetSizeWidth; j++) { let x = rowInd + i; let y = colInd + j; if (x < boardRows && y < boardCols) { @@ -161,7 +163,7 @@ class App extends React.Component { flipAssetIndicator[x][y][0] = selectedAssetFlipStatus; rotateAssetIndicator[x][y][0] = selectedAssetRotateStatus; } else { - largeAssetIndicator[x][y] = [selectedAssetSizeRatio, i, j]; + largeAssetIndicator[x][y] = [selectedAssetSizeWidth, selectedAssetSizeHeight, i, j]; if (board[x][y].length !== 1) { board[x][y].pop(); flipAssetIndicator[x][y].pop(); @@ -184,8 +186,8 @@ class App extends React.Component { } generateMargin(assetInfo) { - const x = assetInfo[1]; - const y = assetInfo[2]; + const x = assetInfo[2]; + const y = assetInfo[3]; return `${-GAMESQUARE_SIZE * x}px 0px 0px ${-GAMESQUARE_SIZE * y}px`; } @@ -232,8 +234,8 @@ class App extends React.Component { src={require(`./assets/${path[1]}`)} style={{ transform: `scaleX(${flipAssetIndicator[rowInd][colInd][1]}) rotate(${rotateAssetIndicator[rowInd][colInd][1]}deg)`, - height: `${largeAsset ? largeAsset[0] * GAMESQUARE_SIZE : null}px`, width: `${largeAsset ? largeAsset[0] * GAMESQUARE_SIZE : null}px`, + height: `${largeAsset ? largeAsset[1] * GAMESQUARE_SIZE : null}px`, margin: `${largeAsset ? this.generateMargin(largeAsset) : null}`, }} onClick={() => this.handleGameSquareClick(rowInd, colInd)} @@ -260,7 +262,8 @@ class App extends React.Component { selectedAssetIsBackground, selectedAssetFlipStatus: 1, selectedAssetRotateStatus: 0, - selectedAssetSizeRatio: COMBINED_TILES[path].size, + selectedAssetSizeWidth: COMBINED_TILES[path].width, + selectedAssetSizeHeight: COMBINED_TILES[path].height, eraseMode: false, }); } diff --git a/src/jsonParsing.js b/src/jsonParsing.js index 42834b3..7f4c70d 100644 --- a/src/jsonParsing.js +++ b/src/jsonParsing.js @@ -4,14 +4,13 @@ import { COMBINED_TILES, TILE_TYPE } from './tiles'; let largeAssetIndicatorGlobal; -function isLargeAssetTopLeft(x, y) { - const assetInfo = largeAssetIndicatorGlobal[x][y]; - console.log(assetInfo, x, y); - return assetInfo[1] === 0 && assetInfo[2] === 0; +function isLargeAssetTopLeft(rowInd, colInd) { + const assetInfo = largeAssetIndicatorGlobal[rowInd][colInd]; + return assetInfo[2] === 0 && assetInfo[3] === 0; } function isLargeAsset(path) { - return COMBINED_TILES[path].size > 1; + return COMBINED_TILES[path].width > 1 || COMBINED_TILES[path].height > 1; } function stateToJson(state) { @@ -43,16 +42,16 @@ function stateToJson(state) { const decorations = {}; // loop through each coordinate - for (let x = 0; x < boardRows; x++) { - for (let y = 0; y < boardCols; y++) { + for (let y = 0; y < boardRows; y++) { + for (let x = 0; x < boardCols; x++) { // loop through all assets on the x,y coordinate - const assetArr = board[x][y]; + const assetArr = board[y][x]; for (let ind = 0; ind < assetArr.length; ind++) { const path = assetArr[ind]; - const flip = flipAssetIndicator[x][y][ind] === -1; // flip to boolean - const rotate = rotateAssetIndicator[x][y][ind] / 90; // degrees to number of 90deg turns + const flip = flipAssetIndicator[y][x][ind] === -1; // flip to boolean + const rotate = rotateAssetIndicator[y][x][ind] / 90; // degrees to number of 90deg turns - if (ind > 0 && isLargeAsset(path) && !isLargeAssetTopLeft(x, y)) { + if (ind > 0 && isLargeAsset(path) && !isLargeAssetTopLeft(y, x)) { continue; } @@ -153,33 +152,36 @@ async function jsonToState(dataStr, newBoards) { /*********** Ground Tiles ***********/ Object.keys(grounds).forEach((tile) => { const { x, y, texture, flip, rotate } = grounds[tile]; - board[x][y][0] = texture; - flipAssetIndicator[x][y][0] = flip ? -1 : 1; // boolean to flip - rotateAssetIndicator[x][y][0] = rotate * 90; // number of 90deg turns to total degree of rotation + console.log(tile); + board[y][x][0] = texture; + flipAssetIndicator[y][x][0] = flip ? -1 : 1; // boolean to flip + rotateAssetIndicator[y][x][0] = rotate * 90; // number of 90deg turns to total degree of rotation }); /*********** Non-ground Tiles ***********/ for (var tilesObj of nongrounds) { Object.keys(tilesObj).forEach((tile) => { + console.log(tile); const { x, y, texture, flip, rotate } = tilesObj[tile]; - const sizeRatio = COMBINED_TILES[texture].size; - for (let i = 0; i < sizeRatio; i++) { - for (let j = 0; j < sizeRatio; j++) { - const newX = x + i; - const newY = y + j; - if (newX < rows && newY < columns) { - if (isLargeAsset(texture) && board[newX][newY].length > 1) { + const sizeWidth = COMBINED_TILES[texture].width; + const sizeHeight = COMBINED_TILES[texture].height; + for (let i = 0; i < sizeHeight; i++) { + for (let j = 0; j < sizeWidth; j++) { + const newY = y + i; + const newX = x + j; + if (newY < rows && newX < columns) { + if (isLargeAsset(texture) && board[newY][newX].length > 1) { continue; } - largeAssetIndicator[newX][newY] = [sizeRatio, i, j]; - if (board[newX][newY].length !== 1) { - board[newX][newY].pop(); - flipAssetIndicator[newX][newY].pop(); - rotateAssetIndicator[newX][newY].pop(); + largeAssetIndicator[newY][newX] = [sizeWidth, sizeHeight, i, j]; + if (board[newY][newX].length !== 1) { + board[newY][newX].pop(); + flipAssetIndicator[newY][newX].pop(); + rotateAssetIndicator[newY][newX].pop(); } - board[newX][newY].push(texture); - flipAssetIndicator[newX][newY].push(flip ? -1 : 1); // boolean to flip - rotateAssetIndicator[newX][newY].push(rotate * 90); // number of 90deg turns to total degree of rotation + board[newY][newX].push(texture); + flipAssetIndicator[newY][newX].push(flip ? -1 : 1); // boolean to flip + rotateAssetIndicator[newY][newX].push(rotate * 90); // number of 90deg turns to total degree of rotation } } } diff --git a/src/tiles.js b/src/tiles.js index a3c7a90..90f0cee 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -9,62 +9,163 @@ const TILE_TYPE = { }; const BACKGROUND_TILES = { - 'background/ground_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/groundgrass_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/grounddark1_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/grounddark2_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/groundbrick_64.png': { type: TILE_TYPE.GROUND, size: 1 }, + 'background/ground_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/groundgrass_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/grounddark1_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/grounddark2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/groundbrick_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, // palette 2 - 'background/ground_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/groundgrass_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/grounddark1_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/grounddark2_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 }, - 'background/groundbrick_palette2_64.png': { type: TILE_TYPE.GROUND, size: 1 }, + 'background/ground_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/groundgrass_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/grounddark1_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/grounddark2_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, + 'background/groundbrick_palette2_64.png': { type: TILE_TYPE.GROUND, width: 1, height: 1 }, }; const ITEM_TILES = { - 'item/food1_64.png': { type: TILE_TYPE.ITEM, size: 1 }, + 'item/food1_64.png': { type: TILE_TYPE.ITEM, width: 1, height: 1 }, }; const HOME_TILES = { - 'environment/StallHome1_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamA' }, - 'environment/StallHome2_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamB' }, - 'environment/StallHome3_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamC' }, - 'environment/StallHome4_64.png': { type: TILE_TYPE.TEAM, size: 2, team: 'teamD' }, + 'environment/StallHome1_64.png': { + type: TILE_TYPE.TEAM, + width: 2, + height: 2, + team: 'teamA', + }, + 'environment/StallHome2_64.png': { + type: TILE_TYPE.TEAM, + width: 2, + height: 2, + team: 'teamB', + }, + 'environment/StallHome3_64.png': { + type: TILE_TYPE.TEAM, + width: 2, + height: 2, + team: 'teamC', + }, + 'environment/StallHome4_64.png': { + type: TILE_TYPE.TEAM, + width: 2, + height: 2, + team: 'teamD', + }, }; const WALL_TILES = { - 'background/hole0_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '0' }, - 'background/hole1_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '1' }, - 'background/hole2opp_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-opp' }, - 'background/hole2adj_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-adj' }, - 'background/hole3_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '3' }, - 'background/hole4_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '4' }, + 'background/hole0_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '0', + }, + 'background/hole1_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '1', + }, + 'background/hole2opp_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '2-opp', + }, + 'background/hole2adj_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '2-adj', + }, + 'background/hole3_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '3', + }, + 'background/hole4_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '4', + }, // palette 2 holes - 'background/hole0_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '0' }, - 'background/hole1_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '1' }, - 'background/hole2opp_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-opp' }, - 'background/hole2adj_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '2-adj' }, - 'background/hole3_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '3' }, - 'background/hole4_palette2_64.png': { type: TILE_TYPE.HOLE, size: 1, label: '4' }, + 'background/hole0_palette2_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '0', + }, + 'background/hole1_palette2_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '1', + }, + 'background/hole2opp_palette2_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '2-opp', + }, + 'background/hole2adj_palette2_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '2-adj', + }, + 'background/hole3_palette2_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '3', + }, + 'background/hole4_palette2_64.png': { + type: TILE_TYPE.HOLE, + width: 1, + height: 1, + label: '4', + }, // *** - 'environment/Box_64.png': { type: TILE_TYPE.WALL, size: 1 }, - 'environment/box_palette2_64.png': { type: TILE_TYPE.WALL, size: 1 }, - 'environment/DirectionsSign_64.png': { type: TILE_TYPE.WALL, size: 1 }, - 'environment/HangingLantern_64.png': { type: TILE_TYPE.DECORATION, size: 1 }, - 'environment/Shrub_64.png': { type: TILE_TYPE.WALL, size: 1 }, - 'environment/Shrub_palette2_64.png': { type: TILE_TYPE.WALL, size: 1 }, - 'environment/StallItem1_64.png': { type: TILE_TYPE.WALL, size: 2 }, - 'environment/StallOther1_64.png': { type: TILE_TYPE.WALL, size: 2 }, - 'environment/StallOther2_64.png': { type: TILE_TYPE.WALL, size: 2 }, - 'environment/StallOther_palette2_64.png': { type: TILE_TYPE.WALL, size: 2 }, + 'environment/Box_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 }, + 'environment/box_palette2_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 }, + 'environment/DirectionsSign_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 }, + 'environment/HangingLantern_64.png': { type: TILE_TYPE.DECORATION, width: 1, height: 1 }, + 'environment/Shrub_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 }, + 'environment/Shrub_palette2_64.png': { type: TILE_TYPE.WALL, width: 1, height: 1 }, + 'environment/StallItem1_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 }, + 'environment/StallOther1_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 }, + 'environment/StallOther2_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 }, + 'environment/StallOther_palette2_64.png': { type: TILE_TYPE.WALL, width: 2, height: 2 }, + 'environment/StallOtherWide_64.png': { type: TILE_TYPE.WALL, width: 4, height: 2 }, }; const CHARACTER_TILES = { - 'character/P1_64.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamA' }, - 'character/P2_64_v2.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamB' }, - 'character/P3_64_v2.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamC' }, - 'character/P4_64.png': { type: TILE_TYPE.CHARACTER, size: 1, team: 'teamD' }, + 'character/P1_64.png': { + type: TILE_TYPE.CHARACTER, + width: 1, + height: 1, + team: 'teamA', + }, + 'character/P2_64_v2.png': { + type: TILE_TYPE.CHARACTER, + width: 1, + height: 1, + team: 'teamB', + }, + 'character/P3_64_v2.png': { + type: TILE_TYPE.CHARACTER, + width: 1, + height: 1, + team: 'teamC', + }, + 'character/P4_64.png': { + type: TILE_TYPE.CHARACTER, + width: 1, + height: 1, + team: 'teamD', + }, }; const COMBINED_TILES = {};