Category Archives: keys

3D Key Controls

Actionscript:
  1. [SWF(backgroundColor=0x000000, width=500, height=500)]
  2. var hsw:Number = stage.stageWidth / 2;
  3. var hsh:Number = stage.stageHeight / 2;
  4. var pointNum:int = 300;
  5. var points3D:Vector.<Number> = new Vector.<Number>();
  6. var points2D:Vector.<Number> = new Vector.<Number>();
  7. var uvts:Vector.<Number> = new Vector.<Number>();
  8. var sorted:Array = [];
  9. var pnt:Point = new Point();
  10. var m:Matrix3D = new Matrix3D();
  11. var v:Vector3D = new Vector3D();
  12. for (var i:int = 0; i<pointNum; i++){
  13.     v.x = 300;
  14.     v.y = v.z = 0;
  15.     m.identity();
  16.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  17.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  18.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  19.     v = m.transformVector(v);
  20.     points3D.push(v.x, v.y, v.z);
  21.     points2D.push(0,0);
  22.     uvts.push(0,0,0);
  23.     sorted.push(new Vector3D());
  24. }
  25. points3D.fixed = true;
  26. points2D.fixed = true;
  27. uvts.fixed = true;
  28. var p:PerspectiveProjection = new PerspectiveProjection();
  29. var proj:Matrix3D = p.toMatrix3D();
  30. var rx:Number = 0, ry:Number = 0;
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.     var i:int, j:int;
  34.     m.identity();
  35.     if (key[Keyboard.RIGHT]){
  36.         rx+=3
  37.     }else
  38.     if (key[Keyboard.LEFT]){
  39.         rx-=3
  40.     }else
  41.     if (key[Keyboard.UP]){
  42.         ry-=3
  43.     }else
  44.     if (key[Keyboard.DOWN]){
  45.         ry+=3
  46.     }
  47.     m.appendRotation(rx, Vector3D.Y_AXIS);
  48.     m.appendRotation(ry, Vector3D.X_AXIS);
  49.     m.appendTranslation(0, 0, 1000);
  50.     m.append(proj);
  51.     Utils3D.projectVectors(m, points3D, points2D, uvts);
  52.     for (i = 0, j = 0; i<points2D.length; i+=2, j++){
  53.         sorted[j].x = points2D[i] + hsw;
  54.         sorted[j].y = points2D[i + 1] + hsh;
  55.         sorted[j].z = uvts[j * 3 + 2];
  56.     }
  57.     sorted.sortOn("z", Array.NUMERIC);
  58.     graphics.clear();
  59.     graphics.lineStyle(2, 0x000000, 0.1);
  60.     for(i = 0; i<sorted.length; i++){
  61.         var zpos:Number = sorted[i].z * 12000;
  62.         var c:int = zpos * 14;
  63.         c = (c> 255) ? 255 : c;
  64.         graphics.beginFill(100<<16 | 100 <<8 |c);
  65.         graphics.drawCircle(sorted[i].x, sorted[i].y,zpos);
  66.         graphics.endFill();
  67.     }
  68. }
  69.  
  70. // permanently applies the matrix to the points3D vector
  71. function applyTransform():void{
  72.     m.identity();
  73.     m.appendRotation(rx, Vector3D.Y_AXIS);
  74.     m.appendRotation(ry, Vector3D.X_AXIS);
  75.     var temp:Vector.<Number> = new Vector.<Number>();
  76.     m.transformVectors(points3D, temp);
  77.     points3D = temp;
  78.     points3D.fixed = true;
  79.     rx = 0, ry = 0;
  80. }
  81.  
  82. // basic key setup
  83. var key:Object = new Object();
  84. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  85. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  86. function onKeyPressed(evt:KeyboardEvent):void {
  87.     key[evt.keyCode] = true;
  88.     key.keyCode = evt.keyCode;
  89. }
  90. function onKeyReleased(evt:KeyboardEvent):void {
  91.   applyTransform();
  92.   key[evt.keyCode] = false;
  93. }

In response to Thomas Francis's question, this snippet takes the Simple z-sorting snippet and shows how one might go about adding some basic key controls to it. It works by permanently applying x and y rotation transformations to the set of 3D points every time a key is released.

Check out the swf...

