A New Look

After a few days of frantic coding and design, here’s my new theme. I actually realize that the main reason I have a blog is because I just like making themes. This theme has a custom archives page, which I spent numerous hours trying to pull together; a portfolio page, which I’m too lazy to code one myself and used the NextGEN Gallery plugin instead. It did what I wanted, so there’s no reason for me to reinvent the wheel.

Besides, I also decided to embed any Flash content directly into my posts, and not to put them into a separate page anymore. Simplicity.

Besides, I’ve also used a custom font with this theme. This is the first time I used CSS custom fonts, and it’s actually quite easy. Here’s the code snippet:

@font-face {
	font-family: My Custom Font;
	src: url('path/to/your/font.ttf');
}

And you can then refer it like a normal font within your stylesheet, like so:

p {
	font-family: My Custom Font;
}

Now back to what I was doing beforehand.

AS3 Slope Detection for Non Uniform Terrains

I have been wondering how slope detection for 2D games such as Gunbound work. The units move according to the terrain, rotating to the gradient of a slope. This morning, after the hype on the terrain generator I made yesterday, I decided to work on it and figure out how slope detection works.

After looking around the internet, I couldn’t really get a concrete example that were detailed enough. So, I decided to make use of the few important information I got my hands on, and came up with my own version :D

Firstly, here’s what I want to accomplish:

  1. Units’ movement followed the slope of the terrain they’re standing on.
  2. Units rotate according to the terrain.
  3. Units are spawned from midair, so it would have to land on the ground in the correct orientation.
  4. Units are unable to jump.

One good example that I referred to most was this post made by Emanuele Feronato. Here’s how my unit is set up:

Slope Detection Unit Setup

Unit setup

This setup is based on what I learnt from Emanuele’s post. The blue rectangles on the left and right are used to detect whether the unit is hitting any terrain on its either side. The bottom rectangle is used for hit testing against the ground the unit is standing on, and determines if it would fall. Notice that the rectangles on either sides do not reach the bottom of the unit. This allows the unit to “climb” up uneven terrains.

I added two points on either side of the character, as noted by the red dots. These “sensors” are just points defined in my code, with no graphical representation. These will be used to calculate the gradient of the slope, and rotate the character accordingly. Now on to the code.

Here’s a breakdown of what happens every frame.

  1. Calculate forces (velocity, gravity, friction etc.)
  2. Check for player input. In our case, the left and right arrow keys.
  3. If the unit should move, translate it’s x pixel by pixel until its side rectangle hits something, using its x velocity as limit.
  4. If it hits something, move it upwards along the y axis until the bottom rectangle is clear.
  5. And now for the sensors,

  6. Increment both sensor’s y position downwards, as well as the unit’s position until it hits the ground and limited by it’s y velocity.
  7. Now calculate the angle between the two sensors using basic trigonometry, and rotate the player according to the angle.

And of course there’s many other things you might want to check besides this. This is just the general pseudocode I came up, and could be optimized even further. But nevertheless, it still runs at a smooth 30fps on my computer, and here’s the demo, working on the terrain generator. Next, I’ll go on and implement terrain destruction, and maybe come up with a game with it.

Get Adobe Flash player

AS3 Dynamic Terrain Generation

Terrain generation has always been an interesting topic in the field of game development. Today, I came across this article, which discussed on fractal algorithms focused on terrain generation. Having captured my interest, I went on looking for more information on this topic, and came across this submission at deviantArt, made by ArtBIT.

Hence after a whole day of googling and dissecting ArtBIT’s code, I’ve experimented with various ways and came up with a modified version in AS3. Instead of using recursive functions, mine uses an iterative loop, as I can’t get a proper grasp of recursions with it.

And anyway, here’s the experiment, a terrain generation engine. Next, I’ll go on and implement the terrain destruction mechanism and fill up my free time.

Get Adobe Flash player