Archive for the 'Actionscript' Category



30
Apr
09

Gradients and masks in actionscript

Quick post to describe how to apply a gradient mask to a display object in AS3 (& AS2).

#1 Put your gradient mask on the stage – lets call it gmask
#2 Put the object to be masked on the stage.
#3 Set both the mask and the ‘object to be masked’ to cacheAsBitmap
#4 Apply the mask to the object

In #AS3
gmask.cacheAsBitmap = true
obj_to_be_masked.cacheAsBitmap = true
obj_to_be_masked.mask =gmask

In #AS2
gmask.cacheAsBitmap = true
obj_to_be_masked.cacheAsBitmap = true
obj_to_be_masked.setMask(mask)

It really is as simple as this.
Note to designers: Gradient masks can’t obviously be done directly from the IDE (see below), but these three lines can be placed on the timeline if so desired.

To put a gradient mask on dynamic text you will need to place the text within a container (movieclip/sprite) and mask that.

The object to be masked can also contain animation, text or video though this will require a bit more processor as the bitmap will need to redraw on each frame. Often this is well worth it as the effect can be great.

There is a way of achieving this same effect with no code at all and here it is:

#1 Put your gradient mask on the stage – lets call it gmask
#2 Put the object to be masked on the stage.
#3 Put both of these items into a movieclip/sprite (the container) making sure the mask is on a layer above the object
#4 Give the mask a blend mode of ‘Alpha’
#5 Give the ‘container’ a blend mode of ‘Layer’

And there you have it. Gradient masking achieved with blendModes and absolutely no code.

Benchmarking the two gradient mask methods:
I used each method to mask an embedded video – then placed an instance on the display list and ran at varying frame rates.
Initially there was negligible difference between the code and blend mask methods. I ramped up the FPS to 120 and put four instances of the video on screen. With this set up the code method (cacheAsBitmap) was up to 4% faster than the blendMode Mask method.

Conclusion: The code method is faster but very marginally. If you are desperate for a bit of extra juice go with code.

Advertisements
16
Mar
09

Collision Detection and Bounce Calculation using Colour Maps (part 1)

Here is a method I developed for a game I produced last year. I had three days, and a top down ball bouncing game with multiple levels to render. Initially I thought I’d use box2D, zero out the gravity, and then build the scenes as box2D models. This looked like taking far too long to create so I needed a quick fire solution. Then it dawned on me: Colour Maps (or to you chaps over the pond Color Maps).

Now Colour Maps are nothing new, but my idea adds to the technique.

Colour Mapping means you can build a map of your game scene with various colours representing the walls and objects. To test whether you have collided with an object, instead of numerous intersect calculations you can just test the colour of the pixel(s) underneath your character.

I realised that if I added a sprite graphic for my ball to the colour map using the Blend Mode ‘add’ then I could see collision. So if I make all the static scene furniture red (0xFF0000) and the ball sprite green (0x00FF00), when they overlap the intersection area becomes yellow.

Blend Mode collision detection

Blend Mode collision detection


So how does this help? I calculated that by using getColorBounds on the intersect yellow, I can draw a line from the centre of the rectangle to the centre of the ball. This now becomes the reflection point. I can reflect the angle of bounce against this to give a very accurate result.

Calculate the angle of reflection

Calculate the angle of reflection


OK. So the method will bounce from a partial intersection – but this means that we are calculating the bounce from a ball embedded within the border/scene furniture. I have improved this by calculating the ball path using a recursive method. The function backtracks to where the edge of the ball touches the furniture and then recalculates the path for the remaining distance to be travelled on the current iteration.
The Colour Map Bounce system in action

The Colour Map Bounce system in action

Here is a link to a quick demo of the method in action. Demo

Source and example usage is to follow in part 2.

12
Mar
09

Fastest Way to Copy An Array: Concat() or Slice(0)

What is the fastest way to copy an array? Concat or Slice? There is only one way to find out. FIGHT!

OK, so we can dismiss any kind of for-loop – far too slow, so that leaves us with:
1) array.concat() – i.e. concatenate an array onto nothing and deliver that as a new array.
2) array.slice(0) – i.e. return a new array consisting of all of the elements of the old array – from 0 till the end (up to a max of 16777215)

