› › ›

How can I use createGraphics() to save individual drawings as images?

javamaccjavamacc
edited June 2016 in Questions about Code

I am building a program to make the sprites I need for a game. Each sprite is made with createGraphics() and is in its own function. When I start the program, instead of each sprite saving as its own size, the whole canvas is drawn with the sprite on it. How can I make it so that the size of the image won't be the size of the canvas, but the size of each sprites' createGraphics? Here is my code:

PGraphics R1, R2, R3, L1, L2, L3, P1, P2, P3, D1, D2, Bg;
int spriteNum = 0;

void setup() {
  size(200, 400, P2D);
  R1 = createGraphics(27, 30, P2D, "figure-R1.gif");
  R2 = createGraphics(27, 30, P2D, "figure-R2.gif");
  R3 = createGraphics(27, 30, P2D, "figure-R3.gif");
  L1 = createGraphics(27, 30, P2D, "figure-L1.gif");
  L2 = createGraphics(27, 30, P2D, "figure-L2.gif");
  L3 = createGraphics(27, 30, P2D, "figure-L3.gif");
  P1 = createGraphics(30, 10, P2D, "platform1.gif");
  P2 = createGraphics(60, 10, P2D, "platform2.gif");
  P3 = createGraphics(100, 10, P2D, "platform3.gif");
  D1 = createGraphics(27, 30, P2D, "door1.gif");
  D2 = createGraphics(27, 30, P2D, "door2.gif");
  Bg = createGraphics(100, 100, P2D, "background.gif");
}

void draw() {
  /* Sprite Sheet:
  drawR1();
  drawR2();
  drawR3();
  drawL1();
  drawL2();
  drawL3();
  drawP1();
  drawP2();
  drawP3();
  drawD1();
  drawD2();
  drawBg();
  */

  // Find which sprite
  if(spriteNum == 1) {
    drawR1();
  } else if(spriteNum == 2) {
    drawR2();
  } else if(spriteNum == 3) {
    drawR3();
  } else if(spriteNum == 4) {
    drawL1();
  } else if(spriteNum == 5) {
    drawL2();
  } else if(spriteNum == 6) {
    drawL3();
  } else if(spriteNum == 7) {
    drawP1();
  } else if(spriteNum == 8) {
    drawP2();
  } else if(spriteNum == 9) {
    drawP3();
  } else if(spriteNum == 10) {
    drawD1();
  } else if(spriteNum == 11) {
    drawD2();
  } else if(spriteNum == 12) {
    drawBg();
  }
  // save the sprites
  spriteNum = spriteNum + 1;
}

void drawR1() {
  spriteNum = 1;
  R1.beginDraw();
  // R1.background(255); // remember to delete!!
  R1.noFill();
  R1.stroke(0);
  R1.ellipse(20, 5, 10, 10);
  R1.line(15, 10, 10, 15);
  R1.line(10, 15, 10, 22);
  R1.line(10, 22, 5, 18);
  R1.line(10, 15, 15, 22);
  R1.line(15, 22, 10, 30);
  R1.line(10, 15, 17, 18);
  R1.endDraw();
  image(R1, 0, 0);
  save("figure-R1.gif");
}

void drawR2() {
  spriteNum = 2;
  R2.beginDraw();
  // R2.background(255); // remember to delete!!
  R2.noFill();
  R2.stroke(0);
  R2.ellipse(20, 5, 10, 10);
  R2.line(15, 10, 13, 25);
  R2.line(13, 25, 5, 20);
  R2.line(14, 18, 20, 23);
  R2.line(20, 23, 24, 30);
  R2.line(14, 15, 20, 14);
  R2.line(15, 10, 10, 15);
  R2.line(10, 15, 20, 23);
  R2.endDraw();
  image(R2, 37, 0);
  save("figure-R2.gif");
}