If you need to be able to rotate on both the x and y axis at the same time - and just need more flexibility... one way to do it would be to use quaternions - which may be tricky - but there are plenty of examples out there in java, processing and C/C++ just waiting to be ported (been on the todo list for some time actually).

Haven't been posting every day because I've been out of the country and away from my computer... have a backlog of snippets that need to be cleaned up and put in the pipeline...

Also posted in 3D, Graphics, Vector | Tagged , , | 3 Comments

HSV Color Type

Actionscript:
  1. [SWF(width=560,height=300,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var key:Object = new Object();
  4. var alphabet:Array = "abcdefghijklmnopqrstuvwxyz".split("");
  5.  
  6. var num:Number = alphabet.length;
  7. var step:Number = 360 / num;
  8.  
  9. var colors:Object = new Object();
  10. for (var i:int  = 0; i<num; i++){
  11.     var index:String = alphabet[i];
  12.      key[index] = 65 + i;
  13.      var c:Array = hsv(i * step, 1, 1);
  14.      colors[index] = c[0] <<16 | c[1] <<8 | c[2];
  15. }
  16. alphabet.push("32");
  17. num++;
  18. key["32"] = 32;
  19. colors["32"]  = 0x333333;
  20. x = y = 10;
  21. var count:int = 0;
  22. var size:int = 20;
  23. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  24. function onKeyPressed(evt:KeyboardEvent):void{
  25.     for (var i:int= 0; i<num; i++){
  26.         var index:String = alphabet[i];
  27.          if (index == "32"){
  28.             trace("hi", evt.keyCode, key[index]);
  29.          }
  30.         if (evt.keyCode == key[index]){
  31.             graphics.beginFill(colors[index]);
  32.             var xp:int = count % num * size;
  33.             var yp:int = int(count / num) * size;
  34.             graphics.drawRect(xp, yp, size, size);
  35.             count++;
  36.         }
  37.     }
  38. }
  39. // ported from here:
  40. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  41. function hsv(h:Number, s:Number, v:Number):Array{
  42.     var r:Number, g:Number, b:Number;
  43.     var i:int;
  44.     var f:Number, p:Number, q:Number, t:Number;
  45.     if (s == 0){
  46.         r = g = b = v;
  47.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  48.     }
  49.     h /= 60;
  50.     i  = Math.floor(h);
  51.     f = h - i;
  52.     p = v *  (1 - s);
  53.     q = v * (1 - s * f);
  54.     t = v * (1 - s * (1 - f));
  55.     switch( i ) {
  56.         case 0:
  57.             r = v, g = t, b = p;
  58.             break;
  59.         case 1:
  60.             r = q, g = v, b = p;
  61.             break;
  62.         case 2:
  63.             r = p, g = v, b = t;
  64.             break;
  65.         case 3:
  66.             r = p, g = q, b = v;
  67.             break;
  68.         case 4:
  69.             r = t, g = p, b = v;
  70.             break;
  71.         default:        // case 5:
  72.             r = v, g = p, b = q;
  73.             break;
  74.     }
  75.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  76. }

This snippet is a typing experiment - for every letter, you type a box filled with a specific color is drawn to the stage. The color associated with each letter is determined by moving through hsv color space - so typing an alphabet will end up with something resembling a spectrum.

Also posted in Graphics, UI, color | Tagged , , | Leave a comment

QuickBox2D w/ Key Controls

Actionscript:
  1. import com.actionsnippet.qbox.*;
  2. import Box2D.Common.Math.*
  3.  
  4. [SWF(backgroundColor=0xEFEFEF, width=700, height=600, frameRate=60)]
  5.  
  6. var sim:QuickBox2D = new QuickBox2D(this);
  7.  
  8. sim.setDefault({lineColor:0xCC0000, fillColor:0xCC0000});
  9.  
  10. // create compound shape (two circles and a box for the character)
  11. var charParts:Array = [];
  12. // x and y position are now relative to center of compound shape
  13. charParts[0] = sim.addBox({x:0, y:0, width:1, height:2});
  14. charParts[1] = sim.addCircle({x:0, y:-1, radius:0.5});
  15. charParts[2] = sim.addCircle({x:0, y:1, radius:0.5});
  16. var char:QuickObject = sim.addGroup({objects:charParts, x:2, y:2.5, allowSleep:false, angularDamping:0.8, linearDamping:1.5});
  17.  
  18. // vector for linear velocity of character
  19. var charVel:b2Vec2 = new b2Vec2();
  20.  
  21. // angular velocity of character
  22. var charVelAng:Number = 1;
  23. char.body.SetAngularVelocity(charVelAng);
  24.  
  25. // world/platforms
  26. sim.setDefault({lineColor:0x666666, fillColor:0x666666, height:0.5, density:0});
  27. sim.createStageWalls();
  28. sim.addBox({x:3, y:5, width:5});
  29. sim.addBox({x:11, y:5, width:5});
  30. sim.addBox({x:8, y:9, width:8});
  31. sim.addBox({x:4, y:13, width:8});
  32. sim.addCircle({x:16, y:8, radius:2});
  33. sim.addCircle({x:12, y:15, radius:2});
  34.  
  35. // falling circles
  36. sim.setDefault({lineColor:0x2870B5, fillColor:0x2870B5});
  37. for (var i:int = 0; i<15; i++){
  38.     sim.addCircle({x:5 + i, y:2, radius:0.25 ,density:1});
  39. }
  40.  
  41. sim.start();
  42.  
  43. // key controls
  44. addEventListener(Event.ENTER_FRAME, onLoop);
  45. function onLoop(evt:Event):void {
  46.     charVel = char.body.GetLinearVelocity();
  47.     charVelAng =  char.body.GetAngularVelocity();
  48.    
  49.     if (key[Keyboard.RIGHT]){
  50.         charVel.x += 1
  51.         char.body.SetLinearVelocity(charVel);
  52.        
  53.         charVelAng += 1;
  54.         char.body.SetAngularVelocity(charVelAng);
  55.     }
  56.     if (key[Keyboard.LEFT]){
  57.         charVel.x -=1;
  58.         char.body.SetLinearVelocity(charVel);
  59.        
  60.         charVelAng -= 1;
  61.         char.body.SetAngularVelocity(charVelAng);
  62.     }
  63.     if (key[Keyboard.UP]){
  64.          charVel.y = -10;
  65.          char.body.SetLinearVelocity(charVel);
  66.            
  67.          charVelAng *= 0.8;
  68.          char.body.SetAngularVelocity(charVelAng);
  69.     }
  70. }
  71. // basic key setup
  72. var key:Object = new Object();
  73. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  74. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  75. function onKeyPressed(evt:KeyboardEvent):void {
  76.     key[evt.keyCode] = true;
  77.     key.keyCode = evt.keyCode;
  78. }
  79. function onKeyReleased(evt:KeyboardEvent):void { key[evt.keyCode] = false}

This snippet shows one way to go about doing key controls using QuickBox2D

Take a look at the swf here...

This works with the current version of QuickBox2D.... tomorrow I'll be uploading the new version of QuickBox2D which supports FRIM (frame rate independent motion) and contains a few additional minor tweaks and fixes.

Also posted in Box2D, QuickBox2D, motion | Tagged , , , | 1 Comment

Multiple Keys

Actionscript:
  1. var key:Object = new Object();
  2. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  3. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  4. function onKeyPressed(evt:KeyboardEvent):void {
  5.     key[evt.keyCode] = true;
  6.     key.keyCode = evt.keyCode;
  7. }
  8. function onKeyReleased(evt:KeyboardEvent):void {
  9.     key[evt.keyCode] = false
  10. }
  11.  
  12. // example
  13.  
  14. addEventListener(Event.ENTER_FRAME, onLoop);
  15. function onLoop(evt:Event):void {
  16.    
  17.     //trace(key.keyCode);
  18.      
  19.     if (key[Keyboard.LEFT]){
  20.         trace("left");
  21.     }
  22.    
  23.     if (key[Keyboard.RIGHT]){
  24.         trace("right");
  25.     }
  26.    
  27.     // keys #1, #2 and #3 are down
  28.     if (key[49] && key[50] && key[51]){
  29.         trace("one two thee");
  30.     }
  31.    
  32.     // keys #6, #7, #8 and #9 keys are down
  33.     if (key[54] && key[55] && key[56] && key[57]){
  34.         trace("six seven eight nine");
  35.     }
  36. }

The first 10 lines of code make up this snippet. This is an easy way to keep track of multiple key presses. For games, this is the only key technique I use ... wrapped up in a Singleton.

Also posted in associative arrays | Tagged , | 4 Comments