Emanuele Feronato

Talking about Actionscript 3 and Flash.

This is the second step in the creation of a Box2D (or Nape) destructible terrain without using bitmaps and marching squares rendering.

Let me do a small recap showing you some related, interesting posts about the topic:

* Using marching squares algorithm to trace the contour of an image – to trace the contour of a PNG image with transparency and turn it into a polygon.

* Reduce the number of points in a polygon with the Ramer-Douglas-Peucker algorithm – to reduce the number of points and vertices of the polygon.

* Polygon triangulation: decomposition of a polygon into triangles with AS3 – to split polygons in triangles.

* Create non-convex, complex shapes with Box2D – to make Box2D able to triangulate complex shapes and render them correctly.

* From PNG to Box2D – first attempt – putting all together.

The final example worked, but it did not allow me to create polygon with holes. The final goal of making a destructible terrain is the capability of adding holes in it.

So I played a bit with poly2tri class, which allows holes but does not want holes to overlap or break polygon perimeter.

Next step is using a library which handles polygon clipping. Angus Johnson made a Delphi script which manages difference, intersection, exclusive-or and union between polygons. It’s called Clipper, and has been ported to AS3 by Chris Denham, and it’s really what I need.

With this simple script:

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.geom.Point;
	import com.logicom.geom.Clipper;
	import com.logicom.geom.ClipType;
	public class Main extends Sprite {
		public function Main():void {
			for (var i:int=0; i<4; i++) {
				var dX:Number=(i%2)*320;
				var dY:Number=Math.floor(i/2)*240
				var subjectPolygon:Array=[new Point(0+dX,0+dY),new Point(200+dX,0+dY),new Point(100+dX,200+dY)];
				var clipPolygon:Array=[new Point(0+dX,100+dY),new Point(200+dX,100+dY),new Point(300+dX,200+dY)];
				var resultPolygons:Array=Clipper.clipPolygon(subjectPolygon,clipPolygon,i);
				graphics.lineStyle(2, 0xFF0000, 1.0);
				drawPolygon(subjectPolygon);
				graphics.lineStyle(2, 0x0000FF, 1.0);
				drawPolygon(clipPolygon);
				graphics.lineStyle(3, 0x00FF00, 1.0);
				graphics.beginFill(0xFF0000, 0.5);
				for each (var polygon:Array in resultPolygons) {
					drawPolygon(polygon);
				}
				graphics.endFill();
			}
		}
		private function drawPolygon(polygon:Array):void {
			var n:uint=polygon.length;
			if (n < 3) {
				return;
			}
			var p:Point=polygon[0];
			graphics.moveTo(p.x, p.y);
			for (var i:uint = 1; i <= n; ++i) {
				p=polygon[i%n];
				graphics.lineTo(p.x, p.y);
			}
		}
	}
}

I am able to show you the four ways to perform polygon clipping:

From left to right, top to bottom, respectively intersection, union, difference and xor of two overlapping triangles.

Next step will be managing holes with this class to handle holes and poly2tri to triangulate resulting polygons. And finally we’ll have our Box2D/Nape pure destructible terrain engine.

Game design ideas are welcome, meanwhile download the source code.