void drawR3() {
  spriteNum = 3;
  R3.beginDraw();
  // R3.background(255); // remember to delete!!
  R3.noFill();
  R3.stroke(0);
  R3.ellipse(20, 5, 10, 10);
  R3.line(15, 10, 13, 20);
  R3.line(13, 20, 20, 21);
  R3.line(20, 21, 27, 25);
  R3.line(13, 20, 8, 25);
  R3.line(8, 25, 1, 19);
  R3.line(15, 12, 20, 17);
  R3.line(20, 17, 23, 13);
  R3.line(15, 12, 8, 7);
  R3.line(8, 7, 4, 9);
  R3.endDraw();
  image(R3, 74, 0);
  save("figure-R3.gif");
}

void drawL1() {
  spriteNum = 4;
  L1.beginDraw();
  L1.translate(27, 0);
  // L1.background(255); // remember to delete!!
  L1.noFill();
  L1.stroke(0);
  L1.ellipse(-20, 5, 10, 10);
  L1.line(-15, 10, -10, 15);
  L1.line(-10, 15, -10, 22);
  L1.line(-10, 22, -5, 18);
  L1.line(-10, 15, -15, 22);
  L1.line(-15, 22, -10, 30);
  L1.line(-10, 15, -17, 18);
  L1.endDraw();
  image(L1, 0, 40);
  save("figure-L1.gif");
}

void drawL2() {
  spriteNum = 5;
  L2.beginDraw();
  L2.translate(27, 0);
  // L2.background(255); // remember to delete!!
  L2.noFill();
  L2.stroke(0);
  L2.ellipse(-20, 5, 10, 10);
  L2.line(-15, 10, -13, 25);
  L2.line(-13, 25, -5, 20);
  L2.line(-14, 18, -20, 23);
  L2.line(-20, 23, -24, 30);
  L2.line(-14, 15, -20, 14);
  L2.line(-15, 10, -10, 15);
  L2.line(-10, 15, -20, 23);
  L2.endDraw();
  image(L2, 37, 40);
  save("figure-L2.gif");
}

void drawL3() {
  spriteNum = 6;
  L3.beginDraw();
  L3.translate(27, 0);
  // L3.background(255); // remember to delete!!
  L3.noFill();
  L3.stroke(0);
  L3.ellipse(-20, 5, 10, 10);
  L3.line(-15, 10, -13, 20);
  L3.line(-13, 20, -20, 21);
  L3.line(-20, 21, -27, 25);
  L3.line(-13, 20, -8, 25);
  L3.line(-8, 25, -1, 19);
  L3.line(-15, 12, -20, 17);
  L3.line(-20, 17, -23, 13);
  L3.line(-15, 12, -8, 7);
  L3.line(-8, 7, -4, 9);
  L3.endDraw();
  image(L3, 74, 40);
  save("figure-L3.gif");
}

void drawP1() {
  spriteNum = 7;
  P1.beginDraw();
  // P1.background(255); // remember to delete!!
  P1.stroke(0);
  P1.fill(255, 102, 102);
  P1.ellipse(15, 5, 30, 10);
  P1.endDraw();
  image(P1, 0, 80);
  save("platform1.gif");
}

void drawP2() {
  spriteNum = 8;
  P2.beginDraw();
  // P2.background(255); // remember to delete!!
  P2.stroke(0);
  P2.fill(255, 102, 102);
  P2.ellipse(30, 5, 60, 10);
  P2.endDraw();
  image(P2, 0, 100);
  save("platform2.gif");
}

void drawP3() {
  spriteNum = 9;
  P3.beginDraw();
  // P3.background(255); // remember to delete!!
  P3.stroke(0);
  P3.fill(255, 102, 102);
  P3.ellipse(50, 5, 100, 10);
  P3.endDraw();
  image(P3, 0, 120);
  save("platform3.gif");
}

void drawD1() {
  spriteNum = 10;
  D1.beginDraw();
  // D1.background(255); // remember to delete!!
  D1.stroke(0);
  D1.fill(255, 255, 0);
  D1.rect(0, 0, 27, 30);
  D1.fill(0);
  D1.rect(20, 15, 2, 2);
  D1.endDraw();
  image(D1, 0, 140);
  save("door1.gif");
}

