Month: October 2021

Inspiration:

I really like trains, and so I thought I could try to make a basic train simulator in Processing. I wanted the user to control a subway train between two stations, have to navigate a red signal, and stop and the next station without overshooting the platform. I also wanted the background to be populated with other NPC trains.

Process:

I started by trying to build the background for the simulator, which would simply be a top-down view of the tracks and tunnel. I made a platform, two rails for the tracks, and made a class for trains. I tried to add a .png image for the tracks, but for some reason, it wouldn’t load in. I never got an error message, I simply couldn’t see the image. As a place-holder, I added some rectangles for the rails. You can’t control the train yet, but the goal is to be able to.

Final Work:

Challenges:

I had a lot of challenges so far. For some reason, the rectangle of the subway train stays on the screen without disappearing. As mentioned above, I can’t load the tracks .png file, and finally I haven’t yet added user control over the train.

Code:

Train[] trains;

int platformDepth;
int platformLength;
int railWidth;
int railSpacing;
int sleeperWidth;
int sleeperLength;
int sleeperSpacing;

PFont stationFont;
PImage img;

void setup(){
  size(1280,640);
  background(255);
  stationFont = createFont("Courier New", 30);
  
  
  img = loadImage("subwayTracks.png");


  
  platformDepth = 100;
  platformLength = 800;
  railWidth = 2;
  railSpacing = 28;
  sleeperWidth = 5;
  sleeperLength = 30;
  sleeperSpacing = 15;
  
  trains = new Train[3];
  for (int i=0; i<trains.length; i++) {
    trains[i] = new Train(0, height-platformDepth-10-railSpacing, (10));
  }
  
  
}

void draw(){


  
//platform
  stroke(0);
  fill(255, 200, 100);
  rect(width/2-platformLength/2, height-platformDepth, platformLength, platformDepth);
//rails
  noStroke();
  fill(0);
  rect(0, (height-platformDepth) - 10, width, railWidth);
  rect(0, (height-platformDepth) - 10 - railSpacing, width, railWidth);
  
  noStroke();
  fill(0);
//  for (int i=0; i>0; i++){
//    rect(i, height-platformDepth - sleeperLength, sleeperWidth, sleeperLength);
//  }

 for (int i=0; i<trains.length; i++) {
    trains[i].runTrain();
    
  textFont(stationFont);
  textAlign(CENTER);
  text("23rd St. Station", width/2, height-platformDepth+50);
  
  image(img, (height-platformDepth) - 10, width/2);

  
}
}

class Train{
  float posX, posY;
  float trainWidth, trainLength;
  color trainColor;
  float wheelWidth, wheelHeight;
  float speed;
  
  Train(float _posX_, float _posY_, float _speed){    
    posX = _posX_;
    posY = _posY_;
    trainWidth = 40;
    trainLength = trainWidth*1;
    trainColor = color(126,127,128);
    speed = _speed;

  }
 
  void runTrain(){
    trainBody();
    driveTrain();
  }
  
  void constructTrain(float _posX_, float _posY_){
 
}

void trainBody(){

  fill(trainColor);
  noStroke();
  rect(posX, posY, trainLength, trainWidth, 7);
  
  //trailing carriages
  //fill(trainColor);

  rect(posX-trainLength-10, posY, trainLength, trainWidth, 7);
  rect(posX-(trainLength*2)-10, posY, trainLength, trainWidth, 7);
}


void driveTrain(){
  posX += speed;
  
  if (posX > width+trainWidth/2) {
    posX = -trainWidth/2;
  }
  
 }
}

 

 

Inspiration:

The game is inspired by themes from “Nyan Cat: Lost in Space”, and the game style/mechanics are similar to Chrome’s dinosaur game. The main similarities with the dinosaur game is that it is controlled by one key and there is no win condition. The game continues to run until the player hits one of the death obstacles or moves off screen.

Midterm progress:

So far, I have collected the main images and sounds which I will be using. I also have a plan for the game mechanics, which I have yet to implement most of. The game consists of one character which can be controlled by the space bar. The character is always moving along the x values, gravitating towards the bottom of the screen, and bouncing between the two “walls” at each side of the screen. The goal of the player is to keep the character on screen else the game ends. Obstacles will include objects falling from the top and bubbles rising from the bottom. If a falling object hits the character, the character will gravitate faster to the bottom, and if a rising bubble collides with the character, the character will be paralyzed for a set amount of time and will continue to rise to the top of the screen. The score will be increasing as long as the game has not ended, and bonus object might appear to help the player increase their score.

Below is a visual of the game and a portion of the code.

View post on imgur.com

PImage jazz_sheet;
PImage[] jazz;
Star[] stars;
int starcnt;
int step = 0;
int x;
int y;
float speed = 3;
float gravity = 0.5;
int wall;

