Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


+ Подписаться

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

Скачать


Анимация в html 5

0

Добавил: AlexMaster

Дата: 15.09.2016


Анимация в html 5 - графика и анимация являются неотъемлемой частью любой видеоигры.

Если конечно игра не крестики нолики, не пятнашки и не тетрис, где анимация нужна по минимуму. Во всех остальных случаях анимация это фундамент для любой игры. Поэтому ниже я расскажу, как создать анимацию движения в HTML 5. Наша анимация будет состоять из спрайтов. Спрайт - это растровое изображение, какого либо объекта, например персонажа. Чтобы получилась анимация из спрайтов нужно взять например сто картинок движущегося объекта(персонажа) и объединить их вместе. Более наглядным примером может служит видео. Видео состоит из кадров. Каждый кадр видео это и есть спрайт. Многие проигрыватели поддерживают покадровую прокрутку видео. Каждый кадр видео меняется, если сделать несколько снимков экрана, а потом эти картинки объединить получится анимация движения. И так приступим к делу. Так как создать самому анимацию довольно трудоемкий процесс, то я воспользуюсь уже готовой картинкой расширением png, которую я вырезал из одной flash игры.
Для увеличения щелкните на картинке

Все файлы для работы, в том числе и исходники можно найти в папке animation. Прежде чем создавать анимацию предлагаю вам ознакомится с функцией drawImage. Я о ней писал здесь.
В листенге 1 представлен пример анимации взрыва. В начале объявляются переменные iSprPos, iSprDir.
iSprPos – номер кадра в строке (кадр начинается с 0).
iSprDir – номер строки (номер строки начинается с 0).
Например – когда в эти переменные подставляются следующие значения iSprPos = 3, iSprDir = 0, то имеется ввиду 4 спрайт, 1 строки или же если подставить другие значения iSprPos=1, iSprDir = 1, то 2 спрайт, 2 строки. Далее создаем холст и загружаем изображения. Для постоянного проигрывания анимации нужно создать функцию, которая бы вызывалась через определенное время. Для этих целей существует функция setInterval. Она принимает два значения: первое - это ваша функция, второе - это время интервала перед следующем запуском вашей функции. Так как анимация должна проигрываться достаточно быстро, то поставим интервал 30 минисекунд.
Выглядеть синтаксис будет вот так.

setInterval(drawScene, 50);

Далее следует сама функция drawScene, где мы сразу в первую очередь добавляем очистку экрана (clearRect). Чтобы изображение не дублировались. Потом ставим увеличение переменной iSprPos на единицу. Для этого достаточно записать так iSprPos++. Дальше идет проверка на конец строки, то есть проверяется, когда наступит последний кадр. Выглядеть это будет вот так.

if (iSprPos >= 6)
{
iSprPos = 0;
iSprDir++;
}

Разумеется в теле цикла, когда наступает последний кадр переменную iSprPos нужно обнулить, а переменную iSprDir увеличить на единицу. Тем самым вы перейдете на следующую строку. Далее еще одно условие, которое отвечает за проверку последнего ряда

if (iSprDir >= 3)
{
iSprDir = 0;
}

Тут то же в теле цикла нужно обнулить ряд. Теперь последнее, что нужно сделать вывести картинку на экран. Выглядеть это будет вот так.

context.drawImage(img, iSprPos*w, iSprDir*h, w, h, 0, 0, w, h);

Вот весь пример Листинг 1:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Анимация</title>
<script type="text/javascript">
var canvas, ctx, img;
var iSprPos = 0;
var iSprDir = 0;
var h = 95;
var w = 95;

window.onload = function()
{
canvas = document.getElementById("sprite");
canvas.style.background = "#000000";
context = canvas.getContext("2d");
img = new Image();
img.src = "explosion.png";
}
function drawScene()
{
context.clearRect(0, 0, context.canvas.width, context.canvas.height);
iSprPos++;
if (iSprPos >= 6)
{
iSprPos = 0;
iSprDir++;
}
if (iSprDir >= 3) {
iSprDir = 0;
}
context.drawImage(img, iSprPos*w, iSprDir*h, w, h, 0, 0, w, h);
}
setInterval(drawScene, 50);
</script>
</head>
<body>
<canvas id="sprite" width="100px" height="100px"></canvas>
</body>
</html>

Скроллинг сцены.


Во многих играх платформерах созданные на flash или HTML 5 используется скроллинг сцены или, проще говоря прокрутка сцены. Это создает иллюзию как будто персонаж движется. На самом деле персонаж стоит на месте и только у него прокручивается анимация, в зависимости от того какие кнопки нажал пользователь и идет взаимодействие с окружающим миром сцены. Например, запрыгнуть на платформу или же потянуть рычаг, чтобы открыть дверь. За всю смену обстановки при перемещении отвечает прокрутка сцены.
Рассмотрим пример, где идет постоянная прокрутка сцены. В качестве заднего фона я использовал картинку пещеры. Размер картинки 3445x1000 пикселей. Почти то же самое, что и в листинге 1, кроме функции drawScene. Здесь к переменной iBgShiftX прибавляется 7 потом идет условие где проверяются координаты картинки по x и если координаты больше 2445. То координаты обнуляются, начиная прокрутку сцены заново. Чтобы был плавный незаметный переход при прокрутки сцены, начало картинки должно быть такое же, как и конец.

