Archive Page 3

14
Sep
10

My Flash on the Beach 2010 Schedule

The awesome Flash on the Beach conference takes place in Brighton on 26th to the 29th September.
I shall be presenting “Where in the World? Intercontinental Ballistic Flash” on Tuesday morning (10am) – I’ll list more details about it here very soon.

Here is a Twitter list of all the FOTB presenters

These are the sessions I’ll be attending:

Monday
Keynote
Conrad Winchester: ROBOTLEGS AND SIGNALS – A MATCH MADE IN HEAVEN?
Andre Michelle: PULSATILE CRACKLE
Mario Klingemann: SO LONG, AND THANKS FOR ALL THE FLASH
Stacey Mulcahy: DEVELOPING FOR THE SOCIAL MEDIA DOUCHEBAG – AN INTRO TO SOCIAL API’S
Robert Hodgin: PRACTICE MAKES PERFECT, SO WHAT ARE YOU PRACTICING?
Stefan Sagmeister: DESIGN AND HAPPINESS

Tuesday:
THE ELEVATOR PITCH
Jon Howard: WHERE IN THE WORLD? INTERCONTINENTAL BALLISTIC FLASH
Joa Ebert: 1 1 7 11 21
Seb Lee-Delisle: WHAT THE FLUX!?
Veronique Brossier: ADOBE AIR FOR MOBILE DEVELOPMENT
Nando Costa: THE OTHER SIDE
Brendan Dawes: MAKERS OF THINGS

Wednesday:
6 OF THE BEST – 10 MINS EACH
Iain Lobb: ZERO TO GAME DESIGNER IN 60 MINUTES
Ralph Hauwert: UNITZEROONE :: THE DISCONTINUITY
Frank Reitberger: TRIANGLE AFFAIRS
Peter Elst: BIG BOYS AND THEIR LITL TOYS
Jared Tarbell: THE COMPUTATIONAL ARTIFACT

02
Mar
10

AS3 Magnifying Glass Class :: Pixelbender Lense Refraction

The AS3 Magnifying Glass is a lense refraction class employing PixelBender. The class is an encapsulated method that takes a source image, a position and radius and returns a refracted result in sprite form.

I needed to represent a spy glass in my current project, and was looking for a very efficient method to achieve this. PixelBender seemed the obvious route and I’m pretty impressed by the speeds I am getting. I have max-ed out the frame rate and am still getting full (120) fps.

The MagnifyingGlass effect is the resultant class. The class embeds a pixelbender filter that spherizes it’s input and returns this as a sprite.

When using the class, the source image should be sent to the MagnifyingGlass full size, and be displayed to the user at a reduced size. This helps to preserve the integrity of the refracted image.

Usage:


//refraction: 0=Lots, 1 =None
//radius: The radius of the magnifying glass
//position_point: The position of the magnifying glass on the source image
//source_pic: BitmapData of the source picture
magnifying_glass = new MagnifyingGlass(refraction,radius, posn_point, source_pic)

magnifying_glass.magnifyingGlassPosition=posn_point
magnifying_glass.update()

AS3 Magnifying Glass Class

The AS3 MagnifyingGlass Class

I have set up a quick demo that shows the class at work on 3 different images. Press any key to change the image.

Image#1: Have a look around a bit of England & Wales. Enjoy.
Image#2: Hundreds of cartoon characters. See if you can find Quagmire! – Gigity.
Image#3: There is a sheep in there somewhere.

NOTE: The PixelBender filter used here is based on Joa Ebert’s Spherize Filter originally built in Hydra – the forerunner of PixelBender.

NOTE: This requires Flash Player 10 and above.

Demo: Magnifying Glass Class Demo
Source: MagnifyingGlass.zip

25
Feb
10

AS3 Flamer Class :: Setting things on fire

The Flamer Class is a quick and easy method to set things on fire. Throw some fuel (any display object) at the class and make it burn.

While working on another project I needed to make some lightweight flames. I looked around, tried a bit of perlin noise, some convolution filters – then some PixelBender filtering – I wasn’t really happy with the results.

I found the excellent Saqoosha’s Fire on Wonderfl.
This demo had nearly the flicker and colour mapping that I was looking for. Rendering the perlin noise on each frame was causing a bit too much processor overhead for my purposes.
Instead of rendering two perlin octaves and moving the layers against each other, I took two separate single octave perlin noise bitmaps and rotated one against the other while blending.
This gives a nice effect and is very lightweight. With the Saqoosha method I was clocking at a steady 26fps, with my lightweight method I could get 90fps.

To get the flame hues I set up a gradient box, threw some colours at it, loaded those colours into an array which I then pushed to a palette map.

So how to use the Flamer class:


import swingpants.effect.Flamer

var flamer:Flamer=new Flamer(display_object)
addChild(flamer)

