Map editing tool

#1
so I finally finished it...
thanks janno for the help with the code
and splash for testing :) appreciate it.

I encourage you to test this and post any bugs here
edit*: I hosted it on github for the time being (im limited to 1 page there)
here is the link:
Map Tool

Known bugs:
BUG: when assigning origin with more than -100 tool will change quantity for some reason
FIXED: changed the function itself to just count quantity amount of times while executing the additives each time

How to:
1. So, first select a model from the dropdown or type in a model (for example colombia/npc_jump1)
2. insert your in-game origins (x,y,z e.g: 100 350 400)
3. insert desired angle for the model (e.g: 0 90 0)
4. Quantity is how many models you want, so lets say i want 20 boxes ill type "20" (do not type negative numbers or 0)
5. Amount is basically distance between the models on the selected axis so if I want the distance between each box to be 100 ill type in amount "100"
5. Direction is on which axis you want to add the amount to (x 100 will become x 120 if amount is set to 20 etc...)
6. Copy the generated code into your .ent file
 
Last edited:
#2
hello everyone!
lately I've been working on a tool to simple help you calculate the positions of bspmodels in maps
now i am kinda stuck with the functionality aspect of it (i am new to js, used to code in java)
so let me show you what I got so far(you can view source here too):
https://a.uguu.se/SZlpeKOBZPxF.html (24 hour link)

so baisically you select a model (will add more later)
enter origin and desired angles and when hitting submit it will generate a formatted code to paste in the .ent file
what ive done is assign each inputbox with an id so I can call each value with document.getElementById("originX").value; (for the origin x value for example)
now what I'm stuck with is the way to take the quantity (how many models will generate) add the amount to each of them and print it to the page each time in the specified direction (x,y,z).
AND print them everytime in that format...
so for the quantity thingy i can do a function that creates an unspecified array
JavaScript:
var arr1[];

var i;

var text = "";

for (i = 0; i < document.getElementById("quantity").value; i++) {

        text += qty[i] + "<br>"

}

document.getElementById("output").innerHTML = text;
so I need some kind of function that prints the code "qty" amount of times in the right format with the changes in amount each time
end result would be:




and obviously this tool has great potential as in you could add any math operation to make circles and different shapes with models
and it will simply generate the code for you instead of opening it in a new notepad++ and replaceing values each time
anyone knows his js better and wanna share? I think it would greatly benefit editors in saving alot of time calculating each model themselves
Thanks in advance!
Good luck m8, this tool would be smth nice for us as editors, hope u finish it
 
#5
thanks guys appreciate it :)
still need some help with this though kinda getting stuck on parsing the code and adding the values each time...
I need a javascript expert :'<
 

Janno

3D# General
Staff member
#7
thanks guys appreciate it :)
still need some help with this though kinda getting stuck on parsing the code and adding the values each time...
I need a javascript expert :'<
1. Get jquery, will make it easier.
2. Think about what you want to do. What do you want the functions to do. I thought about making this a long time ago to simplify creating spawns for example.

You define a box (an area where players can spawn without problems) with setting the origins of the box vertices.
Code:
.                .



.                .
Lets say the vertices are (100, 100, 100), (200, 100, 100); (100, 200, 100), (200, 200, 100)
You define the offsets, for example, lets say a player takes 20 units in both x and y to not get stuck.
JavaScript:
var v1x = $("#vertex1x").val();
var v1y = $("#vertex1y").val();
var v1z = $("#vertex1z").val();
var v2z = $("#vertex2x").val();
var v2y = $("#vertex2y").val();
var v2z = $("#vertex2z").val();
var v3z = $("#vertex3x").val();
var v3y = $("#vertex3y").val();
var v3z = $("#vertex3z").val();
var v4z = $("#vertex4x").val();
var v4y = $("#vertex4y").val();
var v4z = $("#vertex4z").val();

/*
v1     xxx      v2

y                  y
y                  y

v3     xxx      v4
*/

var offsetX = $("#offsetX").val();
var offsetY = $("#offsetY").val();

for (var i = v1x; i <= v2x; i += offsetX) {
    for (var j = v1y; j <= v3y; j += offsetY) {
        $("#output").append("<br>object xxx<br>\"origin\" \"" + i + " " + j + " 1000\"");
    }
}
I didn't test this code, just wrote it on the fly so I got no idea if it actually works or if it does what I intended it to do. This generates the spawns from:

Code:
.                .



.                .
... to ....

Code:
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
Something like this.

edit

Ran it in chrome devtools, seems to work.

JavaScript:
var v1x = 100;
var v2x = 200;
var v1y = 100;
var v3y = 200;

/*
v1     xxx      v2

y                  y
y                  y

v3     xxx      v4
*/

var offsetX = 20;
var offsetY = 20;

for (var i = v1x; i <= v2x; i += offsetX) {
    for (var j = v1y; j <= v3y; j += offsetY) {
        console.log("object \"origin\" \"" + i + " " + j + " 1000\"");
    }
}


/*Output*/

object "origin" "100 100 1000"
VM218:20 object "origin" "100 120 1000"
VM218:20 object "origin" "100 140 1000"
VM218:20 object "origin" "100 160 1000"
VM218:20 object "origin" "100 180 1000"
VM218:20 object "origin" "100 200 1000"
VM218:20 object "origin" "120 100 1000"
VM218:20 object "origin" "120 120 1000"
VM218:20 object "origin" "120 140 1000"
VM218:20 object "origin" "120 160 1000"
VM218:20 object "origin" "120 180 1000"
VM218:20 object "origin" "120 200 1000"
VM218:20 object "origin" "140 100 1000"
VM218:20 object "origin" "140 120 1000"
VM218:20 object "origin" "140 140 1000"
VM218:20 object "origin" "140 160 1000"
VM218:20 object "origin" "140 180 1000"
VM218:20 object "origin" "140 200 1000"
VM218:20 object "origin" "160 100 1000"
VM218:20 object "origin" "160 120 1000"
VM218:20 object "origin" "160 140 1000"
VM218:20 object "origin" "160 160 1000"
VM218:20 object "origin" "160 180 1000"
VM218:20 object "origin" "160 200 1000"
VM218:20 object "origin" "180 100 1000"
VM218:20 object "origin" "180 120 1000"
VM218:20 object "origin" "180 140 1000"
VM218:20 object "origin" "180 160 1000"
VM218:20 object "origin" "180 180 1000"
VM218:20 object "origin" "180 200 1000"
VM218:20 object "origin" "200 100 1000"
VM218:20 object "origin" "200 120 1000"
VM218:20 object "origin" "200 140 1000"
VM218:20 object "origin" "200 160 1000"
VM218:20 object "origin" "200 180 1000"
VM218:20 object "origin" "200 200 1000"
Also, this makes the 4th vertex redundant, as long as the box is actually a rectangle, not e.g. a trapezoid, triangle, whatever.
 
Last edited:
#8
ah I get the general idea, I think the lack in experience with programming gets me stuck though
and I just looked up jquery, ill look into it a bit more.
I'll try to wrap my head around it a little more once i get more fammiliar with jquery
Also your spawns idea is pretty neat, thanks for all the help! made things a little clearer :)
 
#9
finished the basic functionality of it thanks janno for you help ;]
ill prettify it later after testings are done
if you have any suggestions feel free to leave them here :]
 
#13
Also, this makes the 4th vertex redundant, as long as the box is actually a rectangle, not e.g. a trapezoid, triangle, whatever.
also if I just realized the way i did that tool is pretty dum...
I could ask for 2 sets of coords and do a line formula between them √((x1-x2)^2 + (y1-y2)^2)
to know its length and apply the same loop pretty much to say if i is not bigger equals than the length add offset to x+y
this way you can make diagnols too?
 