iBgShiftX += 7
if (iBgShiftX >= 2445)
{
iBgShiftX = 0;
}

Последнее, что нужно сделать, это нарисовать фон.

ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 1000, 0, 0, 1000, 600);

Ниже представлен весь код. Листинг 2.

<!DOCTYPE HTML>
<html>
<head>
<title>Animation Canvas Example</title>
</head>
<body>
<div id = "result"></div>
<script>
var canvas, ctx;
var iBgShiftX = 0;

function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.style.background = "#444444";
canvas.width = 1000;
canvas.height = 600;
document.body.appendChild(canvas);

backgroundImage = new Image();
backgroundImage.src = 'images/cave.jpg';
backgroundImage.onload = function()
{
}
}

setInterval(drawScene,30);
function drawScene()
{
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
iBgShiftX += 7;
if (iBgShiftX >= 2445) {
iBgShiftX = 0;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 1000, 0, 0, 1000, 600);
}
main();
</script>
</body>
</html>

Не во всех играх платформерах прокрутка сцены осуществляется автоматически. Исключением являются платформы, где нужно управлять постоянно движущимся персонажем и принимать действия на реакцию. На ходу убивать монстров, перепрыгивать обрывы и ловушки. Один неверный шаг и герой погибает. Примером такой игры служит принц Персии. Правда, она сделана на flash. Во всех остальных случаях прокрутка заднего фона осуществляется с помощью кнопок клавиатуры. Я писал, как сделать управление с помощью клавиатуры в этой статье.
Весь код перемещении, сцены с помощью клавиатуры находится в Листинге 3.
В функции main создается холст, и загружается картинка. Для события keydown будет использовано всего две клавиши лево код 37 и право код 39. Функция background отвечает за бесконечный цикл в котором запускается функция update. При нажатии кнопок в функции update идет проверка, после чего переменной iBgShiftX прибавляется или отнимается 7. Остальные условия проверяют на конец и начало фона по x координат. Если пользователь дошел до конца фона, то его перебрасывают в начала. Так же если пользователь дошел до начала фона, то его перебрасывают в конец.
Пример Листинг 3:

<!DOCTYPE HTML>
<html>
<head>
<title>Animation Canvas Example</title>
</head>
<body>
<div id = "result"></div>
<script>
var canvas, ctx;
var iBgShiftX = 0;
keystate = {};
var LeftArrow = 37, RightArrow = 39;

function main()
{
canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.style.background = "#444444";
canvas.width = 1000;
canvas.height = 600;
document.body.appendChild(canvas);
backgroundImage = new Image();
backgroundImage.src = 'images/cave.jpg';
backgroundImage.onload = function()
{
}
background();
document.addEventListener("keydown",function(evt)
{
keystate[evt.keyCode] = true;
});
document.addEventListener("keyup",function(evt)
{
delete keystate[evt.keyCode];
});
}


function background()
{
var loop = function()
{
update();
window.requestAnimationFrame(loop, canvas);
}
window.requestAnimationFrame(loop, canvas);
}

function update()
{
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

if(keystate[LeftArrow]) iBgShiftX -= 7;
if(keystate[RightArrow]) iBgShiftX += 7;

if (iBgShiftX >= 2445) {
iBgShiftX = 0;
}
if (iBgShiftX < 0) {
iBgShiftX = 2445;
}
ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 1000, 0, 0, 1000, 600);
}
main();

</script>
</body>
</html>

Звуковое сопровождение.


И какая же игра обходится без звукового сопровождения. В любой игре есть музыка или звуки в зависимости от окружающей среды. Так как у нас сырая холодная пещера, то и звуки у нас будут капли воды.
Для загрузки звука используется специальный класс Audio который принимает значение путь к файлу со звуком. Добавьте в функцию main после события управление стрелками следующие код.
Листинг 4.

water = new Audio('sounds/water.wav');
water.volume = 0.9;
water.addEventListener('ended', function()
{
this.currentTime = 0;
this.play();
}, false);
water.play();

Звук должен находится в папке sound. Для проигрывание звука используется событие addEventListener.
ended – возвращает значение true если видео было воспроизведено до конца.
currentTime – информирует о текущей позиции звука в секундах. Так же с помощью этого параметра можно установить новую позицию звука, с которого начнется воспроизведение.
play() – функция запускает звуковой файл.
volume – переменная устанавливает громкость звука.
В нашем случае показывает, что нужно делать, когда событие завершило проигрывание звука. Установить позицию звука currentTime в точке 0 и запустить звук еще раз и так каждый раз когда, звуковой файл будет проигрываться до конца. На этом все. В исходнике, в папке анимации есть завершенный вариант звукового сопровождение. Там можно отключать звук с помощью мышки. Как сделать взаимодействие мышки на кнопке я писал здесь.

Назад

Просмотров: 271

Комментарий к этой заметки:

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

Введите капчу

 

Яндекс.Метрика