void setup() {
  fullScreen();

  wall = 80;
  
  starcnt = 80;
  stars = new Star[starcnt];
  
  for (int i=0; i<starcnt; i++){
    stars[i] = new Star();
  }

  jazz_sheet = loadImage("jazz.png");
  jazz = new PImage[12];

  int w = jazz_sheet.width/12;

  for (int x=0; x<12; x++) {
    jazz[x] = jazz_sheet.get(x*w, 0, w, jazz_sheet.height);
  }

  x = width/2;
  y = height/2;

  imageMode(CENTER);
}

void draw() {
  background(0);

  if (keyPressed && keyCode==UP) {
    gravity -= 0.1;
    speed += 0.1;
  } else {
    gravity += 0.1;
    speed -= 0.1;
  }

  if (frameCount%6==0) {
    step = (step+1) % 12;
  }
  
  for (int i=0; i<starcnt; i++) {
    stars[i].display();
  }

  pushMatrix();
  if (speed>0) {
    image(jazz[step], x, y);
  } else {
    //scale(-1, );
    image(jazz[step], x, y);
  }
  popMatrix();

  pushMatrix();
  rectMode(CORNERS);
  fill(52, 232, 221);
  rect(0, 0, wall, height);
  rect(width, 0, width-wall, height);
  popMatrix();

  x+=speed;
  y+=gravity;

  if (x+100 >= width-wall) {
    speed *= -1;
  }
}

//void keyPressed() {
//  if (keyCode == 49) {
//    gravity -= 0.5;
//    speed += 1;
//  } else {
//    gravity += 0.5;
//    speed -= 1;
//  }
//}

class Star {
  float x, y;
  float y_min, y_max;
  float diameter;
  float ty;
  float speed;
  Star() {
    diameter = 3;
    x = -diameter/2;
    x = random(0,width);
    y_min = 0;
    y_max = height;
    y = random(0,height);
    ty=random(0, 10000);
    //ty = 0.1;
    speed = random(0.1, 0.5);
  }
  
  void motion() {
    y += map(noise(ty), 0, 1, -1, 1);
    //y += noise(ty);
    x += speed;
    ty += 0.02;
  }
  
  void reposition() {
    if (x >= width+diameter/2) {
      x = -diameter/2;
    }
  }
  
  void display() {
    fill(255);
    motion();
    noStroke();
    ellipse(x, y, diameter, diameter);
    reposition();
  }
}

 

As part of the midterm project, I am designing a game around the theme of coping with stress as an NYUAD student. It was really difficult for me to settle on one single idea as I found myself trying several different things for hours and then ultimately deciding on this idea finally a night before the submission is due.  The intended game design is to collect the falling activities (that increase or help cope with stress levels). Each activity is associated with a certain number of points and special abilities such as boosted/ slowed down the speed of the player. The player moves across the screen horizontally and tries to catch points. All missed points are added to the stress level and if the stress level reaches 320, the player loses. If the player collects 320 points first, he/she wins. The user is allowed the option to restart the game also.

Production

To start with the implementation, I sketched out some layouts of my instruction screen and main page.

I then created a simplistic version of these pages to later come back and design them. The whole navigation across the game is based on keypresses and mouse presses. Specific keys are set to allow the selection in the game and proceed forward with the setting. Below are the snapshots:

Here is the code worked on until now

//Global variables responsible for various states in game
//That includes: difficulty select, playing game, game over
Game start;
Player player;
String state = "MAIN";
String difficulty = "EASY";
Activity[] activityarray;

//setup the game
void setup(){
  size(600,450);
  start = new Game(state, difficulty);
  activityarray = new Activity[30];
  //choose random x values and drop activities
  for(int i=0; i<activityarray.length; i++){
    float x_pos = random(0,width-50);
    float type = random(1,50);
    String activity_ability = "FOOD";
    //randomly choosing ability
    if(type < 5){
      activity_ability = "LEISURE";
    }
    else if(type > 45){
      activity_ability = "GOODGRADES";
    }
    if(type > 10 && type <=25){
      activity_ability = "DEADLINE";
    }
    //create new activity object
    activityarray[i] = Activity(x_pos,start.speed,activity_ability);
  }
}

//game class
class Game{
  String mode;
  String level;
  int score = 0;
  int lostpoints = 0;
  float speed = 0;
  float drop_speed = 30;
  float frames = 0;
  
