How can I scale/stretch/skew a sprite from a sprite sheet with javascript?
Question
Some background: I am making a raycaster, well... was making. But I decided to change it up a bit. I started off going on creating the ray caster and decided it would be so much easier to just display an icon and stretch/skew it instead of just moving around a bunch of pixels.
My question is: How can I scale/stretch/skew a sprite from a sprite sheet with javascript?
I basically am wanting to get a 16px by 16px image from a sprite image, and position it, scale it, turn it, and skew it with javascript. How should I go about doing that?
If this helps, I was thinking about connecting three versions of that image to give it the impression of a 3D block moving around in a 3D space without actually using 3D.
3 answers
solution1
7 2013-01-02 22:42:43
Most probably the easiest way is to use the background-size css property. As most modern browsers (IE 9+, FF4+, Safari4+, Chrome3+) support it you can do the following:
html:
<div id="mySprite">
</div>
css:
#mySprite{
height: 80px; /* 64px * 1.25 */
width: 80px; /* 64px * 1.25 */
background-image:url(my.png);
background-position: -0px -560px; /* pick specific one at -448px * 1.25 */
background-size:640px 640px; /* scale image to 512px * 1.25 */
}
The spritesheet has sprites with size 64x64px on it and scales them to 80x80px. See live example here: http://jsfiddle.net/Zgr5w/1/
As @Prusse said: you can use transform: scale() also but it has some drawbacks: browser support, additional position transformation, alignment with other elements may be broken:
#mySprite{
height: 64px;
width: 64px;
background-image:url(my.png);
background-position: -0px -448px;
transform:scale(1.25);
/* additional to compensate the position shift */
position:relative;
top:10px;
left:10px;
}
see live example of the above two approaches here: http://jsfiddle.net/Zgr5w/1/
solution2
2 2011-12-09 19:35:15
You can accomplish this by using the drawImage function on a canvas. The following example scales a 40x100 sprite to double 80x200 size.
<html>
<body>
<canvas id="canvas" width=80 height=200>
<script language="JavaScript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'http://gamemedia.wcgame.ru/data/2011-07-17/game-sprite-sheet.jpg';
img.onload = function() {
// (image, sx, sy, sw, sh, dx, dy, dw, dh)
ctx.drawImage(img,0,0,40,100,0,0,80,200);
}
}
draw();
</script>
</body>
</html>
solution3
2 ACCPTED 2011-12-09 19:40:38
You can do it with CSS3 transform . Or use a hidden canvas element, apply a transformation and then drawn it to the main canvas.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.