Tag Archives: actionscript

QuickBox2D create() Method

By Zevan | September 5, 2009

Actionscript:

import com.actionsnippet.qbox.*;
import Box2D.Common.Math.*;
import Box2D.Collision.Shapes.*;
 
[SWF(width = 600, height = 600, backgroundColor = 0x000000, frameRate=60)]
 
var sim:QuickBox2D = new QuickBox2D(this);
 
sim.setDefault({fillColor:0x990000, lineColor:0xFFCC00});
sim.createStageWalls();
 
var shapeTypes:Array = ["circle", "box", "poly"];
var pnts:Array = [-1, 0, -0.5, -1, 0.5, -1, 1, 0, 0,0.5, -1, 0];
var poly:Array=[];
for (var i:int = 0; i<20; i++){
    var xp:Number = 3 + Math.random()*15;
    var yp:Number = 3 + Math.random()*15;
    var w:Number = 0.2 + Math.random() * 2;
    var h:Number = 0.2 + Math.random() * 2;
    var r:Number = 0.2 + Math.random();
    var ang:Number = Math.random() * Math.PI * 2;
    var index:Number = int(Math.random()*shapeTypes.length);
    var s:Number = 0.3 + Math.random()*0.7;
    for (var j:int = 0; j<pnts.length; j++){
         poly[j] = pnts[j] * s;
    }
    sim.setDefault({fillColor:int(Math.random()*255) <<16, lineColor:0xFFCC00});
    sim.create(shapeTypes[index], {x:xp, y:yp, width:w, height:h, angle:ang, radius:r, points:poly, wireframe:false})
}
 
sim.start();
sim.mouseDrag();

Was showing someone QuickBox2D today and created this demo after showing them a few other posts. After writing this, I realized I hadn't posted about the QuickBox2D.create() method. Which is what addBox(), addRect(), addJoint() etc.. use internally. It takes a string for the type of QuickObject you'd like to create along with the standard params Object. Note that depending on the QuickObject type certain params will simply be ignored - for example radius is ignored when the type is "box" etc...

Have a look at the swf...

Posted in Box2D, QuickBox2D | Also tagged as3, flash, QuickBox2D | 1 Comment

QuickBox2D groupIndex Platforms

By Zevan | September 4, 2009

CLICK HERE TO COPY

Actionscript:

import com.actionsnippet.qbox.*;
import Box2D.Common.Math.*;
import Box2D.Collision.Shapes.*;
 
[SWF(width = 800, height = 600, backgroundColor = 0x000000)]
 
var sim:QuickBox2D = new QuickBox2D(this);
 
sim.createStageWalls();
 
var boxNum:int = 8;
var boxes:Array = [];
var xp:Number, yp:Number, w:Number;
for (var i:int = 0; i<boxNum; i++){
    xp = 3 + Math.random() * 10;
    yp = 4 + i * 2;
    w = 2 + Math.random() * 3;
    boxes.push(sim.addBox({x: xp, y: yp, width: w, height: 0.5, density:0, groupIndex:-1, fillColor:0xFF6532}));
}
 
var char:QuickObject = sim.addBox({x:2, y:18, width:1, height:2, allowSleep:false, groupIndex:-1, fillColor:0x0099CC});
 
sim.start();
 
var charVel:b2Vec2;
var charVelAng:Number;
 
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
     
    charVel = char.body.GetLinearVelocity();
    charVelAng =  char.body.GetAngularVelocity();
    var filter:b2FilterData;
    
    if (key[Keyboard.RIGHT]){
        charVel.x += 1
        char.body.SetLinearVelocity(charVel);
        charVelAng += 1;
        char.body.SetAngularVelocity(charVelAng);
    }
    if (key[Keyboard.LEFT]){
        charVel.x -=1;
        char.body.SetLinearVelocity(charVel);
        charVelAng -= 1;
        char.body.SetAngularVelocity(charVelAng);
    }
    if (key[Keyboard.UP] && sim.w.GetContactCount()> 0){
         charVel.y = -10;
         trace(charVel.y);
         char.body.SetLinearVelocity(charVel);
         charVelAng *= 0.8;
         char.body.SetAngularVelocity(charVelAng);
    }
    for (var i:int = 0; i<boxes.length; i++){
        var rect:Rectangle = char.userData.getRect(this);
        if (rect.bottom / 30 <boxes[i].y){
            filter = boxes[i].shape.GetFilterData();
            filter.groupIndex = 1;
            boxes[i].shape.SetFilterData(filter);
        }else{
            filter = boxes[i].shape.GetFilterData();
            if (filter.groupIndex != -1){
                filter.groupIndex = -1;
                boxes[i].shape.SetFilterData(filter);
            }
        }
    }
}
 