  Game(String state, String difficulty){
    mode = state;
    level = difficulty;
  }
  
  
  void display(){
    textAlign(CENTER,CENTER);
    
    
    //check for game over
    if(lostpoints >= 320 || score >= 320){
      mode = "OVER";
    }
    
    //load the main landing page
    if(mode=="MAIN"){
      loadPixels();
      for(int y=0;y<height;y++){
        for(int x=0;x<width; x++){
          int index = x+y*width;
          pixels[index] = color(map(y,0,height,155,0),0,map(y,0,height,255,0),50);
        }
      }
      updatePixels();
      textSize(50);
      text("//GAME NAME",width/2,height/3);
      textSize(18);
      text("START GAME (G)",width/2,2*height/3 - height/14);
      text("INSTRUCTIONS (I)",width/2,2*height/3);
      textSize(14);
      text("Press corresponding keys to initiate the game",width/2,height-height/14);
    }
    
    //loading the instructions page
    if(mode=="INSTRUCTIONS"){
      background(120);
      textSize(30);
      text("//INSTRUCTIONS",width/2,height/10);
      textSize(15);
      text("//Use arrow keys to move across the screen",width/2,2.5*height/10);
      text("//Eat healthy to gain +10 pts",width/2,3.5*height/10);
      text("//Perform well on assignment to get +20 pts ",width/2,4.5*height/10);
      text("//Do refresing leisure activities to get boosted speed",width/2,5.5*height/10);
      text("//Deadline pressure decreases speed",width/2,6.5*height/10);
      text("//Missed pts are added to stress level. First to reach 320 pts win",width/2,7.5*height/10);
      textSize(22);
      text("//START GAME (G)",width/2,9*height/10);
    }
    
    if(mode=="DIFFICULTY"){
      background(120);
      textSize(30);
      text("//DIFFICULTY LEVEL",width/2,height/10);
      textSize(20);
      text("//EASY (E)",width/2,3.5*height/10);
      text("//MEDIUM (M)",width/2,4.5*height/10);
      text("//HARD (H)",width/2,5.5*height/10);
    }
    
    
   //game over screen
    if(mode=="OVER"){
      background(150);
      textSize(40);
      text("GAME OVER",width/2, height/5);
      textSize(25);
      text("Your Score:",width/2 - width/6, height/3 +height/15);
      text("Stress Level:",width/2 -width/6, height/3 + height/7);
      text(score,width/2, height/3 +height/15);
      text(lostpoints,width/2, height/3 + height/7);
      text("points",width/2 + width/6, height/3 +height/15);
      text("points",width/2 +width/6, height/3 + height/7);
      if(score>=lostpoints){
        if(score==lostpoints){
          text("IT'S A TIE\nWanna try again?", width/2, 2*height/3);
        }
        else{
          text("YOU WON", width/2, 2*height/3);
        }
      }
      else{
        text("YOU LOST\nWanna try again?", width/2, 2*height/3);
      }
      textSize(15);
      text("//Please click on screen to restart game",width/2,9*height/10);     
    }
    
    
    //main game screen
    if(mode=="PLAY"){
      background(255);
      
    }
  }  
}

//player class
class Player{
  float pwidth= 100;
  float pheight = 100;
  float base = 600;
  float xPos = width/2 - pwidth/2;
  float yPos = height - (height - base) - pheight;
  boolean left = false;
  boolean right = false;
  float speed = 5;
  float fast_time = 0;
  float slow_time = 0;
  
  Player(){}
  
  void display(){
    
    //tracking the time when boosted speed
    if(speed == 10){
      fast_time += 1;
      //last 100 frames
      if(fast_time == 100){
        fast_time = 0;
        speed = 5;
      }
    }
    
    //tracking the time when slowed speed
    if(speed == 1){
      fast_time += 1;
      //last 100 frames
      if(fast_time == 100){
        fast_time = 0;
        speed = 5;
      }
    }
    
    //update the position on screen
    update();
    
    //change color based on ability
    if(speed == 1){
      tint(214,87,77);
    }
    else if(speed == 10){
      tint(237,211,81);
    }
    
    //draw the player
    fill(50,0,50);
    ellipse(xPos,yPos,pwidth,pheight);
    
    //stop tint
    noTint(); 
  }
  
  //update the position of the player
  void update(){
    if(left==true && xPos >=0){
      xPos -= speed;
    }
    if(right==true && xPos <= width - pwidth){
      xPos += speed;
    }
  } 
  
}


//Class of falling activities/ points
class Activity{
  
  //resizing required
  float awidth = 50;
  float aheight = 40;
  //coordinates
  float yloc = -aheight;
  float xloc;
  float speed;
  String ability;
  //standard point
  int point = 10;
  //image
  PImage activityimg;
  
  Activity(float xpos, float s, String a){
    xloc = xpos;
    speed = s;
    ability = a;
    
    //updating point values
    if(ability == "GOODGRADES"){
      activityimg = loadImage("test.png");
      point = 20;
    }
    else if(ability == "LEISURE"){
      activityimg = loadImage("leisure.png");
    }
    else if(ability == "DEADLINE"){
      point = 0;
      activityimg = loadImage("deadline.png");
    }
    else{
      activityimg = loadImage("food.png");
    }
  }
  //display the images
  void display(){
    image(activityimg,xloc,yloc,awidth,aheight);
  }
    
  //update the locations
  void update(){
    //move down
    yloc += speed;
  }
    
  //check for collisions
  boolean collisions(){
    if((player.xPos + player.pwidth >= xloc) && (player.xPos <= xloc + awidth)){
      if((yloc + aheight >= player.yPos) && (yloc <= player.pheight + player.yPos)){
        
        //check if it collides with special activity
        if(ability == "LEISURE"){
          player.speed = 10;
        }
        if(ability == "DEADLINE"){
          player.speed = 1;
        }
        return true;
      }
    }
    return false;
  }
}

void draw(){
  start.display();
}


