Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Draw polygon from adjacent tile

polo

By polo,
in Phaser 2

 Share

Recommended Posts

polo Newbie

polo

Posted
Posted

Dear i try to find a method to draw a closed polygon from adjacent tile. My problem is that i cannot find a method to sorting point to be able to trace the graphics object.

The points comes from x,y coordinate of tile, like this, assumes that my width and height of tile is 15.

 

60:90 
60:75 
75:90
60:60
75:75
90:90 
90:75 
75:60
90:60 
 
Regards
Link to comment
Share on other sites
ZoomBox Newbie

ZoomBox

Posted
Posted

You can't really do that without knowing the shape it'll gives you.

With this array of coordinate you could create 10, maybe 100 or more different and valid shapes.

 

But if the shape is really common/simple:

You can simply sort the array by X and then for each different X, sort them by Y.

 

You'll get that:

 

60:60
60:75
60:90
75:60
75:75
75:90
90:60
90:75
90:90
 
Edit: Bad idea, it looks like spines.
 
You should just do your sorting based on the way you get the points. If it's squares stuck in a row, it'll be easy.
Link to comment
Share on other sites
lewster32 Newbie

lewster32

Posted
Posted

This is an example of vertex/polygon sorting and curve orientation, which you'll have to Google, but here are a few articles which may be of help:

Given that your shapes will always have sides at 90 degree angles, there are probably simpler ways to do this too, but I'm no geometry expert I'm afraid.

Link to comment
Share on other sites
wayfinder Newbie

wayfinder

Posted
Posted

Hmm, you're probably right. 

 

This is a helper function I wrote for this case a while ago:

pointSortCCWFromAngle0 : function(a,  {     var sign = function(x) { return typeof x === 'number' ? 1 + ((x & 0x80000000) >> 30) : NaN; }  // ugly but fast hack; returns -1 for values < 0, 1 for values >= 0; cribbed from StackOverflow      // if both y are 0, sort by abs(x), low to high    // if both points are in the same y hemisphere, sort by x, high to low    // if not, sort by y, low to high     if (a[0][1] === 0 && b[0][1] === 0) {         return (Math.abs(a[0][0]) - Math.abs(b[0][0]));     } else if (sign(a[0][1]) === sign(b[0][1])) {         return b[0][0] - a[0][0];     } else {         return a[0][1] - b[0][1];     } }

edit: hmpf, forum eating half my post again.

 

Usage: 

points.sort(this.pointSortCCWFromAngle0);

It assumes that points is an array of arrays, filled from your coordinates like this:

points[i] = new Array(x, y);

You should, after sorting, in untested theory, be able to pass it directly to addPolygon. 

 

 

edit: And there are more caveats: it wants coordinates relative to the center of mass IIRC... I did not retire this function without reason :/ Better ignore it ;) Maybe someone who is better at programming can make it fit though, the sorting is sound as far as I remember

Link to comment
Share on other sites
polo Newbie

polo

Posted
  • Author
Posted

Thanks for all your input, i solve by using some functions based on "Hull convex"

 

 

// Copyright 2001, softSurfer (www.softsurfer.com)
// This code may be freely used and modified for any purpose
// providing that this copyright notice is included with it.
// SoftSurfer makes no warranty for this code, and cannot be held
// liable for any real or imagined damage resulting from its use.
// Users of this code must verify correctness for their application.
// Assume that a class is already given for the object:
//    Point with coordinates {float x, y;}
//===================================================================
 
// isLeft(): tests if a point is Left|On|Right of an infinite line.
//    Input:  three points P0, P1, and P2
//    Return: >0 for P2 left of the line through P0 and P1
//            =0 for P2 on the line
//            <0 for P2 right of the line
 
    function sortPointX(a, B) {
        return a.x - b.x;
    }
    ;
    function sortPointY(a, B) {
        return a.y - b.y;
    }
    ;
 
    function isLeft(P0, P1, P2) {
        return (P1.x - P0.x) * (P2.y - P0.y) - (P2.x - P0.x) * (P1.y - P0.y);
    }
    ;
//===================================================================
 
// chainHull_2D(): A.M. Andrew's monotone chain 2D convex hull algorithm
// 
//     Input:  P[] = an array of 2D points 
//                   presorted by increasing x- and y-coordinates
//             n = the number of points in P[]
//     Output: H[] = an array of the convex hull vertices (max is n)
//     Return: the number of points in H[]
 
 
    function chainHull_2D(P, n, H) {
        // the output array H[] will be used as the stack
        var bot = 0,
                top = (-1); // indices for bottom and top of the stack
        var i; // array scan index
        // Get the indices of points with min x-coord and min|max y-coord
        var minmin = 0,
                minmax;
 
        var xmin = P[0].x;
        for (i = 1; i < n; i++) {
            if (P.x != xmin) {
                break;
            }
        }
 
        minmax = i - 1;
        if (minmax == n - 1) { // degenerate case: all x-coords == xmin 
            H[++top] = P[minmin];
            if (P[minmax].y != P[minmin].y) // a nontrivial segment
                H[++top] = P[minmax];
            H[++top] = P[minmin]; // add polygon endpoint
            return top + 1;
        }
 
        // Get the indices of points with max x-coord and min|max y-coord
        var maxmin, maxmax = n - 1;
        var xmax = P[n - 1].x;
        for (i = n - 2; i >= 0; i--) {
            if (P.x != xmax) {
                break;
            }
        }
        maxmin = i + 1;
 
        // Compute the lower hull on the stack H
        H[++top] = P[minmin]; // push minmin point onto stack
        i = minmax;
        while (++i <= maxmin) {
            // the lower line joins P[minmin] with P[maxmin]
            if (isLeft(P[minmin], P[maxmin], P) >= 0 && i < maxmin) {
                continue; // ignore P above or on the lower line
            }
 
            while (top > 0) { // there are at least 2 points on the stack
                // test if P is left of the line at the stack top
                if (isLeft(H[top - 1], H[top], P) > 0) {
                    break; // P is a new hull vertex
                }
                else {
                    top--; // pop top point off stack
                }
            }
 
            H[++top] = P; // push P onto stack
        }
 
        // Next, compute the upper hull on the stack H above the bottom hull
        if (maxmax != maxmin) { // if distinct xmax points
            H[++top] = P[maxmax]; // push maxmax point onto stack
        }
 
        bot = top; // the bottom point of the upper hull stack
        i = maxmin;
        while (--i >= minmax) {
            // the upper line joins P[maxmax] with P[minmax]
            if (isLeft(P[maxmax], P[minmax], P) >= 0 && i > minmax) {
                continue; // ignore P below or on the upper line
            }
 
            while (top > bot) { // at least 2 points on the upper stack
                // test if P is left of the line at the stack top
                if (isLeft(H[top - 1], H[top], P) > 0) {
                    break;  // P is a new hull vertex
                }
                else {
                    top--; // pop top point off stack
                }
            }
 
            if (P.x == H[0].x && P.y == H[0].y) {
                return top + 1; // special case (mgomes)
            }
 
            H[++top] = P; // push P onto stack
        }
 
        if (minmax != minmin) {
            H[++top] = P[minmin]; // push joining endpoint onto stack
        }
 
        return top + 1;
    }
Link to comment
Share on other sites
  • 1 year later...
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...