CrashCodes.com

Daily Reads
Old Stuff

More JavaScript + HTML 5
Well I wanted to learn a little bit about mouse input, but I kept getting side tracked. Hereís what I came up with: Word Scramble.

When you specify a font is "10px Courier New", what does the 10px part mean? Each letter can be a different width for most fonts; so itís logical that the 10px wouldnít refer to the width. What does that leave? Well I assumed it was the height; but it didnít take long to figure out that wasnít the case either. Someone at StackOverflow came up with a way to measure the text. Itís kind of hard to draw text in the center of a rectangle if you donít know the size of the text.

So, I kinda had this idea for a game of sorts for my son (3yrs) to play. The basic idea was something where he would have to manipulate something like cards with letters laid out on the ground or something. Cards for kids have rounded corners. Itís pretty normal to see rounded rectangles all over the net. Certainly the new HTML 5 canvas element has an easy way to draw these popular shapes. Ha! Nope, but with the help of canvas.context.quadraticCurveTo() it can be done.

So I figured if the cards are just scattered all around the ground the arenít going to lay perfectly straight. So I worked with making a card rotate letter and all. I didnít understand how to rotate the canvas the way i wanted to. It took me a while to put together that I had to rotate it in conjunction with using the translate() function. Iím still not sure I completely understand it. I guess the w3c assumes you know what translate means; cuss the html 5 draft didnít help me at all with this one.

The way I understand it is that the canvas doesnít rotate around its own center like a lazy susan. The canvas rotates around its top left corner. So if you have a piece of paper and you put it on the table, then you put your finger on the top left corner of the paper with one hand, then spin it with your other hand its kinda the same thing. So what translate() seemed to do was to change where that top left corner of the canvas was. Err.. Well kinda. You still get the same rectangular area on the page. The coordinate system is just different which changes how rotate rotates.

So I was struggling with translate and rotate so I started drawing more than one rectangle. I had one stationary as a marker of sorts while I attempted to make the other spin. I later used the stationary one to help me position the letter. Itís not easy to judge how a letter is misaligned within a spinning rectangle.

When I put the letter inside the rotating rectangle it started to wobble. There was some division used to calculate where the letter should be drawn. I guess depending on what the browser feels like doing with half numbers it may make a different decision when drawing the same letter at the same coordinates. So for example if I did fillText("A", 100, 100.5) the first call may have the "A" drawn at 100, 100. The second time it may draw it at 100, 101. Honestly it seemed to be wobbling by more than one pixel. I solved the wobble problem by using Math.round() on the division used to place the letter. Yeah, that hole wobble nonsense had me scratching my head for a while.

I eventually overlapped the stationary rectangle with the rotating one to confirm it was really rotating in place. It looked kinda cool. I thought hey this would be a good way to indicate that the card is selected or something. I just kept building on that concept to get the sets of counter rotating circles.

At some point I decided to ditch the misaligned cards idea.

Thereís more Iíd like to share about my findings with this little project, but Iíll save that for another time.
My look at HTML 5
So I looked at some HTML 5 with JavaScript recently. I just wanted to see what the fuss was about. The first thing I did was to animate Ryu.


Next I wanted to make something move a little bit, so I made this bounce thingy. I looked at transparent Images. I didnít see any special handling for them with the canvas. I got to play with Gimp a little bit to make it happen.


Then I kicked it up a notch with Fight Face. I started to fall in love with my own creation so I kept tweaking it a little, then a little more, then a little more. My wife says it is boring, but whatever. Hereís what Iíve learned so far.

  • Firefox and Chrome draw fonts way different with context.fillText(). Chromeís is nearly unreadable. Iím probably doing it wrong.

  • Drawing a bitmap on the canvas 1024x768 scaled down to 800x600 every frame can cause lag.

  • Semi-transparency still looks cool. (context.globalAlpha) If using transparency be sure to context.clearRect() every time you want to re-draw.

  • Image objects have an onload event that will be executed when the image file has been downloaded. I donít think is anything special to HTML 5, but I hadnít worked with images this way before so itís worth a mention.

  • Audio objects unlike Image objects do not have an onload event. In FireFox they get an oncanplaythrough event that doesnít seem to be the case in Chrome.

  • There is no common audio file type supported among the major browsers.

  • Even though I have it set to execute the "game loop" at about 30 times per second with setInterval(), it seems much slower.



Here are some other things I learned that have little to do with HTML 5.

  • Use the console in firebug to set variables to help with debugging.

  • I canít just drop files onto my godaddy web server (ftp) and expect them to be served up (http). The web server has to know about the MIME type. The only way I see to configure this is the web.config file. Initial attempts didnít work. Iíve submitted an upgrade to IIS 7, it seems to have resolved the issue.
Misc Stuff (mostly media)
So the video from the Be Aggressive post was broken. Let's see how long this one lasts:
Baby Cakes - Role Play Tournament (Be Aggressive)

I saw an AD for Bayonetta on TV. I thought it was pretty cool, but then I realized it was the music that I was into. Check this out:
La Roux - In for the kill (Let's get ravey remix by Skream)

I downloaded the Bayonetta demo for XBox 360. It was really fun. The combos are insane. I wonder if the PS3 version looks any better.

Last night I watched a foriegn movie on netflix called Man, Woman, and a Wall. If you liked the anime Welcome to the NHK! you'd probably like this movie. It's short, and the two girls that play Satsuki are beautiful.
MTGO Pricer Done
So the short of it is that I haven't touched the MTGO Pricer in some time. Ottobot is not supplying pricing anymore. With the recent decisions by Wizards, I'm just not that interested in the game anymore either.