zoukankan      html  css  js  c++  java
  • MMORPG programming in Silverlight Tutorial (5)Implement the sprite’s 2D animation (Part II)

        Another method to implement the sprite’s 2D animation is called Image Clipped.

        Let’s join all the 8 small pictures in to one large picture, the new dimension is 1200*150, as follows:

    image

        From left to right, we can see the sprite’s complete animation. Let’s copy this picture into the project and set its Build Action to “Content”, and set its Copy to Output Directory to “Copy if newer”.

    image

        Then I can write some code to clip this large picture, as follows, I use Image’s Cilp property to clip small image in different position as the frame increased, and then I use Image’s RenderTransform property to move the clipped image from right to left by different value as the frame increased too.

    public partial class MainPage : UserControl
    {
        private int count = 1;
        private Image sprite;
    
        public MainPage()
        {
            InitializeComponent();
    
            sprite = new Image()
            {
                Width = 1200,
                Height = 150
            };
    
            Carrier.Children.Add(sprite);
    
            //init DispatcherTimer
            DispatcherTimer dispatcherTimer = new DispatcherTimer();
            dispatcherTimer.Tick += dispatcherTimer_Tick;
            dispatcherTimer.Interval = TimeSpan.FromMilliseconds(150);
            dispatcherTimer.Start();
        }
    
        void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            sprite.Source = new BitmapImage(new Uri(@"/Images/Role/sprite.png", UriKind.Relative));
    
            sprite.Clip = new RectangleGeometry()
            {
                Rect = new Rect(count * 150, 0, 150, 150)
            };
    
            sprite.RenderTransform = new TranslateTransform()
            {
                X = -count * 150
            };
    
            count = count == 7 ? 0 : count + 1;
        }
    }

        OK, press Ctrl+F5, you will find the sprite can run now, the effect is the same as the previous chapter.

    image

    Summary: This chapter introduce how to implement object’s own animation. Instead of use many small pictures, we compose all of them into one large picture, and we use Image’s Translation technique to create animation.

        Next chapter, I will introduce 3rd method to implement the same animation effect as the one in this chapter, I still use large picture, but I will use WriteableBitmap to cut the picture. Please focus on it.

        Chinese friend, you can also visit this Chinese blog if you feel difficult to read English, http://www.cnblogs.com/alamiye010/archive/2009/06/17/1505346.html, part of my article is base on it.

        Demo download: http://silverlightrpg.codeplex.com/releases/view/40978

  • 相关阅读:
    COCOS2D-X中UI动画导致闪退与UI动画浅析
    使用cocos2d-x3.4结合cocos2.1.5制作小游戏《亲亲小熊》
    algorithm 学习之 for_each
    cocos2dx 3.2 Touch Listen和menu回调实现截屏
    Lua 中string.gsub(sourceString, pattern, replacementString) 返回值有两个
    python 装饰器模式 我的理解
    Https SSL Knowledge & how to get a self-signed certificate on ubuntu.
    公钥和私钥的理解
    Openwrt UCI 快捷切换SS 配置
    iptables ipset 实用命令
  • 原文地址:https://www.cnblogs.com/Jax/p/1673899.html
Copyright © 2011-2022 走看看