void drawD2() {
  spriteNum = 11;
  D2.beginDraw();
  // D2.background(255); // remember to delete!!
  D2.stroke(0);
  D2.noFill();
  D2.rect(0, 0, 27, 30);
  D2.fill(255, 255, 0);
  D2.rect(0, 3, 14, 27);
  D2.fill(0);
  D2.rect(10, 16, 1, 1);
  D2.endDraw();
  image(D2, 0, 180);
  save("door2.gif");
}

void drawBg() {
  spriteNum = 12;
  Bg.beginDraw();
  Bg.background(255, 153, 153);
  Bg.noStroke();
  Bg.fill(51, 204, 204);
  Bg.ellipse(20, 30, 10, 10);
  Bg.ellipse(80, 20, 10, 10);
  Bg.ellipse(40, 50, 10, 10);
  Bg.ellipse(20, 80, 10, 10);
  Bg.ellipse(85, 60, 10, 10); 
  Bg.endDraw();
  image(Bg, 0, 220);
  save("background.gif");
}
Tagged:

Best Answer

Answers

  • ChrisirChrisir
    edited June 2016 Answer ✓

    Bg.save("name.jpg");

    ?

    I hope that is the sketch to prepare the sketch and this is NOT the game sketch.....

    ;-)

  • javamaccjavamacc

    After doing this and changing some code, some of the sprites save correctly, and some just save as a black square. In the file manager, it says that all the sprites are 27px by 30px. What's causing the size of the sprites to change and how can I fix it?

    PGraphics R1, R2, R3, L1, L2, L3, P1, P2, P3, D1, D2, Bg;

void setup() {
  size(200, 400);
  R1 = createGraphics(27, 30);
  R2 = createGraphics(27, 30);
  R3 = createGraphics(27, 30);
  L1 = createGraphics(27, 30);
  L2 = createGraphics(27, 30);
  L3 = createGraphics(27, 30);
  P1 = createGraphics(30, 10);
  P2 = createGraphics(60, 10);
  P3 = createGraphics(100, 10);
  D1 = createGraphics(27, 30);
  D2 = createGraphics(27, 30);
  Bg = createGraphics(100, 100);
}

void draw() {
  noLoop();
  // Sprite Sheet:
  drawR1();
  drawR2();
  drawR3();
  drawL1();
  drawL2();
  drawL3();
  drawP1();
  drawP2();
  drawP3();
  drawD1();
  drawD2();
  drawBg();
}

void drawR1() {
  R1.beginDraw();
  // R1.background(255); // remember to delete!!
  R1.noFill();
  R1.stroke(0);
  R1.ellipse(20, 5, 10, 10);
  R1.line(15, 10, 10, 15);
  R1.line(10, 15, 10, 22);
  R1.line(10, 22, 5, 18);
  R1.line(10, 15, 15, 22);
  R1.line(15, 22, 10, 30);
  R1.line(10, 15, 17, 18);
  R1.endDraw();
  image(R1, 0, 0);
  R1.save("figure-R1.png");
}

void drawR2() {
  R2.beginDraw();
  // R2.background(255); // remember to delete!!
  R2.noFill();
  R2.stroke(0);
  R2.ellipse(20, 5, 10, 10);
  R2.line(15, 10, 13, 25);
  R2.line(13, 25, 5, 20);
  R2.line(14, 18, 20, 23);
  R2.line(20, 23, 24, 30);
  R2.line(14, 15, 20, 14);
  R2.line(15, 10, 10, 15);
  R2.line(10, 15, 20, 23);
  R2.endDraw();
  image(R2, 37, 0);
  R2.save("figure-R2.png");
}

void drawR3() {
  R3.beginDraw();
  // R3.background(255); // remember to delete!!
  R3.noFill();
  R3.stroke(0);
  R3.ellipse(20, 5, 10, 10);
  R3.line(15, 10, 13, 20);
  R3.line(13, 20, 20, 21);
  R3.line(20, 21, 27, 25);
  R3.line(13, 20, 8, 25);
  R3.line(8, 25, 1, 19);
  R3.line(15, 12, 20, 17);
  R3.line(20, 17, 23, 13);
  R3.line(15, 12, 8, 7);
  R3.line(8, 7, 4, 9);
  R3.endDraw();
  image(R3, 74, 0);
  R3.save("figure-R3.png");
}

