objects tool
This commit is contained in:
parent
2b7bcf3c58
commit
1c80311ad7
4 changed files with 122 additions and 0 deletions
1
assets/objects.json
Normal file
1
assets/objects.json
Normal file
|
@ -0,0 +1 @@
|
|||
{"squares":[{"x":297,"y":114,"w":78,"h":93},{"x":169,"y":243,"w":62,"h":250},{"x":313,"y":243,"w":62,"h":253},{"x":228,"y":257,"w":96,"h":222},{"x":792,"y":113,"w":176,"h":126},{"x":1017,"y":113,"w":143,"h":81},{"x":1160,"y":241,"w":143,"h":-129},{"x":1065,"y":372,"w":127,"h":124},{"x":697,"y":372,"w":319,"h":126},{"x":697,"y":498,"w":159,"h":111},{"x":697,"y":628,"w":160,"h":158},{"x":1001,"y":628,"w":191,"h":158},{"x":281,"y":629,"w":175,"h":156},{"x":0,"y":0,"w":137,"h":616},{"x":0,"y":615,"w":136,"h":310},{"x":1337,"y":1,"w":130,"h":581},{"x":1337,"y":573,"w":131,"h":356},{"x":586,"y":153,"w":15,"h":24},{"x":651,"y":153,"w":12,"h":24},{"x":700,"y":187,"w":12,"h":22},{"x":1020,"y":194,"w":10,"h":47},{"x":1019,"y":227,"w":56,"h":14},{"x":1101,"y":227,"w":62,"h":13},{"x":654,"y":128,"w":105,"h":17},{"x":748,"y":129,"w":12,"h":49},{"x":748,"y":193,"w":12,"h":47},{"x":654,"y":223,"w":105,"h":16},{"x":521,"y":129,"w":106,"h":14},{"x":521,"y":140,"w":13,"h":38},{"x":521,"y":194,"w":13,"h":46},{"x":521,"y":225,"w":108,"h":16}],"circles":[{"x":552,"y":163,"r":13.601470508735444},{"x":608,"y":190,"r":20.248456731316587},{"x":569,"y":212,"r":11.704699910719626},{"x":680,"y":213,"r":12.041594578792296},{"x":727,"y":164,"r":14.212670403551895}]}
|
107
tools/collidesTool/app.js
Normal file
107
tools/collidesTool/app.js
Normal file
|
@ -0,0 +1,107 @@
|
|||
var ctx = document.getElementById("canvas").getContext("2d");
|
||||
var cv = document.getElementById("canvas");
|
||||
|
||||
const fond = new Image();
|
||||
fond.src = "../../assets/map/map7_recadr.png";
|
||||
var mapWidth = fond.width
|
||||
var mapHeith = fond.height
|
||||
ctx.canvas.width = mapWidth
|
||||
ctx.canvas.height = mapHeith
|
||||
ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
|
||||
|
||||
|
||||
var mode = "circle"
|
||||
|
||||
var data = {
|
||||
squares: [],
|
||||
circles: []
|
||||
}
|
||||
|
||||
var start = []
|
||||
var stop = []
|
||||
|
||||
var w = []
|
||||
|
||||
cv.addEventListener("mousedown", (e)=>{
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
start = [(e.clientX- rect.left) * cv.width / rect.width, (e.clientY - rect.top) * cv.height / rect.height];
|
||||
})
|
||||
|
||||
cv.addEventListener("mouseup", (e)=>{
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
stop = [(e.clientX- rect.left) * cv.width / rect.width, (e.clientY - rect.top) * cv.height / rect.height];
|
||||
w = [-(start[0]-stop[0]), -(start[1]-stop[1])]
|
||||
if(mode=="rect"){
|
||||
|
||||
data.squares.push({
|
||||
x: start[0],
|
||||
y: start[1],
|
||||
w: w[0],
|
||||
h: w[1]
|
||||
})
|
||||
ctx.fillStyle = "#FF0000"
|
||||
ctx.fillRect(start[0], start[1], w[0], w[1]);
|
||||
}else if(mode=='circle'){
|
||||
var radius = Math.sqrt(w[0]**2 + w[1]**2);
|
||||
data.circles.push({
|
||||
x: start[0],
|
||||
y:start[1],
|
||||
r: radius
|
||||
})
|
||||
ctx.fillStyle="#FF0000"
|
||||
ctx.arc(start[0], start[1], radius, 0, 2*Math.PI, false);
|
||||
ctx.fill()
|
||||
|
||||
}
|
||||
ctx.closePath()
|
||||
|
||||
})
|
||||
|
||||
function circleMode(){
|
||||
mode='circle'
|
||||
}
|
||||
|
||||
function rectMode(){
|
||||
mode="rect"
|
||||
}
|
||||
|
||||
function download(filename, text) {
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', filename);
|
||||
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
function generateData(){
|
||||
download("objects.json", JSON.stringify(data))
|
||||
}
|
||||
|
||||
function render(){
|
||||
ctx.fillStyle = "#FF0000"
|
||||
ctx.clearRect(0, 0, cv.width, cv.height);
|
||||
ctx.drawImage(fond, 0, 0, mapWidth, mapHeith);
|
||||
for (let i = 0; i < data.squares.length; i++) {
|
||||
ctx.fillRect(data.squares[i].x, data.squares[i].y, data.squares[i].w, data.squares[i].h);
|
||||
}
|
||||
for (let i = 0; i < data.circles.length; i++) {
|
||||
ctx.beginPath()
|
||||
ctx.arc(data.circles[i].x, data.circles[i].y, data.circles[i].r, 0, 2*Math.PI, false);
|
||||
ctx.fill()
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
function cancel(){
|
||||
if(mode=="rect"){
|
||||
data.squares.pop()
|
||||
}else if(mode=='circle'){
|
||||
data.circles.pop()
|
||||
}
|
||||
render();
|
||||
}
|
13
tools/collidesTool/index.html
Normal file
13
tools/collidesTool/index.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="circleMode()">Circle Mode</button>
|
||||
<button onclick="rectMode()">Rect Mode</button>
|
||||
<button onclick="generateData()">Generate JSON</button>
|
||||
<button onclick="cancel()">Back</button>
|
||||
<canvas width="800" height="800" id="canvas" style="border: 1px;"></canvas>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
1
tools/collidesTool/objects.json
Normal file
1
tools/collidesTool/objects.json
Normal file
|
@ -0,0 +1 @@
|
|||
{"squares":[{"x":297,"y":114,"w":78,"h":93},{"x":169,"y":243,"w":62,"h":250},{"x":313,"y":243,"w":62,"h":253},{"x":228,"y":257,"w":96,"h":222},{"x":792,"y":113,"w":176,"h":126},{"x":1017,"y":113,"w":143,"h":81},{"x":1160,"y":241,"w":143,"h":-129},{"x":1065,"y":372,"w":127,"h":124},{"x":697,"y":372,"w":319,"h":126},{"x":697,"y":498,"w":159,"h":111},{"x":697,"y":628,"w":160,"h":158},{"x":1001,"y":628,"w":191,"h":158},{"x":281,"y":629,"w":175,"h":156},{"x":0,"y":0,"w":137,"h":616},{"x":0,"y":615,"w":136,"h":310},{"x":1337,"y":1,"w":130,"h":581},{"x":1337,"y":573,"w":131,"h":356},{"x":586,"y":153,"w":15,"h":24},{"x":651,"y":153,"w":12,"h":24},{"x":700,"y":187,"w":12,"h":22},{"x":1020,"y":194,"w":10,"h":47},{"x":1019,"y":227,"w":56,"h":14},{"x":1101,"y":227,"w":62,"h":13},{"x":654,"y":128,"w":105,"h":17},{"x":748,"y":129,"w":12,"h":49},{"x":748,"y":193,"w":12,"h":47},{"x":654,"y":223,"w":105,"h":16},{"x":521,"y":129,"w":106,"h":14},{"x":521,"y":140,"w":13,"h":38},{"x":521,"y":194,"w":13,"h":46},{"x":521,"y":225,"w":108,"h":16}],"circles":[{"x":552,"y":163,"r":13.601470508735444},{"x":608,"y":190,"r":20.248456731316587},{"x":569,"y":212,"r":11.704699910719626},{"x":680,"y":213,"r":12.041594578792296},{"x":727,"y":164,"r":14.212670403551895}]}
|
Loading…
Reference in a new issue