markstar

Shottts is now available in the Blackberry App Store!

Mark — Sat, 07 May 2011 13:42:36 +0000

My app, Shottts, has been approved and is now available for free in the Blackberry App World! This is the first app I’ve developed and published to a store myself, so I’m pretty excited to see it out there.

I submitted the app as part of the free BlackBerry PlayBook offer for developers, but the app has only been tested on the simulator as I haven’t got my device yet. Perhaps there’s an argument for not making it available, but it ran well on the simulator so I took the decision to release it and it’s had quite a few downloads considering I haven’t advertised it at all! I’ve got lots of features planned for the app, I’m just waiting for my Playbook to be shipped so I can properly test the app before investing time on updates.

For those of you that are interested, the app was developed using StarDribbbleLib, which is available on Github, there’s also a blog post about it.

Anyway, if you’ve got a Playbook give it a shot, it’s free! And let me know what you think.

Canvas Play 10: Shooting Stars

Mark — Tue, 29 Mar 2011 08:00:37 +0000

The last demo introduced triggers and a proper implementation of the object pool. This demo uses both of those concepts as well as introducing the emitter behaviour. The emitter behaviour emits objects using specified parameters such as the angle, force and gravity to apply when emitting. The demo emits stars from the bottom of the canvas and uses a trigger to detect when the star leaves the canvas so it can be recycled back into the object pool. This demo also displays the amount of objects on the canvas and allows you to toggle whether the canvas captures the individual frame, or the series of frames, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

The last demo introduced triggers and a different approach to releasing objects from the ObjectPool. There are two things that are new in this demo, the StarOrb class and the Emitter class, the demo also requests a new object from the ObjectPool every frame and has a limit of 100.

The StarOrb class makes use of the new Star class. The Star class draws a star to the canvas and allows you to customise all of it’s parameters such as the number of points it has, and it’s inner and outer radii.

The Emitter behaviour takes a number of parameters when it’s created. These are the target, the amount of drag to apply, the amount of scale to apply to the target, the amount of force to apply to the target, the angle to emit the target and the gravity to apply to the target. It is a little complicated to set up, but it works in the same way as all other behaviours, and can be used in conjunction with them.

You can grab the source code from GitHub and have a play.

Canvas Play 09: Recycling Orbs

Mark — Mon, 28 Mar 2011 10:00:14 +0000

The last few demos have shown different uses of the SineOscillator behaviour, this demo introduces triggers and a proper implementation of object pooling. In this demo an Orb is added to the center of the Canvas with behaviours added to randomly move it around. An Orb is added every third frame, however it is only added if there is one available in the object pool. In this demo the object pool has a limit of 50 objects, the current object count is displayed to illustrate the number of objects on the canvas, you’ll notice that it never goes above 50.

Triggers are added to each orb created; a trigger is something that calls a function when it’s conditions are met. In this case we’re using the ExitBoundsTrigger, which is triggered when the Orb is out of the bounds specified (the Canvas area). The function called by the trigger recycles the target object by removing all behaviours and releasing it back into the object pool ready for it to be used again. I’ve also added the ability to toggle whether the canvas captures the individual frame, or the series of frames, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

If you’ve been following along, you’ll see that this demo uses many of the classes we’re already familiar with, such as the ColorPool, ObjectPool and the BehaviourManager. In this post we’re introducing the concept of triggers, as well as the TriggerManager to manage the triggers.

As mentioned above, in this demo we’re using the ExitBoundsTrigger, which is created in the onCreateObject function. The ExitBoundsTrigger takes three parameters; the target object, the bounds that confine the target and the function to be called when the target exits the specified bounds. The Bounds are specified in the init function, so far only a rectangle is supported.

When an Orb exits the bounds specified the onExitBounds function is called. This function removes the Orb from the CanvasController, thus removing it from the Canvas, releases it back into the ObjectPool and removes all behaviours and triggers for the object. Doing this allows us to reuse the objects already created in memory, rather than creating a new object every time one is requested.

This demo using a different method to release objects from the ObjectPool than used in previous demos. Previous demos have used requestAll to request all available object from the pool at once, this demo requests objects in the update function, on every third frame. By recycling the objects used we are able to continuously request and reuse objects from the ObjectPool.

You can grab the source code from GitHub and have a play.

Canvas Play 08: Waving The Flag

Mark — Wed, 23 Mar 2011 10:00:19 +0000

Again, this demo doesn’t add much from the last demo, but demonstrates another use of the SineOscillator. This time, it shows 1180 Orbs oscillating in a grid shape, giving an impression of a waving flag, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

As mentioned previously, the SineOscillator uses the sine wave to oscillate the specified property between two values. This demo lays the orbs out in a grid and applies the SineOscillator behaviour to oscillate the x, y and alpha values, which gives the impression of a waving flag.

You can grab the source code from GitHub and have a play.

Canvas Play 07: Sine Wave

Mark — Tue, 22 Mar 2011 10:00:39 +0000

This demo doesn’t add much from the last demo, but demonstrates another use of the SineOscillator. It shows 120 Orbs oscillating up and down in a sine wave formation, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

As mentioned previously, the SineOscillator uses the Sine wave to oscillate the specified property between two values. This demo lays the orbs out evenly across the x axis and applies the SineOscillator behaviour to oscillate the y value from the top to the bottom of the canvas.

You can grab the source code from GitHub and have a play.

