Introduction

AS3 puzzle block game. Just for fun I created this puzzle-game. It is not very innovative, but it’s cool (and a little bit hard) to explore how to build this kind of game.  Don’t know the exact name for this game, so I called it block.game

How to play

Click on groups of the same color. The bigger group, the more score. You get a message when no moves can be done, or when the board is empty.

How I created it – braindump

I’ve learned you need to think twice before starting coding. This game had some really challenges in it.

Challenge 1:
I know what you are thinking; the map is just an array. Well; that’s true. A challenge while creating the game was to find out what a left or right side in the game was. My array doesn’t know what rows are, because I choose to not use a multidimensional one. So I created a way to calculate what a row was. I used modulo for this. Take a look at this code to see how easy the problem could be fixed. It just took me a long time to get to this point, I guess.

Conclusion: Modulo makes live easy. We need to use it more.

Challenge 2:
How to find all blocks around the active block? It loops around the active block to see if they had the same type (=color). If not; stop looping. If it does; repeat function from that point again with exception below the imaginary boundaries created in challenge 1. Well, this is a typical example to use recursive loops; I used it for this. Recursive programming is a bit hard to understand if you don’t work a lot with them. My conclusion: Learning recursive function is cool.

Challenge 3:
When you clear a column, the column should move to the left, right? I thought that would be very easy; just move all columns after the newest empty column just one position to the left and that’s it.
But it wasn’t that easy. I needed to loop through all the columns after the empty one, and push it them the left. But.. At the right side of the board there are empty columns too (if you clicked a empty row before). So Flash was thinking; Cool I’ve found some empty rows at the right side of the board. Yeah; put more to the left. But there wasn’t more, because the column before the last empty column at the right side is the last one (you still get me?). Flash was recursively looping and after 15 seconds he gave up.. an infinite never ending loop. Conclusion; I needed to calculate the last not-empty-column first. Then find the empty columns between the first empty column in the middle of the board and the calculated not-empty-column. If found it; move that columns one position to the left.

I hope you like the game. I haven’t implemented a highscore (yet).

Code will be available soon on flashden.

Play @ games.stroep.nl
Buy source @ flashden.net

Feeling creative; created a new serie with wild but odd colors. It has a happy abstract smoke-like feeling. It is hard to create good ribbons, but now I have find out a new way I kinda like. When I was experimenting with my ‘curved series’ (previous post), I already had the engine. But in this serie I left the borders, left the fade and added better movement and connection between the lines. It’s getting better every time. The curves and movements are based on a perlin noise. It took a lot of time till I get these four. The engine was right, but I have to deal with randomness. Mostly it doesn’t work and sometimes it does and now I have this:

I’ve created this one at 6000 x 6000 px. What do you think of it? if you are interested in buying one, please contact me info[at]stroep.nl.

New experiments with movements, curves, lines and perlin noise. Most movements are created using this function (this is pseudo code)

noiseColor is the colorvalue of getPixel() from the perlin noise.

Some curves with gradient fills and 2 different stroke sizes. I found in the Matrix-class a createGradientBox() function, witch actually is a very cool and handy function. The colors are based on photos with cool colors, this gives a nice natural look.

After writing this post of using perlin noise, I’ll did some more experiments making cool things. I draw lines using Perlin noise as input. Check this out:

I was also experimenting/figuring out how to convert a actionscript generated movie to video. I never knew it was possible (or that easy) with the Flash CS3 (maybe because I never tried). Just choose file > export movie > and choose .mov extension. The video isn’t smooth, because (when I save it) it is not really rendering, it’s just like an invisible screencapture, I guess. So I can’t use more heavy CPU things. Thats a pity.

But maybe I could use my ImageSaver Class to create a movie-sequence by saving frame by frame as PNG.

It took a while to get the right feeling, but I’m very happy with the results. Generated with actionscript, colorized with Photoshop. Orginal render size is 4800×4800 px. It’s full of details!

Sometimes I don’t know what to think of generative art. I don’t know if these images I created could be called (or what ‘they’ called) art, or if they are just some other renders. Sometimes it feels nothing more than lines, colors. Some people who see it really love it, but at some moments I don’t know how to think about it.

But take a look at it, they have so many details (see the big sizes if you have a flickr account). I cannot count the lines, but can have a endless watch to see if there’s a message in it. A secret sign or something else I didn’t coded. How can such useless lines be that interesting? I don’t get it..

A lot of people ask me how to create this images. If you don’t want to learn to code, just freak out with photoshop. First, when you really want to this: learn a coding-language, like actionscript. Download a nice actionscript-editor, like FlashDevelop. This makes coding more easily & comfortable. You also could learn processing. I don’t know a lot about it, but I’ve seen wonderful things created with it.

I just had an idea for a new generative render, so I started a some simple line tests. I calculated a motion-path. Around this path are moving multiple other sprites, that’s why we see a chain-like-line. Click to see high-res larger images (1200×1200 px)

That looked nice to me. I modified the code, to add some colors to it and make a better composition. The first 2 are some test with color and borderwidth, so you could see the process.

I’m kinda happy with this result. Maybe I generate a 10.000×10.000 render of this one, so I could print it at large format.