xxxxxxxxxx
66
//Creating animations
//animations like p5 images should be stored in variables
//in order to be displayed during the draw cycle
var frog = {
posx: 300,
posy: 550,
rot: 0
};
const move = 4;
//it's advisable (but not necessary) to load the images in the preload function
//of your sketch otherwise they may appear with a little delay
function preload() {
//create an animation from a sequence of numbered images
//pass the first and the last file name and it will try to find the ones in between
frog.animation = loadAnimation('resources/frog01.png','resources/frog02.png','resources/frog03.png','resources/frog04.png','resources/frog05.png','resources/frog06.png', 'resources/frog07.png');
frog.animation.frameDelay = 8;
frog.animation.stop();
}
function setup() {
createCanvas(800, 600);
}
function draw() {
background(255, 255, 255);
//specify the animation instance and its x,y position
//animation() will update the animation frame as well
// animation(frog.animation, frog.posx, frog.posy);
frog.animation.draw(frog.posx, frog.posy, frog.rot);
if (frog.animation.getFrame() < 5
&& frog.animation.getFrame() > 1) {
if (frog.rot == 0) {frog.posy -= move}
else if (frog.rot == 90) {frog.posx += move}
else if (frog.rot == 180) {frog.posy += move}
else if (frog.rot == 270) {frog.posx -= move}
} else if (frog.animation.getFrame() == 6) {
frog.animation.nextFrame();
}
}
function keyPressed() {
// only accept input if still
if (!frog.animation.playing) {
if (key == 'w') {
frog.rot = 0;
frog.animation.play()
} else if (key == 'a') {
frog.rot = 270;
frog.animation.play();
} else if (key == 's') {
frog.rot = 180;
frog.animation.play();
} else if (key == 'd') {
frog.rot = 90;
frog.animation.play();
}
}
}