Stroep » actionscript

Lights and shadows experiment

Mark Knol — Mon, 28 Nov 2011 22:55:28 +0000

Recently I found an interesting question on FlashFocus.nl, about creating light and shadows in a 2D environment. I started experimenting with this to see how far I could take it. I love to share the results and some insides about this fun project.

How to get started

The initial code that the topic starter used a loop through all objects, and used hitTestPoint-function to detect if the light hits a wall. Therefore he used a loop with 360 steps, used for all directions. In the innerloop it tries if it hits the wall, otherwise goes away from the light (using the direction of the outerloop), tries if it hits the wall. That loop goes on till it does hit a wall. It is a bit of trial and error, but I think it is very clever. At the end of each loop a lineTo is used to draw the light, so in the end it will be a shape with 360 vector points.

Speed of light

Now, that screams for optimization and speed. It’s a fun project to mix some things you have seen and want to try out for a long time. The first thing that I tried to make it faster, draw all objects into an BitmapData, and use the getPixel function instead of hitTestPoint, which is notable faster if you don’t move objects. I used that BitmapData object only too check if the light hits the objects; no one actually sees it. To use hitTestPoint, you must loop through all objects and detect if they hit. With a lot of objects, it would be slower. With BitmapData, you don’t need that loop, and you are free to use unlimited objects with even custom shapes. Less looping == faster, unlimited objects == awesome

More realism

I also wanted to make it look more realistic. Having light only is not close enough to realism. It needs shadows. I created an inverted shape of the light-shape and filled it with black (a). This creates a nice shadow, however has very hard bounds, which is ugly. So then I took the shape again and drawed with a nice transparent to black gradient (b). Those 2 layers have the BlendMode ALPHA. The holder of those has a solid shape fill (as big as the stage) with BlendMode LAYER. This creates a nice ‘hole’ which I think works very well as shadow if you make it half-transparent. Oh, the colored light-layer (c) is a gradient too, with the same shape as b, only with BlendMode ADD.

Re-using shape data

Another optimization I used was to use graphics data API. In this case I have 1 shape which could be reused 3 times. So before even drawing, I collect all points and commands in an Vector. When I have all data collected, it draws the light-layer and shadow-layer at first, then it pushes some extra points to the Array to make the outer shadow-layer. So with 1 Array of (manipulated) data I could draw multiple shapes. That’s a good case of using the graphics data, I guess.

Optimized trig functions

I also used the TrigLUT-class (Trigonometry LookUp Table) from jacksondunstan.com, since the loop heavily uses Math.sin and Math.cos. I could use the valNormalizedPositive() function from that class in this case. It’s very fast and for me it was fun to use that class.

But it is still too slow..

The most intense about this thing isn’t the calculation, but the rendering itself. The whole ‘canvas’ needs to be updated and redrawed every frame with lots of layers and blendmodes, which is very intense for the CPU. I don’t know if this would be possible with Stage3D, but that would be the last step to render really fast. And when that is possible, I’ll guess I could move the object real-time too, which makes it very interesting for games.

Check out the experiment:
» Lights and shadows

Let me know what you think about it and how does it perform on your computer?

Design pattern – Behaviors

Mark Knol — Sun, 16 Oct 2011 18:07:22 +0000

I recently started working at MediaMonks where they are using this interesting pattern of coding; behaviors as a class. I started playing with ‘behaviors’ myself to see how this could work for me. If you use this pattern once, you’ll wonder why you did not use it ever before This post will lead you through some examples and shows some benefits of using it. This post is written with focus on actionscript 3 developers, who can read code and knows already something about object oriented programming. The goal is to learn more and become a better developer.

What is a behavior?

Well I guess everybody knows what it means, but in terms of code I would say that a behavior-class is some kind of a simple controller with a target. It does one thing, it controls the target with a specific feature/goal. The idea is to add functionality by assigning a behavior to an object (composition), instead of extending it to get the functionality (inheritance). That sound complicated, so why not check out what it practically means?

Difference between inheritance and composition

