Touch My Pixel Blog » Flash http://blog.touchmypixel.com Games + Web : Interaction Matters Thu, 22 Jul 2010 04:18:49 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Haxe starts to target iPhone http://blog.touchmypixel.com/2009/05/haxe-starts-to-target-iphone/ http://blog.touchmypixel.com/2009/05/haxe-starts-to-target-iphone/#comments Sat, 23 May 2009 05:28:33 +0000 tonyp http://blog.touchmypixel.com/?p=128 After the haxe meeting last saturday night, i was excited that the topic of targeting the iphone was brought up. This could cause a lot of adoption of haxe as a language. Being able to develop games for flash and Iphone at the same time would be perfect and something lots of flash game developers would love!

I tried my hand at compiling c++ into and ObjC wrapper a few weeks ago, and in my inexperience… failed miserably. Hugh (the haxe C++ target creator) has taken the challenge, and in the last few days, successfully made some first tests for haxe C++ on the iphone. Hopfully over the next few weeks everything will continue to come to plan (and more people just on bord for testing and dev) and we’ll have an iphone target :P

I cant wait to get a chance to do some testing (looking to buy a macbook next week when we go to LA for e3).

read about it here:

http://gamehaxe.com/2009/05/22/haxe-on-iphone-simulator/

cheers

Tony

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2009/05/haxe-starts-to-target-iphone/feed/ 0 Jellyroids – My First haxe C++ game test http://blog.touchmypixel.com/2009/04/jellyroids-my-first-haxe-c-game-test/ http://blog.touchmypixel.com/2009/04/jellyroids-my-first-haxe-c-game-test/#comments Mon, 27 Apr 2009 03:39:23 +0000 tonyp http://blog.touchmypixel.com/?p=97 jellyroids-01

After only a day or two playing in hxcpp i’ve got my first little test to show – Jellyroids!

This gametest compiles (using haxe) out to flash & C++ (exe in the cpp folder for windows only – i dont have a mac or linux, so cant test as yet).

Running the software rendered c++ version is a little slow – ~200fps on my comp, opengl is ~1500fps. Whereas flash clocks in at 100fps (maxed out). Prerendering the explosion animation (currently vector animation from a swf) will make it MUCH faster for c++ (stop the slowdown on shoot), as i feel its vector animation code isnt anywhere as optimized as that in flash.

Overall, its fun to see how easy its been to get out a simple test in hxcpp.

download the game test here

cheers – Tony

UPDATE:

to get it to work you need to change a few small things in the neash 0.9. realease.

There are two issues with the current release of neash that need fixing. Just change the following lines:

1/ in neash.display.MovieClip:
add in some stubs for functions (just copy in the following lines)

public function gotoAndPlay(frame:Dynamic, ?scene:String):Void { }
public function gotoAndStop(frame:Dynamic, ?scene:String):Void { }

public function stop(){}
public function play(){}

2/ in neash.display.DisplayObject:
make getRotation method look as follows:

public function GetRotation()
{
return mRotation * (180.0 / Math.PI);
}

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2009/04/jellyroids-my-first-haxe-c-game-test/feed/ 8 Scarygirl has launched http://blog.touchmypixel.com/2009/04/scarygirl-launch/ http://blog.touchmypixel.com/2009/04/scarygirl-launch/#comments Sat, 18 Apr 2009 09:39:40 +0000 tonyp http://blog.touchmypixel.com/?p=52 Its finally time! The Scarygirl project has been in the works for about 2 years, in production for about a year and a half, and in my nightmares for quite a while. So, we are slightly excited to see it out in the wild… and not on our todo lists :P

We have been surprised by the reaction so far, 200,000+ plays in the last 3 days. We’ve had to upgrade servers twice, and are rapidly making some fixes to bugs and improvements to gameplay.

As a bit of background, the project is based on the concepts and designs of Nathan Jurevicius. He is a comic artist from Melbourne, Australia, but living in Toronto. The character Scarygirl has had quite a journey over the last 10 years, but is finding her feet in this online game (Funded by Film Victoria & Passion Pictures), soon to be released graphic novels, and an upcoming feature film. We had the opportunity to work on the project due to our friend Suren at Renmotion, and his contact with Nathan.

The project has stretched our skills and through its arduous process, we’ve learned a lot about planning, designing and developing a game. TouchMyPixel is only two people (Tarwin & myself) so the project was a huge workload. We have a background in Flash development, design, and smaller advertising style games, but not a larger scale game of any sort. Scarygirl, in its essence was only planned to be a 9 month project (sorry Sophie), but I think, in our excitement of making a “proper game”, not what people generally see a flash game to be, we overshot the timeline a little. We tried to give the game a depth which most Flash games don’t have, as it seems most flash games are focussed on being small, fun snippets of a game. We wanted to produce a full experince. I think everyone on the project felt this way, and wanted to push themselves and the project.

The game is quite artwork driven, which is obviously one of the major requirements (being to promote Nathan’s artwork). This challenged us with the task of designing a world which would well reflect Nathan’s irregular style while keeping farmiliar game mechanics. We spent a lot of time finding ways to faithfully display his artwork. For instance, we wanted the character to be able to walk over irregular surfaces, surfaces we could quickly mockup in Flash to match to the artwork as needed.

Our first stage was conceptualizing what each level would entail (or even if there were “levels”). Nathan had given us a basic ideas for some levels, and a pre-release of the graphic novel for story reference. Then it was up to use to sketch out some levels. We wanted to incorporate adventure game elements to highten the journey aspect, but also keep with traditional platform style gameplay. From sketches of characters, we would decide how they would fit into the world and react to the player. After producing mock levels without artwork (see non-graphical demo), we handed over level designs to Nathan to have them beautified. At this stage we often had NO IDEA what a level would look like, which gave us the joy and sometimes suprise when we finally saw what a level really looked like; we may have just drawn a small brown patch for tree which would come back as a beautiful peice of art. This was wierd, and made level design hard, as we really didnt have much of a concept of what we were designing, or more to the point were worried that our concepts was wrong.

underwater_progression

Progression of level design: 1. sketch  2. level in Flash  3. artwork overlay  4. final product

After getting the graphics and adding them to levels, we found that the game ran at about 1FPS. Which was a slight issue. This brought us to the stage of optimizing, refactoring, and rebuilding all of the levels to work with graphics. In the end all of the level graphics are pre-cached as tiles of bitmaps (starting as vector to save download), as the level might be up to 20,000 x 20,000 pixel in some cases. The bitmaps then have effects such as noise and glows applied to more closely replicate what Nathan is currently doing with his art. Some levels such as the peninsula (Escapade) have multiple levels of background and foreground. We then started adding the animated characters and enemies and found they too slowed the game to a carwl. So all of the animations needed to have each frame pre-cached as well, and kept in a frame cache in memory. Every sprite then works off the same frame information. With all of this caching some levels started to take up to 600mb of memory… which was the next issue. After overcoming the many trials of technically getting the game working, gameplay testing and debugging proceeded for about five months.

As i stated earlier, we’ve learned a lot about planning and developing a game, and think we’ll fair a little better in the future. As for Scarygirl, a standalone version might be on the horizon. We’d also love to look at other platforms too, such as iPhone; not sure if i want to learn Objective C too quickly though.

Well its good to see it released. We are still be making some notable tweaks, and are taking users comments into account, so the job still isn’t over yet, but there’s light at the end of the tunnel.

Play the game

cheers

Tony – TouchMyPixel

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2009/04/scarygirl-launch/feed/ 4 Key events in AS3 and the missing Key.isDown() http://blog.touchmypixel.com/2009/02/key-events-in-as3-and-the-missing-keyisdown/ http://blog.touchmypixel.com/2009/02/key-events-in-as3-and-the-missing-keyisdown/#comments Wed, 11 Feb 2009 13:42:25 +0000 tarwin http://blog.touchmypixel.com/?p=24 When AS3 came out many people, myself including, were frustrated and confused by the lack of a quick and dirty function to check whether a key was down (pressed). You can have a listener that gets fired when a key is pressed and see which key it was within that function. This could lead to someone putting all their key behaviour code in one spot which could become quite messy.

The best way to fix this is with a class that does all the heavy lifting for you. Without any any further ado here's the test. Use the arrow keys, space, z and shift+z to try it out [source]:

example >


The test test's code:

PLAIN TEXT
Actionscript:
  1. package test
  2. {
  3.     import com.touchmypixel.io.Keys;
  4.     import flash.text.TextField;
  5.    
  6.     import flash.display.MovieClip;
  7.     import flash.display.Sprite;
  8.     import flash.events.Event;
  9.     import flash.events.KeyboardEvent;
  10.    
  11.     public class TestKeys extends MovieClip
  12.     {
  13.         private var vx:Number = 0;
  14.         private var vy:Number = 0;
  15.         private var box:Sprite;
  16.         private var boxRed:Boolean = false;
  17.        
  18.         public var tText:TextField;
  19.        
  20.         public function TestKeys()
  21.         {
  22.             Keys.init(this);
  23.            
  24.             stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
  25.             stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownAgain);
  26.            
  27.             addEventListener(Event.ENTER_FRAME, ef);
  28.            
  29.             box = new Sprite();
  30.             drawBox();
  31.             box.x = 200;
  32.             box.y = 200;
  33.             addChild(box);
  34.         }
  35.        
  36.         private function keyDown(e:KeyboardEvent):void
  37.         {
  38.             if (Keys.isDown(Keys.SHIFT) && Keys.isDownOnce(Keys.Z, "SHIFT_Z")) {
  39.                 superTrace("Shift then Z pressed once");
  40.             }
  41.         }
  42.        
  43.         private function superTrace(s:String):void
  44.         {
  45.             tText.appendText(s + "\n");
  46.         }
  47.        
  48.         private function keyDownAgain(e:KeyboardEvent):void
  49.         {
  50.             if (Keys.isDownOnce(Keys.Z, "SHIFT_Z")) {
  51.                 superTrace("Z pressed once: SHIFT_Z");
  52.             }
  53.         }
  54.        
  55.         private function drawBox():void
  56.         {
  57.             var c:int = boxRed ? 0x00ff00 : 0xff0000;
  58.             box.graphics.beginFill(c);
  59.             box.graphics.drawRect(0, 0, 20, 20);
  60.             box.graphics.endFill();
  61.             boxRed = !boxRed;
  62.         }      
  63.        
  64.         private function ef(e:Event):void
  65.         {         
  66.             if (Keys.isDownOnce(Keys.SPACE, "CHANGE_BOX_COLOR")) drawBox();
  67.            
  68.             if (Keys.isDown(Keys.LEFT)) vx -= .5;
  69.             if (Keys.isDown(Keys.RIGHT)) vx += .5;
  70.             if (Keys.isDown(Keys.UP)) vy -= .5;
  71.             if (Keys.isDown(Keys.DOWN)) vy += .5;
  72.            
  73.             vx *= .95;
  74.             vy *= .95;
  75.            
  76.             box.x += vx;
  77.             box.y += vy;
  78.         }      
  79.     }
  80. }

and the class itself:

PLAIN TEXT
Actionscript:
  1. /*
  2. * Copyright 2008 by Touch My Pixe, Tarwin Stroh-Spijer and Tony Polinelli
  3. * Please feel free to use it in your own projects, but please let us know so we can bask in your love
  4. */
  5. package com.touchmypixel.io
  6. {
  7.     import flash.display.DisplayObject;
  8.     import flash.events.KeyboardEvent;
  9.  
  10.     /*
  11.      * Keys
  12.      * An easy way to handle key input
  13.      *
  14.      * Hint
  15.      * If you load an external SWF you may find that it takes over the key handling and you don't get any events here.
  16.      * You can fix this by setting the "stage.focus = stage", either on an event, or on a continuous loop.
  17.      */
  18.     public class Keys
  19.     {   
  20.         /* which keys are down (true)
  21.          */
  22.         static private var keycodes: Array = new Array(256);
  23.        
  24.         /* whick keys have been pushed down once, and not released
  25.          */
  26.         static private var keyDownUsed:Object = new Object();
  27.        
  28.         // object went through on init, used for deIniting
  29.         static private var initSprite:DisplayObject;
  30.        
  31.         /* this has to be called before
  32.          */
  33.         static public function init( stageSprite: DisplayObject ):void
  34.         {
  35.             // set as max value so this keyboard event is fired before any user set ones
  36.             stageSprite.stage.addEventListener( KeyboardEvent.KEY_DOWN, onKeyDown, false, int.MAX_VALUE);
  37.             // set max-1 so it's always fired AFTER the key down
  38.             stageSprite.stage.addEventListener( KeyboardEvent.KEY_UP, onKeyUp, false, int.MAX_VALUE - 1);
  39.             initSprite = stageSprite;
  40.            
  41.             // clear for good housekeeping
  42.             clear();
  43.         }
  44.        
  45.         /* If you want to manually control which keys are up or down, for example running a recorded demo
  46.          * you can first run deInit, then
  47.          */
  48.         static public function deInit():void
  49.         {
  50.             if (initSprite) {
  51.                 clear();
  52.                 initSprite.stage.removeEventListener( KeyboardEvent.KEY_DOWN, onKeyDown );
  53.                 initSprite.stage.removeEventListener( KeyboardEvent.KEY_UP, onKeyUp );
  54.                 initSprite = null;
  55.             }
  56.         }
  57.        
  58.         /* return true if specified key is down
  59.          */
  60.         static public function isDown( key:uint ):Boolean
  61.         {
  62.             return keycodes[key] == true;
  63.         }
  64.  
  65.         /* return true if specified key is down
  66.          */  
  67.         static public function isDownOnce(key:uint, id:String):Boolean
  68.         {
  69.             if(keycodes[key] && keyDownUsed[key]){
  70.                 if(!keyDownUsed[key][id]){
  71.                     keyDownUsed[key][id] = true;
  72.                     return(true);
  73.                 }
  74.             }
  75.             return(false);
  76.         }
  77.  
  78.         /* return true if any keys are down
  79.          */  
  80.         static public function anyDown():Boolean
  81.         {
  82.             for each(var k:uint in keycodes)
  83.             {
  84.                 if (k) return(true);
  85.             }
  86.             return(false);
  87.         }
  88.                
  89.         /* sets a key as down
  90.          * use in company with deInit or without initing to do things such as playing back a demo
  91.          */
  92.         static public function forceDown(keyCode:int):void
  93.         {
  94.             keycodes[keyCode] = true;
  95.             if(!keyDownUsed[keyCode]) keyDownUsed[keyCode] = new Object();
  96.         }
  97.        
  98.         /* sets a key as up
  99.          * use in company with deInit or without initing to do things such as playing back a demo
  100.          */
  101.         static public function forceUp(keyCode:int):void
  102.         {
  103.             keycodes[keyCode] = false;
  104.             delete keyDownUsed[keyCode];
  105.         }
  106.        
  107.         /* clears all keys that are down
  108.          */
  109.         static public function clear():void
  110.         {
  111.             keycodes = new Array(256);
  112.             keyDownUsed = new Object();
  113.             presetKeycodes();
  114.         }      
  115.        
  116.         /* internal use
  117.          * should make the array faster as it never has to change size
  118.          */  
  119.         static private function presetKeycodes():void
  120.         {
  121.             var i:int = 256;
  122.             while (i>= 0) {
  123.                 keycodes[i] = false;
  124.                 i--;
  125.             }
  126.         }      
  127.  
  128.         /* internal use
  129.          */
  130.         static private function onKeyDown( event: KeyboardEvent ):void
  131.         {
  132.             keycodes[ event.keyCode ] = true;
  133.             if(!keyDownUsed[event.keyCode]) keyDownUsed[event.keyCode] = new Object();
  134.         }
  135.  
  136.         /* internal use
  137.          */  
  138.         static private function onKeyUp( event: KeyboardEvent ):void
  139.         {
  140.             keycodes[ event.keyCode ] = false;
  141.             delete keyDownUsed[event.keyCode];
  142.         }      
  143.  
  144.         /* a quick refernece to all keys, so you don't to use both Keys and flash.ui.Keyboard
  145.          */
  146.         public static const A:uint = 65;
  147.         public static const ALTERNATE:uint = 18;
  148.         public static const B:uint = 66;
  149.         public static const BACKQUOTE:uint = 192;
  150.         public static const BACKSLASH:uint = 220;
  151.         public static const BACKSPACE:uint = 8;
  152.         public static const C:uint = 67;
  153.         public static const CAPS_LOCK:uint = 20;
  154.         public static const COMMA:uint = 188;
  155.         public static const COMMAND:uint = 15;
  156.         public static const CONTROL:uint = 17;
  157.         public static const D:uint = 68;
  158.         public static const DELETE:uint = 46;
  159.         public static const DOWN:uint = 40;
  160.         public static const E:uint = 69;
  161.         public static const END:uint = 35;
  162.         public static const ENTER:uint = 13;
  163.         public static const EQUAL:uint = 187;
  164.         public static const ESCAPE:uint = 27;
  165.         public static const F:uint = 70;
  166.         public static const F1:uint = 112;
  167.         public static const F10:uint = 121;
  168.         public static const F11:uint = 122;
  169.         public static const F12:uint = 123;
  170.         public static const F13:uint = 124;
  171.         public static const F14:uint = 125;
  172.         public static const F15:uint = 126;
  173.         public static const F2:uint = 113;
  174.         public static const F3:uint = 114;
  175.         public static const F4:uint = 115;
  176.         public static const F5:uint = 116;
  177.         public static const F6:uint = 117;
  178.         public static const F7:uint = 118;
  179.         public static const F8:uint = 119;
  180.         public static const F9:uint = 120;
  181.         public static const G:uint = 71;
  182.         public static const H:uint = 72;
  183.         public static const HOME:uint = 36;
  184.         public static const I:uint = 73;
  185.         public static const INSERT:uint = 45;
  186.         public static const J:uint = 74;
  187.         public static const K:uint = 75;
  188.         public static const L:uint = 76;
  189.         public static const LEFT:uint = 37;
  190.         public static const LEFTBRACKET:uint = 219;
  191.         public static const M:uint = 77;
  192.         public static const MINUS:uint = 189;
  193.         public static const N:uint = 78;
  194.         public static const NUMBER_0:uint = 48;
  195.         public static const NUMBER_1:uint = 49;
  196.         public static const NUMBER_2:uint = 50;
  197.         public static const NUMBER_3:uint = 51;
  198.         public static const NUMBER_4:uint = 52;
  199.         public static const NUMBER_5:uint = 53;
  200.         public static const NUMBER_6:uint = 54;
  201.         public static const NUMBER_7:uint = 55;
  202.         public static const NUMBER_8:uint = 56;
  203.         public static const NUMBER_9:uint = 57;
  204.         public static const NUMPAD:uint = 21;
  205.         public static const NUMPAD_0:uint = 96;
  206.         public static const NUMPAD_1:uint = 97;
  207.         public static const NUMPAD_2:uint = 98;
  208.         public static const NUMPAD_3:uint = 99;
  209.         public static const NUMPAD_4:uint = 100;
  210.         public static const NUMPAD_5:uint = 101;
  211.         public static const NUMPAD_6:uint = 102;
  212.         public static const NUMPAD_7:uint = 103;
  213.         public static const NUMPAD_8:uint = 104;
  214.         public static const NUMPAD_9:uint = 105;
  215.         public static const NUMPAD_ADD:uint = 107;
  216.         public static const NUMPAD_DECIMAL:uint = 110;
  217.         public static const NUMPAD_DIVIDE:uint = 111;
  218.         public static const NUMPAD_ENTER:uint = 108;
  219.         public static const NUMPAD_MULTIPLY:uint = 106;
  220.         public static const NUMPAD_SUBTRACT:uint = 109;
  221.         public static const O:uint = 79;
  222.         public static const P:uint = 80;
  223.         public static const PAGE_DOWN:uint = 34;
  224.         public static const PAGE_UP:uint = 33;
  225.         public static const PERIOD:uint = 190;
  226.         public static const Q:uint = 81;
  227.         public static const QUOTE:uint = 222;
  228.         public static const R:uint = 82;
  229.         public static const RIGHT:uint = 39;
  230.         public static const RIGHTBRACKET:uint = 221;
  231.         public static const S:uint = 83;
  232.         public static const SEMICOLON:uint = 186;
  233.         public static const SHIFT:uint = 16;
  234.         public static const SLASH:uint = 191;
  235.         public static const SPACE:uint = 32;
  236.         public static const T:uint = 84;
  237.         public static const TAB:uint = 9;
  238.         public static const U:uint = 85;
  239.         public static const UP:uint = 38;
  240.         public static const V:uint = 86;
  241.         public static const W:uint = 87;
  242.         public static const X:uint = 88;
  243.         public static const Y:uint = 89;
  244.         public static const Z:uint = 90;
  245.        
  246.         /* experimental
  247.          */
  248.         public static const WINDOWS_KEY_LEFT:uint = 91;
  249.         public static const WINDOWS_KEY_RIGHT:uint = 92;
  250.         public static const WINDOWS_RIGHT_CLICK:uint = 93;
  251.         public static const WINDOWS_VOLUME_DOWN:uint = 174;
  252.         public static const WINDOWS_VOLUME_UP:uint = 175;
  253.         public static const WINDOWS_VOLUME_MUTE:uint = 173;
  254.         public static const WINDOWS_PLAY_PAUSE:uint = 179;
  255.         public static const WINDOWS_BACK:uint = 166;
  256.         public static const WINDOWS_FORWARD:uint = 167;
  257.         public static const NUM_LOCK:uint = 144;
  258.         public static const SCROLL_LOCK:uint = 145;
  259.         public static const PAUSE_BREAK:uint = 19;
  260.     }
  261. }