Canvas Play 06: Oscillating Orbs

Mark — Fri, 18 Mar 2011 10:00:59 +0000

The last demo introduced the concept of behaviours. This demo demonstrates use of a new behaviour, the SineOscillator, which oscillates a specified parameter between two values. In this case it uses the Sine wave to oscillate between the two values. In the demo each of the 120 Orbs have their x and y positions oscillated over the canvas width and height, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

As I’ve mentioned above, the SineOscillator uses the Sine wave to oscillate the specified property between two values. When creating a new instance of the SineOscillator you specify the target object and the property of that target to apply the behaviour to, as before. You also specify the frequecy, the two values to oscillate between and the offset. The frequency specifies the amount of times the property will be oscillated between the two values, and the offset specifies the amount that’s applied to each step, without an offset the oscillator will start from the first value each time.

You can grab the source code from GitHub and have a play.

Canvas Play 05: Vibrating Behaviours

Mark — Thu, 17 Mar 2011 09:30:28 +0000

The last demo introduced concepts from the HYPE Framework; object pooling and colour pooling. This demo introduces another one, behaviours, and in particular the FixedVibration behaviour, which is based on the HYPE class of the same name. The resulting effect is similar to previous demos, but the animation is much smoother, click the image below to see it.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

The last two demos had 1000 orbs jittering about on the canvas, but it would be really useful if we could encapsulate this behaviour into a reusable class. FixedVibration does this and allows you to set parameters to affect the behaviour.

When the FixedVibration is created, you specify the target object and the property of that target to apply the behaviour to. This allows you to create multiple behaviours for multiple properties, or even multiple behaviours on the same property.

In order for this behaviour to run I’ve created a BehaviourManager. When updated, the BehaviourManager loops through all added behaviours and runs them. You can see in the code below that the BehaviourManager is updated just before the CanvasController. I’ve also changed the colours for some variation on the previous demos! You can grab the source code from GitHub and have a play.

Canvas Play 04: The Little Things

Mark — Tue, 15 Mar 2011 11:00:11 +0000

In the last demo I introduced object pooling, colour pooling and 1000 orbs. This demo shows how the little things can make a big difference. The small change in this demo is that a black rectangle is drawn over all of the orbs on every update to give the effect that they’re leaving a trail behind them. Click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

As I mentioned before, the only change is the introduction of a black Rectangle, which is added to the CanvasController. To add the rectangle a Rectangle class was created. The Rectangle is created at the same dimensions as the Canvas and is added with 5% alpha, changing the alpha value will effect the length of the trail for each Orb. You can grab the source code from GitHub and have a play.

Canvas Play 03: Jittery Swimmers

Mark — Mon, 14 Mar 2011 11:00:37 +0000

In the last demo I started to look at basic animation. This demo extends on this area by incorporating a couple of patterns I liked in the HYPE Framework; object pooling and colour pooling. This demo creates 1000 orbs that jitter about when the canvas is updated. The canvas isn’t cleared between updates and so the result is an organic camouflage effect, click the image below to see it in action.

[Please note that this demo hasn't been optimised to work on all machines, so you may experience some slow down]

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

If you’ve followed along with the series you would’ve seen that each demo creates a DisplayObject that has two Circles added to it, well this is now consolidated into the Orb class. You may also noticed that I’m now using a Ticker object, this is encapsulating the setInterval functionality demonstrated in the last demo. The reason for this is so that there’s only ever one interval running at a time, but multiple listeners can be added to the same interval using the Ticker object.

The ColorPool is constructed by passing the colours you wish to be in the pool. The idea is that you have a pool of colours to choose from, calling the getColor method pulls a random colour from the pool, which is used to colour the Orbs. The color is never removed from the pool. This is different to the ObjectPool, which is constructed by specifying the class you wish to pool and the amount of “swimmers” (objects) you wish to be in the pool. The ObjectPool has a method you can set called onCreateObject, this method is called every time an object is created in the pool, in this current implementation an object is created when it’s requested.

When an Orb is created it is placed in a random position on the canvas, given a random alpha value and a random color generated by the ColorPool. It is then added to an Array of Orbs and added to the canvas. Every time the canvas is updated, when the update method is called the orbs have a random number between -2 and 2 added to their x and y positions, which makes them jitter! You can grab the source code from GitHub and have a play.

Canvas Play 02: Stalking Circle

Mark — Sat, 12 Mar 2011 15:00:09 +0000

The last demo looked at displaying more than one item at once, now it’s time to make things move! This demo is pretty simple, the canvas is updated every 20ms and when it’s updated the circle moves towards the mouse cursor. Click the image below to try it out, don’t forget to press the ‘start’ button to, well, make it start!

View Source

Below, I’ve included the source code of the demo. You can have a look through all of the code properly on GitHub, but I’ll give a quick overview.

The init function creates the circle and adds it to the canvas, as well as adding an event listener for the mouse move event on the canvas. The canvasOnMouseMove method is called every time the mouse moves over the canvas, this method sets the target position of the circle; i.e the point that it’s aiming to get to. The update method updates the canvas and moves the circle 5% of the way towards the target position, by moving the circle 5% on every update it creates a smooth ease towards the mouse position.

The start method sets an interval for calling the update method, this interval is cleared using the stop method. The reset method is simply there to reset the circle to the center of the canvas. You can grab the source code from GitHub and have a play.