From c0653bf6fc21f31dde7d52721a34e17e709fcf10 Mon Sep 17 00:00:00 2001 From: HoangTran <99.hoangtran@gmail.com> Date: Sun, 20 Dec 2020 14:16:57 +0700 Subject: [PATCH] [Fix] using translate for camera (not finished) --- js/camera.helper.js | 17 +++++++--- js/global.js | 26 ++++++++-------- js/ui.js | 35 +++++++++++---------- main.js | 75 +++++++++++++++++++++++++++++---------------- 4 files changed, 94 insertions(+), 59 deletions(-) diff --git a/js/camera.helper.js b/js/camera.helper.js index 83dac2f..ccdbcdd 100644 --- a/js/camera.helper.js +++ b/js/camera.helper.js @@ -1,10 +1,16 @@ // camera function resetCamera(camera) { camera.scaleTo = 1; - camera.xTo = width / 2; - camera.yTo = height / 2; + camera.xTo = 0; + camera.yTo = 0; } +// function convertPos(_x, _y) { +// return { +// x: _x +// } +// } + function lerpCamera(camera, d = 0.2) { camera.scale = lerp(camera.scale, camera.scaleTo, d); camera.x = lerp(camera.x, camera.xTo, d); @@ -20,8 +26,11 @@ function zoomTo(camera, _ratio) { camera.scaleTo = ratio; // Zoom from the triggering point of the event - camera.xTo = mouseX + (camera.x - mouseX) * tiLe; - camera.yTo = mouseY + (camera.y - mouseY) * tiLe; + // camera.xTo = mouseX + (camera.x - mouseX) * tiLe; + // camera.yTo = mouseY + (camera.y - mouseY) * tiLe; + + camera.xTo = (mouseX - camera.x) * tiLe; + camera.yTo = (mouseY - camera.y) * tiLe; } function zoomBy(camera, value) { diff --git a/js/global.js b/js/global.js index ded443a..dbb27d3 100644 --- a/js/global.js +++ b/js/global.js @@ -63,8 +63,8 @@ function locateTerrainIndex(index) { let camera = getMapCamera(); camera.scaleTo = 1; - camera.xTo = -terrain.position.x + width / 2; - camera.yTo = -terrain.position.y + height / 2; + camera.xTo = terrain.position.x; + camera.yTo = terrain.position.y; setSelectedTerrainIndex(index); } @@ -87,8 +87,8 @@ function dragTerrain(terrain) { } function dragCamera(camera) { - camera.xTo += movedX; - camera.yTo += movedY; + camera.xTo -= movedX / camera.scale; + camera.yTo -= movedY / camera.scale; } function dragTerrainCamera() { @@ -112,6 +112,7 @@ function newMap() { }).then((result) => { if (result.isConfirmed) { globalData.maptab.listTerrains = []; + resetCamera(getMapCamera()); } }); } @@ -206,8 +207,8 @@ function newTerrain(successCallback) { rects: [], }); + resetCamera(getTerrainCamera()); setEditingTerrainIndex(0); - successCallback && successCallback(); } }); @@ -217,7 +218,7 @@ function cloneTerrainAtIndex(index) { let terrain = { ...getTerrainAtIndex(index) }; Swal.fire({ - title: "Clone terrain", + title: `Clone terrain "${terrain.name}"`, text: "Name of new terrain:", input: "text", inputValue: terrain.name, @@ -230,15 +231,16 @@ function cloneTerrainAtIndex(index) { terrain.position.x = 0; terrain.position.y = 0; - globalData.maptab.listTerrains.splice(index, 0, terrain); - setEditingTerrainIndex(index); - - locateTerrainIndex(index); + globalData.maptab.listTerrains.splice(index + 1, 0, terrain); + setEditingTerrainIndex(index + 1); + locateTerrainIndex(index + 1); } }); } -function cloneEditingTerrain() {} +function cloneEditingTerrain() { + cloneTerrainAtIndex(getEditingTerrainIndex()); +} function renameTerrainAtIndex(index) { let terrain = getTerrainAtIndex(index); @@ -265,7 +267,7 @@ function deleteTerrainAtIndexConfirm(index) { let terrain = getTerrainAtIndex(index); Swal.fire({ - title: "Delele terrain?", + title: `Delele terrain "${terrain.name}"?`, text: `Are you sure want to delete this terrain? \n index: ${index}, name: ${terrain.name}`, icon: "warning", showCancelButton: true, diff --git a/js/ui.js b/js/ui.js index a987131..f076410 100644 --- a/js/ui.js +++ b/js/ui.js @@ -28,17 +28,18 @@ const UI = { menuTerrainZone: [5, 40, 200, 655], terrainEditorZone: [205, 40, 790, 655], newTerrainBtn: ["New terrain +", 10, 60, 190, 25, 0, 0, "green"], - deleteTerrainBtn: ["Delete", 10, 90, 92.5, 25, 0, 0, "red"], - renameTerrainBtn: ["Rename", 107.5, 90, 92.5, 25], - importTerrainBtn: ["Import..", 10, 120, 92.5, 25, 0, 0, "black"], - exportTerrainBtn: ["Export..", 107.5, 120, 92.5, 25, 0, 0, "black"], - - removeImageTerrainBtn: ["Remove image", 10, 170, 92.5, 25, 0, 0, "red"], - loadImageTerrainBtn: ["Load image..", 107.5, 170, 92.5, 25, 0, 0, "black"], - resetCameraTerrainBtn: ["Reset camera", 10, 200, 92.5, 25, 0, 0, "blue"], - newRectBtn: ["New rect +", 107.5, 200, 92.5, 25, 0, 0, "green"], - deleteSelectedRectBtn: ["Delete rect", 10, 230, 92.5, 25, 0, 0, "red"], - editSelectedRectBtn: ["Edit rect", 107.5, 230, 92.5, 25], + cloneTerrainBtn: ["Clone terrain", 10, 90, 190, 25, 0, 0, "green"], + deleteTerrainBtn: ["Delete", 10, 120, 92.5, 25, 0, 0, "red"], + renameTerrainBtn: ["Rename", 107.5, 120, 92.5, 25], + removeImageTerrainBtn: ["Remove image", 10, 150, 92.5, 25, 0, 0, "red"], + loadImageTerrainBtn: ["Load image..", 107.5, 150, 92.5, 25, 0, 0, "black"], + importTerrainBtn: ["Import..", 10, 180, 92.5, 25, 0, 0, "black"], + exportTerrainBtn: ["Export..", 107.5, 180, 92.5, 25, 0, 0, "black"], + + resetCameraTerrainBtn: ["Reset camera", 10, 220, 190, 25, 0, 0, "blue"], + newRectBtn: ["New rect +", 10, 270, 190, 25, 0, 0, "green"], + deleteSelectedRectBtn: ["Delete rect", 10, 300, 92.5, 25, 0, 0, "red"], + editSelectedRectBtn: ["Edit rect", 107.5, 300, 92.5, 25], }; // button @@ -95,26 +96,26 @@ function drawGrid(camera, bound) { strokeWeight(1); stroke(UI.gridColor); - for (let i = camera.x; i > left; i -= gridSize) { + for (let i = -camera.x; i > left; i -= gridSize) { line(i, top, i, bottom); } - for (let i = camera.x; i < right; i += gridSize) { + for (let i = -camera.x; i < right; i += gridSize) { line(i, top, i, bottom); } - for (let i = camera.y; i > top; i -= gridSize) { + for (let i = -camera.y; i > top; i -= gridSize) { line(left, i, right, i); } - for (let i = camera.y; i < bottom; i += gridSize) { + for (let i = -camera.y; i < bottom; i += gridSize) { line(left, i, right, i); } // hightlight center line stroke(UI.gridColorHightlight); - line(camera.x, top, camera.x, bottom); - line(left, camera.y, right, camera.y); + line(-camera.x, top, -camera.x, bottom); + line(left, -camera.y, right, -camera.y); // draw info let gs = (gridSize / camera.scale).toFixed(2); diff --git a/main.js b/main.js index cd44729..44582a6 100644 --- a/main.js +++ b/main.js @@ -25,7 +25,7 @@ function draw() { if (mode == MODE.TERRAIN) { drawEditTerrainZone(...UI.terrainEditorZone); isShowMenu && drawMenuTerrain(); - drawHeader("Terrain Editor"); + drawHeader("Terrain Editor - " + getEditingTerrain().name); } else { drawEditMapZone(...UI.mapEditorZone); isShowMenu && drawMenuMap(); @@ -123,6 +123,11 @@ function drawEditMapZone(x, y, w, h) { let camera = getMapCamera(); + push(); + translate(width / 2, height / 2); + scale(camera.scale); + translate(-camera.x, -camera.y); + // grid drawGrid(camera, UI.mapEditorZone); @@ -144,10 +149,10 @@ function drawEditMapZone(x, y, w, h) { for (let j = 0; j < terrain.rects.length; j++) { let r = terrain.rects[j]; - let rx = (terrain.position.x + r.x) * camera.scale + camera.x; - let ry = (terrain.position.y + r.y) * camera.scale + camera.y; - let rw = r.w * camera.scale; - let rh = r.h * camera.scale; + let rx = terrain.position.x + r.x; + let ry = terrain.position.y + r.y; + let rw = r.w; + let rh = r.h; // hight light on hover if (!isHoveredRect && isMouseInRect(rx, ry, rw, rh)) { @@ -188,10 +193,10 @@ function drawEditMapZone(x, y, w, h) { for (let j = 0; j < terrain.rects.length; j++) { let r = terrain.rects[j]; - let rx = (terrain.position.x + r.x) * camera.scale + camera.x; - let ry = (terrain.position.y + r.y) * camera.scale + camera.y; - let rw = r.w * camera.scale; - let rh = r.h * camera.scale; + let rx = terrain.position.x + r.x; + let ry = terrain.position.y + r.y; + let rw = r.w; + let rh = r.h; // draw rect rect(rx, ry, rw, rh); @@ -200,13 +205,15 @@ function drawEditMapZone(x, y, w, h) { // remove selected index on click outside rects if (!isSelectTerrain && isMousePressed() && isMouseInRect(x, y, w, h)) { - globalData.maptab.editzone.selectedTerrainIndex = -1; + setSelectedTerrainIndex(-1); } // center point fill("red"); noStroke(); - circle(camera.x, camera.y, 5); + circle(0, 0, 5); + + pop(); // terrain name let selectedIndex = getSelectedTerrainIndex(); @@ -314,28 +321,30 @@ function renderTerrainItem(index, terrain, x, y, w, h) { noStroke(); circle(x + w / 2, y + h / 2, 5); - // title + size + // title fill("white"); noStroke(); let title = index + " - " + terrain.name; text(title, x + textWidth(title) / 2 + 5, y + 10); - let size = W + " x " + H; - text(size, x + textWidth(size) / 2 + 5, y + 30); - - // show buttons on hover list item + // on hover list item if (isMouseInRect(x, y, w, h)) { + // show size + let size = W + " x " + H; + text(size, x + textWidth(size) / 2 + 5, y + 30); + + // show buttons let btnW = w / 3; - if (button("Clone", x, y + h - 40, btnW, 20, false, "#9995")) { + if (button("Clone", x, y + h - 40, btnW, 20, 0, "#9995", "green")) { cloneTerrainAtIndex(index); } if (button("Delete", x, y + h - 20, btnW, 20, 0, "#9995", "red")) { deleteTerrainAtIndexConfirm(index); } - if (button("Edit", x + btnW, y + h - 20, btnW, 20, false, "#9995")) { + if (button("Edit", x + btnW, y + h - 20, btnW, 20, 0, "#9995")) { mode = MODE.TERRAIN; editTerrainAtIndex(index); } @@ -360,6 +369,10 @@ function drawMenuTerrain() { } if (getEditingTerrain()) { + if (button(...UI.cloneTerrainBtn)) { + cloneEditingTerrain(); + } + if (button(...UI.deleteTerrainBtn)) { deleteEditingTerrainConfirm(); } @@ -386,7 +399,10 @@ function drawMenuTerrain() { }); } - if (button(...UI.resetCameraTerrainBtn)) { + let cam = getTerrainCamera(); + let isCameraChanged = + ~~cam.xTo != 0 || ~~cam.yTo != 0 || cam.scaleTo != 1; + if (isCameraChanged && button(...UI.resetCameraTerrainBtn)) { resetTerrainCamera(); } @@ -424,13 +440,18 @@ function drawEditTerrainZone(x, y, w, h) { let camera = getTerrainCamera(); + push(); + translate(width / 2, height / 2); + scale(camera.scale); + translate(-camera.x, -camera.y); + // image data const imageData = getTerrainImageData(); if (imageData) { image( imageData, - camera.x, - camera.y, + x + w / 2, + y + h / 2, imageData.width * camera.scale, imageData.height * camera.scale ); @@ -450,10 +471,10 @@ function drawEditTerrainZone(x, y, w, h) { for (let i = 0; i < terrain.rects.length; i++) { let r = terrain.rects[i]; - let rx = r.x * camera.scale + camera.x; - let ry = r.y * camera.scale + camera.y; - let rw = r.w * camera.scale; - let rh = r.h * camera.scale; + let rx = r.x; + let ry = r.y; + let rw = r.w; + let rh = r.h; // hight light on hover if (!hovered && isMouseInRect(rx, ry, rw, rh)) { @@ -493,7 +514,7 @@ function drawEditTerrainZone(x, y, w, h) { // center point fill("red"); noStroke(); - circle(camera.x, camera.y, 5); + circle(0, 0, 5); // terrain name fill("white"); @@ -503,4 +524,6 @@ function drawEditTerrainZone(x, y, w, h) { x + w / 2, y + 10 ); + + pop(); }