var key:Object = new Object();
stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
function onKeyPressed(evt:KeyboardEvent):void{ key[evt.keyCode] = true; }
function onKeyReleased(evt:KeyboardEvent):void{ key[evt.keyCode] = false; }

NOTE: This requires the QuickBox2D mini-library

This snippet shows how to use groupIndex to create simple platforms for a character to jump on. A few people have asked me about this so I figured I'd post about it. It works by altering the groupIndex of each platform based on the characters position - if the character is below a platform, both the character and the platform have groupIndex -1 (meaning they will not collide). As soon as the character is above a platform, the platforms groupIndex is set to 1 (allowing the character to walk on the platform despite having just passed through it.

Have a look at the swf...

It's also worth noting that I'm using b2World.GetContactCount() to make sure it's ok to jump... if there were more going on in the demo you'd need to check a specific contact point(s), but since the only collision that could happen involves the character this works nicely...

Posted in Box2D, QuickBox2D | Also tagged as3, Box2D, flash, QuickBox2D | 10 Comments

Fake Light w/ UV & Quads

By Zevan | September 2, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width = 500, height=500, backgroundColor = 0x000000)]
x = stage.stageWidth / 2;
y = stage.stageHeight / 2;
var quadNum:int = 2200;
// standard Vectors for using drawTriangles
var verts:Vector.<Number> = new Vector.<Number>();
var pVerts:Vector.<Number>;
var uvts:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
// needed for z-sorting
var sortedIndices:Vector.<int>;
var faces:Array = [];
// we'll use this for tranforming points
// and as the transformation matrix for our render
var m:Matrix3D = new Matrix3D();
// plot a quad
var quad:Vector.<Number>;
quad = Vector.<Number>([-10, -10, 0,
                        10, -10, 0,
                        -10, 10, 0,
                        10, 10, 0]);
// temp vect for any transformed quads
var transQuad:Vector.<Number> = new Vector.<Number>();
var i:int;
var inc:int = 0;
for (i = 0; i<quadNum; i++){
    m.identity();
    var s:Number = (int(Math.random()*50) == 1) ? 2 + Math.random()*2 : .1 + Math.random() * 2;
    m.appendScale(s, s, 1);
    m.appendRotation(90, Vector3D.Y_AXIS);
    var mult:Number = 100 + Math.random()*200;
    m.appendTranslation(mult, 0, 0);
    m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
    m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
    m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
    m.transformVectors(quad, transQuad);
    verts = verts.concat(transQuad);
    faces.push(new Vector3D());
    faces.push(new Vector3D());
    var i4:int = i * 4;
    indices.push(0 + i4, 1 + i4, 2 + i4,
                 1 + i4, 3 + i4, 2 + i4);
    mult /= 300;
    uvts.push(mult,mult,0,
              mult+.1,mult,0,
              mult,mult - .1,0,
              mult + .1,mult + .1,0);
}
sortedIndices = new Vector.<int>(indices.length, true);
// create texture
var tex:BitmapData = new BitmapData(400,400,false, 0x000000);
var grad:Shape = new Shape();
var mat:Matrix = new Matrix();
mat.createGradientBox(400,400,0,0,0);
with (grad.graphics){
    beginGradientFill(GradientType.LINEAR, [0xFFFFFF,0x002244], [1, 1], [100, 255], mat);
    drawRect(0,0,400,400);
}
tex.draw(grad);
// create background
mat.createGradientBox(1600,1200,0,-550, 0);
with (grad.graphics){
    beginGradientFill(GradientType.RADIAL, [0x000000, 0x001133], [1, 1], [0, 255], mat);
    drawRect(0,0,500,500);
}
grad.x = -stage.stageWidth/2
grad.y = -stage.stageHeight/2;
addChild(grad);
// triangles will be drawn to this
var render:Shape = Shape(addChild(new Shape()));
// fix all vector lengths
verts.fixed = true, uvts.fixed = true, indices.fixed = true
pVerts = new Vector.<Number>(verts.length/3 * 2, true);
// we need these if we want perspective
var persp:PerspectiveProjection = new PerspectiveProjection();
persp.fieldOfView = 45;
// projection matrix
var proj:Matrix3D = persp.toMatrix3D();
var dx:Number = 0, dy:Number = 0;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    dx += (mouseX - dx) / 4;
    dy += (mouseY - dy) / 4;
    m.identity();
    m.appendRotation(dy, Vector3D.X_AXIS);
    m.appendRotation(dx, Vector3D.Y_AXIS);
    m.appendTranslation(0,0,800);
    m.append(proj);
    Utils3D.projectVectors(m, verts, pVerts, uvts);
    var face:Vector3D;
    inc = 0;
    for (var i:int = 0; i<indices.length; i+=3){
        face = faces[inc];
        face.x = indices[i];
        face.y = indices[int(i + 1)];
        face.z = indices[int(i + 2)];
        var i3:int = i * 3;
        face.w = (uvts[int(face.x*3 + 2)] + uvts[int(face.y*3 + 2)] + uvts[int(face.z*3 + 2)]) * 0.333333;
        inc++;
    }
    faces.sortOn("w", Array.NUMERIC);
    inc = 0;
    for each (face in faces){
        sortedIndices[inc++] = face.x;
        sortedIndices[inc++] = face.y;
        sortedIndices[inc++] = face.z;
    }
    render.graphics.clear();
    render.graphics.beginBitmapFill(tex, null, false, false);
    render.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NEGATIVE);
}

