Спрайтовая анимация

Назначение переменных, используемых в программе, указано в листинге. При нажатии на кнопки-стрелки вверх и вниз спрайт перемещается в соответствующем направлении. При нажатии клавиш-стрелок влево и вправо спрайт так же перемещается в соответствующих направлениях, однако, вместе с изменением его координат по оси X модифицируется и переменная rotate, которая задает угол поворота спрайта.

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

Параметр origin задает начало координат для спрайта. По умолчанию координата позиции спрайта соответствует его левому верхнему углу. Относительно левого верхнего угла, в таком случае, осуществляется и вращение спрайта. Для того, чтобы вращение происходило вокруг центра спрайта мы записываем в переменную Origin результат от деления длины и ширины спрайта на 2. В итоге спрайт, во-первых, выводится на экран с учетом нового для него начала координат, а во-вторых – при вращении спрайта оно осуществляется вокруг центра спрайта, а не вокруг его левого верхнего угла. Рассмотрим подробнее команду Draw, которую мы использовали для вывода спрайта на экран. В табл. 10.1. описан каждый из ее параметров.

На рис. 10.1. вы можете видеть игровой экран проекта P6_1.

Теперь рассмотрим анимацию спрайтов.

Анимация спрайтов

Для того, чтобы создать анимированный спрайт, нужно подготовить подходящий исходный материал. Как правило, исходные файлы для анимированных спрайтов включают в себя несколько последовательно расположенных изображений. Каждое из этих изображений представляет собой отдельный кадр анимации. Задача создания анимированных спрайтов заключается в разработке механизма, который позволит менять изображения с определенной скоростью.

Создадим спрайт, который будем анимировать. Мы использовали для анимации спрайт, состоящий из двух изображений (рис. 10.2.). При его анимации будет создан эффект мигания – черный цвет будет сменяться зеленым.

Создадим стандартный игровой проект, назовем его P6_2. В листинге 10.2. приведен код класса Game1. В этом проекте мы обошлись без создания дополнительных игровых компонентов, реализовав всю необходимую функциональность в основном игровом классе.

using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

namespace P6_2
{
    /// <summary>
    /// This is the main type for your game
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Texture2D texture;
        //Количество кадров в изображении
        const int frames = 2;
        //Частота анимации - кадров в секунду
        const int framesPerSec =10;
        //Текущий кадр для вывода на экран
        int numberOfFrame=0;
        //Время, в течение которого отображается один кадр
        float timePerFrame;
        //Время, которое прошло с начала отображения текущего кадра
        float totalElapsed;
        //Позиция вывода спрайта
        Vector2 position;
        //Прямоугольник для задания позиции кадра в изображении
        Rectangle sprRec;
        //Ширина кадра
        int widthFrame = 64;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            position = new Vector2(100, 100);
            //Время для одного кадра вычисляется как результат деления 1 секунды
            //на заданное количество кадров в секунду
            timePerFrame = (float)1 / framesPerSec;
            sprRec = new Rectangle(0, 0, 64, 64);

            base.Initialize();
        }

        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
            texture = Content.Load<Texture2D>("animation");

            // TODO: use this.Content to load your game content here
        }

        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }
        //Эта процедура используется для анимации спрайта
        //Она принимает количество секунд, прошедших с предыдущего вызова
        //процедуры Update
        void ChangeFrame(float elpT)
        {
            //Увеличим общее время отображения спрайта на
            //время, прошедшее с последнего вызова процедуры
            totalElapsed += elpT;
            //если общее время отображения спрайта больше времени,
            //выделенного на один спрайт
                if (totalElapsed > timePerFrame)
                {
                    //Если номер кадра равен количеству кадров-1
                    if (numberOfFrame == frames-1)
                    {
                        //установим номер кадра в 0
                        numberOfFrame = 0;
                    }
                        //иначе увеличим номер кадра на 1
                    else numberOfFrame++;
                    //создадим новый прямоугольник
                    //Его координата X соответствует координате левого верхнего угла
                    //кадра, Y равно 0, длина и ширина всегда равны 64
                    sprRec = new Rectangle((int)widthFrame * numberOfFrame, 0, 64, 64);
                    //сбросим totalElapsed в 0
                    totalElapsed = 0;
                }
         
        }

        protected override void Update(GameTime gameTime)
        {
            //Вызов процедуры анимации спрайта
            //в качестве параметра передается время,прошедшее после
            //последнего вызова Update
            ChangeFrame((float)gameTime.ElapsedGameTime.TotalSeconds);
            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
            spriteBatch.Begin();
            spriteBatch.Draw(texture, position, sprRec, Color.White);
            spriteBatch.End();
            base.Draw(gameTime);
        }
    }
}

