I have been coding a simple 2D game in Processing 3.5.4 for university purposes, however I’m stuck in the part in which I should make the PNG spritesheet load in screen with all its colours and moves. What I see when I run my code is a black box that I can move with my keyboard. Could someone tell what I should do towards my code in order to load the spritesheet?
My code:
/****** Setup section starts here ****** //
// images
PImage background;
// bee character
float charSpeed = 5.5;
float charX, charY;
PImage charImage;
int numSprites = 28;
int spriteWidth = 90;
int spriteHeight= 90;
int spriteIndex = 1;
public void setup() {
size(800, 600);
noFill(); // to adjust the image in the screen properly in fullscreen
background = loadImage("YellowFlowers.jpg");
background.resize(width, height);
// load bee
charImage = loadImage("bee_spritesheet.png");
charImage.resize(90, 90);
frameRate(28);
noSmooth();
noFill();
charImage = createImage(spriteWidth,spriteHeight, RGB);
}
// ******* drawing section ! *********** //
// background draw
public void draw() {
image(background, 0, 0);
//bee character
// update keys
if(keyPressed){
if(keyCode == UP && charY > 0){
charY -= charSpeed;
}
if(keyCode == DOWN && charY < height){
charY += charSpeed;
}
if(keyCode == LEFT && charX > 0){
charX -= charSpeed;
}
if(keyCode == RIGHT && charX < width){
charX += charSpeed;
}
}
// render
image(charImage, charX, charY);
}
Can you post the initial bee spritesheet (charImage) here please?
In my understanding it contains a group of images of the bee (different frames).
Parse the initial grid
When the sheet is some kind of grid you want to parse this.
Let’s say there are 6x2 images in the spritesheet (correct these numbers in my codes).
You copy (using get()) the single images from the sheet into an image array.
before setup()
PImage[] mySpriteSheetArray = new PImage[ 6*2 ]; // init array
int counter=0; // a counter for the animation (the frames)
in setup()
int i=0;
for(int x=0; x < 6; x++) {
for(int y=0; y < 2; y++) {
mySpriteSheetArray[i] = charImage.get (x*spriteWidth, y*spriteHeight, spriteWidth,spriteHeight);
i++;
}
}
Use the new array
mySpriteSheetArray would contain then the frames for your animation and you need to have a counter
(this is in draw())
Of course often this is more complicate when there are different sets of images (in the initial sheet) when the bee moves left, moves right or sits (stings, sleeps…). Then we cannot use all images at once!
You need the stateBee to represent these different types of movements. For example when the bee moves left say stateBee =0; for right stateBee = 1; for sit stateBee = 2; or whatever.
Then you can for example have 3 different new arrays of images for each state of movement.
(or only one array and using different groups in it, like indexes 0 to 6, 7 to 12, 13 to 18 or so, but this is complicate to manage).
Remark 2
I don’t think you want to have reSize for charImage in setup(). It destroys the initial sprite sheet (in my personal opinion).
Sorry to have taken so long to reply to your answer! I received my final grade regarding my code yesterday or early today, and I am so happy towards it! Surely I will read your instructions very carefully when I have the proper time to dedicate to adjusting the entire code to better it.
This is the link to the help that I received on StackOverflow:
This is the code that I have sent to my university, which I consider as an unfinished code that I will work on when I have the chance to do it:
//*********************** Setup section starts here ***************************** //
// Lives counting and restarting game
int Lives = 100;
boolean lost=false;
// keys | keyboard
boolean upPressed = false;
boolean downPressed = false;
boolean leftPressed = false;
boolean rightPressed = false;
// bee player character
PImage charImage;
float charSpeed = 5.5;
float charX = 0;
float charY = 450;
float gravity = 1.5;
float vy = 0;
float bounce = -0.8;
// platforms
PImage bee;// bee
float beeX = 300;
float beeY = 490;
PImage hi; // hi
float hiX = 400;
float hiY = 300;
PImage ve; // ve
float veX = 420;
float veY = 440;
// more beehives
PImage beehive4;// beehive4
float bee4X = 120;
float bee4Y = 90;
PImage beehive5; // beehive5
float bee5X = 200;
float bee5Y = 290;
PImage beehive6; // beehive6
float bee6X = 40;
float bee6Y = 350;
PImage beehive7; // beehive7
float bee7X = 486;
float bee7Y = 90;
// more and more behives
PImage beehive9; // beehive9
float bee9X = 500;
float bee9Y = 700;
PImage beehive10; // beehive10
float bee10X = 550;
float bee10Y = 560;
PImage beehive11; // beehive11
float bee11X = 310;
float bee11Y = 660;
PImage beehive12; // beehive12
float bee12X = 100;
float bee12Y = 600;
// enemy ball
float ballX = 100;
float ballY = 100;
float xspeed = 80;
float yspeed = 80;
//////
public void setup() {
size(600, 800);
noStroke();
smooth();
noFill(); // to adjust the image in the screen properly in fullscreen
//load beehives
bee = loadImage("beehive 1.png");
bee.resize(100, 100);
hi = loadImage("beehive 2.png");
hi.resize(100,100);
ve = loadImage("beehive 3.png");
ve.resize(100, 100);
// load more beehives
beehive4 = loadImage("beehive 4.png");
beehive4.resize(100, 100);
beehive5 = loadImage("beehive 5.png");
beehive5.resize(100, 100);
beehive6 = loadImage("beehive 6.png");
beehive6.resize(100, 100);
beehive7 = loadImage("beehive 7.png");
beehive7.resize(100, 100);
// load more and more beehives
beehive9 = loadImage("beehive9.png");
beehive9.resize(100, 100);
beehive10 = loadImage("beehive10.png");
beehive10.resize(100, 100);
beehive11 = loadImage("beehive11.png");
beehive11.resize(100, 100);
beehive12 = loadImage("beehive12.png");
beehive12.resize(100, 100);
}
/*********** drawing section !***********/
public void draw() {
background(244, 240, 219);
noStroke();
// render beehives
image(bee, beeX, beeY);
image(hi, hiX, hiY);
image(ve, veX, veY);
// render more beehives
image(beehive4, bee4X, bee4Y);
image(beehive5, bee5X, bee5Y);
image(beehive6, bee6X, bee6Y);
image(beehive7, bee7X, bee7Y);
// render more and more beehives
image(beehive9, bee9X, bee9Y);
image(beehive10, bee10X, bee10Y);
image(beehive11, bee11X, bee11Y);
image(beehive12, bee12X, bee12Y);
// render bee
charImage = loadImage("bee walk 3.png");
charImage.resize(200, 200);
vy += gravity; // it applies gravity to the bee sprite
charY += vy;
if(charY > height - 150 )
vy *= bounce; // bouncing bee
// Add the current speed to the location.
ballX = ballX + xspeed;
ballY = ballY + yspeed;
// Check for bouncing
if ((ballX > width) || (ballX < 0)) {
xspeed = xspeed * -1;
}
if ((ballY > height) || (ballY < 0)) {
yspeed = yspeed * -1;
}
// Display at x,y location
stroke(0);
fill(179, 98, 0);
ellipse(ballX, ballY,80,80);
// update keys
if (upPressed) {
charY--;
}
if (downPressed) {
charY++;
}
if (leftPressed) {
charX--;
}
if (rightPressed) {
charX++;
}
if(keyPressed){
if(keyCode == UP && charY > 0){
charY -= 30;
}
if(keyCode == DOWN && charY < height){
charY += 10;
}
if(keyCode == LEFT && charX > 0){
charX -= 30;
}
if(keyCode == RIGHT && charX < width){
charX += 10;
}
}
// CHECK COLLISION: CIRCLE
if (dist(ballX, ballY, charX, charY) < charImage.width) {
// tint red to display collision: placeholder for subtracting bee health
tint(192, 0, 0);
}else{
noTint(); }
//// Lives countig and restarting game
if (dist(ballX, ballY, charX, charY) < charImage.width) {
Lives = Lives -10;
}
////
if (Lives <= 0) {
noLoop();
}
////
if (Lives <= 0) {
Lives = 100;
loop();
}
////
// Lives counting and restarting game
textSize(40);
text("Lives = "+Lives,40,50);
fill(0,0,0);
// render bee character on screen
image(charImage, charX, charY);
}