I’ve set up an array with a cool 1million entries (ok, it is not big, and it is not clever so it certainly isn’t cool). I need to copy this. The following code executes each method once on every iteration. It keeps a running total and records the average time each takes. I’ve limited the code to 100 iterations.

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.utils.*;
public class TestConcat extends Sprite
{
private var iteration_count:int=0
private var concat_total:int=0
private var slice_total:int=0
private var clone_total:int=0
private var tf:TextField = new TextField()
private var test_array:Array = [];

public function TestConcat():void
{
tf.x = tf.y = 100; tf.width = 600;
addChild(tf)

//Set up array to copy
for(var i:int = 0; i < 1000000; i++) test_array.push(i);
//Mouse click to rerun test
stage.addEventListener(MouseEvent.CLICK, go);
//First run
go()
}

private function go(e:Event = null):void
{
iteration_count=concat_total=slice_total=clone_total=0
addEventListener(Event.ENTER_FRAME, iterate)
}

//Loop through tests
private function iterate(e:Event=null):void
{
concat_total +=testConcat()
slice_total += testSlice()
clone_total += testByteArrayClone()
iteration_count++
tf.text = "Av. Concat time=" + (concat_total / iteration_count)
+ "ms Av. Slice time=" + (slice_total / iteration_count)
+ "ms Av. BA Clone time=" + (clone_total / iteration_count) + "ms";
if(iteration_count<99) removeEventListener(Event.ENTER_FRAME,iterate)
}

//test array slice
private function testSlice():int
{
var time_slice_start:Number = getTimer();
var slice_copy:Array = test_array.slice(0);
return getTimer()-time_slice_start
}

//test array concat
private function testConcat():int
{
var time_concat_start:Number = getTimer();
var concat_copy:Array = test_array.concat();
return getTimer()-time_concat_start
}

//test BA Clone method
private function testByteArrayClone():int
{
var time_concat_start:Number = getTimer();
var concat_copy:Array = clone(test_array);
return getTimer()-time_concat_start
}

//Clone method for Deep Objects(via Bruno)
private function clone(source:Object):*
{
var myBA:ByteArray = new ByteArray();
myBA.writeObject(source);
myBA.position = 0;
return(myBA.readObject());
}
}
}

On my laptop I’m clocking the concat at 14ms and the slice at over 29ms.

So a conclusive result. concat is twice the speed (with large arrays – the difference diminishes considerably with smaller arrays)

Give the code a few run throughs and see what you get. Let me know if your results are markedly different.

UPDATED:
I have updated the code and added a swf to try out here and the source code here

Fastest way to copy an array

Test the array copy for yourself


I’ve also added in a test for the Byte Array Clone method suggested by Bruno (see his comments below). This method seems a great one for copying ‘deep’ arrays – arrays of complex objects (arrays, objects or other types). In this context and test (copying shallow arrays) the instantiation, writing and reading adds too much overhead. I’ll need to test this in a useful context: with deep arrays.

Demo: Array Copy test
Source: Source.as

09
Mar
09

Simple Sideways-Scrolling Carousel

Not another carousel! Well yes. Posting this for storage really, the only real new thing added here is the method for scaling up the focus object.

On every enter frame event, each item in the list is checked to see if it is in the focus range (the centre of the visible area and a selected distance either side). If so, then the absolute position is calculated against the centre point. Now the scale and blur are added accordingly.

The class is encapsulated and easy to instantiate:

_carousel=new Carousel()
_carousel.init(area_width, area_height, range_pc, margin, min_scale, item_array, blur_on, blur_amt)

area_width – width of the visible carousel area
area_height – height of the visible carousel area
range_pc – the percent of area either side of the centre point to use as the focus range (0.1 – 1.0)
margin – the margin bordering each item on the carousel
min_scale – scale that items outside of the range reduce to (0.1 – 1.0)
item_array – array of sprites/movieclips buttons
blur_on – true=blur on, false=blur off
blur_amt – amount of blur to apply to the items out of range

Simple AS3 Carousel

AS3 Simple Carousel

A demo has been set up and can be seen here

The items in the carousel can be anything from simple pictures or buttons to more complex interactive movieclips.

There are three main interactive methods in the Carousel class:
scrollLeft() / scrollRight() – Increment along the list
gotoItem(index) – scroll to the selected item (where index is the item array reference for the item)

I have only added the functions required for my current project, but it should be very simple to add extra functionality such as looped content, reflections, etc.

Source files
Demo

02
Mar
09

Keeping Lip-Sync in Sync

I’m currently working on a project where I have been handed a lot of movieclips with animated mouths to be sync-ed with spoken audio triggered from the library. Each sentence had been put together in a separate movieclip. Obviously this method exposes the frame rate on slow computers leading to loss of lip-synchronisation. I was told to go through all of the moveiclips and add the audio to the timeline – a very inelegant solution that would take a lot of time with poor results.

I came up with a simple solution that basically just pushes the playhead forward everytime it drops out of sync. I use the frame rate and getTimer to work out where the playhead should be on each iteration. If the playhead drops then it is moved to the position it should be at.

Very simple – saved me a lot of time.

private const FPS:int = 30//Current frame rate
private const ERROR_MARGIN:int=1
private var start_time:int
private var last_frame:int=0//Keep track of last frame to see if mc has stopped playing
private var loop_started:Boolean=false

public function sayPhrase(phrase:String) : void
{
mouth_mc.mouth.gotoAndPlay(phrase)
last_frame=0 //reset last frame
loop_started=false
start_time = getTimer()
addEventListener(Event.ENTER_FRAME,lipSyncTracking)
}

private function lipSyncTracking(e:Event = null):void
{
if (mouth_mc.mouth)
{
var cframe:int = mouth_mc.mouth.currentFrame //get the current frame
var ctime:int = getTimer() //current time
var time_expired:Number = (ctime – start_time )
var target_frame:int = Math.floor((FPS/1000)*time_expired)
if(target_frame>1 && cframe>1)loop_started=true //need to check for looping
if (cframe == last_frame || (cframe==1 && loop_started))
{//MC must have stopped or looped back to beginning
removeEventListener(Event.ENTER_FRAME,lipSyncTracking)
}
else
{//If frame is out by the margin of error then correct
if (target_frame >= cframe + ERROR_MARGIN)
{
mouth_mc.mouth.gotoAndPlay(target_frame)
}
}

last_frame = cframe
}
}

18
Feb
09

Jonga3D: Testing Jiglib with Away3D

I just wanted to test the (newly available in AS3) 3D Physics engine Jiglib.

My first test for Box2d was to build a Jenga-style game (Jonga) so I thought I would do the same here. Only a quickie this. I wanted to see if Jiglib would be able to allow ‘rigid boides’ in a 3D environment with good performance. I know we are limited in Flash so was prepared for a few foibles.

Jiglib has been put to great use in other formats so I had high hopes for its Flash port.

Now I have only given the library 3 or 4 hours of play but my one major probelm so far is the frame rate hit. In Jonga3d I have had to reduce the number of blocks to 15 (5 layers – I wanted 15 (45 blocks)) and I am still only getting 6fps. I was really hoping for more.

I’m not complaining too much, a 3d physics engine is a complicated library to pull off – I’m just waiting for the day I can build an unfettered 3d environment with a workable physics engine.

Jiglib has a few other problems – the jiggling static box for example – but these are understandable for v0.25

Jonga3D

Testing Jiblib: Jonga3D

In the test I didn’t get around to implementing the mouse drag interactions so to see a collapse use the arrow keys to control the sphere – ram it into the stack.

I am using Jiglib 0.25 – Away3d version and Away3D 2.3 (Link)
I use SwfProfiler to track the fps.

Source:
Jonga3D
Source

Thanks to SleepyDesign for getting the ball rolling on this.

13
Feb
09

Global Game Jam – The Deep – Capture Detection

ii) In ‘The Deep’ game we have a string membrane that can contort into many shapes both concave and convex. I needed to be able to detect if a ‘plankton’ (or many) is within the membrane when the digest mechanism is triggered (the creature’s orbs touching together).

My method was to draw a shape using the membrane as a template. Fill the shape, then test the plankton to see if their coordinates are over the fill colour.

The Deep: Plankton Capture Detection

The Deep: Plankton Capture Detection

1) The creature’s orbs touch triggering the digest mechanism.

2) Using the vertices on the rope chain draw a shape.

3) Colour fill the shape.

4) Find the extents of the shape. Calculate the bounding box. Now check to see which plankton are within the bounding box. Take the coordinates of each of these plankton and test whether they have the fill colour at that coordinate. If so, then the plankton must be inside and is therefore digested. Points scored.

Again the source of the game can be found here.




Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates

Advertisements