Переверните спрайт на холсте - PullRequest
Новая
       30

Переверните спрайт на холсте

20 голосов
/ 27 октября 2011

Я использую холст для отображения некоторых спрайтов, и мне нужно перевернуть один из них горизонтально (чтобы он смотрел влево или вправо).Однако я не вижу никакого способа сделать это с drawImage.

Вот мой соответствующий код: 

this.idleSprite = new Image();
this.idleSprite.src = "/game/images/idleSprite.png";
this.idleSprite.frameWidth = 28;
this.idleSprite.frameHeight = 40;
this.idleSprite.frames = 12;
this.idleSprite.frameCount = 0;

this.draw = function() {
        if(this.state == "idle") {
            c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
            if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
        } else if(this.state == "running") {
            c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, 0, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
            if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; }
        }
    }

Как видите, я использую drawImageспособ нарисовать мои спрайты на холсте.Единственный способ перевернуть спрайт, который я вижу, это перевернуть / повернуть весь холст, а это не то, что я хочу сделать.

Есть ли способ сделать это?Или мне нужно будет создать новый спрайт, обращенный в другую сторону, и использовать его?

Ответы [ 3 ]

34 голосов
/ 27 октября 2011

Пока Гаурав показал технический способ перевернуть спрайт на холсте ...

Не делайте этого для своей игры.

Вместо этого сделайте второе изображение (или увеличьте текущее изображение), которое будет перевернутой версией листа змеи. Разница в производительности между «перелистыванием контекста и рисованием изображения» против «просто рисования изображения» может быть огромной. В Opera и Safari перелистывание холста приводит к рисованию, которое в десять раз медленнее, а в Chrome - в два раза медленнее. См. этот jsPerf для примера.

Предварительное вычисление перевернутых спрайтов всегда будет быстрее, а в играх производительность холста действительно имеет значение.

11 голосов
/ 27 октября 2011

Вы можете преобразовать контекст рисования холста, не переворачивая весь холст. 

c.save();
c.scale(-1, 1);

будет отражать контекст. Нарисуй свое изображение, тогда 

c.restore();

и вы снова можете нормально рисовать. Для получения дополнительной информации см. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

0 голосов
/ 30 апреля 2015

Используйте это, чтобы перевернуть ваш лист спрайта http://flipapicture.com/

...