› › ›

Sprite Class loading and Processing.js Javascript mode

Matthewdk54Matthewdk54
edited April 2014 in JavaScript Mode

Hi web,

Currently I am trying to troubleshoot an image problem with a .pde. I have made a short .pde animation canvas from a remote loaded sprite sheet that uses the keypress and a simple mousehover code to signal the movement change of a sprite-sheet animation character and his face.

The .pde works fine in java mode but when I change the mode to Javascript and run it as embedded script through processing.js in html, my sprite-sheet character no longer loads ... or ... is not visible, only the head animations are.

I have used web console to try to figure out the problem and I believe its something to do with the way my class {} is loading the image before being redrawn as its unable to find x,y,w,h.

I have included the content of the .pde for web review. You can literally copy and paste the code into your processing application (all images are loaded remotely).

If anyone notices the mistake please let me know. My eyes are tired of trying to comb for the formatting problem alone.

Thanks

/* @pjs preload="https://sociallantern.weebly.com/files/theme/doommap.jpg";
*/
/* @pjs preload="https://sociallantern.weebly.com/files/theme/normalf.png";
*/
/* @pjs preload="https://sociallantern.weebly.com/files/theme/rightf.png";
*/
/* @pjs preload="https://sociallantern.weebly.com/files/theme/leftf.png";
*/
/* @pjs preload="https://sociallantern.weebly.com/files/theme/downf.png";
*/
/* @pjs preload="https://sociallantern.weebly.com/files/theme/upf.png";
*/
/* @pjs preload="https://sociallantern.weebly.com/files/theme/doomg.png";
*/




PImage map; 
PImage rightf;
PImage leftf;
PImage downf;
PImage upf;
PImage normalf;




//controller



color circleColor, baseColor;
color circleHighlight;
color currentColor;

int circleSize = 53;   // Diameter of button 

boolean overCircle = false;

boolean circleup = false;
boolean circledw = false;
boolean circlelf = false;
boolean circlert = false;

class Step
{

  PImage marineimage;
  PVector position;
  int frameRow;
  int frameColumn;
  float frameTimer;
  PVector velocity;
  float speed;
}

Step marine;
float left = 0;
float right = 0;
float down = 0;
float up = 0;