Let’s say you want to program an object that follows your mouse. How would you create it? I would create a class named MouseFollowingSprite which has all functions to do that. Then I would extend or create an instance of that MouseFollowingSprite-class and BANG I’m done

Typical example of inheritance

class MouseFollowingSprite extends Sprite

Okay, lets write down that killer class:

 package nl.stroep.display
 {
     import flash.display.Sprite;
     import flash.events.Event;
     
     /**
      * @author Mark Knol
      */
     public class MouseFollowingSprite extends Sprite
     {
         private var _ease:Number;
         
         public function MouseFollowingSprite() 
         {
             init();
         }
         
         private function init():void 
         {
             this.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
         }
         
         private function handleEnterFrame(e:Event):void 
         {
             update();
         }
         
         private function update():void 
         {
             this.x += (this.mouseX – this.x) / _ease;
             this.y += (this.mouseY – this.y) / _ease;
         }
     }
 }
  

(You see that? It’s nicely done with some eased motion )

I have never seen a problem with extending, but I had troubles with finding a good way to add other kind of functions to this type of classes. In terms of OOP, is a rule to write classes with a single responsibility, and we already passed that one. But imaging you want your mouse following sprite also to scale when you scroll with your mouse wheel. Well that would be easy: Just create a class named ScrollWheelScalingSprite, which extends MouseFollowingSprite. Now it has both functionality, when you would create an instance of it.

Let’s create our ScrollWheelScalingSprite, it would like this:

package nl.stroep.display
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.MouseEvent;

/**
      * …
      * @author Mark Knol
      */
publicclass ScrollwheelScaleSprite extends MouseFollowingSprite
{
privatevar _ease:Number;
privatevar _targetScale:Number;
privatevar _hasListener:Boolean;
privatevar _deltaRatio:Number = 0.1;
privatevar _minimum:Number = NaN;
privatevar _maximum:Number = NaN;

publicfunction ScrollwheelScaleSprite()
{
             _targetScale = this.scaleX;

             init();
}
        private function init():void 
         {
             stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);
             addEnterFrameListener();
         }
         
         private function handleMouseWheel(e:MouseEvent):void 
         {
             _targetScale += e.delta * _deltaRatio;
             
             if (!isNaN(_minimum) && _targetScale < _minimum) _targetScale = _minimum;
             else if (!isNaN(_maximum) &&_targetScale > _maximum) _targetScale = _maximum;
             
             addEnterFrameListener();
         }
         
         private function addEnterFrameListener():void 
         {
             if (!_hasListener)
             {
                 this.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
                 _hasListener = true;
             }
         }
         
         private function removeEnterFrameListener():void 
         {
             this.removeEventListener(Event.ENTER_FRAME, handleEnterFrame);
             _hasListener = false;
         }
         
         private function handleEnterFrame(e:Event):void 
         {
             update();
         }
         
         private function update():void 
         {
             this.scaleX += (_targetScale – this.scaleX ) / _ease;
             this.scaleY = this.scaleX;
             
             if (Math.abs(this.scaleX – _targetScale) < .01)
             {
                 removeEnterFrameListener();
             }
         }
     }
 }
  

Let’s go some deeper. What if you want a ScrollwheelScaleSprite which should not follow our mouse? That would be a problem, because it already has that functionality. However you could hack around around by adding some protected booleans, to enable the actual functions of the class. Name them like _mouseFollowingEnabled. When your class extend some other classes, you’ll probably need a _scrollWheelScalingEnabled too. In the constructor of the new class you just turn on/off the booleans and your done. But then again, if you want to use this to Bitmap, you have a problem, you cannot extend a Sprite and a Bitmap at the same time.

I mean, this is how we code, right? All classes have one responsibility, but could this example been done better? While writing, this post reminds me in a way to this older post of Keith Peters; you should read it. It also has a interesting discussion.

Create behaviors

As already stated, a behavior class is a controller. It deals with an object (we call it target) to add the actual behavior. Now I don’t think extending is bad, but I think we should use it with care.

