RemoveEventListener added with bind - Easy

In html5 canvases, when you add an event listener to something, it persists even if the movie clip is no longer on the stage. This causes two problems:

1) This takes up memory because the memory will hold on to the movie clip as long as it still has event listeners. Not just for movie clips on previous frames, but also if you are dynamically adding and removing clips - they will never go away, and your animation will gradually (or quickly) grind to a halt.

2) You an accidentally add multiple listeners to movie clips, e.g. when adding a mouseup event after a mousedown event, which you might do for dragging a movie clip. This could lead to contradictory or exaggerated responses, as well as taking up memory.

You can check if movieclips have event listeners before adding them with 'hasEventListener' (pass the event), and remove event listeners with 'removeEventListener' (pass the event, and the function).

This won't work if you have used the bind function to control the scope of the function. You have to pass the bound version that was originally given. If you are adding the function to multiple movieClips, creating a variable for each bound function could get messy. One way around this is to get each movieClip to store it's own bound functions.

See the example below:

------------------------------

1    this.tempFunction = function(e) {
2        console.log('click');
3        this.removeEventListener('click',this.ck);
4    }
5
6    this.btn.addEventListener('click',this.btn.ck = this.tempFunction.bind(this.btn));

------------------------------

You should find that the first time you click the button, a message 'click' comes up in the console (Ctrl+Shift+i in Chrome), and then it stops responding.

6: This line adds an event listener to the button (this.btn), that will respond to a click. The function called in response to the click is this.tempFunction, and bind is used so that the tempFunction works from the perspective (or scope) of the button. 

This part: "this.btn.ck = this.tempFunction.bind(this.btn)" simultaneously passes a function that should respond to the event and assigns it to a variable at the same time, and this variable (this.btn.ck) belongs to the button (this.btn).

1: This line declares the function that will respond to the click event of btn.

3: Remember that when this function is called, it will run from the scope of the btn, so when the event is removed, we can pass it 'this.ck', because from the btn scope, that is how to refer to the function that was referred to in line 6.

WARNING: removeEventListener won't tell you if it doesn't work, i.e., if it can't find the event you are trying to remove, so check the event has really been removed.

Getting the position of a character in a text object in CreateJS

 For those of us who are accustomed to Flash, if we wanted to know the exact x,y coordinates of a character in a textbox, using AS3, we could use the getCharBoundaries function, which if I remember correctly, would return a Rectangle object with the x, y, width and height... I think? The point is, there was a built-in method to do it.

Such a function does not exist in CreateJS (or I couldn't find one).

I was trying to make a little missing-words-type activity, and I wanted users to select the word they were dealing with (could this have been done in HTML with less bother? Probably, I dunno) - so I needed to make a button that would go behind the part of the textbox where the specific word was created.

When I saw that CreateJS did not have an equivalent of the getCharBoundaries function in AS3, I was ready to give up and try an alternative approach. But then I remembered that there are monospaced fonts such as Courier New, that we use in biosciences so that DNA and protein sequences are easy to read. If I used one of those (please skip to the code excerpt(s) below if you aren't interested in the evolution of this, I just really enjoyed this little problem-solving journey, personally), I reasoned, then as long as I knew where the text started, I might be able to figure out the location of each letter, though working out where the line breaks were would be a pain.

On the stage, I manually measured the width of each letter (I realised later a better way of doing this, see below) at 21.6px in the font and size I was using. I used this letter width and the index of the character in the text to position a movieclip relative to the text area.

There were two empty movieclips on stage, the one on top (loadIt) was for loading the dynamic text, the one underneath (loadItBtn) was for loading the buttons.

It went something like this (just focusing on how to deal with a single line first):

tx = new createjs.Text('Hello _____.''36px Courier New','black');
this.loadIt.addChild(tx);

this.letterWidth = 21.6;//I measured this on the stage manually...blech
for(i=6; i<11; i++) {
	btn = new lib.btnMC();//this is just a rectangle made to match the height of the line, and the width of the letters.
	btn.x = i * this.letterWidth;
	this.loadItBtn.addChild(btn);
}

So, some useful functions: tx.getMeasuredWidth() could tell me how wide the text area was, as I was using short paragraphs. I would then use tx.lineWidth, to set how wide I wanted the text area to be, which would cause word wrapping. I would then use tx.getMeasuredHeight() to find out the height of the text area so I could position it on the canvas (you can use a function to get or set your lineHeight).

However, what if the text ends up with multiple lines? Enter (drumroll) getMetrics()!

This function will give you an array, called 'lines', which tells you what text is in each line! So I wrote a loop to check whether the index of the character in the text could be found in the line of the array. Then adjusted the y coordinate of the buttons I was adding based on that. Then I had to remember to figure out what the index of my character was in the line of the text, and use that as the x coordinate.

I won't go into all the details, but if you use console.log(text_name.getMetrics());, you can see the output for yourself in the console.

ISSUES:

1) Using scaleX to size an mc to match the word width did not work for me, it doesn't seem to be very accurate. I dealt with this by making a movieclip that was the perfect size and adding it multiple times, but a better solution would have been to draw a rectangle of the correct size.

2) Measuring the letter width manually is a pain, but manageable because you only need to do it once, but then you have to stick to that font size. I realised later that you could write a function to create a text area, add some text and measure the width to calculate the width of a single letter. Then I realised that actually, you could do this for any font! You'd have to make sure you measured every type of letter you were planning to use, and punctuation, but you could easily create an object that stores the widths of the characters you are using. Easily-ish. But basically, it means that you could work out the position of letters in text areas, and such a function would require some alteration if the text was left-, centre- or right-justified, and it would probably only shorten your life-span by a few years... But, yeah, doable.

You can see an example of what I was aiming for here: Missing words exercise

Have a nice day!