Category Archives: Flash

Space background generator

Lately I have been spending time on my Meteor Loop concept game. A big part of what I have been doing is the procedurally generated backgrounds. I really like what I have come up with, and some of the screenshots look great.

The actual game is in no state to show at the moment, but I really wanted to show how the background is coming along. So I decided to split it out into a stand alone project, so you can see it. Take a look here:

http://labs.adamharte.com/planets/

Click the “Generate new” button in the upper left settings panel to generate a new background with a new random seed. Have a go at changing the colour to see what it looks like.

Meteor Loop procedurally generated backgrounds

Meteor Loop is an Asteroids style space game that I am working on in my spare time. I know, doesn’t sound very original. It seems like everyone has to make an Asteroids clone at some stage. Personally I have made at least 4 different versions now. I always use Asteroids as a project to really try out a new language or library.

But this post is not really about Meteor Loop. I will do that post later. This is just an update to specifically show the dynamically generated backgrounds that I will use in the game.

Every level will have a different randomly generated background. Here are just a few screenshots of my favorites:

The game is being built using Flash, with ActionScript 3. I am using Away3d for the planets, and perlin noise for the cloud background and star distribution.

To generate the background, I start with a random seed. I use the seed to grab a random colour from a selection of predefined colours. Then I randomly choose the size, number of subdivisions, position, and rotation speed of the planet. I create the sphere using Away3d 3.6, with just a colour material. I also duplicate the sphere, but with a wireframe material, and scale it up a little, so it creates sort of an atmosphere.

For the clouds and star I create some perlin noise data using the BitmapData’s perlinNoise function, and tint it with the same colour as before. I create a second perlinNoise bitmap with a smaller numOctaves and use it to calculate where the stars should be. I simply did “the higher red channel value a pixel has, the higher chance I draw a star there”.

To add a bit more variation and interest, I then created a gradient overlay with its blend mode set to OVERLAY. This gives the background clouds a nice range of punchy colour, and some nice empty black areas for the stars to shine through a bit more.

I spent quite some time tweaking numbers of the algorithms, and I think I could easy find some more numbers to play with. Let me know what you think of these screenshots so far.

UPDATE: Check out the live version of my Space background generator.

Thinking about moving my website away from Flash

I am still quite proud of my personal portfolio website, but for a while now I have had a niggling feeling that I should redo it with “standards” based tech. I think the website still works at what I built it for, as a showcase of my design and development work. When I built it, back in 2009, I was calling myself a Flash developer, so building my website in Flash was the perfect choice. But things have definitely changed even since then.

For the past few years I have been thinking more and more of myself and my skills as wider than just one platform. My best skills are not necessarily in Flash, but in the development of digital media. Whether that be websites, desktop software, mobile, or games. It doesn’t matter what tools I am using, it’s about creating cool or interesting stuff that works.

I say I want to “redo” my site, because I think the concept still works, it’s just the technology I am worried about. Also I want to push my HTML, CSS, and JavaScript skills to create something “flash-like”. Sure it would be a good opportunity to re-invent the site, but to be honest, it is working for me, so why fix what ain’t broke.

Flash is definitely like an old friend to me, so it is sad that I am thinking this way. It does make me wonder though, if I am thinking this way, and I am a fan of Flash, then what are others thinking. I strongly believe you should pick the right tools for the job, and now it seems the time of Flash being the right tool for my personal portfolio website has passed.

So expect to see updates on my progress as I learn a few things, and curse myself for ever attempting this.

Added TreeList to MinimalComps

I love the MinimalComps set of components, but always thought it was missing a folder type tree component. I finally needed one the other day, and found other tree components that where too bloated, and not “in the spirit” on MinimalComps, so decided to make one myself. +1 for opensource :)

It inherits from the standard MinimalComps List component, so has basically the same interface. It also uses it’s own custom ListItem called TreeListItem. The data object you pass in is almost the same as the List, except each item object can contain and array of its children items, using the key “items”, and you can optionally set an “expanded” flag on any item. Expanded is set to true for each item by default.

[actionscript3]var treeItems:Array = [
{ label:’treelist_test_app’, items:[
{ label:’bin’, expanded:false, items:[
{ label:’js’, items:[
{ label:’swfobject.js’ }
] },
{ label:’expressInstall.swf’ },
{ label:’index.html’ },
{ label:’TreeListTestApp.swf’ }
] },
{ label:’lib’, items:[] },
{ label:’obj’ , items:[
{ label:’TreeListTestAppConfig.old’ },
{ label:’TreeListTestAppConfig.xml’ }
] },
{ label:’src’, items:[] },
{ label:’file_tree_test.as’ },
{ label:’TreeList Test App.as3proj’ },
] }
];[/actionscript3]

Then just create the TreeList like any other component.

[actionscript3]testTree = new TreeList(mainContainer , 0, 0, treeItems);
testTree.setSize(200, 200);
testTree.addEventListener(Event.SELECT, handleTestTreeSelect);[/actionscript3]

Once the component is setup, just handle the SELECT event just like you would with the List

[actionscript3]private function handleTestTreeSelect(e:Event):void
{
trace(‘TreeList select:’, TreeList(e.target).selectedItem.label);
}[/actionscript3]

There are a few new methods to the TreeList, such as collapseAll(), expandAll(), collapseItem(item:Object), expandItem(item:Object), and toggleExpandItem(item:Object). They should all be pretty straight forward. To have a play and see what the TreeList is about, take a look at the quick example I made here : Adam Harte – MinimalComps TreeList test.

You can grab the TreeList and TreeListItem from my fork on GitHub for now (AdamHarte / minimalcomps – GitHub), but I am hoping it will be merged into the main repo soon. I think the TreeList will need a bit of real-world testing, but most of the functionality comes from the List anyway. Feel free to have a play and let me know if there are any bugs.

Cheers,
Adam