Janno

3D# General
Staff member
#14
Diagonals are easier, need 4 vertices, just add both x and y offset at the same time (which you can ofc calculate but you need an actual sof value to know that these spawns wont telefrag).
 
#15
I just thought about your spawns idea too and I think there is a way to do it with 2 points (corners)
assuming you want a rectangle, get x1,y1 & x2,y2 as 2 corners then calculate the center and half diagonal
and with those you can get the 3rd and 4th corners im pretty sure, ill play around with it some more and post some code later
if you dont mind me implementing it in this tool :) ill wait for your approval (its mostly for practicing code)
also with this ill be able to add 2D rectangles to pretty much any model
 
#16
Diagonals are easier, need 4 vertices, just add both x and y offset at the same time (which you can ofc calculate but you need an actual sof value to know that these spawns wont telefrag).
I was right, 2 corners are enough for a rectangle I started putting some code together for this
and obviously got stuck again... so frustrating...
I think you will get what I'm thinking though so here it is:
JavaScript:
function calc() {

    var instance = document.getElementById("idValue").value || document.getElementById("displayValue").value;
    var x1 = parseInt(document.getElementById("x1").value);
    var y1 = parseInt(document.getElementById("y1").value);
    var x2 = parseInt(document.getElementById("x2").value);
    var y2 = parseInt(document.getElementById("y2").value);
    var z = parseInt(document.getElementById("z").value);
    var ax = parseInt(document.getElementById("anglex").value);
    var ay = parseInt(document.getElementById("angley").value);
    var az = parseInt(document.getElementById("anglez").value);

    function isLeft(x1, x2) {
        if (x1 < x2) {
            return true;
        }
        else {
            return false;
        }
    }

    function isAbove(y1, y2) {
        if (y1 > y2) {
            return true;
        }
        else {
            return false;
        }
    }

    var offsetX = parseInt(document.getElementById('offsetX').value);
    var offsetY = parseInt(document.getElementById('offsetY').value);

    if (isLeft(x1, x2) == true && isAbove(y1, y2) == true) {
        var x3 = x2; var y3 = y1;
        var x4 = x1; var y4 = y2;
        for (var i = x1; i <= x3; i += offsetX) {
            for (var j = y1; j <= y3; j += offsetY) {
                console.log("\"origin\" \"" + i + " " + j + " " + z + "\"");
            }
        }
    }
    else if (isLeft(x1, x2) == true && isAbove(y1, y2) == false) {
        var x3 = x1; var y3 = y2;
        var x4 = x2; var y4 = y1;
        for (var i = x3; i <= x2; i += offsetX) {
            for (var j = y3; j <= y1; j += offsetY) {
                console.log("\"origin\" \"" + i + " " + j + " " + z + "\"");
            }
        }
    }
    else if (isLeft(x1, x2) == false && isAbove(y1, y2) == true) {
        var x3 = x2; var y3 = y1;
        var x4 = x1; var y4 = y2;
        for (var i = x3; i <= x1; i += offsetX) {
            for (var j = y3; j <= y2; j += offsetY) {
                console.log("\"origin\" \"" + i + " " + j + " " + z + "\"");
            }
        }
    }
    else {
        var x3 = x1; var y3 = y2;
        var x4 = x2; var y4 = y1;
        for (var i = x2; i <= x3; i += offsetX) {
            for (var j = y2; j <= y4; j += offsetY) {
                console.log("\"origin\" \"" + i + " " + j + " " + z + "\"");
            }
        }
    }
}
so what Ive done is basically took your spawns idea and rotated the points to always be the same way you did
/*
v1-----xxx-----v2
y-----------------y
y-----------------y
v3-----xxx-----v4
*/
this way the user doesnt have to figure out which point is the top left and which is the bottom right
but for some reason I dont get the output of the if statements.. I guess its something to do with the fact
that i declared variables and added a for loop at the same time, is there a workaround that, or do I need to rewrite the code?