Dynamically Generated Audio Garbling - actionscript-3

I've created the standard player for dynamic sounds in a web app like so:
var _dynamicAudio:Vector.<Number> = new Vector.<Number>();
var _sampleIndex:uint = 0;
// ..Code to generate '_dynamicAudio' samples omitted
var _sound:Sound = new Sound();
_sound.addEventListener(SampleDataEvent.SAMPLE_DATA, onSampleDataEvent);
_sound.play();
function onSampleDataEvent(event:SampleDataEvent):void {
var samplesRead:int = 0;
while (samplesRead <= 8192 && _sampleIndex < _dynamicAudio.length) {
var sample:Number = _dynamicAudio[_sampleIndex];
event.data.writeFloat(sample);
event.data.writeFloat(sample);
_sampleIndex++;
_samplesRead++;
}
}
However, on slower computers (or if I stress my own by opening other applications) the audio tends to 'garble' occasionally. It sounds like it gets stuck looping over a block of the most recent samples. When this happens, I've noticed that event.position jumps by some multiple of 8192, which would also seem to imply that onSampleDataEvent isn't being called for a few consecutive chunks of samples. If that's true, it would seem this issue is unavoidable. What I'd like to know is if there's any way to detect the garbling before it happens so I can pause the audio in place of the awful noise? Thanks!

It might be that the while() loop is heavy and you don't always have the memory/CPU power to process it. So it freezes and gives you the effect you described.
It might be possible to break up the loop into smaller loops, thus evening out the CPU load. At the same time processing the event far ahead enough to seamlessly playback the audio.
The following code is not tested and is only an example of how breaking up a loop could look like:
var _dynamicAudio:Vector.<Number> = new Vector.<Number>();
var _sampleIndex:uint = 0;
// ..Code to generate '_dynamicAudio' samples omitted
var _sound:Sound = new Sound();
_sound.addEventListener(SampleDataEvent.SAMPLE_DATA, onSampleDataEvent);
_sound.play();
function onSampleDataEvent(event:SampleDataEvent):void {
var samplesRead:int = 0;
writeSamples(0, event);
}
function writeSamples(counter:int, eventReference:SampleDataEvent):void
{
var startTime:int = getTimer();
while (samplesRead <= (8192 - counter) && _sampleIndex < _dynamicAudio.length)
{
// check if the processing takes too long
if (getTimer() - startTime > 5)
{
writeSamples(counter, eventReference);
break;
}
counter++;
var sample:Number = _dynamicAudio[_sampleIndex];
event.data.writeFloat(sample);
event.data.writeFloat(sample);
_sampleIndex++;
_samplesRead++;
}
}
The main idea of the previewed code is to:
1) Check if the while loop is executed for too long. In my example 5ms is the limit
2) Break the loop if the execution is too long and start the loop again from the place it was stopped at.
If the whole process takes less than the limit, the loop will finish in one go.
You may want to refactor the code as it is not optimized and creates a lot of garbage instead of reusing objects.

Related

How to Adjust Volume in an Audio loop?

How would someone change sound levels of a music playing in a loop? For example, I'm making a game and at a certain frame I want the music level (music.wav) to be decreased to half of its volume.
How could someone do this in AS3?
You are using the word "loop" in a confusing way. In programming, a loop usually refers to one of the "for" loops that looks like this:
for (var i:int = 0; i < 10; i++)
{
//do stuff 10 times
}
I surmise that this is not what you mean by loop, but rather that you would like a MovieClip or the main timeline to decrease the volume of a Sound object at the end of n frames. Or do you just mean the music itself is looping? Hopefully you see the value of asking well written questions. That being said..
Mind you, I haven't tried this, but according to my reference book (ActionScript 3.0 Cookbook by Lott, Schall & Peters) you need to use a SoundTransform object which specifies the volume at which you want the sound to be set. Try this:
var _sound:Sound = new Sound(music.wav); // creates a Sound object which has no internal volume control
var channel:SoundChannel = _sound.play(); // creates a SoundChannel which has a soundTransform property
var transform:SoundTransform = new SoundTransform(); // SoundTransform objects have a property called "volume". This is what you need to change volume.
Now in your loop (or on the frame event that you are using) do this:
transform.volume *= 0.9; // or whatever factor you want to have it decrease
//transform.volume /= 1.1; // or this if you prefer.
channel.soundTransform = transform; //
So anytime you want the volume to decrease by this incremental amount, run this bit of code. Of course, you need to make sure that any variables you set are accessible in the code that is referencing them. One way that comes to mind to do this is with a function.
private function soundDiminish(st:SoundTransform, c:SoundChannel, factor:Number = 0.9):void
{
st.volume *= factor;
c.soundTransform = st;
}
Now, whenever you want to diminish the volume just call the soundDiminish function.
Maybe your frame event looks like this:
function onLoadFrame(fe:Event):void
{
soundDiminish(transform, channel); // 3rd parameter optional
}
If you only want this function to be called every 20 frames then:
function onLoadFrame(fe:Event):void
{
// this is a counter that will count up each time this frame event happens
frameCount ++;
if (frameCount >= 20)
{
soundDiminish(transform, channel); // 3rd parameter optional
frameCount = 0; // reset the frame counter
}
}

