2D, Changing sprite set based on direction of movement

Processing Coding Questions
1

Hello everybody.
I’m trying to make a simple “game” if it could even be called that, in which i have a character moving in the 4 main directions (up/down/left/right) with the WASD keys, using the following code

void move() { 
    if (keyPressed) {

      if (key=='w')
      {
        this.y = this.y + this.sy;
      }
      if (key =='s')
      {
        this.y = this.y + this.fy;
      }
      if (key =='a')
      {
        this.x = this.x + this.sx;
      } else if (key=='d')
      {
        this.x = this.x + this.fx;
      }
    }
  }

I also load the images to an ArrayList with PImage and loop through them to “animate” the character using the following code

ArrayList<PImage> images;
images = new ArrayList<PImage>();

for (int count=1; count<=4; count++)
    {
      img = loadImage("Wlkawy"+ count + ".png");
      images.add(img);
    }
  void render()
  {

    int imageNumber = imageCounter/10;
    PImage currentImage = images.get(imageNumber);
    imageCounter++;
    if (imageCounter>=40)
    {
      imageCounter=0;
    }
    image(currentImage, this.x, this.y);
  }

So i want to change between the 4 different sprite sets: “Wlkawy”, “Wlkfwd”, “Wlklft”, “Wlkrgt”,(there’s 4 images in each sprite set) based on which direction i am moving in.
I have tried to create a new String dir; and change it in the keyPressed if, and setting the img=loadImage to (dir + count + “.png”) but it doesn’t change between the sprites. I have tried setting up 2 booleans walkUp and walkRight, and changing them in the if conition for movement and in a second if condition i would have 4 copies for img=loadImage(“CORRECT NAME” + count + “.png”) with the correct name of the spites, but it doesn’t work. Does anybody have an idea how can i do it without loading any aditional libraries?
Thank you very much for any ideas.

2

2D array of images

first index = dir, 2nd index = image number this sprite set

PImage[][] images = new PImage[4][4] ;

// load “Wlkawy”
images[0] [0] = loadImage(“Wlkawy1.jpg"); 
images[0] [1] = loadImage(“Wlkawy2.jpg"); 
images[0] [2] = loadImage(“Wlkawy3.jpg"); 
images[0] [3] = loadImage(“Wlkawy4.jpg"); 

// load “Wlkfwd”
images[1] [0] = loadImage(“Wlkfwd1.jpg"); 
images[1] [1] = loadImage(“Wlkfwd2.jpg"); 
images[1] [2] = loadImage(“Wlkfwd3.jpg"); 
images[1] [3] = loadImage(“Wlkfwd4.jpg"); 

// load “Wlklft”
images[2] [0] = loadImage(“Wlklft1.jpg"); 
images[2] [1] = loadImage(“Wlklft2.jpg"); 
images[2] [2] = loadImage(“Wlklft3.jpg"); 
images[2] [3] = loadImage(“Wlklft4.jpg"); 

//Wlkrgt
...
....
...
...
3 
  PImage[][] images = new PImage[4][4];//stores all images in an array
  int i;
  int count;
  Player(int x, int y)
  {
    PImage img;

    this.x = x;//store a member called x
    this.y = y;
    this.Lives = Lives;
    for (i=0; x < 4; x++) {

      for (count=0; count<4; count++)
      {
        img = loadImage(dir + count + ".png");
        images[i][count] = img;
      }
    }
  }
 void render()
  {

    //int imageNumber = imageCounter/10;
    PImage currentImage = images[i][count];
    imageCounter++;
    if (imageCounter>=40)
    {
      imageCounter=0;
    }
    image(currentImage, this.x, this.y);

  }

void move() { 
 if (keyPressed) {
 
 if (key=='w')
 {
 this.y = this.y + this.sy;
 i = 1;
 dir = "Wlkawy";
 }
 if (key =='s')
 {
 this.y = this.y + this.fy;
 i = 2;
 dir = "Wlkfwd";
 }
 if (key =='a')
 {
 this.x = this.x + this.sx;
 i = 3;
 dir = "Wlklft";
 } else if (key=='d')
 {
 this.x = this.x + this.fx;
 i = 4;
 dir = "Wlkrgt";
 }
 }
 }

Is this how it is supposed to work? I get a NullPointerException and i guess that is normal because i have not loaded any images into the 2D array for it to display? How do i get around that, or am i using it correctly at all?
I get a NullPointerExecption at the line image(currentImage, this.x, this.y);

4

YES.

Just load them as I have shown above.