Let’s create an abstract behavior class, which can be extended. (This is not needed, but very helpful for accessing the target and prevent duplicate code)

 package nl.stroep.behaviors 
 {
     import flash.display.DisplayObject;
     
     /**
      * @author Mark Knol
      */
     public class AbstractBehavior 
     {
         protected var _target: DisplayObject;
         
         public function AbstractBehavior(target: DisplayObject) 
         {
             this._target = target;
         }
     }
 }
  

I think this does not require lots of explanation. We have a class, it saves a target
that is passed from the constructor. We can do lot’s of stuff inside a behavior from this point.

Now, let’s convert our MouseFollowingSprite to a MouseFollowingBehavior, which should extends the AbstractBehavior. Most drastic change is to convert ‘this‘, to ‘_target‘ and change the constructor to make it an actual behavior:

 package nl.stroep.behaviors 
 {
     import flash.display.DisplayObject;
     import flash.events.Event;
     
     /**
      * @author Mark Knol
      */
     public class MouseFollowBehavior extends AbstractBehavior 
     {
         private var _ease:Number;
         
         public function MouseFollowBehavior(target: DisplayObject, ease:Number = 5) 
         {
             super(target);
             
             _ease = ease;
             
             init();
         }
         
         private function init():void 
         {
             _target.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
         }
         
         private function handleEnterFrame(e:Event):void 
         {
             update();
         }
         
         private function update():void 
         {
             _target.x += (_target.mouseX – _target.x) / _ease;
             _target.y += (_target.mouseY – _target.y) / _ease;
         }
     }
 }
  

This is not magic, but it is very powerful. We can assign this behavior to a Sprite, but also to a Bitmap or Video etc. This would not that easy / possible with inheritance only. The class works standalone and we don’t need booleans to enable or disable the behavior.

Ok, let’s also create the scroll wheel scale behavior:

 package nl.stroep.art.behaviors 
 {
     import flash.display.DisplayObject;
     import flash.events.Event;
     import flash.events.MouseEvent;
     
     /**
      * …
      * @author Mark Knol
      */
     public class ScrollwheelScaleBehavior extends AbstractBehavior 
     {
         private var _ease:Number;
         private var _targetScale:Number;
         private var _hasListener:Boolean;
         private var _deltaRatio:Number;
         private var _minimum:Number;
         private var _maximum:Number;
         
         public function ScrollwheelScaleBehavior(target: DisplayObject, ease:Number = 5, deltaRatio:Number = 0.1, minimum:Number = NaN, maximum:Number = NaN) 
         {
             super(target);
             
             _ease = ease;
             _deltaRatio = deltaRatio;
             _minimum = minimum;
             _maximum = maximum;
             _targetScale = target.scaleX;
             
             init();
         }
         
         private function init():void 
         {
             _target.stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);
             addEnterFrameListener();
         }
         
         private function handleMouseWheel(e:MouseEvent):void 
         {
             _targetScale += e.delta * _deltaRatio;
             
             if (!isNaN(_minimum) && _targetScale < _minimum) _targetScale = _minimum;
             else if (!isNaN(_maximum) &&_targetScale > _maximum) _targetScale = _maximum;
             
             addEnterFrameListener();
         }
         
         private function addEnterFrameListener():void 
         {
             if (!_hasListener)
             {
                 _target.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
                 _hasListener = true;
             }
         }
         
         private function removeEnterFrameListener():void 
         {
             _target.removeEventListener(Event.ENTER_FRAME, handleEnterFrame);
             _hasListener = false;
         }
         
         private function handleEnterFrame(e:Event):void 
         {
             update();
         }
         
         private function update():void 
         {
             _target.scaleX += (_targetScale – _target.scaleX ) / _ease;
             _target.scaleY = _target.scaleX;
             
             if (Math.abs(_target.scaleX – _targetScale) < .01)
             {
                 removeEnterFrameListener();
             }
         }
     }
 }
  

Now we can assign a behavior very easy:
Example of applying the behaviors

var sprite:Sprite = new Sprite();
new MouseFollowBehavior(sprite);
new ScrollwheelScaleBehavior(sprite);