void setup()
{
  size(500, 500);
  frameRate(30);


  map = loadImage("https://sociallantern.weebly.com/files/theme/doommap.jpg");
  rightf = loadImage("https://sociallantern.weebly.com/files/theme/rightf.png");
  leftf = loadImage ("https://sociallantern.weebly.com/files/theme/leftf.png");
  downf = loadImage ("https://sociallantern.weebly.com/files/theme/downf.png");
  upf = loadImage ("https://sociallantern.weebly.com/files/theme/upf.png");
  normalf = loadImage ("https://sociallantern.weebly.com/files/theme/normalf.png");


  circleColor = color(#4D4848);
  circleHighlight = color(#EA2D2D);


}

void draw()
{

  image(map, 0, 0, 500, 500);
  image(normalf, 400, 10, 70, 70);

  //controller

  stroke(0);
  fill(circleColor);
  ellipse(380, 420, circleSize, circleSize);
  stroke(0);
  fill(circleColor);
  ellipse(460, 420, circleSize, circleSize);
  stroke(0);
  fill(circleColor);
  ellipse(420, 380, circleSize, circleSize);
  stroke(0);
  fill(circleColor);
  ellipse(420, 460, circleSize, circleSize);


if ( dist(380, 420, mouseX, mouseY) < circleSize/2 ) {
    fill(circleHighlight);
    ellipse(380, 420, circleSize, circleSize);
    overCircle = true;
  }
  else {
    overCircle=false;
    fill(circleColor); //this is the default fill
  };
  if ( dist(460, 420, mouseX, mouseY) < circleSize/2 ) {
    fill(circleHighlight);
    ellipse(460, 420, circleSize, circleSize);
    overCircle = true;
  }
  else {
    overCircle=false;
    fill(circleColor); //this is the default fill
  };
  if ( dist(420, 380, mouseX, mouseY) < circleSize/2 ) {
    fill(circleHighlight);
    ellipse(420, 380, circleSize, circleSize);
    overCircle = true;
  }
  else {
    overCircle=false;
    fill(circleColor); //this is the default fill
  };
  if ( dist(420, 460, mouseX, mouseY) < circleSize/2 ) {
    fill(circleHighlight);
    ellipse(420, 460, circleSize, circleSize);
    overCircle = true;
  } 
  else {
    overCircle=false;
    fill(circleColor); //this is the default fill
  };

  marine = new Step();
  marine.marineimage = loadImage("https://sociallantern.weebly.com/files/theme/doomg.png");
  marine.position = new PVector(CENTER, CENTER);
  marine.velocity = new PVector(0, 0);
  marine.frameRow = 0; // which row from source image to use
  marine.frameColumn = 0; // which column from source image to use
  marine.frameTimer = 0; // determines which column to use to animate.
  marine.speed = 4; // walk speed 

  marine.velocity.x = marine.speed * (left + right);
  marine.velocity.y = marine.speed * (up + down);
  marine.position.add(marine.velocity);

  marine.frameTimer += 0.1; // 0.1 is the framerate or speed of animation.
  if (marine.frameTimer >= 4) // reset at 6 because there's only 0-5 columns in the spritesheet
  {
    marine.frameTimer = 1; // column 1 is the first frame of the walk animation
  }
  marine.frameColumn = (int)marine.frameTimer; // cast the timer to an int so it's an integer between 1 and 5

  if (marine.velocity.x == 0 && marine.velocity.y == 0)
  {
    marine.frameColumn = 0; //column 0 is the stopped frame of animation
    image(normalf, 400, 10, 70, 70);
  }

  if (left != 0)
  {
    marine.frameRow = 1;
    image(leftf, 400, 10, 70, 70); // column 1 is the left facing animation
  }
  if (right != 0)
  {
    marine.frameRow = 2;
    image(rightf, 400, 10, 70, 70); // column 3 is the right facing animation
  }
  if (up != 0)
  {
    marine.frameRow = 3;
    image(upf, 400, 10, 70, 70); // etc.
  }
  if (down != 0)
  {
    marine.frameRow = 0;
    image(downf, 400, 10, 70, 70); // etc.
  }
  if (marine.position.x >405) {
    marine.position.x = 405;
  }
  if (marine.position.x <-50) {
    marine.position.x = -50;
  }
  if (marine.position.y <-50) {
    marine.position.y = -50;
  }
  if (marine.position.y >400) {
    marine.position.y = 400;
  }
  pushMatrix();
  translate(marine.position.x, marine.position.y);
  //imageMode(CENTER);

  // Here we are creating a new image using the getSubImage function defined below.
  // we pass in themarine.image and get a sub image of the sprite sheet based on
  // the size of a frame (32x64 here) and the row and column we want.
  PImage frameImage = getSubImage(marine.marineimage, marine.frameRow, marine.frameColumn, 49, 61);

  // Draw this image instead of marine.image
  image(frameImage, 50, 50);

  popMatrix();
}

// Our function to return a new smaller crop from the spritesheet.
PImage getSubImage(PImage marineimage, int row, int column, int frameWidth, int frameHeight)
{
  return marineimage.get(column * frameWidth, row * frameHeight, frameWidth, frameHeight);
} 


void keyPressed()
{
  if (keyCode == RIGHT) 
  {

    right = 1;
  }

  if (keyCode == LEFT) 
  {
    left = -1;
  }

  if (keyCode == UP) 
  {
    up = -1;
  }

  if (keyCode == DOWN)
  {
    down = 1;
  }
}

void keyReleased()
{
  if (keyCode == RIGHT) 
  {
    right = 0;
  }
  if (keyCode == LEFT) 
  {
    left = 0;
  }
  if (keyCode == UP) 
  {
    up = 0;
  }
  if (keyCode == DOWN)
  {
    down = 0;
  }
}

void mousePressed() {

  //controller call action

  if ((mousePressed == true) && (overCircle = true) &&   ( dist(380, 420, mouseX, mouseY) < circleSize/2 )) {

    left = -1;
  } 
  else { 
    left = 0;
  }

  if ((mousePressed == true) && (overCircle = true) &&  ( dist(460, 420, mouseX, mouseY) < circleSize/2 )) {

    right = 1;
  }
  else { 
    right = 0;
  }

  if ((mousePressed == true) && (overCircle = true)  &&  ( dist(420, 380, mouseX, mouseY) < circleSize/2 )) {

    up = -1;
  } 
  else { 
    up = 0;
  }

  if ((mousePressed == true) && (overCircle = true) &&  ( dist(420, 460, mouseX, mouseY) < circleSize/2 )) {

    down = 1;
  } 
  else { 
    down = 0;
  }
}

void mouseReleased() {
  //controller call action

  if ((mousePressed == false)  && (overCircle = true) && ( dist(380, 420, mouseX, mouseY) < circleSize/2 )) {

    left = 0;
  }

  if ((mousePressed == false)  && (overCircle = true) && ( dist(460, 420, mouseX, mouseY) < circleSize/2 )) {

    right = 0;
  }

  if ((mousePressed == false)  && (overCircle = true) && ( dist(420, 380, mouseX, mouseY) < circleSize/2 )) {

    up = 0;
  }

  if ((mousePressed == false) && (overCircle = true)  && ( dist(420, 460, mouseX, mouseY) < circleSize/2 )) {

    down = 0;
  }

}

Tagged:

Answers

Sign In or Register to comment.