Если кратко описать последовательность работы этого проекта, получится следующее: в цикле Update() мы вызываем процедуру ChangeFrame(), которой передаем время, прошедшее после последнего вызова Update(). Внутри этой процедуры мы проверяем, достаточно ли времени текущий кадр отображался на экране, и если его время вышло – меняем на следующий.

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

Для применения подобного приема на практике лучше всего включить код анимации спрайтов в код игровых компонентов.

Рассмотрим анимацию фона, в частности – создание фона со скроллингом.

Основа симулятора автогонок

Существует класс двумерных игр, в которых применяется фон со скроллингом. Такой фон позволяет создать имитацию движения объекта. Обычно применяют горизонтальный или вертикальный скроллинг фона. В вертикальном варианте фон перемещается сверху вниз или снизу вверх, имитируя движение в соответствующем направлении. В горизонтальном варианте фон обычно перемещается справа налево, имитируя движение вправо.

Разработаем текстуру, подходящую для фона. В нашем случае это будет полотно дороги, которая и нужна нам для имитации движения. На рис. 10.3. вы можете видеть соответствующее изображение. Мы создали изображение размером 400х600 пикселей – оно будет символизировать дорогу, и соответствующим образом "разметили" его.

Идея скроллига фона заключается в следующем. Мы будем использовать два игровых объекта, символизирующих фон. Каждый из них в отдельности может выводить спрайт, изображенный на рис. 10.3. Выведем на экран первый объект и будем смещать с необходимой скоростью сверху вниз. Вслед за первым объектом будем смещать сверху вниз второй объект – таким образом мы получим иллюзию "бегущей" дороги, и неподвижный объект автомобиля, расположенный на этой дороге, будет "двигаться" по ней снизу вверх. Причем, если наделить этот объект возможностью перемещаться – при его перемещении вверх будет создаваться иллюзия ускорения, при перемещении вниз – торможения.

Создадим новый игровой проект, P6_3. Возьмем за основу проект P2_2 – управление спрайтами будет вестись из основной программы, а данные спрайтов будут храниться в отдельных объектах – класс для их хранения будет носить имя sprite.

В листинге 10.3. приведен код класса sprite – он хранит данные спрайта.

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework;

namespace P6_3
{
    class sprite
    {
        public Texture2D spTexture;
        public Vector2 spPosition;

        public sprite(Texture2D newSpTexture, Vector2 newSpPosition)
        {
            spTexture = newSpTexture;
            spPosition = newSpPosition;
        }
    }
}

В листинге 10.4. приведен код класса Game1, реализующий функциональность по скроллингу фона.

using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

namespace P6_3
{
    
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        //объекты для создания скроллингового фона
        sprite road1;
        sprite road2;
        //скорость скроллинга
        Vector2 scrolSpeed;
        //позиции, на которые устанавливаются обе "дороги"
        //в момент начала игры и каждый раз, когда они
        //сдвинутся на определенное расстояние
        Vector2 road1Start;
        Vector2 road2Start;

        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        
        protected override void Initialize()
        {
            //скорость скроллинга - 5 пикселей по оси Y за один
            //проход цикла Update
            scrolSpeed = new Vector2(0, 5f);
            //первая "дорога" будет изначально установлена в позиции 0,0
            //вторая дорога - за пределами игрового экрана - в позиции 0,-600
            road1Start = new Vector2(0, 0);
            road2Start = new Vector2(0, -600);
            base.Initialize();
        }

        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
            //создаем игровые объекты
            road1  = new sprite(Content.Load<Texture2D>("road"), road1Start );
            road2 = new sprite(Content.Load<Texture2D>("road"), road2Start );


        }

        
        protected override void UnloadContent()
        {
            road1.spTexture.Dispose();
            road2.spTexture.Dispose();
            spriteBatch.Dispose();

        }

        protected override void Update(GameTime gameTime)
        {

            //если первая "дорога" не спустилась ниже, чем координата 0,600
            //то есть все еще видна на экране
            //тогда переместить обе "дороги" на дистанцию, задаваемую
            //в scrolSpeed
            if (road1.spPosition.Y < 600)
            {
                road1.spPosition += scrolSpeed;
                road2.spPosition += scrolSpeed;
            }
            else
            {
                //если первая дорога ушла за пределы видимости
                //это означает что вторая полностью выведена на экран
                //вычислим новую позицию для установки объектов
                //для того, чтобы не было скачков при установке 
                //предварительно вычислим новую позицию
                road1Start.Y = road1.spPosition.Y - 600;
                road2Start.Y = road2.spPosition.Y - 600;
                road1.spPosition = road1Start;
                road2.spPosition = road2Start;
            }

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

            spriteBatch.Begin();
            //выведем первый и второй спрайт на экран
            spriteBatch.Draw(road1.spTexture, road1.spPosition, Color.White);
            spriteBatch.Draw(road2.spTexture, road2.spPosition, Color.White);
            spriteBatch.End();
            // TODO: Add your drawing code here

            base.Draw(gameTime);
        }
    }
}