Have fun!

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2009/02/key-events-in-as3-and-the-missing-keyisdown/feed/ 4 Caching Animation Frames VS Spritesheets http://blog.touchmypixel.com/2008/11/caching-animation-frames-vs-spritesheets/ http://blog.touchmypixel.com/2008/11/caching-animation-frames-vs-spritesheets/#comments Fri, 28 Nov 2008 06:08:11 +0000 tonyp http://blog.touchmypixel.com/?p=22 Apparantly drawing each frame of an animation to a single bitmap and then selecting a region to display is better for memory and speed than keeping each frame in its own bitmapData object.

The issue i've had is that for larger animations a sprite sheet of 2880x2880 is a little restrictive. To counter this ive modified bit101's BigAssCanvas to allow a copyPixels of a rect, in order to get our frame data from a BIG Sprite sheet. This makes the test a little unfair, but small spritesheets are not an option for us.

view the test >

The results are as follows:

uncached:  ~16fps
cached as frames: ~120fps
cached on spritesheet: ~70fps

memory usage:

frames: 249 856
spritesheet: 270 336

so caching each frame seems the way to go for us. There doesnt seem to be any advantage in the spritesheet. It might run faster if it was a single bitmapData object and direct coptyPixels - but who's to say :P

download the source >

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2008/11/caching-animation-frames-vs-spritesheets/feed/ 15 CopyPixels for BigAssCanvas http://blog.touchmypixel.com/2008/11/copypixels-for-bigasscanvas/ http://blog.touchmypixel.com/2008/11/copypixels-for-bigasscanvas/#comments Fri, 28 Nov 2008 06:03:58 +0000 tonyp http://blog.touchmypixel.com/?p=23 We needed to copy out the BitmapData from a BigAssCanvas so i added this to bit101s class. It doesnt really work like BitmapData's copyPixels - as that copys pixel INTO the bitmap object, so i've named it copyPixelsOut and it returns a new bitmapData of the rect.