void drawL1() {
  L1.beginDraw();
  L1.translate(27, 0);
  // L1.background(255); // remember to delete!!
  L1.noFill();
  L1.stroke(0);
  L1.ellipse(-20, 5, 10, 10);
  L1.line(-15, 10, -10, 15);
  L1.line(-10, 15, -10, 22);
  L1.line(-10, 22, -5, 18);
  L1.line(-10, 15, -15, 22);
  L1.line(-15, 22, -10, 30);
  L1.line(-10, 15, -17, 18);
  L1.endDraw();
  image(L1, 0, 40);
  L1.save("figure-L1.png");
}

void drawL2() {
  L2.beginDraw();
  L2.translate(27, 0);
  // L2.background(255); // remember to delete!!
  L2.noFill();
  L2.stroke(0);
  L2.ellipse(-20, 5, 10, 10);
  L2.line(-15, 10, -13, 25);
  L2.line(-13, 25, -5, 20);
  L2.line(-14, 18, -20, 23);
  L2.line(-20, 23, -24, 30);
  L2.line(-14, 15, -20, 14);
  L2.line(-15, 10, -10, 15);
  L2.line(-10, 15, -20, 23);
  L2.endDraw();
  image(L2, 37, 40);
  L2.save("figure-L2.png");
}

void drawL3() {
  L3.beginDraw();
  L3.translate(27, 0);
  // L3.background(255); // remember to delete!!
  L3.noFill();
  L3.stroke(0);
  L3.ellipse(-20, 5, 10, 10);
  L3.line(-15, 10, -13, 20);
  L3.line(-13, 20, -20, 21);
  L3.line(-20, 21, -27, 25);
  L3.line(-13, 20, -8, 25);
  L3.line(-8, 25, -1, 19);
  L3.line(-15, 12, -20, 17);
  L3.line(-20, 17, -23, 13);
  L3.line(-15, 12, -8, 7);
  L3.line(-8, 7, -4, 9);
  L3.endDraw();
  image(L3, 74, 40);
  L3.save("figure-L3.png");
}

void drawP1() {
  P1.beginDraw();
  // P1.background(255); // remember to delete!!
  P1.stroke(0);
  P1.fill(255, 102, 102);
  P1.ellipse(15, 5, 30, 10);
  P1.endDraw();
  image(P1, 0, 80);
  P1.save("platform1.png");
}

void drawP2() {
  P2.beginDraw();
  // P2.background(255); // remember to delete!!
  P2.stroke(0);
  P2.fill(255, 102, 102);
  P2.ellipse(30, 5, 60, 10);
  P2.endDraw();
  image(P2, 0, 100);
  P2.save("platform2.png");
}

void drawP3() {
  P3.beginDraw();
  // P3.background(255); // remember to delete!!
  P3.stroke(0);
  P3.fill(255, 102, 102);
  P3.ellipse(50, 5, 100, 10);
  P3.endDraw();
  image(P3, 0, 120);
  P3.save("platform3.png");
}

void drawD1() {
  D1.beginDraw();
  // D1.background(255); // remember to delete!!
  D1.stroke(0);
  D1.fill(255, 255, 0);
  D1.rect(0, 0, 27, 30);
  D1.fill(0);
  D1.rect(20, 15, 2, 2);
  D1.endDraw();
  image(D1, 0, 140);
  D1.save("door1.png");
}

void drawD2() {
  D2.beginDraw();
  // D2.background(255); // remember to delete!!
  D2.stroke(0);
  D2.noFill();
  D2.rect(0, 0, 27, 30);
  D2.fill(255, 255, 0);
  D2.rect(0, 3, 14, 27);
  D2.fill(0);
  D2.rect(10, 16, 1, 1);
  D2.endDraw();
  image(D2, 0, 180);
  D2.save("door2.png");
}

