Статьи

Обработка состояний анимации с помощью Starling

Февраль 2, 2019

Starling Framework — это API-интерфейс AS3, имитирующий список отображения, с одним принципиальным отличием: он использует новые функции Flash Player 11 для визуализации всего содержимого с помощью графического процессора. В этом уроке вы научитесь добавлять несколько анимаций в спрайт с помощью Starling Framework. Это предполагает базовое понимание использования спрайт-листов со Starling.

Окончательный результат предварительного просмотра

Нажмите здесь, чтобы посмотреть демо, над которым мы будем работать . Нажмите влево или вправо от обезьяны, чтобы она пошла в этом направлении; обратите внимание, как при движении он отображает анимацию ходьбы и неподвижный кадр, когда стоит на месте.

Исходный код

Все исходные файлы демо-версии (как в начальном, так и в конечном состоянии) находятся в исходной загрузке . Тем не менее, мы в основном будем работать с одним файлом, MonkeySprite.as , поэтому вот содержимое для справки:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
package
{
    import flash.utils.getTimer;
     
    import starling.animation.Juggler;
    import starling.core.Starling;
    import starling.display.MovieClip;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.textures.Texture;
    import starling.textures.TextureAtlas;
     
    public class MonkeySprite extends Sprite
    {
        private var standMovie:MovieClip;
        private var mouseX:Number = -1;
        private var lastTime:int;
        private var movieVector:Vector.<MovieClip>;
                 
        public function MonkeySprite()
        {
            var atlas:TextureAtlas = Assets.getTextureAtlas();
 
            var standFrames:Vector.<Texture> = atlas.getTextures(«monkey_1»);
            standMovie = new MovieClip(standFrames, 7 );
            standMovie.loop = true;
            addChild(standMovie);
             
            pivotX = this.width * 0.5;
            this.addEventListener(Event.ENTER_FRAME, onFrame);
        }
         
        public function onFrame(e:Event):void
        {
            if(mouseX == -1)
                return;
 
            // snap
            if(this.x <= mouseX+5 && this.x >= mouseX-5)
            {
                this.x = mouseX;
            }
            else
            {
                var timeDiff:int = getTimer()-lastTime;
                lastTime += timeDiff;
 
                if(mouseX > this.x)
                {
                    this.x += timeDiff*.15;
                }
                else
                {
                    this.x -= timeDiff*.15;
                }
            }
        }
         
        public function moveToPoint(pointX:Number):void
        {
            mouseX = pointX;
            lastTime = getTimer();
        }
    }
}

Смотреть скринкаст

Вот URL-адреса, упомянутые в видео:

Хотите больше учебников Starling?

Дайте нам знать об этом в комментариях!

33
Share: