switch between gif animations on keyPressed

Programming Questions

killgannon

switch between gif animations on keyPressed

in Programming Questions • 1 year ago

hi, I'm relatively new to processing and I'm struggling with a game that I'm making as part of a university project. I'm planning on making a vertical scrolling shooter where you control a spaceship, What I want to happen is that by default the ship is using a flying animation but when the left and right key are pressed the ship moves in that direction and the animation changes to a turning animation until the key is released where it returns to the flying animation. I've been playing around with it for a few hours and not got anywhere. Obviously since this is a university assignment I'd rather not have the work done for me but if you guys could offer suggestions and point me in the right direction I would be very grateful.

Thanks,

Replies(8)

PhiLho

Re: switch between gif animations on keyPressed

1 year ago

Usual answer: show the current state of your code.

killgannon

Re: switch between gif animations on keyPressed

1 year ago

Sorry to waste your time, I just rewrote the code that I did earlier so I could post it up here and somehow it works now :s

PhiLho

Re: Re: switch between gif animations on keyPressed

1 year ago

Not a waste of time if I made you to have a second look...

As I often write, sometime cleaning up code or simplifying it to show a precise problem helps in pinning out the issue.

killgannon

Re: switch between gif animations on keyPressed

1 year ago

Animation aniFly, aniTurnL, aniTurnR;
float xpos = 500;
float ypos = 500;
void setup() {
size(1000,600);
frameRate(30);
aniFly = new Animation("sprite_shipm2_fly",4);
aniTurnL = new Animation("sprite_shipm2_turnL", 3);
aniTurnR = new Animation("sprite_shipm2_turnR", 3);
}
void draw() {
background (255);
fill(185, 81, 138);
rect (0, 0, 200, 600);
rect (800, 0, 200, 600);
aniFly.display(xpos, ypos);
print(xpos);
}
void keyPressed() {
if (key == CODED) {
if (keyCode == LEFT) {
background(255);
fill(185, 81, 138);
rect (0, 0, 200, 600);
rect (800, 0, 200, 600);
aniTurnL.display(xpos, ypos);
xpos -= 5;
if (xpos <= 237) {
xpos = 237;
}
} else if (keyCode == RIGHT) {
background(255);
fill(185, 81, 138);
rect (0, 0, 200, 600);
rect (800, 0, 200, 600);
aniTurnR.display(xpos, ypos);
xpos += 5;
if (xpos >= 765) {
xpos = 765;
}
}
}
}
class Animation {
PImage[] images;
int imageCount;
int frame;
Animation(String imagePrefix, int count) {
imageCount = count;
images = new PImage[imageCount];
for (int i = 0; i < imageCount; i++) {
// Use nf() to number format 'i' into four digits
String filename = imagePrefix + nf(i, 4) + ".gif";
images[i] = loadImage(filename);
}
}
void display(float xpos, float ypos) {
frame = (frame+1) % imageCount;
imageMode(CENTER);
image(images[frame], xpos, ypos);
}
}

it works now in that it does what I want but it looks choppy especially when moving to the right the sprite seems to judder and not move smoothly. The movement to the left is not as bad though which I don't understand as its the same code essentially :/

Here's the exported applet on openprocessing so you can see the problem first hand:

http://www.openprocessing.org/sketch/60164

PhiLho

Re: switch between gif animations on keyPressed

1 year ago

Ah, so it is an animation of Gif images, not an animated Gif play...
One thing strikes me: you do lot of stuff in the keyPressed() function, including clearing the background and drawing stuff.
You should leave that to draw(), otherwise you will have two competing drawing actions (ie. draw() might immediately clear what you did in keyPressed(), or the reverse).
In general, in keyPressed(), we only set some booleans or a global state (an integer showing what to do at a give time), and depending on these global variables, draw() shows one action or the other. It is better to centralize the screen udpate.

killgannon

Re: switch between gif animations on keyPressed

1 year ago

Thankyou for the input, I'll play around with the code and try to trim down the keyPressed functions. I feel like such an idiot though, the problem I was having was not a coding error or animation problem,it was an artwork problem it turned out that one of the images for the turning animation was slightly off center and it was throwing the whole animation off giving the illusion of a juddering :/

I've switched the code on the keyPressed functions to this:

void keyPressed() {
if (key == CODED) {
if (keyCode == LEFT) {
turnLeft = true;
xpos -= 5;
if (xpos <= 237) {
xpos = 237;
}
} else if (keyCode == RIGHT) {
turnRight = true;
xpos += 5;
if (xpos >= 765) {
xpos = 765;
}
}
}
}

with this in draw()

if (turnLeft) {
aniTurnL.display(xpos, ypos);
} else if (turnRight) {
aniTurnR.display(xpos, ypos);
} else {
aniFly.display(xpos, ypos);
}

and I have 2 global booleans called turnLeft and turnRight, they're both set to false initially and the keyPress switches them, what would be the best method of switching them back to false afterwards?

PhiLho

Re: switch between gif animations on keyPressed

1 year ago

" what would be the best method of switching them back to false afterwards?"
Well, it depends after what... Ask yourself the question, and perhaps then you can answer it!
You can reset at the end of draw(), after .display(), in keyReleased(), etc.

killgannon

Re: switch between gif animations on keyPressed

1 year ago

Thank you for all the help you've given me, I used the keyReleased method in the end, it was what I originally thought about doing but wasn't sure if there was a more efficient method.

I have another quick question, when the key is pressed the animation changes instantly but there is a delay of about half a second before there is movement, is there a way of making this happen quicker?

Top Reply