You are now free to add the behaviors you’ll need, and leave the one you don’t need. It’s like creating little plugins. Fun eh? It’s nice to add parameters to the constructor, to make it less static. The other fun part is that if you build a behavior right, you could copy/paste it to another project or in you library, because it has no dependencies to classes you don’t want or need. Of course, this is not something new, you could have seen this in temple-lib but also the Hype-framework too, and maybe lots of other framework probably use this pattern in a way.

Now we know the difference:
Inheritence: “I want a Sprite that follows my mouse”
Behaviors: “I want something that makes a Sprite follow my mouse”

Killing the behaviors

The code examples in this post does not have any function to remove it, but if you want to remove a behavior, it would be wise to assign the behavior to a variable, and create a destruct() or destroy() function inside the behaviors to remove listeners and references to the target etc, and then set it to null.

// Anywhere in your code:
var myBehavior:MouseFollowBehavior = new MouseFollowBehavior(myMc);
// Somewhere in your code where you want to remove the behavior:
 myBehavior.destroy(); // a public function which removes all listeners, references etc 
 myBehavior = null;
  

Conclusion

Behaviors are a cool and give clean reusable classes and I think we should use it more. It’s probably not new for you and the inheritence-example is not very realistic, but I hope it’s refreshing to look at it again. If you want to learn more design patterns, I also recommend this site.

If you think back on how you have coded in the past, what would you change now you know this pattern? BTW I want to learn more too, so don’t hesitate to leave some nice feedback below.

Oh, maybe you haven’t heard, but something unexpected will happen if you hold CTRL and click on the facebook like-button (found that in a YouTube comment; very lame).

Actionscript 3 Event Generator

Mark Knol — Mon, 10 Oct 2011 19:54:55 +0000

Finally I have created and finalized my Actionscript 3 Event Generator, which was buggy but now it is very nice As stated on twitter, if you are a flashdeveloper and use custom events in actionscript 3, you should use this tool because it helps you create custom event classes very fast.

Features:
- Fast variable adding
- Event type generation (static constants). Just use lower camelCased variables and they will be formatted nicely.
- Meta data for a event dispatcher class.
- Automatic clone() function
- Automatic toString() function

URL
» http://projects.stroep.nl/EventGenerator/

Don’t forget to first fill your name at @author on the right. The package and @author will be saved for next time.

I have also created a dropdown-menu on the top-right to switch to other tools. Happy coding!

Actionscript 3 Extended valueobject generator

Mark Knol — Tue, 20 Sep 2011 06:19:22 +0000

I created a tool to created ‘grouped’ value objects nicely and very fast. It is using private classes. I found it useful enough to share it with you, so maybe if you are in need of such a tool, you are free to use it.

» Check it out: http://projects.stroep.nl/enumGenerator/

Oh, if you want to create normal value objects, use the value object generation tool. For creating custom events classes, I have an custom event generator.

Wait a minute with setTimeout

Mark Knol — Mon, 21 Feb 2011 07:00:44 +0000

While working on a game, I created a function spawner. The idea was to make a function which would call a function like createEnemy() a hundred times with an interval. So I quickly created a static function. Yes, I could use Chain, but this function was created in a minute and I haven’t thought of that class.

 public static function create(total:int, interval:int, func:Function, delay:int = 0):void
 {
     for (var i:int; i < total; ++i) 
     {
         setTimeout(func, delay + interval * i);
     }
 }
  

This function is easy to understand. Maybe it’s not needed as a new class, but it could be handy in a game. By the way; I use setTimeout a lot, it’s sometimes easier than the Timer class. You could call the function like this (if it is placed in a class called Spawner):

 Spawner.create(1000, 1000, createEnemy); 
 // a new enemy should be created after a second, a thousand times
  

While profiling this peace of code I found it is a bit intensive and could be optimized very simple.

So, what is the problem? This profiler shows the memory usage of a empty flash calling the example Spawner.create function:

I have used FlashPlayer 10.1 (release) and the FlashDevelop for profiling.