//keep track of key presses on screen
void keyPressed(){
  if(start.mode == "MAIN"){
    if(keyCode == 73){        //73 = 'i'
      start.mode = "INSTRUCTIONS";
    }
    if(keyCode == 71){        //71 = 'g'
      start.mode = "DIFFICULTY";
    }
  }
  
  if(start.mode == "INSTRUCTIONS"){
    if(keyCode == 71){        //71 = 'g'
      start.mode = "DIFFICULTY";
    }
  }
  
  if(start.mode == "DIFFICULTY"){
    if(keyCode == 69){        //71 = 'e'
      difficulty = "EASY";
      start.speed = 3;
      start.mode = "PLAY";
    }
    if(keyCode == 77){        //71 = 'm'
      difficulty = "MEDIUM";
      start.speed = 6;
      start.mode = "PLAY";
    }
    if(keyCode == 72){        //71 = 'h'
      difficulty = "HARD";
      start.speed = 10;
      start.mode = "PLAY";
    }
  }
  
  //move until key pressed
  if(start.mode=="PLAY"){
    if(keyCode == RIGHT){
      player.right = true;
    }
    if(keyCode == LEFT){
      player.left = true;
    }
  }

}


//stop motion when key is released
void keyReleased(){
  if(start.mode == "PLAY"){
    if(keyCode == RIGHT){
      player.right = false;
    }
    if(keyCode == LEFT){
      player.left = false;
    }
  }
}

//replay the game
void mouseClicked(){
  if(start.mode=="OVER"){

    start.mode = "MAIN";
    noTint();
    start = new Game("MAIN","EASY");
  }
}

 

Challenges

Aside from taking so long to decide on one single project, I have encountered several issues. First and foremost, my whole game can not be executed once all the classes have been defined and all the code has been linked together. I have done my best to make as much progress I could on the overall game, but I am hoping with a few more hours of work, I’ll be able to finish off linking my code and making it work.

More to Add

Firstly, I need to finish off the basic code and allow for the basic functioning of the game to be complete. Then, I need to work on the design and aesthetics of the screen and overall game. Lastly, I need to resize my images and add sound to the game.

 

 

For our midterm project, we were tasked with making a game on Processing.

Inspiration

I was inspired by Fruit Ninja to make this kind of game. In fruit ninja, you slice fruits and avoid bombs.

Idea

My idea is to make a game that works similar to fruit ninja but instead of cutting fruits, we cut covid related things; like pills, vaccines, masks, etc and avoid cutting the virus. This game is called covid ninja.

Process

I started by assigning an X and Y variable that works for assigning the coordinates of the fruits. We want gravity in the covid objects, so we added randomize gravity between 0.1 and 0.5, which is further added with velocity to make it look like a free-falling object. Then, I will use a mouse pressed at the location of the object to slice the items. There will also be a slow time powerup which will come to a couple of times in the game for a few seconds to make the items go slower.

This is what the free-falling objects would look like for now:-

The code goes like this:-

int height = 720;
int width = 1040;

String[] covidType = {"mask", "sanitizer", "virus", "vaccine", "pills"};
Game game = new Game();

void setup(){
  size(1040, 720);
  background(0);
}

void draw(){
  background(0);
  game.display();  
}

class Covid {
  int x, y;
  float vy, g;
  PImage img;
  int img_w, img_h;
  
  Covid() {
    x = (int) random(150, width-150);
    y = 0;
    g = random(0.1,0.4);
    img = loadImage(str((int) random(1,6)) + ".png");
    img_w = 100; img_h = 100;
  }
  
  void gravity() {
    vy = vy + g;
  }
  
  void update() {
    gravity();
    y += vy;
  }
  
  void display() {
    update();
    image(img, x, y, img_w, img_h);
  }
}

class Game {
  int difficulty;
  int score;
  int missed;
  int numCovidItems;
  boolean roundOver;
  Covid[] covid;
  
  Game() {
    difficulty = 1;
    score = 0;
    missed = 0;
    roundOver = true;
  }
  
  void updateCovid(){
    numCovidItems = difficulty*3;
    covid = new Covid[numCovidItems];
    for (int i=0; i<numCovidItems; i++){
      covid[i] = new Covid();
    }
  }
  
  void display(){
    if(roundOver == true){
      updateCovid();
      roundOver = false;
    }
    numCovidItems = difficulty*3;
    for (int i=0; i<numCovidItems; i++){
      covid[i].display();
    }
  }
}

 

For the midterm project, I wanted to make something inspired by the classic Nintendo game Road Fighter, something which I have spent hours playing on my uncle’s old console.

Here is a video of the game for reference:

My game would only be vaguely inspired by the elements of this game. For one, the mechanism is different. I will keep the player stationery while the background moves. I am also going to change the theme to that of a Harry Potter/magic inspired one, based on the sprites I find.

The similarities are that I will also have objects like potions or chocolates to pick up, which will increase the player’s health and there will be other “enemies” such as Dementors (hopefully) in the path which you should strive to avoid. Later in the game, there are blue moving cars which might swerve onto your path, and similarly, I plan to have a moving category of enemies too.

