<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d13405220\x26blogName\x3dPavan+Podila\x27s+Blog\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://pavanpodila.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://pavanpodila.blogspot.com/\x26vt\x3d-3240902251102105728', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe", messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER, messageHandlers: { 'blogger-ping': function() {} } }); } }); </script>

Thursday, February 23, 2006

Animations ready for Polarium clone

Today was the day to have fun with animations. There are couple of animations that are there in the game:
  1. Hilighting the current tile
  2. Translating the current tile to the new position
  3. Showing the level clear messages
All of these were created inside Expression Interactive Designer (EID) using the Timelines. Well not entirely. Since EID doesn't allow creating timelines for anonymous controls, I had to go back to XAML to make some modifications. The reason I needed this was because I wanted to make generic animations rather than tying to a particular control. I made a posting on EID forums on this issue/feature-request. Although these animations are far from creating the *WOW* effect, its an intial draft for getting the feature in place :)

Beside animations, I also added some graphics for the Level Cleared, Try-Again messages. These show up when the user double clicks the current tile to flip all the tiles. At that point if all the tiles in a row are of the same color (not the gray tiles), then the "Clear!" message comes up. Otherwise the "Try Again" message is shown. You can click to get back to the game.

Now, time for some screenshots:

1. Main App when you open up


2. Loading the level file

3. Level file loaded (How am I getting that weird violet color? Should be yellow!)

4. Current tile animation (translation) [Weird colors again!]


5. Level not cleared
6. Level cleared

Now I should take care of error handling and try to polish the UI. There is still one major glitch with resizing the window; the right hand side of the tile gets clipped. Got to be pixel-perfect :)