You will notice the red lines at 2880 when you move the viewable region over them the data you are given is atually sourced from 2 bitmapData objects (inside the BigAssBitmap).

PS: Thanks to Jonno from Something Splendid for helping me when my maths brain had disappeared.

Its basically :

PLAIN TEXT
Actionscript:
  1. public function copyPixelsOut(rect:Rectangle, transparent:Boolean=true, fillColor:uint=0xff000000 ):BitmapData
  2. {
  3. var bitmapData:BitmapData = new BitmapData(rect.width, rect.height, transparent, fillColor);
  4.  
  5. for(var i:int = 0; i <_bitmaps.length; i++)
  6. {
  7. var bmp:Bitmap = _bitmaps[i] as Bitmap;
  8. var temp:Rectangle = rect.clone();
  9. temp.x -= bmp.x;
  10. temp.y -= bmp.y;
  11.  
  12. if(temp.intersects(new Rectangle(0,0,2880,2880))){
  13. bitmapData.copyPixels(bmp.bitmapData, temp, new Point());
  14. }
  15. }
  16.  
  17. return bitmapData;
  18. }

example >
download the source >

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2008/11/copypixels-for-bigasscanvas/feed/ 1 Flash: Normal Mapping for Physics http://blog.touchmypixel.com/2008/11/flash-normal-mapping-for-physics/ http://blog.touchmypixel.com/2008/11/flash-normal-mapping-for-physics/#comments Tue, 25 Nov 2008 16:23:22 +0000 tarwin http://blog.touchmypixel.com/?p=21 Almost a year ago I was reading about how normal mapping works (on Wikipedia I think) and it struck me that this would be a great way to define a useful height map for games, maybe a mini golf game as an example.

My understanding is that normal maps work by encoding the X and Y angle difference from a flat surface (generally a polygon). That is the difference between a larger polygon from a low count polygon model, and the multiple polygons that made up a high count polygon model. This is normally saved as red and green channels. The blue channel (from what I could work out) was used in some way for height (or Z).