So far, I have written the code for the classes which the main character and the objects belong to. The main character can move left and right from edge to edge of the road, using keyCODE and boolean variables. The objects are initialised with random y values with a range starting from a high negative number, so that they will appear on screen slowly. I will adjust these numbers once I know the length of my game.

The class defining the main character:

class Character {
  float x, y, r, vx;
  boolean pressed_left; //for the keys pressed
  boolean pressed_right;
  
  Character(float x, float y, float r) {
    this.x = x;
    this.y = y;
    this.r = r;
    vx = 0;
    pressed_left = false;
    pressed_right = false;
  }
  
  void display() {
    update();
    fill(134, 46, 46); //placeholder
    ellipse(x, y, 2*r, 2*r);
  }

  void update() {
    if (pressed_left == true && x-r>250)
      vx = -5;
    else if (pressed_right == true && x+r<750)
      vx = 5;
    else
    vx = 0;

    x+=vx;
  }

This is the class for the objects:

class Object {
  float x, y, r;

  Object(float x, float y, float r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }

  void update() {
    y += 2; //for downward movement
  }

  void display() {
    update();
    fill(36, 24, 180);
    ellipse(x, y, 2*r, 2*r); //recording has old version with just r
  }

}

This is the main sketch so far:

Character character;
Object[] objects;

void setup() {
  size(1000, 720);
  character = new Character(500, 500, 60);
  objects = new Object[30];
  for (int i = 0; i<30; i++) {
    objects[i] = new Object(random(275, 725), random(-5200, 695), 30); //so that as the negative is updated to positive, the illusion of movement is created
  }
}

void draw() {
  //placeholder backgrounds
  background(139, 138, 147);
  noStroke();
  fill(98, 222, 92);
  rect(0, 0, 250, 720);
  fill(0, 0, 0);
  rect(750, 0, 1000, 720);
  //displaying the objects and character
  for (int i = 0; i<30; i++) {
    objects[i].display();
  }
  character.display();
}

//for movement when the left or right keys are pressed
void keyPressed() {
  if (keyCode == LEFT)
    character.pressed_left = true;
  else if (keyCode == RIGHT)
    character.pressed_right = true;
}
void keyReleased() {
  if (keyCode == LEFT)
    character.pressed_left = false;
  else if (keyCode == RIGHT)
    character.pressed_right = false;
}

With these placeholder ellipses and rectangles, the program looks something like this:

I am hoping to make this all more efficient by converting some of these classes into super classes. After this, apart from the sprites obviously and incorporating the design of the theme, I have to insert the enemy class, create those objects, and then link them to the character’s health. Every collision with an enemy would be detrimental to the health. I also have to update it such that once the character has touched the object, they disappear from the screen. There will be a health bar on the side which updates depending on whether you picked up objects or bumped into enemies. This game is also going to be timed, so if your health goes to zero or you aren’t able to reach the finish line (which will also be themed) within time, the game is over. But there will always be the option to restart the game and try again!

But here, this a video of the movement so far:

I hope I am able to achieve my vision with this and this is transformed into something much more magical! (all by next week :p)

Description:

So my assignment is a video game where the player has to cross the road without hitting itself with any of the cars.

Process:

I got this idea while…well, crossing the road. This is just a rough sketch of what I actually wanted to do. The roads are made out of the rectangles. The cars are made using the rectangle with curved edges and ellipses for wheels. Along with a sun in the corner.

For now instead of a sprite sheet, I have used an ellipse for the players to detect the motion. Once the sprite sheet in used it, I expect the figure to have reactions for instances like getting hit by the car. I also plan in adding this image to make the game more realistic:

The speed of the car is randomly chosen between 1 and 5, every time the car leaves the screen so that the player does not get used to the speed. Every time the player is successful in crossing the road, the level increases, and the speed of the car also increases to make the game more difficult. As of now, I have only made the first level.

Also every time the player hits the car, the game restarts. I plan on adding upto 3 lives to this game to make it more intense and interesting. To give it a real life effect I will also add the following picture in the background later since at the moment it is creating an issue with the programme.

Here’s a demo of the game :

Code:

Continue reading “Midterm in progress: Don’t crash!”

Inspiration:

There are many games but I was inspired by the popping of the balls which is very fun to play. The visualization of bouncing of ball improves eye movement. It comes under stress reliever games category and the game logic is so simple so anyone can play and used to of the game. The game gives a perfect movement break and enhance sensory regulations in a smooth way. The health boosting game logic inspired me to implement bouncing ball game.

Rules for the game:

The rules for the game is very simple and one can play the game even by mouse movement. The main objective of the game is to pop all of marbles by bouncing balls. The top of the screen is filled with random marbles. At the bottom of screen we have a pile or stick on which ball is bouncing. We can bounce the ball in any direction to break the marbles which are at top of the screen. The user wins when screen cleared out from all marbles.  The user will lose the game if the ball drops from the bottom of the screen.

Implementation Strategy:

For the implementation I will make class for marble which represents the marble object. The color of the marble will be randomly selected. Same in pattern I will implement functions based on the behaviors and game logic and then simply calling those functions in order to perform actions at run time.

Objects using in Game:

Ball Object: This is the ball object which is bouncing on the stick placed at the bottom of the screen.

Marble Object: This is the marble object and in game the marbles will be placed at random positions on top of the screen with random colors.

Storyboard of the Game:

The game comprises of 3 screens.

1. The initial screen for starting the game and prompting for how to play the game.
2. The main screen where marbles are placed at top of screen and ball object is placed for bouncing.
3. The third and final screen is for showing the score of the game. The third screen will pop up either when all marbles cleared up or when ball drops from the bottom of the screen.

 

Progress Code:

void setup() 
{
  
  size(800, 800);
  for(int i=0;i<height;i++)
  {
    for(int j=0;j<200;j++)
    {
        noStroke();
       fill(random(255));
        rect(i,j,50,50);
      j=j+50;
    }
    i=i+50;
  }
  
}

Progress Visualization:

For our midterm project, we were tasked with making a game on Processing, so I started by making a sketch of the layout for my game, and I wrote down a simple explanation about the game.

Idea:
Basically, the player will move a sprite around the screen with the arrow keys and collects the green circles, each worth 1 point. Alternatively, the player must avoid the pink ones. If you collide with a pink circle, you will lose 1 point. Get 10 points to win the game!

Here is my sketch of the layout-

Process:
So, my current plan is to make booleans so that I can switch between the different pages. And I think I’ll have to make 2 classes: one for the pink circles and one for the green. As for the point counter, I still haven’t figured out how to implement that.

Progress:
And so far, my sprite is moving with the arrow keys on screen, and I haven’t had time to start making separate pages, I will work on it over the weekend.

Sprite Code:

PImage linksprite , bg ; // all of the images 
PImage[][] sprites;
int direction = 1;
int step = 0;
int x;
int y;
int speed = 3;
int mode;
boolean start; // for the start screen 
boolean play; // game screen
int pts; // points in game


void setup() {
  size (1000,700);
//bg = loadImage("bg");
  
 // start = true; 
  
  //if (start == false){
  linksprite = loadImage("linksprite.png");
  sprites = new PImage[4][10]; // 12 images across, 4 down, in the spritesheet

  int w = linksprite.width/10;
  int h = linksprite.height/4;

  for (int y=0; y < 4; y++) {
    for (int x=0; x< 10; x++) {
      sprites[y][x] = linksprite.get(x*w, y*h, w, h);
    }
  }
 
//}
  x = width/2;
  y = height/2;
  
  imageMode(CENTER);
}

void draw() {
  background(255);
  //if (start == true){
  //background(bg);
 
  //}
  
  
  //look at sprite sheet to determine which direction is which
  if (keyPressed) {
    
    //if (keyCode == ){
    
    
    //}
    
    
    if (keyCode == DOWN) {
      direction = 0;
      y+=speed;
    }
    if (keyCode == LEFT) {
      direction = 1;
      x-=speed;
    }
    if (keyCode == RIGHT) {
      direction = 3;
      x+=speed;
    }
    if (keyCode == UP) {
      direction = 2;
      y-=speed;
    }
    if (frameCount%speed==0) { //the % is a modulo - its an easy way to make a loop 
      step = (step+1) % 10;
    }
  }

  image(sprites[direction][step], x, y);
  

}

 

Inspiration

On a Saturday night, NYUAD students tend to have more meal swipes than they need. Students face the dilemma of either stacking more food with their extra swipes or losing all the swipes the next day.

The idea then is to create a game where the player (student) would try to stack as much food as can be balanced on an unstable food tray.

To win and make the most of your meal swipes, just be patient and stack away. Oh, don’t forget we are working with time😄

Process 

To build this game, I need

1. Start / Instructions page

2. Game window

3. Win / Lose / Restart Page

4. Sound Integration

Progress Work

Let’s get to work

I explored how I would be changing the game screens based on the stage of the game. I created functions to take care of each of the 3 main stages of the game: start, gameplay, and game over. I represented the different screens with 3 different colors.

I moved on to integrate a timer for the gameplay screen which when runs out and automatically changes the screen to indicate game over. That’s when I started facing difficulties.

I added some buttons and signal text to make the user’s life easier.

Demo

 

Challenges

Timer!

For some reason, I couldn’t figure it out for a long time, my timer was not working as expected, the gameplay screen didn’t change even if the timer was out. Oh, I get it now! I fell into the trap of not scoping my variables properly. I experimented with the location of my timer function and I finally got it to work when I globalized the variables accessed by the timer function.

Please stay we me, we are not done with the timer yet! I decided to print the timer values on the game screen and I was getting negative seconds. How? Yeah, I was confused as you are. Still haven’t figured why but it seems to work fine now.

// THE THREE SCREENS
// 0: Start Page (Instructions)
// 1: Game Window
// 2: Win / Lose Page ( GameOver)


int gameScreen = 0;
int score = 0;
int totalTime = 10; // 10 seconds
int savedTime = second();
int passedTime;


void setup() {
  size(640, 640);
}

void draw() {
  // Display the contents of the current screen
  if (gameScreen == 0) {
    startScreen();
  } else if (gameScreen == 1) {
    gameWindow();
    timer();
  } else if (gameScreen == 2) {
    gameOverScreen();
  }
}



// THE THREE SCREENS
void startScreen() {
  background(#6f00ff);
  textAlign(CENTER);
  textSize(70);
  text("It's Saturday Night", width/2, height/2-50);
  textSize(20);
  text("Stack Up as much food as you can while you have the time.", width/2, height/2);
  text("Click on the Start button, The clock is ticking!", width/2, height/2 + 50);
  textSize(20);

  // start button
  noFill();
  rectMode(CENTER);
  rect(width/2, height-100, 120, 30, 10);
  text("Click to start", width/2, height-95);
}


void gameWindow() {
  background(#a75502);
  textSize(50);
  text("Timer!", width/2, 95);
}

void gameOverScreen() {
  background(#6f00ff);
  textAlign(CENTER);
  fill(236, 240, 241);
  textSize(15);
  text("Your Score", width/2, height/2 - 120);
  textSize(130);
  text(score, width/2, height/2);

  // restart button
  noFill();
  rectMode(CENTER);
  rect(width/2, height-100, 150, 30, 10);
  textSize(20);
  text("Click to Restart", width/2, height-95);
}


// SCREEN CHANGERS
void  startGame() {
  gameScreen=1;
}

void gameOver() {
  gameScreen=2;
}

// RESTART

void restart() {
  score = 0;
  savedTime = second();
  startGame();
}


// TIMER

void timer() {
  passedTime = second() - savedTime;
  textSize(100);
  text(passedTime, width/2, height/2 + 30);
  if (passedTime > totalTime) {
    gameOver();
  }
}



// BUTTON CONTROLS
void mousePressed() {
  // toggle between instructions and restart when mouse is clicked
  if (gameScreen==0) {
    startGame();
  }
  if (gameScreen==2) {
    restart();
  }
}

Next Steps

It’s going to be more fun and challenging. I will be working mainly on the gameplay screen and polishing the start and end screen

1.  Create the assets ( the food to be stacked) and the unstable tray block

2. Work on the game mechanics ( counting length of the food stack )

3. Add sound to make it lively

PS. Would appreciate any resources to achieve the above steps. I know it’s going to be existing!

 

 

 

Inspiration:

For my midterm project, I was inspired by the mechanics of the Chrome Dino Runner game and tried to create a newer version with more features.

Process:

First, the layers of the background are loaded, then resized to fit the screen.

// Load the background images
void load(){
  bg7 = loadImage("assets/bg.png");
  // Resize the images
  bg7.resize(960,540);
  bg6 = loadImage("assets/bg6.png");
  bg6.resize(960,540);
  bg5 = loadImage("assets/bg5.png");
  bg5.resize(960,540);
  bg4 = loadImage("assets/bg2.png");
  bg4.resize(960,540);
  bg3 = loadImage("assets/bg4.png");
  bg3.resize(960,540);
  bg2 = loadImage("assets/bg1.png");
  bg2.resize(960,540);
  bg1 = loadImage("assets/bg3.png");
  bg1.resize(960,540);
  platform = loadImage("assets/platform.png");
  platform.resize(960,610);
}

Infinite side-scrolling:

Instead of making the character move inside the display window, I used an infinite side-scrolling in which the character is static whereas the background moves from the right to the left. To achieve that, I used two images placed next to each other that reappear on the right side once they get out of the display window.

Parallax effect

To give the game a realistic aspect, I added a Parallax effect in which the far-away clouds and mountains seem to move more slowly than the closer ones, by changing each layer’s (6 layers) position by a different amount (between 1 and 5).

// Parallax effect
void update(){
  x6--; x6_2--;
  x5-=2; x5_2-=2;
  x4-=3; x4_2-=3;
  x3-=3; x3_2-=3;
  x2-=4; x2_2-=4;
  x1-=5; x1_2-=5;
  
  // Infinite scrolling
  if (x6<=-width){x6=width;} if (x6_2<=-width){x6_2=width;}
  if (x5<=-width){x5=width;} if (x5_2<=-width){x5_2=width;}
  if (x4<=-width){x4=width;} if (x4_2<=-width){x4_2=width;}
  if (x3<=-width){x3=width;} if (x3_2<=-width){x3_2=width;}
  if (x2<=-width){x2=width;} if (x2_2<=-width){x2_2=width;}
  if (x1<=-width){x1=width;} if (x1_2<=-width){x1_2=width;} 
}

View post on imgur.com

Spritesheet:

To animate the character, I am using 3 sprite sheets stored in a 2D array (running, jumping, sliding), each row has 10 images.

// Upload all the sprites
void loadsprites(){
  // Running
  for (int i=0; i<sprites.length;i++){
    sprites[i][0]=loadImage("assets/run/run"+i+".png");
    sprites[i][0].resize(53,74);
  }
  // Jumping
  for (int i=0; i<sprites.length;i++){
    sprites[i][1]=loadImage("assets/jump/jump"+i+".png");
    sprites[i][1].resize(53,74);
  }
  // Sliding
  for (int i=0; i<sprites.length;i++){
    sprites[i][2]=loadImage("assets/slide/slide"+i+".png");
    sprites[i][2].resize(53,57);
  }
}

To loop over the sprites, I am using frameCount:

image(sprites[frameCount/2%sprites.length][x],xcoord,ycoord);

Then, I am using both keyPressed() and keyReleased() functions to detect when the user presses UP and DOWN keys and proceed with the movement.

void keyPressed(){
  if (keyCode==UP){
    x=1;
    ycoord=360;
  }
  if (keyCode==DOWN){
    x=2;
    ycoord=442;
  }
}

void keyReleased(){
  if (keyCode==UP){
    x=0;
    ycoord=425;
  }
  if (keyCode==DOWN){
    x=0;
    ycoord=425;
  }
}

Gravity:

To make it a bit more realistic, I am trying to add the gravity effect to when the character jumps and falls back down.

View post on imgur.com

Full Code:

PImage bg1, bg2, bg3, bg4, bg5, bg6, bg7, platform; // Background images
int x1=0, x1_2=960, x2=0, x2_2=960, x3=0, x3_2=960; // X-coordinates of the images
int x4=0, x4_2=960, x5=0, x5_2=960, x6=0, x6_2=960; // X-coordinates of the images
PImage[][] sprites = new PImage[10][3]; // Store the sprites

// Upload all the sprites
void loadsprites(){
  // Running
  for (int i=0; i<sprites.length;i++){
    sprites[i][0]=loadImage("assets/run/run"+i+".png");
    sprites[i][0].resize(53,74);
  }
  // Jumping
  for (int i=0; i<sprites.length;i++){
    sprites[i][1]=loadImage("assets/jump/jump"+i+".png");
    sprites[i][1].resize(53,74);
  }
  // Sliding
  for (int i=0; i<sprites.length;i++){
    sprites[i][2]=loadImage("assets/slide/slide"+i+".png");
    sprites[i][2].resize(53,57);
  }
}

// Load the background images
void load(){
  bg7 = loadImage("assets/bg.png");
  // Resize the images
  bg7.resize(960,540);
  bg6 = loadImage("assets/bg6.png");
  bg6.resize(960,540);
  bg5 = loadImage("assets/bg5.png");
  bg5.resize(960,540);
  bg4 = loadImage("assets/bg2.png");
  bg4.resize(960,540);
  bg3 = loadImage("assets/bg4.png");
  bg3.resize(960,540);
  bg2 = loadImage("assets/bg1.png");
  bg2.resize(960,540);
  bg1 = loadImage("assets/bg3.png");
  bg1.resize(960,540);
  platform = loadImage("assets/platform.png");
  platform.resize(960,610);
}

void display(){
  image(bg7,0,0);
  image(bg6,x6,0);
  image(bg6,x6_2,0);
  image(bg5,x5,0);
  image(bg5,x5_2,0);
  image(bg4,x4,0);
  image(bg4,x4_2,0);
  image(bg3,x3,0);
  image(bg3,x3_2,0);
  image(bg2,x2,0);
  image(bg2,x2_2,0);
  image(bg1,x1,0);
  image(bg1,x1_2,0);
  tint(#7cdfd2);
  image(platform,x1,0);
  image(platform,x1_2,0);
  noTint();
}

// Parallax effect
void update(){
  x6--; x6_2--;
  x5-=2; x5_2-=2;
  x4-=3; x4_2-=3;
  x3-=3; x3_2-=3;
  x2-=4; x2_2-=4;
  x1-=5; x1_2-=5;
  
  // Infinite scrolling
  if (x6<=-width){x6=width;} if (x6_2<=-width){x6_2=width;}
  if (x5<=-width){x5=width;} if (x5_2<=-width){x5_2=width;}
  if (x4<=-width){x4=width;} if (x4_2<=-width){x4_2=width;}
  if (x3<=-width){x3=width;} if (x3_2<=-width){x3_2=width;}
  if (x2<=-width){x2=width;} if (x2_2<=-width){x2_2=width;}
  if (x1<=-width){x1=width;} if (x1_2<=-width){x1_2=width;} 
}

void setup(){
  size(960,540);
  load();
  loadsprites();
}
int x=0, xcoord=100, ycoord=425;
float g=2;

void gravity(){
  if (ycoord<425){
    ycoord+=g;
  }
}

void draw(){
  display();
  update(); 
  gravity();
  image(sprites[frameCount/2%sprites.length][x],xcoord,ycoord);
}

void keyPressed(){
  if (keyCode==UP){
    x=1;
    ycoord=360;
  }
  if (keyCode==DOWN){
    x=2;
    ycoord=442;
  }
}

void keyReleased(){
  if (keyCode==UP){
    x=0;
    ycoord=425;
  }
  if (keyCode==DOWN){
    x=0;
    ycoord=425;
  }
}