This demo uses a Sprites Group to draw a collection of sprites with parent transformations.
This method is useful when you need to group together a bunch of sprites and move, rotate and scale them as a single unit. In this case the sprites we have are tank wheels, body, and turret.
Use Arrows or WASD to drive the tank, and Z/X to rotate the turret.
Press 1-3 to change tank body color.
Click anywhere to switch turret control from keyboard to mouse (press Z/X again to restore keyboard control).
The following code example show how to use sprites group.
// create sprites batch
let spritesBatch = new Shaku.gfx.SpriteBatch();
// load tank's texture asset, which contains wheels, middle and top cannon
let tankTexture = await Shaku.assets.loadTexture('assets/tank.png');
// create sprites group
let tank = new Shaku.gfx.SpritesGroup();
tank.scale.set(0.65, 0.65);
// add wheels
let wheelsSprite = tank.add(new Shaku.gfx.Sprite(tankTexture));
wheelsSprite.sourceRectangle = new Shaku.utils.Rectangle(0, 0, 232, 256);
wheelsSprite.size.x = wheelsSprite.sourceRectangle.width;
wheelsSprite.size.y = wheelsSprite.sourceRectangle.height;
// add base
let baseSprite = tank.add(new Shaku.gfx.Sprite(tankTexture));
baseSprite.sourceRectangle = new Shaku.utils.Rectangle(232, 0, 170, 256);
baseSprite.size.x = baseSprite.sourceRectangle.width;
baseSprite.size.y = baseSprite.sourceRectangle.height;
// add cannon
let cannonSprite = tank.add(new Shaku.gfx.Sprite(tankTexture));
cannonSprite.sourceRectangle = new Shaku.utils.Rectangle(232 + 170, 0, 110, 256);
cannonSprite.size.x = cannonSprite.sourceRectangle.width;
cannonSprite.size.y = cannonSprite.sourceRectangle.height;
// part below goes between startFrame() and endFrame()
// -------------------------------------------------------
// update the tank position
tank.position.set(playerX, playerY);
// draw tank
spritesBatch.begin();
spritesBatch.drawSpriteGroup(tank);
spritesBatch.end();