void drawBg() {
  Bg.beginDraw();
  Bg.background(255, 153, 153);
  Bg.noStroke();
  Bg.fill(51, 204, 204);
  Bg.ellipse(20, 30, 10, 10);
  Bg.ellipse(80, 20, 10, 10);
  Bg.ellipse(40, 50, 10, 10);
  Bg.ellipse(20, 80, 10, 10);
  Bg.ellipse(85, 60, 10, 10); 
  Bg.endDraw();
  image(Bg, 0, 220);
  Bg.save("background.png");
}
  • ChrisirChrisir
    edited June 2016

    I don't know

    somehow the sprites interfere, maybe it's the translate() part, I dunno. Could be a processing bug?

    this works partially only for the platforms, I had to comment out all before the platform...................................................:

    PGraphics R1, R2, R3, L1, L2, L3, P1, P2, P3, D1, D2, Bg;

void setup() {
  size(200, 400);
  R1 = createGraphics(27, 30);
  R2 = createGraphics(27, 30);
  R3 = createGraphics(27, 30);
  L1 = createGraphics(27, 30);
  L2 = createGraphics(27, 30);
  L3 = createGraphics(27, 30);
  P1 = createGraphics(30, 10);
  P2 = createGraphics(60, 10);
  P3 = createGraphics(100, 10);
  D1 = createGraphics(27, 30);
  D2 = createGraphics(27, 30);
  Bg = createGraphics(100, 100);
}

void draw() {
  noLoop();
  // Sprite Sheet:
  drawR1();
  drawR2();
  drawR3();
  drawL1();
  drawL2();
  drawL3();
  drawP1();
  drawP2();
  drawP3();
  drawD1();
  drawD2();
  drawBg();
}

void drawR1() {
  R1.beginDraw();
  // R1.background(255); // remember to delete!!
  R1.noFill();
  R1.stroke(0);
  R1.ellipse(20, 5, 10, 10);
  R1.line(15, 10, 10, 15);
  R1.line(10, 15, 10, 22);
  R1.line(10, 22, 5, 18);
  R1.line(10, 15, 15, 22);
  R1.line(15, 22, 10, 30);
  R1.line(10, 15, 17, 18);
  R1.endDraw();
  image(R1, 0, 0);
  R1.save("figure-R1.png");
}

void drawR2() {
  R2.beginDraw();
  // R2.background(255); // remember to delete!!
  R2.noFill();
  R2.stroke(0);
  R2.ellipse(20, 5, 10, 10);
  R2.line(15, 10, 13, 25);
  R2.line(13, 25, 5, 20);
  R2.line(14, 18, 20, 23);
  R2.line(20, 23, 24, 30);
  R2.line(14, 15, 20, 14);
  R2.line(15, 10, 10, 15);
  R2.line(10, 15, 20, 23);
  R2.endDraw();
  image(R2, 37, 0);
  R2.save("figure-R2.png");
}

void drawR3() {
  R3.beginDraw();
  // R3.background(255); // remember to delete!!
  R3.noFill();
  R3.stroke(0);
  R3.ellipse(20, 5, 10, 10);
  R3.line(15, 10, 13, 20);
  R3.line(13, 20, 20, 21);
  R3.line(20, 21, 27, 25);
  R3.line(13, 20, 8, 25);
  R3.line(8, 25, 1, 19);
  R3.line(15, 12, 20, 17);
  R3.line(20, 17, 23, 13);
  R3.line(15, 12, 8, 7);
  R3.line(8, 7, 4, 9);
  R3.endDraw();
  image(R3, 74, 0);
  R3.save("figure-R3.png");
}

void drawL1() {
  L1.beginDraw();
  L1.translate(27, 0);
  // L1.background(255); // remember to delete!!
  L1.noFill();
  L1.stroke(0);
  L1.ellipse(-20, 5, 10, 10);
  L1.line(-15, 10, -10, 15);
  L1.line(-10, 15, -10, 22);
  L1.line(-10, 22, -5, 18);
  L1.line(-10, 15, -15, 22);
  L1.line(-15, 22, -10, 30);
  L1.line(-10, 15, -17, 18);
  L1.endDraw();
  image(L1, 0, 40);
  L1.save("figure-L1.png");
}