See the column ‘count’, which represents the current count of objects. For some reason there are a lot of ‘Functions’ (2000?). There are also 1000x ‘Array’ and ‘SetIntervalTimer’. Now I don’t know what that exactly means, but it is a lot, right? I haven’t used Arrays yet, so setTimeout must be using arrays internally. I think because the intervals are created inside a loop, they are already instantiated and there must be some references to objects too. Inside this test, the createEnemy function is empty, so it is a bit unexpected what happens here.

So I tried to rewrite the code a bit to see if it makes a difference if they are not instantiated at the same time, but create a new interval after one time-out has been called (after each other). It is not very hard to do, so here it is:

publicstaticfunction create(total:int, interval:int, func:Function, delay:int = 0):void
{
     setTimeout(createNext, delay, total – 1, interval, func, delay);
}
private static function createNext(total:int, interval:int, func:Function, delay:int):void
 {
     if (func != null) 
     {
         func();
         if (total > 0)
             setTimeout(createNext, interval, total – 1, interval, func, delay);
     }
 }
 

The Spawner.create works the same as before, only it is not creating all intervals inside a loop, but passes a reference to the function to the new timeout. Now take a look at the profiler again:

There are less ‘Functions’ and only 11 ‘SetIntervalTimer’, which could be considered as good. Conclusion: If you are using setTimeout, you should be aware how to use it and check if you could improve it in your own app/game.

Actionscript 3 to vector graphic

Mark Knol — Mon, 03 Aug 2009 19:57:14 +0000

I like to generate art and objects with Flash/actionscript. Mostly I use a bitmapdata for that and export this as a PNG-24. This works perfect in most cases. But sometimes I wish there was a simple way to export my art to a scalable vector graphic. This would save a lot of data, and I’ll be able to create unlimited large and sharp prints.

I started searching and found some nice-to-know options.

Save as PDF
If you have a PDF-printer installed, you could save the vectors as PDF (drawed with lineTo, curveTo etc). Just right-click on your flashmovie, and choose ‘print..‘. Then choose ‘Adobe PDF‘ or another PDF printer. This is very simple!
Downside; My flash movie is becoming very slow when I create a lot of shapes.. After all; That’s the reason I use BitmapData objects. Sometimes I let Flash render a whole night before saving it and maybe it create more then a million shapes. To be realistic; I think a million shapes wouldn’t be cool as vector graphic, I guess my Illustrator doesn’t like that or the printshop-dude starts crying However.. I think there are tools to optimize/clean shapes that could be helpful too.

Open vector formats
I didn’t know this exist (because I never searched for something like this), but there is a lot information about a SVG file format. A lot of vector programs support it already and even modern browser could show SVG file formats too.
I found this and this link. The opposite would be an great idea; It could be cool if we could export SVG. While rendering we could write/add into a file. Then I could use a small bitmapdata object, just show it and render it real-time. Downside; I think SVG doesn’t support blendmodes or filters.

I really think there is a lot more to explore. If anyone have some other suggestions or ideas, feel free to post it.

AS3 ValueObject generator – beta

Mark Knol — Sat, 18 Apr 2009 15:21:59 +0000

Since I am using actionscript 3 and an external actionscript editor with nice code completion (FlashDevelop in my case), I am using a lot of value objects.

Flashdevelop has no value object generator tool, so I’ve build one myself. It is beta.

ValueObject generator
http://projects.stroep.nl/ValueObjectGenerator/

Generative art – The sky isn’t the limit

Mark Knol — Tue, 03 Feb 2009 18:26:13 +0000

We all love the sky. We make millions of pictures of it, because it different every second. It is inspirational, every time you look at is, whenever it is day or night. Inspired by the sky, which is a little bit gray in Holland right right now, I created these images. I actually love the color palette, there is a little winter and some spring feeling in it.

I did something different this time; there are some typographic elements added. Just a few words that describe the feeling I have when looking at it.. What do you think about adding text to it?

Created with actionscript. Render size: 10.000×10.000 px.