На рис. 10.4. вы можете видеть окно проекта P6_3.

Теперь рассмотрим горизонтальный скроллинг фона, использующий различные спрайты для создания эффекта ландшафта.

Основа игры с боковым скроллингом

В предыдущем примере мы использовали один и тот же спрайт для создания эффекта движения. Возможен и вариант использования различных изображений – их может быть сколько угодно много – для организации вертикального или горизонтального скроллинга. Как правило, с помощью различных фонов для скроллинга организуют ландшафт для платформенных игр, где герой перемещается в горизонтальной плоскости, либо – в простых авиационных симуляторах, где объект, управляемый игроком, "летит" над какой-то местностью.

Создадим фоновые изображения, которые будем использовать. На рис. 10.5. вы можете видеть их.

Создадим новый игровой проект P6_4 на основе P6_3. Класс sprite нового проекта соответствует такому же классу проекта P6_3, а вот в класс Game1 внесены существенные изменения. Код этого класса вы можете найти в листинге 10.5.

using System;
using System.Collections.Generic;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Audio;
using Microsoft.Xna.Framework.Content;
using Microsoft.Xna.Framework.GamerServices;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
using Microsoft.Xna.Framework.Net;
using Microsoft.Xna.Framework.Storage;

namespace P6_4
{
    
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        //объекты для создания скроллингового фона
        sprite back1, back2, back3, back4;
        //скорость скроллинга
        Vector2 scrolSpeed;
        //позиции, на которые устанавливаются объекты
        Vector2 back1Start, back2Start, back3Start, back4Start;


        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
        }

        protected override void Initialize()
        {
            // TODO: Add your initialization logic here
            //скорость скроллинга - 5 пикселей по оси X за один
            //проход цикла Update
            scrolSpeed = new Vector2(-5f, 0);
            back1Start = new Vector2(0, 0);
            back2Start  = new Vector2(800, 0);
            back3Start = new Vector2(1600, 0);
            back4Start = new Vector2(2400, 0);
            base.Initialize();
        }

        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
            //создаем игровые объекты
            back1  = new sprite(Content.Load<Texture2D>("b1"), back1Start);
            back2 = new sprite(Content.Load<Texture2D>("b2"), back2Start);
            back3 = new sprite(Content.Load<Texture2D>("b3"), back3Start);
            back4 = new sprite(Content.Load<Texture2D>("b4"), back4Start);
            // TODO: use this.Content to load your game content here
        }

        protected override void UnloadContent()
        {
            
            // TODO: Unload any non ContentManager content here
        }

        protected override void Update(GameTime gameTime)
        {

                //прокручиваем каждый из спрайтов влево
           
                back1.spPosition += scrolSpeed;
                back2.spPosition += scrolSpeed;
                back3.spPosition += scrolSpeed;
                back4.spPosition += scrolSpeed;

            //Если координата Х одного из спрайтов меньше
            //чем -800 - то есть этот спрайт уже "ушел" влево
            //и исчез за пределами экрана - перенести этот спрайт
            //в позицию, которую занимает четвертый спрайт, то есть - 
            //в крайнюю правую позицию.
            //Таким образом после первого прохода всех спрайтов
            //первый спрайт будет следовать за четвертым, второй за первым и т.д.

                if (back1.spPosition.X < -800)
                {
                    float f = back1.spPosition.X + 800;
                    back1.spPosition.X  = back4Start.X +f;
                }
                if (back2.spPosition.X < -800)
                {
                    float f = back2.spPosition.X + 800;
                    back2.spPosition.X = back4Start.X + f;
                }
                if (back3.spPosition.X < -800)
                {
                    float f = back3.spPosition.X + 800;
                    back3.spPosition.X = back4Start.X + f;
                } 
                if (back4.spPosition.X < -800)
                {
                    float f = back4.spPosition.X + 800;
                    back4.spPosition.X = back4Start.X + f;
                }

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

            spriteBatch.Begin();
            //выведем спрайты на экран
            spriteBatch.Draw(back1.spTexture, back1.spPosition, Color.White);
            spriteBatch.Draw(back2.spTexture, back2.spPosition, Color.White);
            spriteBatch.Draw(back3.spTexture, back3.spPosition, Color.White);
            spriteBatch.Draw(back4.spTexture, back4.spPosition, Color.White);
            spriteBatch.End();
            // TODO: Add your drawing code here

            base.Draw(gameTime);
        }
    }
}

Особенности работы кода отражены в комментариях.

На рис. 10.6. вы можете видеть игровой экран проекта P6_4.

Задание

Разработайте собственный вариант скроллингового авиасимулятора. Используйте для анимации фона 5 изображений, представляющих собой ландшафт, над которым "летит" самолет.