void drawL2() {
  L2.beginDraw();
  L2.translate(27, 0);
  // L2.background(255); // remember to delete!!
  L2.noFill();
  L2.stroke(0);
  L2.ellipse(-20, 5, 10, 10);
  L2.line(-15, 10, -13, 25);
  L2.line(-13, 25, -5, 20);
  L2.line(-14, 18, -20, 23);
  L2.line(-20, 23, -24, 30);
  L2.line(-14, 15, -20, 14);
  L2.line(-15, 10, -10, 15);
  L2.line(-10, 15, -20, 23);
  L2.endDraw();
  image(L2, 37, 40);
  L2.save("figure-L2.png");
}

void drawL3() {
  L3.beginDraw();
  L3.translate(27, 0);
  // L3.background(255); // remember to delete!!
  L3.noFill();
  L3.stroke(0);
  L3.ellipse(-20, 5, 10, 10);
  L3.line(-15, 10, -13, 20);
  L3.line(-13, 20, -20, 21);
  L3.line(-20, 21, -27, 25);
  L3.line(-13, 20, -8, 25);
  L3.line(-8, 25, -1, 19);
  L3.line(-15, 12, -20, 17);
  L3.line(-20, 17, -23, 13);
  L3.line(-15, 12, -8, 7);
  L3.line(-8, 7, -4, 9);
  L3.endDraw();
  image(L3, 74, 40);
  L3.save("figure-L3.png");
}

void drawP1() {
  P1.beginDraw();
  // P1.background(255); // remember to delete!!
  P1.stroke(0);
  P1.fill(255, 102, 102);
  P1.ellipse(15, 5, 30, 10);
  P1.endDraw();
  image(P1, 0, 80);
  P1.save("platform1.png");
}

void drawP2() {
  P2.beginDraw();
  // P2.background(255); // remember to delete!!
  P2.stroke(0);
  P2.fill(255, 102, 102);
  P2.ellipse(30, 5, 60, 10);
  P2.endDraw();
  image(P2, 0, 100);
  P2.save("platform2.png");
}

void drawP3() {
  P3.beginDraw();
  // P3.background(255); // remember to delete!!
  P3.stroke(0);
  P3.fill(255, 102, 102);
  P3.ellipse(50, 5, 100, 10);
  P3.endDraw();
  image(P3, 0, 120);
  P3.save("platform3.png");
}

void drawD1() {
  D1.beginDraw();
  // D1.background(255); // remember to delete!!
  D1.stroke(0);
  D1.fill(255, 255, 0);
  D1.rect(0, 0, 27, 30);
  D1.fill(0);
  D1.rect(20, 15, 2, 2);
  D1.endDraw();
  image(D1, 0, 140);
  D1.save("door1.png");
}

void drawD2() {
  D2.beginDraw();
  // D2.background(255); // remember to delete!!
  D2.stroke(0);
  D2.noFill();
  D2.rect(0, 0, 27, 30);
  D2.fill(255, 255, 0);
  D2.rect(0, 3, 14, 27);
  D2.fill(0);
  D2.rect(10, 16, 1, 1);
  D2.endDraw();
  image(D2, 0, 180);
  D2.save("door2.png");
}

void drawBg() {
  Bg.beginDraw();
  Bg.background(255, 153, 153);
  Bg.noStroke();
  Bg.fill(51, 204, 204);
  Bg.ellipse(20, 30, 10, 10);
  Bg.ellipse(80, 20, 10, 10);
  Bg.ellipse(40, 50, 10, 10);
  Bg.ellipse(20, 80, 10, 10);
  Bg.ellipse(85, 60, 10, 10); 
  Bg.endDraw();
  image(Bg, 0, 220);
  Bg.save("background.png");
}
Sign In or Register to comment.