Expanding again on the z-sorting demos from the last few days - this snippet uses UV coords and a gradient to create something that vaguely resembles a light. Unlike the previous demos, the 3D cluster in this snippet is made up of quads - requiring a slight adjustment to the depth calculation.

Have a look at the swf...

I also posted the code over at wonderfl.net...

Posted in 3D, Graphics, Vector, matrix, misc, sortOn | Also tagged as3, flash, fp10 | 2 Comments

More z-sorting

By Zevan | September 1, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width = 500, height=500, backgroundColor = 0x333333)]
x = stage.stageWidth / 2;
y = stage.stageHeight / 2;
 
 
var polyNum:int = 3000;
// standard Vectors for using drawTriangles
var verts:Vector.<Number> = new Vector.<Number>();
var pVerts:Vector.<Number>;
var uvts:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
// needed for z-sorting
var sortedIndices:Vector.<int>;
var faces:Array = [];
 
// we'll use this for tranforming points
// and as the transormation matrix for our render
var m:Matrix3D = new Matrix3D();
 
// plot a poly
var poly:Vector.<Number>;
poly = Vector.<Number>([ 0, 0, 0,
                        10, 0, 0,
                        0,10, 0]);
 
// temp vect for any transformed polygons
var transPoly:Vector.<Number> = new Vector.<Number>();
 
var i:int;
var inc:int = 0;
for (i = 0; i<polyNum; i++){
    m.identity();
    var s:Number = (int(Math.random()*50) == 1) ? 4 + Math.random()*2 : 1 + Math.random() * 2;
    m.appendScale(s, s, 1);
    m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
    m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
    m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
    m.appendTranslation(200,0,0);
                         
    m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
    m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
    m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
    
    m.transformVectors(poly, transPoly);
    
    verts = verts.concat(transPoly);
    faces.push(new Vector3D());
    indices.push(inc++, inc++, inc++);
    uvts.push(Math.random(), Math.random(), 0, Math.random(), Math.random(), 0, Math.random(), Math.random(), 0);
}
 
sortedIndices = new Vector.<int>(indices.length, true);
 
// create texture
var tex:BitmapData = new BitmapData(400,400,false, 0x000000);
var grad:Shape = new Shape();
var mat:Matrix = new Matrix();
mat.createGradientBox(400,400,0,0,0);
with (grad.graphics){
    beginGradientFill(GradientType.LINEAR, [0x000000, 0xAA0000, 0xFFFF00], [1, 1, 1], [20, 200, 255], mat);
    drawRect(0,0,400,400);
}
tex.draw(grad);
 
