Модернизируйте свою HTML5 Canvas Game

Использование плавной анимации

Теперь, когда мы обрабатываем несколько разрешений с помощью простой операции масштабирования, было бы неплохо воспроизвести плавный переход, когда пользователь изменяет размер окна. Также было бы здорово сыграть классную анимацию, пока загружается каждый уровень. Для этого мы будем использовать инструменты CSS3 Transitions и CSS3 3D Transforms. На большинстве платформ аппаратное ускорение обеспечивается графическим процессором.

Анимация каждого изменения, внесенного в свойства стиля Canvas

CSS3 Transitions прост в использовании и обеспечивает плавную, эффективную анимацию. Чтобы узнать, как их использовать, вы можете прочитать отличную статью моего коллеги, Введение в переходы CSS3 , или поиграть на нашем сайте тест-драйва в Internet Explorer, Hands On: переходы .

 #platformerCanvas {
     -ms-grid-column: 1;
     -ms-grid-row: 1;
     -ms-grid-column-align: центр;
     -ms-grid-row-align: центр;

     -ms-transition-property: all;
     -ms-transition-duration: 1 с;
     -ms-transition-timer-function: легкость;
 }

Холст с идентификатором « platformerCanvas » теперь будет автоматически отражать любые изменения, внесенные в его свойства стиля в анимации за одну секунду, созданной функцией замедления. Благодаря этому новому правилу изменение размера окна браузера уменьшает / увеличивает размер холста с плавной анимацией. Мне нравится эффект, который он производит — все только с 3 линиями CSS.
Примечание: я также добавляю различные префиксы (-moz, -webkit и -o для Mozilla, WebKit и Opera соответственно) для совместимости. Вы захотите не забыть сделать то же самое.

Создание крутой анимации между каждым уровнем

Теперь я хотел бы использовать CSS3 3D-преобразования, чтобы временно пропустить холст. Это будет сделано с анимированным поворотом на 90 градусов по оси Y. Я загружу следующий уровень, как только анимация повернется на 90 градусов и вернется в исходное положение (повернутый на ноль градусов). Чтобы лучше понять эффект, вы можете поиграть с нашими Hands On: 3D Transforms на сайте тест-драйва в Internet Explorer:

Мы также собираемся поиграть со свойствами scale и rotateY, чтобы создать забавную анимацию. Для этого я добавляю два правила CSS и нацеливаюсь на два класса:

 .moveRotation
 {
     -ms-transform: перспектива (500px) масштаб поворота Y (-90 градусов) (0,1);
     -webkit-transform: перспективный (500px) масштаб (0);
     -moz-transform: перспективный (500px) масштаб rotateY (-90deg) (0,1);
 }

 .initialRotation
 {
     -ms-transform: перспектива (500px) масштаб rotateY (0deg) (1);
     -webkit-transform: перспективный (500px) масштаб (1);
     -moz-transform: перспектива (500 пикселей) rotateY (0 градусов) масштаб (1);
 }

Во-первых, мой холст имеет установленный класс initialRotation:

  <canvas id = "platformerCanvas" width = "800" height = "480" class = "initialRotation"> </ canvas> 

Теперь идея состоит в том, чтобы подождать, пока игрок не побьет текущий уровень. Как только это будет сделано, мы изменим класс холста с initialRotation на moveRotation . Это автоматически вызовет CSS3-переходы, которые мы установили ранее, для создания анимации.

Чтобы узнать, когда закончится анимация, возникает событие. Он называется по-разному в каждом браузере. Вот код, который я использую для регистрации события и нацеливания на IE10, Firefox, WebKit и Opera:

 // Регистрация в разных браузерах поставщиков end end события
 PlatformerGame.prototype.registerTransitionEndEvents = function () {
     // IE10, Firefox, Chrome & Safari, Opera
     this.platformerGameStage.canvas.addEventListener ("MSTransitionEnd", onTransitionEnd (this));
     this.platformerGameStage.canvas.addEventListener ("transitionend", onTransitionEnd (this));
     this.platformerGameStage.canvas.addEventListener ("webkitTransitionEnd", onTransitionEnd (this));
     this.platformerGameStage.canvas.addEventListener ("OTransitionEnd", onTransitionEnd (this));
 };
 И вот код, который будет перезвонить:
 // Функция вызывается после завершения перехода
 // Затем загружаем следующий уровень
 function onTransitionEnd (instance) {
     return function () {
         if (instance.loadNextLevel === true) {
             instance.LoadNextLevel ();
         }
     }
 };

Наконец, вот код для моей игры, который устанавливает класс moveRotation на холсте:

 // Выполнить соответствующее действие для продвижения игры и
 // чтобы вернуть игрока к игре.
 PlatformerGame.prototype.HandleInput = function () {
     if (! this.wasContinuePressed && this.continuePressed) {
         if (! this.level.Hero.IsAlive) {
             this.level.StartNewLife ();
         }
         иначе если (this.level.TimeRemaining == 0) {
             if (this.level.ReachedExit) {
                 // Если поддерживается переходы CSS3
                 // Мы используем плавные и приятные эффекты между уровнями
                 if (Modernizr.csstransitions) {
                     this.loadNextLevel = true;
                     // Установка класса moveRotation вызовет переход css
                     this.platformerGameStage.canvas.className = "moveRotation";
                 }
                 // Если переход CSS3 не поддерживается, мы переходим напрямую
                 // на следующий уровень
                 еще {
                     this.LoadNextLevel ();
                 }
             }
             еще
                 this.ReloadCurrentLevel ();
         }
         this.platformerGameStage.removeChild (statusBitmap);
         overlayDisplayed = false;
     }

     this.wasContinuePressed = this.continuePressed;
 };

Обратите внимание, что я использую Modernizr для определения функций переходов CSS. Наконец мы возвращаем класс initialRotation внутри функции LoadNextLevel:

  // Загрузка следующего уровня 
 PlatformerGame.prototype.LoadNextLevel = function () {
     this.loadNextLevel = false;
     // Сброс класса initialRotation вызовет переход
     this.platformerGameStage.canvas.className = "initialRotation";
     // ... loadNextLevel логика ...
 }; 

Примечание. Возможно, вы заметили, что я не устанавливаю те же преобразования (и анимацию) для WebKit, что и для IE10 и Firefox в моем предыдущем блоке CSS. Это связано с тем, что в моем случае Chrome не будет вести себя так же, как IE10 и Firefox 11. Я установил простой случай воспроизведения на jsFiddle .

Демо-видео и URL

Вот короткое видео, демонстрирующее функции IE10, описанные в этой статье:

Вы также можете поиграть с этой демонстрацией в IE10 или в вашем любимом браузере здесь: Современный HTML5 Platformer .

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