Displaying part of an image causes flipping a blurs

Processing Coding Questions
1

Hello! I was trying to set up the basis for a game engine and wanted to load a sprite sheet that would then display only parts of itself at a time. Did some research and found this which looked to have exactly what I wanted! I set up a basic test that would size an image to your screen with appropriate margins, along with setting some variables for scaling other aspects.

Here is that code: 
PImage test;
PImage player;
double scale;
double screenWidth;
int xOffset;
void setup() {
  fullScreen();
  test = loadImage("SILVER TORIZO BOSS ROOM.2022-10-11.03-01-54.png");
  scale = (displayHeight / test.height);
  screenWidth = (int) (scale * test.width);
  xOffset = (int) ((displayWidth - screenWidth) / 2);
}

void draw() {
  background(100);
  image(test, xOffset, 0, (int) screenWidth, displayHeight);
  fill(0);
  rect(0, 0, xOffset, displayHeight);
  rect((int) (xOffset + screenWidth), 0, xOffset, displayHeight);
}
Result of running code:

Sundown 10_12_2022 1_00_31 PM
Sundown 10_12_2022 1_00_31 PM1920Ă—1080 108 KB

Wonderful! Now, I added the code to zoom in on part of this image to check to see if I had a handle on how to do so. So the

  image(test, xOffset, 0, (int) screenWidth, displayHeight);

became

  image(test, xOffset, 0, (int) screenWidth, displayHeight , 0, 48, 16, 16);
Which gives this

Had to use imgur because only one embed for new users

Doubling the Y fixes the image to show just the block, but it’s still flipped as well as very blurry. (I’m sure the blurring isn’t the image itself, the pixels are entirely crisp when I zoom in using paint)

So, I’m kinda at a loss here. There seems to be some mysterious method described by “gordancsa” that is mentioned in the other forum post I linked, but the link to said method throws a page not found. Is there something I’m doing wrong? Is this an issue with processing itself that I can’t fix? Does the mythical gordancsa method exist? Any help is appreciated, but either way thanks for reading and have a nice day :smiley:

2 Likes
2

Update: discovered noSmooth() which fixed the blur issue :grin:

2 Likes
3

Update 2: discovered get()! Can use this to circumnavigate the issue entirely. Will have to do more documentation surfing before asking questions next time, lol :sweat_smile:

3 Likes
4

Great that you managed to solve your issue :slight_smile: Could you share an example showing your solution? This might help someone else in the future :purple_heart:

1 Like
5

Sure thing!

PImage playerSheet;
PImage player;
double counter;

void setup() {
  frameRate(60);
  fullScreen();
  noSmooth();
  playerSheet = loadImage("playerAnimSheet.png");
  counter = -0.5;
}
//Spritesheet contains sprites that are 16 pixels wide and 32 pixels tall. There are 
// four frames of player's animation and we want them to run forever
void draw() {
  background(0);
  counter += 0.125;
  if (counter == 3.5) {
    counter = -0.5;
  }
  player = (playerSheet.get((int) (Math.round(counter) * 16), 0, 16, 32));
  image(player, 0, 0, 100, 200);
  System.out.println(counter);
}

Spritesheet used:
playerAnimSheet
This grabs a range of the player sprite sheet every frame and displays it, as well as slowly linearly incrementing the range that’s being grabbed to snap between frames every so often. The result is a walking stick figure!

1 Like