Creating realistic sound effects for the environments is important in the virtual world. It can give the players the feeling of immersing inside the world.

The most basic sound handing method is to play all sounds at the same volume. For instance, a bird is singing in the forest and the avatars are walking on the road. In this case, the user should hear at least the music from the bird and the footfalls.

A better way to handle sounds is to consider distance. For example, the following figure depicts the volume of the bird signing in the room:

The three avatars in the room should hear different volumes of the music from the bird. The closer the avatar, the louder the music. This enhancement lets the players feel that they are in the realistic world. A classical example of sound control in an environment is Age of Empires. You can feel every single sound from the environment played in a designed volume and balance between left/right channels of stereo.

Let's create a stereo sound example. We create a SoundController class that responds to attach a bird singing sound on every tree. The sound stores the position of the tree for later use to calculate the distance from the tree to the avatar.

public function registerSoundSource(sourcePosition:Point) {
var newSoundSource:Object = {};
newSoundSource.position = sourcePosition;
newSoundSource.snd = new Sound(new URLRequest("sounds/bird.mp3"));
newSoundSource.trans = new SoundTransform(1,0);
newSoundSource.channel = newSoundSource.snd. play(0,999,newSoundSource.trans);
_soundSources.push(newSoundSource);
}

While the avatar of current user is walking, it keeps the sound controller updated with the latest position of the avatar. When the position changes, the sound controller calculates the distance between the sound source and the avatar. The farther from the tree, the less volume it is. The nearer the avatar to the tree, the louder it plays. It will also determine if the sound source is on the left or right side of the avatar and adjust the pan.

public function updateAvatarPosition(position:Point) {
for each(var soundSource:Object in _soundSources) {
var newPan:Number = (soundSource.position.x - position.x)/200;
soundSource.trans.pan = newPan;
var maxSoundDistance:Number = 500;
var newVolume:Number = (maxSoundDistance - Math.sqrt(Math.pow(soundSource.position.x-position.x,2) + Math.pow(soundSource.position.y-position.y,2)))/maxSoundDistance;
soundSource.trans.volume = newVolume;
soundSource.channel.soundTransform = soundSource.trans;
}
}

In the walking function in WalkingAvatar, we update the sound controller with the latest avatar's position.

_world.soundController.updateAvatarPosition(new Point(this.x,this.y));

When running this example with headphone, we can notice sound transform differences when the avatar walks to different position on the map.

Mixing art-based background with tile-based map

Our world map now is composited by several pieces of 30x30 tiles. Although it is possible to paint the 30x30 tiles on every map, it is time-consuming and combining the tiles perfectly to build a big terrain texture is difficult.

Another approach is to make a big terrain texture and then set the walkable map manually. We can draw the island in whatever shape we want, then we can use our map editor to mark the walkable grid to prevent the avatar walking into the sea. Please note that the logic is still 50x50 tiles. The only different thing here is that we used one big texture instead of composing the ground with 50x50 tiles.

We will create a movie clip and draw a big texture on it. This movie clip will be exported for ActionScript use with name BigMap.

In the IsometricMapData.as, we load the BigMap movie clip and blend the alpha of the tiles. The reason we keep the 50x50 tiles is that we need them to dispatch the click event in order to walk around.

private function onMapDataLoaded(e:Event):void {
...
var bigmap:MovieClip = new BigMap();
_mapHolder.addChild(bigmap);
...
_map[i][j].alpha = .05;
...
}