Sprite Sheets with Multiple Animations
To load multiple animations from the same sprite sheet image, first set the
- spriteSheet property of the sprite or group.
+ spriteSheet property of the sprite or group.
+
Next, use the addAnimations / addAnis function. They accept an object
that uses animation names as keys and sprite sheet atlases as values.
Using an atlas object is way easier than manually specifying the coordinates of every frame!
@@ -256,12 +260,14 @@ Sprite Sheets with Multiple Anim
x, y, pos, w/width,
h/height, size/frameSize, row,
col, frames/frameCount,
- delay/frameDelay, and rotation.
+ delay/frameDelay, and rotation.
+
In the "hero" example the size of the hero sprite is set to 32x32 pixels in the
- Sprite constructor. That size is used as a multiplier to the row value given.
+ Sprite constructor. That size is used as a multiplier to the row value given.
+
The ani.offset property is used to adjust the position of an animation relative to
the sprite's position.
- Click this link to see the full questKid
+
Click this link to see the full questKid
sprite sheet used in the example.
If you'd like to truly appreciate p5play, compare the example code to anis
function preload() {
hero = new Sprite(125, 48, 32, 32);
- hero.spriteSheet = 'assets/questKid.png';
+ hero.spriteSheet = 'assets/questKid.webp';
hero.anis.offset.x = 2;
hero.anis.frameDelay = 32;
hero.anis.demoMode = true;
@@ -304,7 +310,8 @@ anis
}
function setup() {
- new Canvas(250, 96, 'pixelated x2');
+ new Canvas(250, 96);
+ displayMode('default', 'pixelated', 2)
allSprites.pixelPerfect = true;
}
@@ -323,7 +330,7 @@ anis
function preload() {
hero = new Sprite(62, 24, 32, 32);
- hero.spriteSheet = 'assets/questKid.png';
+ hero.spriteSheet = 'assets/questKid.webp';
hero.anis.offset.x = 2;
hero.anis.frameDelay = 8;
hero.friction = 0;
@@ -339,7 +346,8 @@ anis
}
function setup() {
- new Canvas(124, 48, 'pixelated x4');
+ new Canvas(124, 48);
+ displayMode('normal', 'pixelated', 4);
allSprites.pixelPerfect = true;
}
@@ -370,7 +378,7 @@ Animation Sequencing
function preload() {
hero = new Sprite(62, 24, 32, 32);
- hero.spriteSheet = 'assets/questKid.png';
+ hero.spriteSheet = 'assets/questKid.webp';
hero.anis.offset.x = 2;
hero.anis.offset.y = 2;
hero.anis.frameDelay = 8;
@@ -450,7 +458,7 @@ Advanced Animation Sequencing
function preload() {
hero = new Sprite(90, 24, 32, 32);
- hero.spriteSheet = 'assets/questKid.png';
+ hero.spriteSheet = 'assets/questKid.webp';
hero.anis.offset.x = 2;
hero.anis.offset.y = 2;
hero.anis.frameDelay = 8;
@@ -505,15 +513,15 @@ Advanced Animation Sequencing
-
-
-
+
+
-
-
+
+