Snakes and Ladders AS3.. how can a movie clip climb a ladder?

I am having this problem in developing this snakes and ladders game and i am very much hoping that you guys can help me out. i already created the board and the avatar. only thing is i cant make the avatar move up the ladder, and move down with the snake. can somebody help me? i am very much desperate right now, and every help is appreciated, thank you guys!
EDIT:
here's the code that i have written so far here are some of the codes I have written so far..
stop();
var xCoord:Array = [141,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251,251,360,471,580,691,799,910,1019,1127,1238,1238,1127,1019,910,799,691,580,471,360,251];
var yCoord:Array = [675,670,670,670,670,670,670,670,670,670,670,602,602,602,602,602,602,602,602,602,602,534,534,534,534,534,534,534,534,534,534,466,466,466,466,466,466,466,466,466,466,399,399,399,399,399,399,399,399,399,399,331,331,331,331,331,331,331,331,331,331,262,262,262,262,262,262,262,262,262,262,195,195,195,195,195,195,195,195,195,195,127,127,127,127,127,127,127,127,127,127,60,60,60,60,60,60,60,60,60,60];
var arrSquares:Array = new Array(xCoord.length);
var spaceIndex:Number = 0;
var delay:Number = 400;
var tm:Timer = new Timer(delay);
tm.addEventListener(TimerEvent.TIMER, mover);
tm.addEventListener(TimerEvent.TIMER_COMPLETE, moveDone);
spinner.addEventListener(MouseEvent.CLICK, doSpin);
var total:Number =0;
function doSpin(mevt:MouseEvent):void {
var rn:Number = Math.round(5*Math.random()+1);
txtCount.text = String(rn);
total = total + rn;
txtTotal.text = String(total);
txtCount.visible = true;
spinner.removeEventListener(MouseEvent.CLICK, doSpin);
tm.reset();
tm.repeatCount = rn;
tm.start();
}
function mover(tevt:TimerEvent):void {
spaceIndex = (spaceIndex+1)%(xCoord.length);
chip.x = xCoord[spaceIndex];
chip.y = yCoord[spaceIndex];
}
function moveDone(tevt:TimerEvent):void {
spinner.addEventListener(MouseEvent.CLICK, doSpin);
txtCount.visible = false;
}
i dont know where to put the if statement of executing the motion tween attached to the chip(avatar)
Well here are my initial thoughts. I would create an animation with your character who you want to move up and down. To make it simple, make an animation for climbing, then one for falling. It's really easy to do, just use the tween option on the timeline after inserting your keyframes.
Looks like you've created your animations. Now, whether or not he slides up or falls down depends on where your snakes and ladders are. Only you know that, so at those particular spots on your board (for example, x = 200 and y = 200) we want the if statement to occur. But we only want it to occur after your avatar is done moving. Probably create a new function and add the following to the mover function
var checkX:Number = chip.x;
var checkY:Number = chip.y
checkLandingSpace(checkX,checkY);
Now let's make a function checkLandingSpace which will check if we are on a shoot or ladder
function checkLandingSpace(checkX:Number,checkY:Number):void
{
if (checkX = (your point) || (another point) //first check all x points...continue like this for all points where a ladder is...the || means or
{
if (checkY = (your points....etc)
{
mc_avatarLadder.play(); //choose your instance name to be mc_avatar, then play the tween
}
}
}
Or check this post for equating one variable to any element in an array If [Get Variable] is equal to [Array]
Now write the that for your ladder. Then do the exact same thing with all of your shoots points. Except, make a new animation with instance name mc_avatarShoot then just say mc_avatarShoot.play();
After that, make sure on the last frame for both instances, you just put in gotoAndStop(1); just to make sure it's ready next time you go to play the animation.
Of course, adjust your timer appropriately. This should pretty much do it, there might be a couple things to adjust for your own game, but follow this and understand it and you'll get it.

How can I optimise this method?

I have been working on creating an assets class that can generate dynamic TextureAtlas objects whenever I need them. The specific method is Assets.generateTextureAtlas() and I am trying to optimise it as much as possible as I quite frequently need to regenerate texture atlas's and was hoping to get a better time than my 53ms average.
53ms is currently costing me about 3 frames which can add up quickly the more items I need to pack inside my texture atlas and the frequency I need to generate them. So an answer to all the pitfalls within my code would be great.
The entire class code is available here in a github gist.
The RectanglePacker class is simply used to pack rectangles as close together as possible (similar to Texture Packer) and can be found here.
For reference, here is the method:
public static function generateTextureAtlas(folder:String):void
{
if (!_initialised) throw new Error("Assets class not initialised.");
if (_renderTextureAtlases[folder] != null)
{
(_renderTextureAtlases[folder] as TextureAtlas).dispose();
}
var i:int;
var image:Image = new Image(_blankTexture);
var itemName:String;
var itemNames:Vector.<String> = Assets.getNames(folder + "/");
var itemsTexture:RenderTexture;
var itemTexture:Texture;
var itemTextures:Vector.<Texture> = Assets.getTextures(folder + "/");
var noOfRectangles:int;
var rect:Rectangle;
var rectanglePacker:RectanglePacker = new RectanglePacker();
var texture:Texture;
noOfRectangles = itemTextures.length;
if (noOfRectangles == 0)
{
return;
}
for (i = 0; i < noOfRectangles; i++)
{
rectanglePacker.insertRectangle(Math.round(itemTextures[i].width), Math.round(itemTextures[i].height), i);
}
rectanglePacker.packRectangles();
if (rectanglePacker.rectangleCount != noOfRectangles)
{
throw new Error("Only " + rectanglePacker.rectangleCount + " out of " + noOfRectangles + " rectangles packed for folder: " + folder);
}
itemsTexture = new RenderTexture(rectanglePacker.width, rectanglePacker.height);
itemsTexture.drawBundled(function():void
{
for (i = 0; i < noOfRectangles; i++)
{
itemTexture = itemTextures[rectanglePacker.getRectangleId(i)];
rect = rectanglePacker.getRectangle(i, rect);
image.texture = itemTexture;
image.readjustSize();
image.x = rect.x + itemTexture.frame.x;
image.y = rect.y + itemTexture.frame.y;
itemsTexture.draw(image);
}
});
_renderTextureAtlases[folder] = new TextureAtlas(itemsTexture);
for (i = 0; i < noOfRectangles; i++)
{
itemName = itemNames[rectanglePacker.getRectangleId(i)];
itemTexture = itemTextures[rectanglePacker.getRectangleId(i)];
rect = rectanglePacker.getRectangle(i);
(_renderTextureAtlases[folder] as TextureAtlas).addRegion(itemName, rect, itemTexture.frame);
}
}
Well reading the project & finding what all can be optimized would sure take time.
Start by removing multiple calls to rectanglePacker.getRectangle(i) inside loops.
For example :
itemName = itemNames[rectanglePacker.getRectangleId(i)];
itemTexture = itemTextures[rectanglePacker.getRectangleId(i)];
rect = rectanglePacker.getRectangle(i);
perhaps, could have been:
rect = rectanglePacker.getRectangle(i);
itemName = itemNames[rect];
itemTexture = itemTextures[rect];
If getRectangle does indeed just 'get a rectangle' & not set anything.
I think the bigger issue at hand is this, why oh why do you HAVE to do this during run-time, in a situation when this can't take more time? This IS an expansive operation, no matter how much you optimize this you will probably end up with it taking about 40ms or similar when done in AS3.
This is why these kind of operations should be done during compile time or during "loading screens" or other "transitions" when frame-rate is not critical and when you can afford it.
Alternatively create another system in c++ or some other language which can actually handle the number-crunching that gives you the finished result.
Also, when it comes to checking performance, yes the entire function takes 53ms, BUT, where are those milliseconds used? 53ms says nothing and is only the "overhead profiling thing" where you found the culprit, you need to break it down into smaller chunks to gather some reliable information about what it is that ACTUALLY takes time, inside that function.
I mean, inside that function, you have 3 for loops, several calls to other classes, casts, deletes, creations. It's not like you are doing one thing, that function probably results in ~500 lines of code and a bazillion cpu operations. And, you have no idea where it is used. I would guess that it is the rectanglePacker.packRectangles(); that takes 60% of that time, but without profiling, you and we don't know on what to optimize, we simply don't have sufficient data.
If you HAVE to do this during run-time in AS3, I would recommend doing this spread out during several frames and distributing workload evenly during 10 frames or so. You could also doing it with help of another thread and workers. But most of all, this seems like a design error since this could probably be done at another time. And if not, then in another language which is better at these kind of operations.
The easiest way to profile this is to add a couple of timestamps similar to:
var timestamps:Array = [];
And then push getTimer() at different places in code, and then print them out when function is done
As others said, it's unlikely that the reason of bad performance is non-optimized AS code. Output from the profiler (Scout, for example) wold be very helpful. However, if your purpose is just adding new textures, I can suggest several optimizations:
Why would you need to re-generate the whole atlas every time (calling Assets.getTextures() and creating new render texture)? Why don't you just add new items to the existing atlas? Creation of a new RenderTexture (and, thus, a new texture in GPU memory) is very costly operation, because it requires sync between CPU and GPU. On the other hand, drawing into RenderTexture is carried out entirely inside GPU, so it takes much less time.
If you place every item on a grid, then you can avoid using RectanglePacker as all of your rectangles can have the same dimensions matching the dimensions of a grid.
Edit:
To clarify, some time ago I had a similar problem: I had to add new items to the existing atlas on a regular basis. And the performance of this operation was quite acceptable (about 8ms on iPad3 using 1024x1024 dynamic texture). But I used the same RenderTexture and the same Sprite object that contained my dynamic atlas items. When I need to add a new item, I just create new Image with desired texture (stand-alone or from another static atlas), then place it inside the Sprite container, and then redraw this container to the RenderTexture. Similarly with deletion/modification of an item.

How to make smooth moving using as3?

I have loaded some images through XML and attached into dynamically created MovieClips named mc0,mc1,mc2...etc.
_loader.removeEventListener(ProgressEvent.PROGRESS, onLoadingAction);
count++;
var img:Bitmap = Bitmap(e.target.content);
img.cacheAsBitmap = true;
img.smoothing = true;
img.alpha = 0;
TweenLite.to(MovieClip(my_mc.getChildByName("mc"+count)).addChild(img),1, {alpha:1,ease:Quint.easeIn});
and within ENTER_FRAME handler
for (i=0; i < mc.numChildren; i++)
{
my_mc.getChildAt(i).x -= Math.round((mouseX-stage.stageWidth/2)*.006);
}
Everthing works fine. But it is shaking so that it was not looking good.
How do I achieve smooth movement?
One solution I've used is to round the (x,y) position to the closest integer. No matter that you've added smoothing to your bitmap and cached it, rounding could make it feel less choppy and way smoother.
Another thing you need to be careful is the dimensions of the images. Images that have an odd dimension won't be smoothed the same way as images with even dimensions. Check how to workaround this in my blog post Flash Smoothing Issue.
Since Flash has a variable frame rate (in the sense that it will drop frames), one shouldn't depend on the entering of a frame as a unit of action. Rather, it would be wiser to calculate the elapsed time explicitly.
For instance, in the enter frame handler:
var currentTime:Number = (new Date()).time;
for (i=0; i < mc.numChildren; i++)
{
my_mc.getChildAt(i).x -= speed * (currentTime - lastTime); // speed is in px/ms
}
lastTime = currentTime;
where you have the variable lastTime declared somewhere in a persistent scope:
var lastTime:Number = (new Date()).time;
I don't know if this addresses what you are calling "shaking", but it's at least something to consider.

mixing 2 sounds from ByteArray

I have build a mixer and save all the sequence in an array and then play it again, now I want to save the mix as an MP3, I have looked for any way to save the mix and the answer is to load the sounds as byteArrays (sound.extract) I have acomplish that but I don't really know how to store all the sounds in just one ByteArray in order to save it as MP3, I got this code just for example, loading 2 audio files and store them in separate ByteArrays, and play each sound, does any body know how to store the 2 byteArrays in just one?
var mySound:Sound = new Sound();
var sourceSnd:Sound = new Sound();
var urlReq:URLRequest = new URLRequest("Track1.mp3");
sourceSnd.load(urlReq);
sourceSnd.addEventListener(Event.COMPLETE, loaded);
function loaded(event:Event):void
{
mySound.addEventListener(SampleDataEvent.SAMPLE_DATA, processSound);
//mySound.play();
}
var mySound2:Sound = new Sound();
var sourceSnd2:Sound = new Sound();
var urlReq2:URLRequest = new URLRequest("Track2.mp3");
sourceSnd2.load(urlReq2);
sourceSnd2.addEventListener(Event.COMPLETE, loaded2);
function loaded2(event:Event):void
{
mySound2.addEventListener(SampleDataEvent.SAMPLE_DATA, processSound2);
mySound2.play();
mySound.play();
}
function processSound(event:SampleDataEvent):void
{
var bytes:ByteArray = new ByteArray();
sourceSnd.extract(bytes, 8192);
event.data.writeBytes(bytes);
}
function processSound2(event:SampleDataEvent):void
{
var bytes:ByteArray = new ByteArray();
sourceSnd2.extract(bytes, 8192);
event.data.writeBytes(bytes);
}
been working on a similar system for a while, I'll do my best to give you some direction:
Your example code is not really mixing the MP3's - it's creating 2 more sounds to playback the loaded MP3's via the SampleDataEvent. What you need to do is create just one "output" Sound file that will hold/playback the resulting mixed sound. You can easily save that data as it happens and subsequently save that file as a new WAV/MP3/what-have-you.
real/psuedo-code (read:lazy) :
output = new Sound();
output.addEventListener( SampleDataEvent.SAMPLE_DATA , mixAudio );
song1 = new Sound / load the first mp3
song2 = new Sound / load the second mp3
// a byteArray for "recording" the output and subsequent file creation
recordedBytes = new ByteArray();
either wait until both mp3's are completely loaded, or run an enter-frame to determine when both Sounds are no longer buffering (Sound.isBuffering )
when the mp3's are ready:
// numbers to store some values
var left1:Number;
var right1:Number;
var left2:Number;
var right2:Number;
// bytearrays for extracting and mixing
var bytes1:ByteArray = new ByteArray( );
var bytes2:ByteArray = new ByteArray( );
// start the show
output.play();
function mixAudio( e:SampleDataEvent ):void{
//set bytearray positions to 0
bytes1.position = 0;
bytes2.position = 0;
//extract
song1.extract( bytes1, 8192 );
song2.extract( bytes2, 8192 );
// reset bytearray positions to 0 for reading the floats
bytes1.position = 0;
bytes2.position = 0;
// run through all the bytes/floats
var b:int = 0;
while( b < 8192 ){
left1 = bytes1.readFloat(); // gets "left" signal
right1 = bytes1.readFloat(); // gets "right" signal
left2 = bytes2.readFloat();
right2 = bytes2.readFloat();
// mix!
var newLeft:Number = ( left1 + left2 ) * .5;
var newRight:Number = ( right1 + right2 ) * .5;
// write the new stuff to the output sound's
e.data.writeFloat( newLeft );
e.data.writeFloat( newRight );
// write numbers to the "recording" byteArray
recordedBytes.writeFloat( newLeft );
recordedBytes.writeFloat( newRight );
b++;
}
}
Yes - you should really cap the possible output at -1/1. Do it. This is extremely un-optimized!
Ok. so that's the easy part! The tough part is really converting the final byteArray to MP3. The audio exists within Flash as PCM/uncompressed data, MP3 is obviously a compressed format. This "answer" is already way too long and all this info I've gleaned from several very smart folks.
You can easily adapt 'MicRecorder' to be a generic Sound data recorder:
http://www.bytearray.org/?p=1858
converting to MP3 will be a bitch: Thibault has another post on ByteArray.org - search for LAME MP3.
Excellent example/resource:
http://www.anttikupila.com/flash/soundfx-out-of-the-box-audio-filters-with-actionscript-3/
Look up Andre Michelle's open source 'Tonfall' project on Google code.
Look up Kevin Goldsmith's blog and labs - he's got great example on utilizing Pixel Bender with all this madness.
hope this helps!
PS - taking a cue from Andre, the optimal length of the audio buffer should be 3072. Give it a try on your machine!
If I understand your question properly, you need read the floating point data for each sample, sum them, and write the resulting value into your new audio stream. This would give a stright 50/50 mix.
I don't have access to a machine with a compiler right now, but it should be something like this (assuming bytes1 and bytes2 are two ByteArray objects of equal length):
for (int bcnt = bytes1.size(); bcnt; bcnt--)
bytes1.setByte(bcnt - 1, bytes2.getByte(bcnt - 1) + bytes1.getByte(bcnt - 1));
Of course, you would probably want to do some sort of overflow check, but that should be enough to put you on the right track.
if you have uncompressed audio, you can just add up the values of individual array elements in your ByteArray's. But you also have to handle capping for max/min values (no overflows). Pretty sure there is nothing equivalent for mixing MP3s - so you might have to decode, mix, and encode to MP3 again.