latest webkit build

Safari Version 3.1.1 (5525.18) vs. WebKit r34153

Both running the same UFWS development page which contains lots of canvas and javascript code (in a loop to animate).

Ep16

Episode #16 is release, getting closer to something resembling a game -- with an opponent and nifty spell graphics and all. Bumped up the update rate, which makes everything seem much smoother but also increase CPU load.
In a previous post I talked about anti-aliasing in firefox vs. safari. This turned out to be caused by the location the image was being drawn at was not an integer position. Which means the the pixels were being split across multiple pixels when rendered onto the canvas. The HTML5 specification does not really talk about this case and how it should be handled, maybe it should?

Ep15

Episode #15 is out, I completed the background on Friday, added a combat log on sat., on sunday I was rushed again to get something playable out. Players can now target things by clicking in the game and then perform actions via the buttons below the game. No spell animations yet and probably won't be until Friday. Once more of the framework is in place I'll have more time to finish update some actual gameplay with continuity between episodes, which is my ultimate goal. The flash version was nearing the point where it was strictly content development not tools and code development. CPU usage has jumped up almost double which is concerning will need to look into what is causing that.

Development shot showing the simplified collision map.

Ep14

Episode #14 introduces a newer - RPG style system that will eventually add player vs. computer combat. This means the player now has health and an available "energy" bar. The concept of failure has also been added via dying from low health points. This was the direction I have been planning to take the game.
The gameplay suffered again for this episode because I generally work on the background first and then work towards fitting the gameplay around the scene. In the end, because of the new additions, I simply ran out of time and had to push out whatever I had completed.

ufws canvas transition

My last flash version of UFWS (Episode #12) went up on Monday morning. The rest of Monday was spent transitioning all the actionscript code to javascript (and writing some notes down). Tuesday was spent finishing up and recoding some parts which basically meant cleaning up the original code a bit. The rest of the day was spent making the background and updating the three widget graphics used. I was a bit crunched for time to get some decent gameplay in unfortunately. Overall, though the transition was much smoother than I imagined; there are some things I still don't have figured out. Today Episode #13 is released and is now using the Canvas tag.

The rest of my notes:

• There are some anti-aliasing differences between the Safari on OS X and Firefox on windows - The "game-over Congrats!" image has rendered text in a PNG displays on major blurrage in firefox for some reason, on OS X this text is crisp


• no text rendering is a problem, will need to get creative when I want to display any signage (like popup menus I had in the previous flash episodes)


• No native IE 7 canvas (or SVG) support continues to sadden me.

Canvas tag a Flash killer?

I'm mid-port of my Untitled FWS project to make use of the canvas tag. Here are some notes:

• Since I'm cheap and haven't pirated Flash I use MTASC + swfmill to create my flash stuff which means my source is written in ActionScript version 2. Porting this code to javascript doesn't require a whole lot of changes.


• Performance of the canvas tag isn't bad, considering the rendering loop is coded in an interpreted language. In my case I am creating an animated scene and the canvas tag is probably (don't know for sure) redrawing the whole thing every frame; Flash would limit redraws automagically based on what parts actually changed.


• Firefox version 2.0.0.14 on OS X clearly has a very large memory leak dealing with the canvas' drawImage function that causes it to eventually crash after eating all available memory up. (This can be seen by simply setting an interval and continually drawing an image into a canvas element)Update:This appears to be just for OS X, the Windows version of Firefox 2.0.0.14 doesn't explode.


• Firefox version 3 Beta 5 has plugged the leak and decreased CPU usage overall


• Limited No text support in canvas elements in common browsers. however the HTML5 draft teases us with talk of rendering HTML and CSS into a canvas... THAT would be nice


• No real IE support means this is basically not an option -- yes, there is an emulated canvas library from google but from the CAKE demo page it sounds like it doesn't work very well.


• javascript intervals get called more regularly by Safari than their actionscript interval equivalents in my experience -- I think this is caused by some weird interaction between the flash plug-in and the safari browser


• Blend modes are available and actually work without a huge performance penalty. this is better than current SVG blend mode support which relies on filters which aren't implemented (meaning there is only source-over fallback)