addEventListener(Event.ENTER_FRAME, enterFrameHandler)
function enterFrameHandler(event:Event):void
{
flamer.update()
}

Your object will now be on fire. Feel naughty?

You can set the render width and height and also set the direction of the flames by setting a point vector.


var flamer:Flamer=new Flamer(display_object,render_width, render_height, flame_direction_point)
addChild(flamer)

//The colour of the flames can be set with one of the presets (There are 4 at the moment – ORANGE_FLAME, BLUE_FLAME, YELLOW_FLAME, GREEN_FLAME – but I will be adding more)
flamer.setFlameColour(Flamer.BLUE_FLAME)

//Direction can be set on the fly:
flamer.setFlameDirection(direction_point)

Here is a demo of a pure code use of the Flamer: The Flaming Vortex. You can click on the flash to initiate an explosion, and pressing space will change the colour. Have a play:

Flaming Sun

Flamer Class. The flaming vortex demo

This next demo is an example of throwing a movieclip/sprite at the Flamer class. Don’t laugh, I quite literally spent 10 minutes putting the anims together then threw them at the Flamer. Click on Flash to change colour and object.

Flaming Car

Flamer Class Demo. Help, my car is on fire

Lots of fun can be had by throwing different animations at the Flamer. Control some with your mouse/keys. Become a twisted fire starter.

The Flamer class could do with a few more features, but is a pretty good start. The speed is pretty good, I’m happy to receive any improvement recommendations.

I have packed the Flamer class and demos up in a zip if you want to have a play:
DOWNLOAD: Flamer Class and Demos

DEMO #1: Flaming Vortex
DEMO #2: Burning Movieclips

15
Jan
10

Away3DLite: Translating 3D Coordinates to 2D Screen Position

I have been playing with the awesome Away3DLite. Playing with 1000s of polygons is very liberating, but still doesn’t mean we can slack off with the optimisation. It is important to take any opportunity to lessen the number of calculations performed per frame by the player.

To this end, I was just putting together a 2D layer above my 3D scene when I found that the camera.screen function (available in the standard Away3D library) that projects 3D coordinates(x,y,z) to 2D screen positions (x,y) wasn’t present.

In Away3DLite we have to calculate this ourselves. The salient information can be gained through a model or container’s viewMatrix3D property. To get an accurate screen position the the x,y,and z positions are drawn from viewMatrix3D. Each of x and y are divided by the z value and any screen offsets are applied.

Here is the method as a function:

public function calc2DCoords(screen_element:*):Point
{

var posn:Vector3D = screen_element.viewMatrix3D.position
var screenX:Number = posn.x / posn.z;
var screenY:Number = posn.y / posn.z;

return new Point(screenX+screenW_offset,screenY+screeH_offset)
}

Pass through a screen element (a model, primitive or object container) and the 2D result will be returned. The screenW_offset and screenH_offset are required if the ‘view’ has been centred on the stage.

I have put together a demo here to demonstrate the function. I load a couple of models into the scene and let a 2D info panel follow each around the screen.

Got to keep a close eye on those tubbies

Demo: Translating 3D Coordinates to 2D Screen Position
Source: ZIP

18
Dec
09

Creating Mathematical Formulae from sample data using Excel

So you’re in Flash and want to move an item on the stage, rotate a camera or dynamically change a volume depending on another value. You could use the curves available in various Maths libraries, but you can spend a lot of time matching and applying constants.

A quicker – more accurate way can be to come up with your own formulae.

What!!? It is easy – you really don’t have to understand the mathematics, you can get Excel and Flash to do the heavy lifting for you.

Let me explain this by means of an example:
I was building a 3D application. I had a camera and needed it’s X rotation to be close to certain values depending on the camera’s position on the Z axis. I manually moved the camera into position and noted down samples of the values I required and placed them into Excel: One column for the z value and one for the required angle. – I only need a handful of samples to allow me to plot a regression trend line.

I now select the values on the spreadsheet and create an XY scatter chart. Great, my points are on the graph. I can see it makes a curve. In the ‘Chart’ drop down menu I now ‘Add Trendline…’. If I choose ‘Linear’ I get a straight line, but I want a curve so I can choose from a number of different methods. In this case ‘Exponential’ seems good. Select that and a look at the Options tab allows me to select ‘Display Equation on Chart’.

Now as soon as I press OK, I get my equation. Simple.

Regression Curve Formula in Excel from sample data

How do I represent this formula in Actionscript? Basically it is saying 202.62 times the exponential of 0.0014 times the chart’s x value. So in AS:

The final formula in Actionscript

As required, I have calculated the formula using the camera.z value and applied it to camera.rotationX. Now whenever the z value changes I have a smooth curve applied to rotationX.

Nice!

