[SWF(width = 700, height = 700)]
var loader:Loader = new Loader();
loader.load(new URLRequest("https://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var tex:BitmapData;
function onLoaded(evt:Event):void{
tex = Bitmap(loader.content).bitmapData;
addEventListener(Event.ENTER_FRAME, onLoop);
}
var plane:Shape = Shape(addChild(new Shape()));
plane.x = plane.y = 50;
var verts:Vector.<Number> = new Vector.<Number>();
var uvs:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
var rows:int = 30;
var size:Number = rows + 1;
var vertNum:Number = size * size;
var polySize:Number = 20;
var vIndex:int = 0;
var uvIndex:int = 0;
var gridSize:Number = rows * polySize;
for (var i:Number = 0; i<vertNum; i++){
var xp:Number = i % size * polySize;
var yp:Number = int(i / size) * polySize;
verts[vIndex++] = xp
verts[vIndex++] = yp;
uvs[uvIndex++] = xp / gridSize;
uvs[uvIndex++] = yp / gridSize;
if (i % size != rows){
indices.push(i, i+1, i+size, i+size, i+size+1, i+1);
}
}
// render and show that the verts can be changed around
function onLoop(evt:Event):void {
// shake the verts
for (var i:int = 0; i<verts.length; i++){
verts[i] += Math.random() - 0.5;
}
with(plane.graphics){
clear();
beginBitmapFill(tex,null, false, true);
drawTriangles(verts, indices,uvs);
}
}
This snippet is shows how to draw a textured 2D plane using drawTriangles(). This is similar to the wireframe 2D plane post from yesterday… the main difference is that you need to calculate UV coordinates if you want to use a bitmap fill with drawTriangles().
Here is a still of this snippet:
