Touch My Pixel Blog http://blog.touchmypixel.com Games + Web Wed, 18 Jun 2008 16:02:33 +0000 http://wordpress.org/?v=2.5 en Making Convex Polygons from Concave Ones: Ear Clipping http://blog.touchmypixel.com/archives/17 http://blog.touchmypixel.com/archives/17#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.

You can view an example here.

And download it with source here.

Have fun!

]]> http://blog.touchmypixel.com/archives/17/feed Workaround for AS2’s exclude.xml in AS3 http://blog.touchmypixel.com/archives/16 http://blog.touchmypixel.com/archives/16#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:

package sprites.enemies{
import flash.display.MovieClip;
public class Monster extends MovieClip{
public function Monster{}
}
}

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.

]]> http://blog.touchmypixel.com/archives/16/feed Forcing classes to compile in AS3 http://blog.touchmypixel.com/archives/15 http://blog.touchmypixel.com/archives/15#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.

]]> http://blog.touchmypixel.com/archives/15/feed AS3 Frame Based setInterval and setTimeout http://blog.touchmypixel.com/archives/14 http://blog.touchmypixel.com/archives/14#comments Mon, 05 May 2008 11:23:18 +0000 tarwin http://blog.touchmypixel.com/?p=14 Sometimes you want to be able to use a timeout or interval but, as they are tied to milliseconds, if the frame-rate of your movie goes down from what you expected - games is a good example - then you can run into trouble.

I recently had this problem with a game, that when the frame rate lowered, cyclic "emitters" (ie creating bubbles underwater) would not be synced with the expeted speed of the game.

The solution. A setInterval and setTimeout that you can set using milliseconds (or frames if you want) and will be called at the expected number of frames. The only caviet with this approach is that it needs to be inited with the stage object, both so it can get an ENTER_FRAME event and the current FPS.


FrameTimer: Source

Example Use

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.MovieClip;
  3.     import com.touchmypixel.utils.FrameTimer;
  4.  
  5.     public class TOTest extends MovieClip{
  6.        
  7.         public function TOTest() {
  8.             FrameTimer.init(stage);
  9.             FrameTimer.setTimeout(2000, test1);
  10.             FrameTimer.setTimeout(2500, test1);
  11.             FrameTimer.setFrameTimeout(35, test2);
  12.             FrameTimer.setFrameTimeout(70, test2);
  13.             FrameTimer.setInterval(2000, test3);
  14.             FrameTimer.setFrameInterval(70, test5);
  15.            
  16.             var iv:int = FrameTimer.setFrameInterval(15, test6);
  17.             FrameTimer.clearInterval(iv);
  18.            
  19.             var to:int = FrameTimer.setTimeout(500, test7);
  20.             FrameTimer.clearTimeout(to);
  21.            
  22.         }
  23.  
  24.         private function test7():void {
  25.             // should never be printed
  26.             trace("NOT SHOWN------ Timeout: milliseconds");
  27.         }      
  28.        
  29.         private function test6():void {
  30.             // should never be printed
  31.             trace("NOT SHOWN------ Interval: frames");
  32.         }      
  33.        
  34.         private function test5():void{
  35.             trace("Interval: frames");
  36.         }
  37.        
  38.         private function test3():void{
  39.             trace("Interval: milliseconds");
  40.         }
  41.        
  42.         public function test1()
  43.         {
  44.             trace("Timeout: milliseconds");
  45.         }
  46.        
  47.         public function test2()
  48.         {
  49.             trace("Timeout: frames");
  50.         }
  51.     }
  52.    
  53. }

Source

It makes use of "internal classes" which I had not heard about until recently. I'm finding them really good in some cases and have heard they are actually faster than using non-defined objects ie {x:0, y:10} as the compiler can make optimizations to them. The only thing you need to remember is that they must be defined outside your package - which can be counter-intuitive and a little confusing at first.

PLAIN TEXT
Actionscript:
  1. /*
  2. * FrameTimer.as
  3. * Copyright: 2008 Touch My Pixel - www.touchmypixel.com - contact@touchmypixel.com
  4. * Please see X for discussion
  5. */
  6.  
  7. package com.touchmypixel.utils {
  8.    
  9.     import com.adobe.utils.DictionaryUtil;
  10.     import flash.display.Stage;
  11.     import flash.events.Event;
  12.     import flash.events.EventDispatcher;
  13.     import flash.utils.Dictionary;
  14.    
  15.     public class FrameTimer {
  16.        
  17.         private static var frameRate:int = 35;
  18.         private static var scope:Stage;
  19.         private static var timeouts:Dictionary;
  20.         private static var intervals:Dictionary;
  21.         private static var timoutsCounter:int = 1;
  22.         private static var intervalsCounter:int = 1;
  23.         private static var millisecondsPerFrame:int = 0;
  24.        
  25.         public function FrameTimer() {}
  26.        
  27.         public static function init(_scope:Stage)
  28.         {
  29.             frameRate = _scope.frameRate;
  30.             scope = _scope;
  31.             timeouts = new Dictionary();
  32.             intervals = new Dictionary();
  33.             millisecondsPerFrame = Math.round(1000 / frameRate);
  34.             scope.addEventListener(Event.ENTER_FRAME, doTimer);
  35.         }
  36.        
  37.         static private function doTimer(e:Event):void {
  38.             var to:TimeoutItem;
  39.             for each(to in timeouts) {
  40.                 if (--to.framesLeft == 0) {
  41.                     to.callback();
  42.                     delete timeouts[to];
  43.                 }
  44.             }
  45.            
  46.             var iv:IntervalItem;
  47.             for each(iv in intervals) {
  48.                 if (--iv.framesLeft == 0) {
  49.                     iv.callback();
  50.                     iv.framesLeft = iv.frameInterval;
  51.                 }
  52.             }
  53.         }
  54.        
  55.         /*==================================================================================*/
  56.         public static function setFrameTimeout(callback:Function, frames:int):int
  57.         {
  58.             if (scope != null) {
  59.                 timeouts[++timoutsCounter] = new TimeoutItem(frames, callback);
  60.                 return(timoutsCounter);
  61.             }else {
  62.                 trace("Please INIT with scope");
  63.             }
  64.             return(0);
  65.         }
  66.        
  67.         public static function setTimeout(callback:Function, milliseconds:int):int
  68.         {
  69.             if (scope != null) {
  70.                 timeouts[++timoutsCounter] = new TimeoutItem(Math.round(milliseconds/millisecondsPerFrame), callback);
  71.                 return(timoutsCounter);
  72.             }else {
  73.                 trace("Please INIT with scope");
  74.             }
  75.             return(0);
  76.         }
  77.        
  78.         public static function clearTimeout(key:int)
  79.         {
  80.             delete timeouts[key];
  81.         }
  82.        
  83.         /*==================================================================================*/
  84.         public static function setFrameInterval(callback:Function, frames:int):int
  85.         {
  86.             if (scope != null) {
  87.                 intervals[++intervalsCounter] = new IntervalItem(frames, callback);
  88.                 return(intervalsCounter);
  89.             }else {
  90.                 trace("Please INIT with scope");
  91.             }
  92.             return(0);
  93.         }
  94.        
  95.         public static function setInterval(callback:Function, milliseconds:int):int
  96.         {
  97.             if (scope != null) {
  98.                 intervals[++intervalsCounter] = new IntervalItem(Math.round(milliseconds/millisecondsPerFrame), callback);
  99.                 return(intervalsCounter);
  100.             }else {
  101.                 trace("Please INIT with scope");
  102.             }
  103.             return(0);
  104.         }
  105.        
  106.         public static function clearInterval(key:int)
  107.         {
  108.             delete intervals[key];
  109.         }
  110.        
  111.         /*==================================================================================*/
  112.         public static function clearAll()
  113.         {
  114.             timeouts = new Dictionary();
  115.             intervals = new Dictionary();
  116.         }
  117.        
  118.         public static function clearAllTimeout()
  119.         {
  120.             timeouts = new Dictionary();
  121.         }
  122.        
  123.         public static function clearAllIntervals()
  124.         {
  125.             intervals = new Dictionary();
  126.         }
  127.     }
  128. }
  129.  
  130. internal class TimeoutItem
  131. {
  132.     public var callback:Function;
  133.     public var framesLeft:int;
  134.    
  135.     public function TimeoutItem(_framesLeft:int, _callback:Function)
  136.     {
  137.         callback = _callback;
  138.         framesLeft = _framesLeft;
  139.     }
  140. }
  141.  
  142. internal class IntervalItem
  143. {
  144.     public var callback:Function;
  145.     public var framesLeft:int;
  146.     public var frameInterval:int;
  147.    
  148.     public function IntervalItem(_frameInterval:int, _callback:Function)
  149.     {
  150.         callback = _callback;
  151.         frameInterval = _frameInterval;
  152.         framesLeft = _frameInterval;
  153.     }
  154. }

]]> http://blog.touchmypixel.com/archives/14/feed Accessing drawing items & stage content in as3 http://blog.touchmypixel.com/archives/13 http://blog.touchmypixel.com/archives/13#comments Fri, 25 Apr 2008 06:41:53 +0000 tonyp http://blog.touchmypixel.com/?p=13 To my surprise i found the other day that, with the new AVM2, you can now access the content that you have drawn to the stage. It makes perfect sense, but i just assumed that it was locked. As a test, if you can draw something on the stage and then add the code

PLAIN TEXT
Actionscript:
  1. getChildAt(0).x = 100

This is reallly handy if you want to remove all the content from a clip, maybe move it into another, or add it dynamically to a child, then add effects. One note your drawing items are merged together (it doesnt preserve layers) unless there is a MovieClip between the layers. This is the only time that it splits layers into separate clips.

]]> http://blog.touchmypixel.com/archives/13/feed AS2 + AS3 Draw a Dotted Rounded Corner Box http://blog.touchmypixel.com/archives/9 http://blog.touchmypixel.com/archives/9#comments Fri, 25 Apr 2008 06:18:32 +0000 tonyp http://blog.touchmypixel.com/?p=9 So you might think that rounded corners is easy in as3 with the new drawing tools. This is only so true if you don't want it dotted.

Thanks to senocular AS2 DashedLine.as which was easily converted to an as3 version DashedLine.as for as3 we can draw dotted lines and curves with actionscript. This left me with the task of using the quadratic drawing tools (no i didnt add a cubic curveTo to the Dashed line class) to draw circles (or quarters of circles, for the curners), which isnt the easiest, but i'll spare you the details and simply say, its done!

Using Draw.curvedBox(obj, offsetX, offsetY, width, height, cornerRadius) we can draw into any graphics object (whether it be a normal Sprite.graphics or a DashedLine Object). This is essential as the Dashed line tool doesnt actually give us a fill, so we might need to draw a normal shape for the background.

PLAIN TEXT
Actionscript:
  1. import com.senocular.drawing.DashedLine
  2. import com.tonp.utils.Draw
  3. var dl = new DashedLine(this,1,5);
  4. dl.lineStyle(3,0x000000,1);
  5. Draw.curvedBox(dl,10,10,100,100,20)

to draw a curved corner box with a fill, or solid outline, send in mc.graphics as the first attribute (or just the mc in as2)

Dashedline.as for as3

Draw.as for as3

Draw.as for as2

So we can now do a box with curved corners in either AS2 or AS3 and in dotted or normal... phew!

]]> http://blog.touchmypixel.com/archives/9/feed AS3 Bitmap Cached Animations http://blog.touchmypixel.com/archives/5 http://blog.touchmypixel.com/archives/5#comments Fri, 25 Apr 2008 05:56:38 +0000 tonyp http://blog.touchmypixel.com/?p=5 Rendering a vector for every frame of a repeated animation (like in most games) take a lot of CPU. It takes even more CPU to have lots of complex characters on screen - many the same sprite.

cacheAsBitmap in flash is good, but only if you have static objects but recreates the bitmap data of an animation every frame, making it run even slower. The best solution is to cache each frame of an animation as a bitmapData, and then switch between them each frame. This works well until you have multiple instances of the same sprite - You dont want to pre-render the bitmap data and keeping it in memory many times, so it is best to keep a library of animations, and then reference the cached frames for each instance.

View Example

Download Source

Another advantage of this technique is it seems to make use of Flash's new multi-core support. On a dual core CPU it can, if you push it, take almost 100% of resources. Trying it on a quad-core seemed only to take up two CPUs though. I guess this is both a blessing and a curse as you're more likely to grind a users system to a halt, even if they have multiple CPUs.

Animations copyright Nathan J. - http://www.scarygirl.com/

]]> http://blog.touchmypixel.com/archives/5/feed Joystick / Joypad in Flash http://blog.touchmypixel.com/archives/4 http://blog.touchmypixel.com/archives/4#comments Mon, 14 Apr 2008 07:25:05 +0000 tarwin http://blog.touchmypixel.com/?p=4 I've always wanted to use a Joytick with my Flash games.

A while ago I was working on small game for Lorial - in-store advertising for Biotherm - through a great company Eness. It was a simple "catch the falling objects with a timelimit game" made in Flash, but needeed to be controlled using a joytick as it had to be simple and easy to use for anyone walking through Myer.

After a little research I found the amazing program AutoHotKey. This lets you specify macros to do things like using a joystick as a mouse or keys, or pressing a combination of keys and starting a program. Using this amazing peice of software (Windows only sorry) and hacking around with some of their joystick input exampels it was easy to map joystick movements and buttons to the arrow keys and "A" on the keyboard, which were then read by Flash.

On a recent game I've been working on (Scarygirl) I've found that user testing on the keyboard really gets in the way of the gameplay itself, especially for those not used to games. It was a lot easier to hand them a Playstation 2 DualShock controlller attached via a USB converter and have an AutoHotKey script running that converted the D-Pad and buttons to input. The hardest part of this is finding which button on the controller relates to what input into windows. The easiest way I found to work with this was Start->Control Panel->Controllers and just writing down a list of buttons as I pressed them.

So yeah. Easy. And fun. Some games are just so much better with a good controller - just never let me catch you playing an FPS on a console!

]]> http://blog.touchmypixel.com/archives/4/feed JSFL: Select all classes of the selected type on layer http://blog.touchmypixel.com/archives/3 http://blog.touchmypixel.com/archives/3#comments Mon, 14 Apr 2008 06:15:12 +0000 tarwin http://blog.touchmypixel.com/?p=3 I've been playing with JSFL a little recently. It was really hard to begin finding any resources on how to use it and those I did find were pretty sparse with information. So to help the community out I'm going to start posting my experiments, some useful, some only good for me, for everyone to take a look at, take apart and generally learn from.

The first one is one of the simplest. It lets you select all Elements of the same class on the stage. Simply select one of them, say a RadioButton, then choose the TMP - Select Same Class from the Commands menu and all other RadioButton instances should be selected.


I've been using this in a game I've been creating. I just lazily drag a bunch of different enemies onto one layer, then when I want to seperate them onto different layers just use this command. Easy. So here it is.

PLAIN TEXT


JavaScript:





    

  1. 

    doc = fl.getDocumentDOM();
    

    2. 

  2. 

    s = doc.selection;
    

    3. 

  3. 

    if(s.length == 1){
    

    4. 

  4. 

        type = s[0].libraryItem.linkageBaseClass;
    

    5. 

  5. 

     
    

    6. 

  6. 

        var tl = doc.getTimeline()
    

    7. 

  7. 

        var elts = tl.layers[tl.currentLayer].frames[tl.currentFrame].elements;
    

    8. 

  8. 

     
    

    9. 

  9. 

        a = [];
    

    10. 

  10. 

        for(i=0; i <elts.length; i++){
    

    11. 

  11. 

            if(elts[i].libraryItem.linkageBaseClass == type){
    

    12. 

  12. 

                a.push(elts[i]);
    

    13. 

  13. 

            }
    

    14. 

  14. 

        }
    

    15. 

  15. 

        doc.selection = a;
    

    16. 

  16. 

    } 
    

    17.

Yeah, stupid directory I know. I'll show you how to make an MXP installer in a later post, to make it easier to send these things around.

The "fl." holds all the functions that a Flash specific in JSFL. The rest of the code is just plain old Javascript, so if you need help with that just do a search on the net for general Javascript documentation.

Firstly we create a variable doc to make it easier to access our current document. Then s which holds an array of all the Elements currently selected. We check to make sure that we've only selected one Element (we could at this stage do an fl.alert("message") to warn that there was more than one item selected. If there is only one item selected we get the type using the .libraryItem.linkageBaseClass and then set another variable tl to make it quick to access the current timeline.

The next bit is a bit complicated. I get all the elements on the current layer, in the current timeline and put them into the array elts. If someone wants to update this I'd suggest the first place to start would be to get it to select elements on ALL layers. Would be useful.

I then loop through the array of Elements and add them to a temporary array a, but only if their linkageBaseClass ist the same as the initially selected one (it's just a simple String).

Lastly, set the document selection to the temporary array of Elements.

]]> http://blog.touchmypixel.com/archives/3/feed Mame with USB Controllers http://blog.touchmypixel.com/archives/1 http://blog.touchmypixel.com/archives/1#comments Mon, 07 Apr 2008 01:18:10 +0000 tonyp http://blog.touchmypixel.com/?p=1 We've finally nearly got our 40gb of MAME running- productivity boost! It took a while to figure out, but we finally have PS2 controllers to work - conected with a USB adapter. To run MAME with USB controllers on XP i've found:

  1. connect controllers & test that they work in the Control Panel > Game Controllers Panel.
  2. get MAME to create a .ini file
    You need to run 'mame -cc' this can be done at the command prompt, or by making a .bat file
  3. Edit the 'mame.ini' file (should be created next to your mame.exe)
    Change the line 'joystick 0' to 'joystick 1' - this enables joystick input
  4. Press tab when in MAME to get the key setup options.
  5. Rock out!!
]]> http://blog.touchmypixel.com/archives/1/feed