So, if I know the red and green pixel value at any point I can tell the angle, or at least amount of slope in X and Y, between -128 and 128 (256 colors for each channel of a 24 bit image). And the blue channel can tell me Z (or height). But how to make a normal map? I found a program (can't remember what it's called now, dam, I'll post when I find) which let me convert height maps (greyscale) to normal maps, and preview what they'd look like on a box or sphere. This was great, except that the blue channel was never quite a representation of the height info, I'm still not sure what it was exactly, any have any idea? Not to worry, I just loaded the file back in Photoshop and replaced the blue channel with my original height map data! I also copied (took a screen shot) of my normal map with lights on the face of a square.

I had thought about trying to make the normal map in Flash, directly from a height map, but really couldn't be bothered trying to do all the processing, maybe next time! I could even use Flash to create a "rendered view" using a displacement map I think.

[Side note: I guess you could use a 32bit image and use the Alpha for some extra info, maybe extra height, or amount of friction or something]

Here's some of my original examples. Use the keys to move the ball around (click to view).

Exeriments

Example 1 Example 2 Example 3 Example 4

After doing these examples I had intended on making some kind of minigolf game, but it never happened. A few days ago I was thinking back to those experiments and thought "wouldn't it be great to use the normal maps for some kind of driving game thingy". Why not use my new-gotten PV3D skilsl for a new experiment ... so here it is!

PV3D Normal Mapping experiment

Example 5

In this example I used Papervision3D to create a box that drives over the landscape I've created, and it's rotation and height is affected by this terrain.

Example displacement maps

And here are some of the displacement maps if you want to play around!

Dis 1

Dis 2

The Code

Here's the main part of the code, the bit that does all the "normal mapping" stuff at least.

PLAIN TEXT
Actionscript:
  1. // let the user move the ball around by adding velocities to it
  2. if (Keys.isDown(Keys.UP)) ball.velocity.y -= -.1;
  3. if (Keys.isDown(Keys.DOWN)) ball.velocity.y += -.1;
  4. if (Keys.isDown(Keys.LEFT)) ball.velocity.x -= -.1;
  5. if (Keys.isDown(Keys.RIGHT)) ball.velocity.x += -.1;
  6.  
  7. // get the RG&B values for the pixel under which our ball is
  8. var pixelValue:uint = dis.getPixel32(ball.x, ball.y);
  9. var alphaValue:uint = pixelValue>> 24 & 0xFF;
  10. var red:uint = pixelValue>> 16 & 0xFF;
  11. var green:uint = pixelValue>> 8 & 0xFF;
  12. var blue:uint = pixelValue & 0xFF;
  13.  
  14. // get our angle X and Y
  15. // the green is flipped so it can be worked with the same way as the red
  16. var ax = red;
  17. var ay = 255-green;
  18.  
  19. // set our velocity depending on the color values, or angles, normalizing the 0 -> 255 to -128 -> 128
  20. // this makes it seem as if the ball is on a hill, and being pushed towards the screen by gravity
  21. ball.velocity.x += ( -128 + ax) / 100;
  22. ball.velocity.y += ( -128 + ay) / 100;
  23.  
  24. // using the blue channel, change the height of the tank
  25. var pz = (blue / 255);
  26. ball.scaleX = pz;
  27. ball.scaleY = pz;
  28.  
  29. // add friction to our ball
  30. ball.velocity.x *= 0.97;
  31. ball.velocity.y *= 0.97;

Easey huh?! Have fun! If you do anything with this, please let us know so we can tell the world how awesome we are!

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2008/11/flash-normal-mapping-for-physics/feed/ 8 Making Convex Polygons from Concave Ones: Ear Clipping http://blog.touchmypixel.com/2008/06/making-convex-polygons-from-concave-ones-ear-clipping/ http://blog.touchmypixel.com/2008/06/making-convex-polygons-from-concave-ones-ear-clipping/#comments Wed, 18 Jun 2008 16:02:33 +0000 tarwin http://blog.touchmypixel.com/?p=17 We've recently been playing around with a physics engines in Flash, including a little romance with Glaze, a slight flirting with PhysaXe and now seeming to settle for Box2D ... (the dependable old dog)

All these engines work only with convex polygons, and in no way support concave polygons. They do however support more than one shape (or polygon) in each of their rigid bodies. This gives us the change to fake concave shapes by making multiple convex ones. But how do we convert from concave to convex?

I did a bit of a search around and heard about such things as Ear Clipping and Minimum Convex Decomposition. The second I could even find code for (http://www.cs.ubc.ca/spider/snoeyink/demos/convdecomp/MCDDemo.html) which was awesome, and in Java none the less. But alas, even with the help of this awesome Java to AS3 converter, I failed at getting it to work.

Then I stumbled upon a great post on the Box2D forums "Concave Polygon Decomposition in Flash". Someone had converted an Ear Clipping example in Processsing to a JSFL tool. Sweet!

So between the two example I managed to cobble together some not too shabby AS3 classes, and an example app. I'm hoping to add this to our Box2D wrapper (more on that later) so we can easily draw concave polygons ASAP.

example here >
download with source >

Have fun!

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2008/06/making-convex-polygons-from-concave-ones-ear-clipping/feed/ 5 Workaround for AS2’s exclude.xml in AS3 http://blog.touchmypixel.com/2008/05/workaround-for-as2s-excludexml-in-as3/ http://blog.touchmypixel.com/2008/05/workaround-for-as2s-excludexml-in-as3/#comments Fri, 09 May 2008 04:02:36 +0000 tonyp http://blog.touchmypixel.com/?p=16 When creating external libraries, you often want the contents to have have a base class from your application. When you do this however, the whole application will often be compiled into your library due to its imports. This means two issues arise:

1/ You have a whole lot of duplicate code comipiled into your libraries, which will not be used (as when the lib is loaded any classes of the same name will not override the existing ones)

2/ It takes a bloody long time to compile your library (when it should be fast)

Solution:
The best way we have found to get around this is to create a empty classes, which work similar to intrinsics (but are totally empty -no functions, vars or imports), to replicate the base class.

Eg.
If in your application you have a class for example: 'sprites.enemies.Monster'
In your lib you will want to create an asset with identifier: 'Lib_Monster' and base class 'sprites.enemies.Monster'. Normally this would compile in the full Monster class and all its dependencies.

If you set up your lib.swf in a seperate folder to the application then create another class, lets call it a placeholder class, 'sprites.enemies.Monster' and just have it empty eg:

PLAIN TEXT
Actionscript:
  1. package sprites.enemies
  2. {
  3.     import flash.display.MovieClip;
  4.     public class Monster extends MovieClip{
  5.         public function Monster{}
  6.     }
  7. }

When it compiles the Lib_Monster will have the correct baseclass, but it will not include any code.

The trick is that, when the lib is loaded into your application the class 'sprites.enemies.Monster' will conflict. The application should have its own compiled version (the one with functionality) and when the lib loads in, it will ditch its version (the empty one) and adopt the existing (correct) version.

It only takes a few seconds to create the placeholder class for the library reference.

If you want to have the lib.fla in the same folder as the application, then you can even set up a different classpath for the lib. To do this go tot the publish settings and add a new classpath (eg. ./intrinsics). This path will be checked first for your placeholder class.

If for some crazzzy reason your classes arn't used (and so compiled) in the application (if you reference them with weak references), you will need to force them to be compiled in like this.

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2008/05/workaround-for-as2s-excludexml-in-as3/feed/ 1 Forcing classes to compile in AS3 http://blog.touchmypixel.com/2008/05/forcing-classes-to-compile-in-as3/ http://blog.touchmypixel.com/2008/05/forcing-classes-to-compile-in-as3/#comments Fri, 09 May 2008 01:47:27 +0000 tonyp http://blog.touchmypixel.com/?p=15 when you use the "import package.Class; " or "import package.*; " in AS3 the class(s) is not forced to be imported. A class is only imported if you use it somewhere in your code.

The simplest way is to just type its name:

PLAIN TEXT


Actionscript:





    

  1. 

    import sprites.Ball
    

    2. 

  2. 

     
    

    3. 

  3. 

    public function init(){
    

    4. 

  4. 

       Ball;
    

    5. 

  5. 

       // Or for many at once
    

    6. 

  6. 

       (Ball,Dirt,Kid,People);
    

    7. 

  7. 

    } 
    

    8.

Just simply typing the class type somwhere in your application will force it to compile in. Why is this of any use you may ask?

We use it for level building in games, where you have a generic component as a placeholder used in flash to lay out content/levels. Your Ball class for instance, might then simply build itself using externally loaded assets, and attach itself to the stage. It may not need to be referenced anywhere in the application, but is still compiled in.

Feel free to Flattr this post at flattr.com, if you like it.

Flattr this!

]]> http://blog.touchmypixel.com/2008/05/forcing-classes-to-compile-in-as3/feed/ 3