2nd Oct 2010:
A quick addition to this post. If a more complex curve is needed then a polynomial should be chosen. A polynomial can have multiple ‘orders’. This more orders you have the more compelx the curve can be. (Excel allows up to 6). A great thing about polynomials is speed. It is merely a series of multiplications which are very light on the processor.

So a polynomial trend gives you (for example) the formula:
109.13×4 – 265.48×3 + 125.34×2 + 40.012x + 2

To represent this in Actionscript I’d need to replace x4 (x to the power of 4) with the x value paramter – say delta – so x4 becomes delta * delta * delta * delta (or indeed Math.pow(delta,4)), and so on. The final formula would be:
109.13 * Math.pow(delta,4) – 265.48 * Math.pow(delta,3) + 125.34 * Math.pow(delta,2) + 40.012 * delta + 2

18
Nov
09

Ranged Numbers. Non-Linear response curves for Sliders and TouchPads.

I’ve been building a few apps recently and have found that a linear response over a range of numbers has been a poor solution. I needed to be able to apply different response curves to user interface components (knobs, sliders, touchpads) as well as on screen display objects, characters, etc.

I needed a good name for the class, but instead came up with the pretty poor moniker ‘RangedNumbers’. I’ll change it when I come up with a better one.

So the idea is, a ‘ranged number’ is instantiated, initialised for the required range then a simple call with a value in that range will result with a percentage that can be applied to the intended recipient accordingly. I realised that an inverted curve would be handy too, so have added that functionality.

I have included exponential and powered curves as well as linear.

So to use the ranged number system:

//Instantiate and Initialise
var ranged_num:RangedNumber=new RangedNumber(min,max)
//Where min is the minumum number in the range and max is the maximum

//In use:
trace ( ranged_num.calculatedRangeNumber(value, curve_type, inverted) )
//Where:
// value is the value within the range to be calculated
// curve_type is the type of response curve.
// Curve types: RangedNumber.LINEAR, RangedNumber.EXPONENTIAL, RangedNumber.POWERED
// inverted is a boolean flag. True if the inverted response is required

I have put together two demos to show the RangedNumber class in action:

Firstly using a Slider component. Grab the slider and watch how the markers are represented on all the displayed response curves.

A demonstration of how to implement non-linear response curves

Now here is the same demo but this time using a TouchPad. Click on the touchpad to engage. In this demo horizontal movement controls the standard curves and vertical the inverted.

How to implement non-linear response curves with a touchpad

The source for these demos and the Ranged Number class can be found here: Ranged Number ZIP

12
Nov
09

FOTB09 Full Presentation Video Now Available

The full video of my presentation at Flash on the Beach is now available. “How to build a game in 3 minutes” became “How to build 3 games in 3 minutes” (just showing off).

Flash on the Beach 09 Presentation

Flash on the Beach 09: 3 Games in 3 Minutes

On the back of this presentation I have now been invited to do a full hour presentation at FOTB2010, which is great news!!

I am still (slowly – too many projects on the go at once) building the Games Sketchpad and will post the app and some source as soon as it is ready. It’s already great fun to play with – just needs a bit more functionality.

29
Sep
09

Flash on the Beach (Part #1): Elevator Pitch… AS3 Genie Effect Transition.

My ‘build a game in three minutes’ session at this year’s excellent Flash on the Beach somehow morphed into building three games in three minutes.

My initial thinking was to code on the fly and put together something simple – I wanted physics and the ability to render a 3D version. It only took a couple of experiments to realise that trying to write AND compile in a strict 3 minutes would be near impossible. I needed some assets and wanted to produce these in the allotted time too.

While cogitating the pitch, I had a lot of game commissions and ideas come through my desk. I clicked that a Game Scratchpad would be a really handy app. Something that I could sketch out a game with – to demonstrate an idea during a brainstorm – at the speed of thought.

More on the Game Sketchpad in Part#2. See the last two minutes of the pitch here (not sure what happened to the first minute):
http://www.youtube.com/watch?v=wLiKTdB89AA

In the meantime, I got asked by quite a few about the transition effect I used on my slides. To save time I did all of my presentation from within a swf. I wanted a fun quirky transition. The Genie (Ginny) effect is newish – I’d spotted it on wonderfl.net by Clockmaker (inspired by Fladdict). So I grabbed the method and adapted it to allow me to fire it off from a given point – connecting relevant sprites (humorous and tasteless in good measure).

I have packaged the Genie effect here as a Class, with example implementation.

//Usage
import com.swingpants.effect.GenieBmd
var gb:GenieBmd=new GenieBmd(400,300,20)// image width, height, number of segments
gb.startGenie(bmd) // Bitmapdata
gb.fireAtPoint(50,100,3) //x, y, speed (in secs)

AS3 Genie (Ginny) Effect

Swingpant's AS3 Genie Effect implementation

In part#2 I will explain how the Game Sketchpad works, the component parts, the swf and some source code.

Genie Effect (zip): source
Presentation (Youtube): video




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