Pages

Thursday, 23 June 2011

How to make dynamically generated tiles in Windows Mobile 7?

This project was inspired by the way how menu in Portal 2 game works. Portal 2 is a first-person puzzle-platform video game developed by Valve Corporation. Really interesting and very well executed. Going back to the subject when I saw Portal 2 menu in action I decided to do something similar in WM7. The whole idea is quite simple:
  1. define your area of interest e.g. a whole screen or a part
  2. make a screenshot
  3. populate WrapPanel with rectangles which contain appropriate parts of the previously created screenshot.
  4. hide your area of interest (yourUIElement)
  5. start animations
  6. perform a transition if needed 

Points 1 and 2

   1:              WriteableBitmap bmp = new WriteableBitmap((int)LayoutRoot.ActualWidth, (int)LayoutRoot.ActualHeight);
   2:              bmp.Render(yourUIElement, null);
   3:              bmp.Invalidate();
   4:              image.Source = bmp;


Point 3 and 5

   1:              for (int j = 0; j < y; j++)
   2:                  for (int i = 0; i < x; i++)
   3:                  {
   4:                      Rectangle rect = new Rectangle();
   5:                      rect.Width = (image.Source as WriteableBitmap).PixelWidth / x;
   6:                      rect.Height = (image.Source as WriteableBitmap).PixelHeight / y;
   7:                      ImageBrush brush = new ImageBrush();
   8:                      brush.AlignmentX = AlignmentX.Left;
   9:                      brush.AlignmentY = AlignmentY.Top;
  10:                      brush.Transform = new TranslateTransform() { X = i * -(image.Source as WriteableBitmap).PixelWidth / x, Y = j * -(image.Source as WriteableBitmap).PixelHeight / y };
  11:                      brush.Stretch = Stretch.None;
  12:                      brush.ImageSource = image.Source;
  13:                      rect.Fill = brush;
  14:                      wrapPanel.Children.Add(rect);
  15:   
  16:                      rect.Projection = new PlaneProjection() { RotationX = 0, RotationY = Forward ? 0 : -90, RotationZ = 0 };
  17:   
  18:                      DoubleAnimation animation = new DoubleAnimation();
  19:                      animation.From = Forward ? 0 : -90;
  20:                      animation.To = Forward ? -90 : 0;
  21:                      animation.Duration = TimeSpan.FromMilliseconds(100);
  22:   
  23:                      Storyboard story = new Storyboard();
  24:                      story.BeginTime = TimeSpan.FromMilliseconds(((i + j)) * 100);
  25:                      Storyboard.SetTarget(animation, rect.Projection);
  26:                      Storyboard.SetTargetProperty(animation, new PropertyPath(PlaneProjection.RotationYProperty));
  27:   
  28:                      story.Begin();
  29:                  }

Point 6

   1:       <toolkit:TransitionService.NavigationInTransition>
   2:          <toolkit:NavigationInTransition>
   3:              <toolkit:NavigationInTransition.Backward>
   4:                  <local:TilesTransition Forward="False"/>
   5:              </toolkit:NavigationInTransition.Backward>
   6:          </toolkit:NavigationInTransition>
   7:      </toolkit:TransitionService.NavigationInTransition>
   8:   
   9:      <toolkit:TransitionService.NavigationOutTransition>
  10:          <toolkit:NavigationOutTransition>
  11:              <toolkit:NavigationOutTransition.Forward>
  12:                  <local:TilesTransition Forward="True"/>
  13:              </toolkit:NavigationOutTransition.Forward>
  14:          </toolkit:NavigationOutTransition>
  15:      </toolkit:TransitionService.NavigationOutTransition>

No comments:

Post a Comment