Переверните спрайт в холсте
Я использую холст, чтобы отображать некоторые спрайты, и мне нужно перевернуть один по горизонтали (чтобы он стоял слева или справа). Однако я не вижу никакого способа сделать это с помощью 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
для рисования моих спрайтов на холсте. Единственный способ перевернуть спрайт, который я вижу, - это перевернуть/повернуть весь холст, чего я не хочу делать.
Есть ли способ сделать это? Или мне нужно сделать новый спрайт, обращенный к другому пути и использовать его?
Ответы
Ответ 1
Вы можете преобразовать контекст рисования холста, не перелистывая весь холст.
c.save();
c.scale(-1, 1);
отразит контекст. Нарисуйте свое изображение, затем
c.restore();
и вы можете снова рисовать снова. Для получения дополнительной информации см. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations
Ответ 2
Пока Гаурав показал технический способ перевернуть спрайт в холсте...
Не делайте этого для своей игры.
Вместо этого сделайте второе изображение (или сделайте ваше текущее изображение более крупным), которое является перевернутой версией листа с надписью. Разница в производительности между "перелистыванием контекста и рисованием изображения" и "просто рисованием изображения" может быть массивной. В Opera и Safari переворачивание холста приводит к рисованию, которое в десять раз медленнее, а в Chrome - в два раза медленнее. См. этот jsPerf для примера.
Предварительное вычисление перевернутых спрайтов всегда будет быстрее, и в играх эффективность холста действительно имеет значение.
Ответ 3
Используйте это, чтобы перевернуть лист спрайта
http://flipapicture.com/