// create background
mat.createGradientBox(1600,1000,0,-550, -100);
with (grad.graphics){
    beginGradientFill(GradientType.RADIAL, [0x333333, 0xffffff], [1, 1], [0, 255], mat);
    drawRect(0,0,500,500);
}
grad.x = -stage.stageWidth/2
grad.y = -stage.stageHeight/2;
addChild(grad);
 
// triangles will be drawn to this
var render:Shape = Shape(addChild(new Shape()));
 
// fix all vector lengths
verts.fixed = true, uvts.fixed = true, indices.fixed = true
pVerts = new Vector.<Number>(verts.length/3 * 2, true); 
 
// we need these if we want perspective
var persp:PerspectiveProjection = new PerspectiveProjection();
persp.fieldOfView = 45;
// projection matrix
var proj:Matrix3D = persp.toMatrix3D();
 
var dx:Number = 0, dy:Number = 0;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    dx += (mouseX - dx) / 4;
    dy += (mouseY - dy) / 4;
    m.identity();
    m.appendRotation(dy, Vector3D.X_AXIS);
    m.appendRotation(dx, Vector3D.Y_AXIS);
    // push everything back so its not to close
    m.appendTranslation(0,0,800);
    // append the projection matrix at the end
    m.append(proj);
    
    Utils3D.projectVectors(m, verts, pVerts, uvts);
    
    var face:Vector3D;
    inc = 0;
    for (var i:int = 0; i<indices.length; i+=3){
        face = faces[inc];
        face.x = indices[i];
        // it may look odd, but casting to an int 
        // when doing operations inside array sytnax
        // adds a big speed boost
        face.y = indices[int(i + 1)];
        face.z = indices[int(i + 2)];
        var i3:int = i * 3;
        // get the average z position (t value) and store it in the Vector3D w property
        // depending on your model, you may not need to do an average of all 3 values
        face.w = (uvts[int(i3 + 2)] + uvts[int(i3 + 5)] + uvts[int(i3 + 8)]) * 0.333333;
        inc++;
    }
     
    // sort on w, so far this beats all other sorting methods for speed,
    // faster than Vector.sort(), faster than any custom sort method I could find
    faces.sortOn("w", Array.NUMERIC);
 
    // re-order indices so that faces are drawn in the correct order (back to front);
    inc = 0;
    for each (face in faces){
        sortedIndices[inc++] = face.x;
        sortedIndices[inc++] = face.y;
        sortedIndices[inc++] = face.z;
    }
    
    render.graphics.clear();
    render.graphics.beginBitmapFill(tex, null, false, false);
    render.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NONE);
}

This is a slightly more advanced version of the z-sorting demo from yesterday. Here 3000 polygons are randomly arranged in a sphere formation...

Have a look at the swf...

Posted in 3D, Graphics, Vector, matrix, misc | Also tagged as3, drawTriangles, flash, z-sorting | 6 Comments

Search
ActionSnippet is on Twitter
Pages
- about
- all posts
- QuickBox2D
- warning
Recent Posts
Categories
- 3D
- Announcements
- arrays
- associative arrays
- bezier
- binary
- BitmapData
- Box2D
- color
- Data Structures
- Dictionary
- display list
- DisplayObject
- dynamic
- es6
- Events
- external data
- functions
- glsl
- Graphics
- graphics algorithms
- html5
- instantiation
- javascript
- keys
- links
- Loader
- Math
- matrix
- misc
- motion
- MovieClip
- Number
- Object
- one-liners
- OOP
- Operators
- pixel manipulation
- projects
- properties
- QuickBox2D
- Quiz
- random
- return values
- setPixel
- sortOn
- string manipulation
- strings
- svg
- TextField
- timeline
- UI
- Uncategorized
- variables
- Vector
- Video
- webgl
- XML
Archives
- November 2024
- July 2024
- June 2024
- December 2018
- October 2018
- August 2018
- July 2018
- July 2012
- June 2012
- August 2011
- January 2011
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- 0

RSS Feeds
- All posts
- All comments

Tag Archives: actionscript

QuickBox2D create() Method

QuickBox2D groupIndex Platforms

Fake Light w/ UV & Quads

More z-sorting

Search

Pages

Recent Posts

Categories

Archives

RSS Feeds