content( flash, ios, …rest );

FlashPunk. 6.Анимированные изображения.

Всем привет!

В одном из первых уроков мы добавляли графику в нашу игру используя класс Image, который представляет простое изображение. Теперь мы узнаем как сделать анимацию и будем использовать класс SpriteMap.

  1. Создание SpriteMap.
    Первое, что мы должны сделать, это создать объект SpriteMap для нашего экземпляра Entity, точно так же как мы до этого создавали объект класса Image. В нашем примере будет использоваться данное изображение:

    2010 © Tyriq Plummer

    Размер этого изображения — 288×64 пикселей, но каждый кадр имеет размер — 48×32. Мы должны знать размер отдельного кадра при создании объекта SpriteMap. В следующем примере мы создаём (если ещё не создан) класс Player и подключаем подготовленное изображение:

    package
    {
    	import net.flashpunk.Entity;
    
    	public class Player extends Entity
    	{
    		[Embed(source = 'graphic/player/swordguy.png')]
    		private const SWORDGUY:Class;
    
    		public function Player()
    		{
    
    		}
    	}
    }

    Следующее, что мы делаем, это создаем объект SpriteMap:

    package
    {
    	import net.flashpunk.Entity;
    	import net.flashpunk.graphics.Spritemap;
    
    	public class Player extends Entity
    	{
    		[Embed(source = 'graphic/player/swordguy.png')]
    		private const SWORDGUY:Class;
    
    		public var sprSwordguy:Spritemap = new Spritemap(SWORDGUY, 48, 32);
    
    		public function Player()
    		{
    
    		}
    	}
    }

    Итак, создание SpriteMap очень похоже на создание Image. Но поскольку SpriteMap представляет не одно изображение,  а некоторые части исходного изображения, то мы должны указывать размер отображаемого кадра, в данном случае 48 и 32.

  2. Создание анимации.
    В нашем исходном изображении имеется две различных анимации — «герой стоит» (верхний ряд) и «герой бежит» (нижний ряд). Обе этих анимации имеют длину в 6 кадров. Мы можем создать отдельную анимацию с помощью функции add():

    package
    {
    	import net.flashpunk.Entity;
    	import net.flashpunk.graphics.Spritemap;
    
    	public class Player extends Entity
    	{
    		[Embed(source = 'graphic/player/swordguy.png')]
    		private const SWORDGUY:Class;
    
    		public var sprSwordguy:Spritemap = new Spritemap(SWORDGUY, 48, 32);
    
    		public function Player()
    		{
    			sprSwordguy.add("stand", [0, 1, 2, 3, 4, 5], 20, true);
    			sprSwordguy.add("run", [6, 7, 8, 9, 10, 11], 20, true);
    		}
    	}
    }

    Здесь мы сделали две анимации, «stand» и «run». Функция add() принимает 4 параметра:
    - Name (строка)
    - Frames (массив кадров анимации)
    - Speed (количество кадров в секунду)
    - Looping (зацикленность, true или false)

    Имя анимации позволяет нам в дальнейшем к ней обращаться, когда мы хотим воспроизвести или переключить её. После имени мы должны указать набор кадров для каждой анимации. Верхний левый кадр исходного изображения имеет нулевую позицию и далее слева направо сверху вниз нумеруются все остальные кадры:

    Пример того, как располагаются кадры.

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

    package
    {
    	import net.flashpunk.Entity;
    	import net.flashpunk.graphics.Spritemap;
    
    	public class Player extends Entity
    	{
    		[Embed(source = 'graphic/player/swordguy.png')]
    		private const SWORDGUY:Class;
    
    		public var sprSwordguy:Spritemap = new Spritemap(SWORDGUY, 48, 32);
    
    		public function Player()
    		{
    			sprSwordguy.add("stand", [0, 1, 2, 3, 4, 5], 20, true);
    			sprSwordguy.add("run", [6, 7, 8, 9, 10, 11], 20, true);
    			graphic = sprSwordguy;
    		}
    	}
    }
  3. Воспроизведение анимации.
    После того как вы проделали предыдущие шаги, можно указывать объекту, какую анимацию следует воспроизвести. Это делается с помощью функции play():

    sprSwordguy.play("stand");

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

    sprSwordguy.play("stand", true);

    На этом всё, пока!

This entry was posted in FlashPunk. Bookmark the permalink.

5 Responses to FlashPunk. 6.Анимированные изображения.

  1. Василий says:

    Жду продолжения! Очень полезно.

  2. alx says:

    анимированные изображения — не совсем точно, в оригинале Animated Sprites.
    спрайтами (не в контексте флеш) также называют подготовленный для css набор изображений (например, состояния кнопки), загружаемый как одна картинка. в уроке речь идёт именно об этом…

    спасибо ещё раз за переводы, только сел за изучение движка )) из трёх кандидатов (PBE, Flixel, FlashPunk) выглядит самым многообещающим.

    кстати, если автору интересно, есть серия статей Мэтью Касперсона про ФлэшПанк:
    здесь. много интересного, например, подготовка карты…

    • zakhej says:

      Автору интересно )) Просто последние пару месяцев, как можно заметить, у меня полный завал во времени, ничего не пишу, игроделом вообще не занимаюсь, на носу диплом с довольно интересным проектом, о котором в случае позитивного исхода обязательно напишу ближе к лету :-) Т.ч. бложек пока будет пустовать… Хотя может и найду немного свободного времени на одну мини-игру которая висит в стадии проекта, чтобы её реализовать и написать небольшой отчет.

  3. Tkas says:

    Спасибо!
    Было бы очень интересно узнать про тайлы в FlashPunk!

Добавить комментарий