Category: Fall 2020

Game concept

Shadows is a pathfinding game, where your goal is to find a treasure in an ancient labyrinth. The problem with that is, that no one was there for hundreds of years and it’s buried deep underground so there is no light in there. Surrounded by shadows you enter the labyrinth hoping to find its treasure.

Mechanics

The most important part of the game is the light mechanics. I decided that it would be super fun to create an actual labyrinth game, where you do not see the whole board from the very beginning and just navigate through it. In my game you will have to actually explore the labyrinth, memorize the paths and hopefully find the treasure.

Graphics

I used some tile sets for DnD found on the internet to create the labyrinth board.

Then I added the light layer and created the light source at my mouse coordinates:

Tomorrow I’m going to work on my character, the intro menu as well as the labyrinth hit boxes. Probably they will be the hardest part of the project after the lighting, but I’m sure I’ll figure something out.

Update

Having finished the game I might say that creating it was easier than I expected. The issue that I was concerned by the most was creating the hitboxes. Having such a complicated map with all the bending corridors would be horrendous to hardcode (as almost everything is lol).

In order to solve the hitbox issue I made use of the pixels array. Before the game begins an extra graphic is loaded, where all the pathways are white and all the rest is black. That simple graphic is then stored in pixels. During the game the only thing to do to check for hitboxes is simply checking the color value on the corresponding x,y in the presaved pixels array. If it is not black, the character can move. If it’s black it means they are in front of a wall.

Here is the graphic I prepared for the hitboxes function:

By this small chunk of code I managed to check the hitboxes for the whole map. It compares the x and y coordinates of the character with the corresponding color in the preloaded pixels array (it remains loaded with the above image). if the corresponding pixel is black, the character doesn’t change its position, as only when the pixel is white, dx and dy are added to its location correspondingly. I also took into account the dimensions of the character itself and the perspective of the 2.5D graphics. ScaleX and scaleY variables are responsible for proper scaling to lower screen sizes.

void didTouchHitbox() {
  if ((pixels[x+(y+1)*width-int(scaleX*20)]!=color(255, 255, 255) || pixels[x+int(y+20*scaleY)*width-int(scaleX*20)]!=color(255, 255, 255)) && dir==2) {}
  else if ((pixels[x+(y+1)*width+int(scaleX*20)]!=color(255, 255, 255) || pixels[x+int(y+20*scaleY)*width+int(scaleX*20)]!=color(255, 255, 255)) && dir==3) {}
  else if ((pixels[x+y*width-int(5*scaleX)]!=color(255, 255, 255) || pixels[x+y*width+int(5*scaleX)]!=color(255, 255, 255)) && dir==1) {}
  else if ((pixels[x+(y+int(30*scaleY))*width-int(5*scaleX)]!=color(255, 255, 255) || pixels[x+(y+int(30*scaleY))*width+int(5*scaleX)]!=color(255, 255, 255)) && dir==0) {}
  else {
    x+=dx;
    y+=dy;
  }
}

 

I do not want to post more graphics not to spoil the labyrinth for you guys, so I will just leave a screen from the menu 🙂

At last, here is my code. I’m quite happy as I managed to squeeze it into less than 300 lines.

Shadows

Happy maze solving 🙂

For the game I would like to do for this midterm,  I am developing a game I created a year ago called Sounds Like NYUAD.

  Concept:

The layout is the Nyuad campus, which I illustrated myself last year. The player’s goal is to find the hidden ‘sounds’ located in various NYUAD locations, and each sound is an addition to the final ‘song’ made up of NYUAD sounds. The sounds were also recorded, edited, and produced by me last year. In the song, there are sounds like the NYUAD birds, the Card Swipe, someone sneezing, and coughing (pre-covid times).

Implementation: 

The main thing I have to make sure of is that all sounds begin at the same time, but remain muted until they are triggered. This is because it is crucial that all the sounds play like one song, and stay on beat to the song I am playing. When the player comes close to the marker, the sound will be triggered, and that part is added.

 

Process: 

The game is currently coded on Python, and so translating it to Java is my first step. This is really exercising everything I learnt on Java, and also trying to keep track of which language I am using. Next I have some developments I would like to add, and bugs  I would like to fix.

1. Adding a instruction page
2. More clear indicator when you trigger a sound (and fixing the bug when it is repeated twice).
3. Inidcating how many sounds are left
4. Hints/clues where to find them
5. Score calculated based on how many sounds + how fast
6. Leadership list
7. Fix bugs: such as cats and borders + A clear Indicator when you have hit a border

Sample: 

 

 

Game game;
Creature creature;
Borders borders;

void setup(){
    size(1024, 768);
    background(255, 255, 255);
    game = new Game ();
    creature = new Creature ();
    borders = new Borders ();
    

   
}

void draw (){
  game.drawGame();
}

class Borders{
  float x, y, x2, y2;
  
  Borders (){
  displayBorders();
  
  }
  
  void displayBorders(){
  stroke(200);
  line(x,y,x2,y2);
  }
}

class Creature{
  float x, y, r;
  float vy = 0;
  float vx = 0;
  //direction = RIGHT; 
  
  Creature (){
   updateCreature();
   noFill();
   noStroke();
   image( img, x-r, y-r, 50, 50);
   circle(x,y, r*2);
   
  }
  void updateCreature(){
    y += vy;
    x += vx;
  }
  
  //void distanceCreature(self, target){
  //  return ((self.x - target.x)**2 + (self.y - target.y)**2) **0.5;
  //}
  
}

import processing.sound.*;
PImage img, dead, won;
SoundFile backgroundSound;

class Game {
  float w, h, g;
  float count = 120;
  float scorecount = 0;
  boolean totalwin = false;
  
  
  Game(){
  img = loadImage("map.jpg");
  dead = loadImage("sorry.png");
  won = loadImage("finalpage.png");
  //backgroundSound = new SoundFile("OriginalBacktrack.mp3");
  //backgroundSound.play();
}

void drawGame (){
  image (img, 0,0);
  fill (0,0,0);
  textSize(25);
  text("Time Remaining: ", 365, 50);
  fill(255,255,255);
  //textSize(25);
  text("Time Remaining: ", 363, 48 );
}
}

Here is the python code of the original: (its really long and messy, so I have a lot of reorganzing to do)

#Ayham and Suzan final project

add_library('minim')
import os, random 
path = os.getcwd()
player = Minim(this)

class Creature: #creates both the cats and thomas
    def __init__(self, x, y, r):
        self.x = x
        self.y = y
        self.r = r
        self.vy = 0
        self.vx = 0
        self.direction = RIGHT 
        
        
    def display(self):
        self.update()
        noFill()
        noStroke()
        image(self.img, self.x -self.r, self.y-self.r, 50, 50)
        # fill(255, 255, 255)
        circle(self.x, self.y, self.r * 2)
        
    def update(self):
        self.y += self.vy
        self.x += self.vx
        
            
        
    def distance(self, target):
        return ((self.x - target.x)**2 + (self.y - target.y)**2) **0.5
        
   
        
        
class Cats(Creature): #the cats class
    def __init__(self, x, y, r, img, w, h,x1, x2):
        Creature.__init__(self, x, y, r)
        
        self.vx = random.randint(1,3)
        self.x1 = x1
        self.x2 = x2
        self.img = loadImage(path + "/images/" + img)
        print(x,y)
        
    def update(self):
    
        if self.x < self.x1: #movement of the cats
            self.direction = RIGHT
            self.vx *= -1
        elif self.x > self.x2:
            self.direction = LEFT
            self.vx *= -1
        
        self.y += self.vy
        self.x += self.vx

        
class Thomas(Creature): 
    def __init__(self, x, y, r):
        Creature.__init__(self, x, y, r)
        print(x,y)
        self.key_handler = {LEFT:False, RIGHT:False, UP:False,DOWN:False}                                                               
        self.alive = True
        self.img= loadImage(path + "/images/thomas.png" )
        self.ding_sound = player.loadFile(path + "/sounds/Ding.mp3") #plays when one song part is captured
        self.meow_sound = player.loadFile(path + "/sounds/meow.mp3") #plays when it gets killed by a cat
    

                
    def update(self):
        
    
    #movement of thomas
        if self.key_handler[LEFT] == True and not self.x < 0 :
            self.vx = -1
            self.direction = LEFT
        elif self.key_handler[RIGHT] == True and not self.x + self.r > game.w :
            self.vx = 1
            self.direction = RIGHT
        elif self.key_handler[UP] == True and not self.y < 0:
            self.vy = -1
            self.direction = UP
        elif self.key_handler[DOWN] == True and not self.y +self.r > game.h:
            self.vy = 1
            self.direction = DOWN
            
        else:
            self.vx = 0
            self.vy = 0
       
       #boundaries created for thomas
       
       #horizental boundaries
        if (self.vy+(self.r*1)+self.y >= game.borders1.y and 
            self.vy+(self.r*1)+self.y <= game.borders1.y2 and 
             self.vx+self.r+self.x >= game.borders1.x and 
             self.vx+self.r+self.x <= game.borders1.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders2.y and 
            self.vy+(self.r*1)+self.y <= game.borders2.y2 and 
             self.vx+self.r+self.x >= game.borders2.x and 
             self.vx+self.r+self.x <= game.borders2.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders5.y and 
            self.vy+(self.r*1)+self.y <= game.borders5.y2 and 
             self.vx+self.r+self.x >= game.borders5.x and 
             self.vx+self.r+self.x <= game.borders5.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders6.y and 
            self.vy+(self.r*1)+self.y <= game.borders6.y2 and 
             self.vx+self.r+self.x >= game.borders6.x and 
             self.vx+self.r+self.x <= game.borders6.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders7.y and 
            self.vy+(self.r*1)+self.y <= game.borders7.y2 and 
             self.vx+self.r+self.x >= game.borders7.x and 
             self.vx+self.r+self.x <= game.borders7.x2):
            
            self.vy=0
        
        if (self.vy+(self.r*1)+self.y >= game.borders9.y and 
            self.vy+(self.r*1)+self.y <= game.borders9.y2 and 
             self.vx+self.r+self.x >= game.borders9.x and 
             self.vx+self.r+self.x <= game.borders9.x2):
            
            self.vy=0
        
            
        if (self.vy+(self.r*1)+self.y >= game.borders12.y and 
            self.vy+(self.r*1)+self.y <= game.borders12.y2 and 
             self.vx+self.r+self.x >= game.borders12.x and 
             self.vx+self.r+self.x <= game.borders12.x2):
            
            self.vy=0
        
        
        
        if (self.vy+(self.r*2)+self.y >= game.borders15.y and 
            self.vy+(self.r*2)+self.y <= game.borders15.y2 and 
            self.vx+self.r+self.x >= game.borders15.x and 
            self.vx+self.r+self.x <= game.borders15.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders25.y and 
            self.vy+(self.r*1)+self.y <= game.borders25.y2 and 
             self.vx+self.r+self.x >= game.borders25.x and 
             self.vx+self.r+self.x <= game.borders25.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders27.y and 
            self.vy+(self.r*1)+self.y <= game.borders27.y2 and 
             self.vx+self.r+self.x >= game.borders27.x and 
             self.vx+self.r+self.x <= game.borders27.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders30.y and 
            self.vy+(self.r*1)+self.y <= game.borders30.y2 and 
             self.vx+self.r+self.x >= game.borders30.x and 
             self.vx+self.r+self.x <= game.borders30.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders31.y and 
            self.vy+(self.r*1)+self.y <= game.borders31.y2 and 
             self.vx+self.r+self.x >= game.borders31.x and 
             self.vx+self.r+self.x <= game.borders31.x2):
            
            self.vy=0
            
        if (self.vy+(self.r*1)+self.y >= game.borders33.y and 
            self.vy+(self.r*1)+self.y <= game.borders33.y2 and 
             self.vx+self.r+self.x >= game.borders33.x and 
             self.vx+self.r+self.x <= game.borders33.x2):
            
            self.vy=0
        
            
            #vertical
        if (self.vx+(self.r*2)+self.x <= game.borders3.x and 
            self.vx+(self.r*2)+self.x >= game.borders3.x2 and 
            self.vy+self.r+self.y <= game.borders3.y and 
            self.vy+self.r+self.y >= game.borders3.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders4.x and 
            self.vx+(self.r*2)+self.x >= game.borders4.x2 and 
            self.vy+self.r+self.y <= game.borders4.y and 
            self.vy+self.r+self.y >= game.borders4.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders8.x and 
            self.vx+(self.r*2)+self.x >= game.borders8.x2 and 
            self.vy+self.r+self.y <= game.borders8.y and 
            self.vy+self.r+self.y >= game.borders8.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders11.x and 
            self.vx+(self.r*2)+self.x >= game.borders11.x2 and 
            self.vy+self.r+self.y <= game.borders11.y and 
            self.vy+self.r+self.y >= game.borders11.y2):
        
            self.vx = 0
        
        if (self.vx+(self.r*2)+self.x <= game.borders16.x and 
            self.vx+(self.r*2)+self.x >= game.borders16.x2 and 
            self.vy+self.r+self.y <= game.borders16.y and 
            self.vy+self.r+self.y >= game.borders16.y2):
        
            self.vx = 0
        if (self.vx+(self.r*2)+self.x <= game.borders19.x and 
            self.vx+(self.r*2)+self.x >= game.borders19.x2 and 
            self.vy+self.r+self.y <= game.borders19.y and 
            self.vy+self.r+self.y >= game.borders19.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders21.x and 
            self.vx+(self.r*2)+self.x >= game.borders21.x2 and 
            self.vy+self.r+self.y <= game.borders21.y and 
            self.vy+self.r+self.y >= game.borders21.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders22.x and 
            self.vx+(self.r*2)+self.x >= game.borders22.x2 and 
            self.vy+self.r+self.y <= game.borders22.y and 
            self.vy+self.r+self.y >= game.borders22.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders23.x and 
            self.vx+(self.r*2)+self.x >= game.borders23.x2 and 
            self.vy+self.r+self.y <= game.borders23.y and 
            self.vy+self.r+self.y >= game.borders23.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders24.x and 
            self.vx+(self.r*2)+self.x >= game.borders24.x2 and 
            self.vy+self.r+self.y <= game.borders24.y and 
            self.vy+self.r+self.y >= game.borders24.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders26.x and 
            self.vx+(self.r*2)+self.x >= game.borders26.x2 and 
            self.vy+self.r+self.y <= game.borders26.y and 
            self.vy+self.r+self.y >= game.borders26.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders28.x and 
            self.vx+(self.r*2)+self.x >= game.borders28.x2 and 
            self.vy+self.r+self.y <= game.borders28.y and 
            self.vy+self.r+self.y >= game.borders28.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders29.x and 
            self.vx+(self.r*2)+self.x >= game.borders29.x2 and 
            self.vy+self.r+self.y <= game.borders29.y and 
            self.vy+self.r+self.y >= game.borders29.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders32.x and 
            self.vx+(self.r*2)+self.x >= game.borders32.x2 and 
            self.vy+self.r+self.y <= game.borders32.y and 
            self.vy+self.r+self.y >= game.borders32.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders34.x and 
            self.vx+(self.r*2)+self.x >= game.borders34.x2 and 
            self.vy+self.r+self.y <= game.borders34.y and 
            self.vy+self.r+self.y >= game.borders34.y2):
        
            self.vx = 0
            
        if (self.vx+(self.r*2)+self.x <= game.borders35.x and 
            self.vx+(self.r*2)+self.x >= game.borders35.x2 and 
            self.vy+self.r+self.y <= game.borders35.y and 
            self.vy+self.r+self.y >= game.borders35.y2):
        
            self.vx = 0

        
        self.y += self.vy
        self.x += self.vx
        

            
        
            
        
        #sounds of the song and functions to when the song is detected
        if  library.distance(self) < 20:
            self.ding_sound.rewind()
            self.ding_sound.play() 
            game.library.setGain(1)
            library.win = True
            # showimage()
        if knocknock.distance(self) <20:
            self.ding_sound.rewind()
            self.ding_sound.play()
            game.knocknock.setGain(1)
            knocknock.win = True
        if  alarm.distance(self) <20:
            self.ding_sound.rewind()
            self.ding_sound.play()
            game.alarm.setGain(1)
            alarm.win = True
        if  baraha.distance(self) <20:
            self.ding_sound.rewind()
            self.ding_sound.play()
            game.baraha.setGain(1)
            baraha.win = True
        if  dining.distance(self) <20:
            self.ding_sound.rewind()
            self.ding_sound.play()
            game.dining.setGain(1)
            dining.win = True
        if  palms.distance(self) <20:
            self.ding_sound.rewind()
            self.ding_sound.play()
            game.palms.setGain(1)
            palms.win = True
        if  theatre.distance(self) <20:
            self.ding_sound.rewind()
            self.ding_sound.play()
            game.theatre.setGain(1) 
            theatre.win = True  
                
        for g in game.cats: #cats distribution
            if g.distance(self) <= self.r+ g.r:
                self.meow_sound.rewind()
                self.meow_sound.play()
                self.alive = False
        

            
       
        

        
class Locations(): #locaitions for the song parts
    def __init__(self, x, y,r ):
        self.x = x
        self.y= y
        self.r= r
        self.win= False
    
    def display(self):
        noFill()
        noStroke()
        circle(self.x, self.y, self.r)
 
    def distance(self, target):
        return ((self.x - target.x)**2 + (self.y - target.y)**2) **0.5
        

        
class Borders():
    def __init__(self,x,y,x2,y2):
        self.x = x
        self.y= y
        self.x2 = x2
        self.y2 = y2
        
    
    def display(self):
        stroke(200)
        line(self.x,self.y,self.x2,self.y2)
    
        
       
                        
class Game:
    def __init__(self, w, h, g):
        self.w = w
        self.h = h
        self.g = g
        self.img = loadImage(path + "/images/map.jpg")
        self.dead = loadImage(path + "/images/sorry.png")
        self.won = loadImage(path + "/images/finalpage.png")
        self.background_sound = player.loadFile(path + "/sounds/OriginalBacktrack.mp3")
        self.background_sound.play()
        self.baraha = player.loadFile(path + "/sounds/CardSwipe.mp3")
        self.baraha.setGain(-1000)
        self.baraha.play()
        self.knocknock = player.loadFile(path + "/sounds/Knock_RA.mp3")
        self.knocknock.setGain(-1000)
        self.knocknock.play()
        self.theatre = player.loadFile(path + "/sounds/SneezeCough.mp3")
        self.theatre.setGain(-1000)
        self.theatre.play()
        self.library = player.loadFile(path + "/sounds/Typing_clicking.mp3")
        self.library.setGain(-1000)
        self.library.play()
        self.palms = player.loadFile(path + "/sounds/Birds.mp3")
        self.palms.setGain(-1000)
        self.palms.play()
        self.dining = player.loadFile(path + "/sounds/Didyoudothereading.mp3")
        self.dining.setGain(-1000)
        self.dining.play()
        self.alarm = player.loadFile(path + "/sounds/iPhoneAlarm.mp3")
        self.alarm.setGain(-1000)
        self.alarm.play()
        self.thomas = Thomas(75,450,15)
        self.count = 120
        self.scorecount=0
        self.totalwin= False
        
#border coordinates 
        self.borders1 = Borders(444 , 286, 575, 286) #horizental
        self.borders2 = Borders(442 , 346, 520, 346)#horizental 
        self.borders3 = Borders(540 , 455, 540, 346) #V
        self.borders4 = Borders(582 , 456, 582 , 286) #V
        self.borders5 = Borders(402,470,502,470) #H
        self.borders6 = Borders(590,472,712,472)#H 
        self.borders7 = Borders(754,493,812,493)#H
        self.borders8 = Borders(874,541,874,509)#V
        self.borders21 = Borders(948,620,948,533)#V
        self.borders22 = Borders(158,370,158,182)#V
        self.borders23 = Borders(775,720,775,675)#V
        self.borders24 = Borders(800,720,800,675)#V
        self.borders25 = Borders(530,527,586,527)#h
        self.borders26= Borders(586,595,586,527)#V
        self.borders27 = Borders(536,595,586,595)#h
        self.borders28 = Borders(536,595,536,529)#V
        self.borders29 = Borders(396,664,396,614)#v
        self.borders30 = Borders(350,614,396,614)#h
        self.borders31= Borders(754,602,808,602)#h
        self.borders32 = Borders(808,640,808,602)#V
        self.borders33 = Borders(756,640,808,640)#h
        self.borders34 = Borders(756,640,756,602)#V
        self.borders35 = Borders(418,281,418,189)
        self.borders9 = Borders(50,195,470,195)#H
        self.borders11 = Borders(65,300,65,360)#V
        self.borders12 = Borders(65,375,422,375)#H
        self.borders15 = Borders(356,725,950,725)#H
        self.borders16 = Borders(340,750,340,572)#V
        self.borders19 = Borders(955,750,955,640)#V
       
        
        
        #appending the cats in the game
        self.cats = []
        for i in range(3):
            self.cats.append(Cats(random.randint(200, 900), random.randint(200, 600), 15, "cat" + str(random.randint(1,3))+".png", 70, 70, 200, 800))

        
    def display(self):
        image(self.img,0,0)
        fill(0,0,0)
        textSize(25)
        text("Time remaining: "+ str(self.count), 365, 50 )
        fill(255,255,255)
        textSize(25)
        text("Time remaining: "+ str(self.count), 364, 49 )
        if self.count == 0: #stop the game when the game is over
            self.thomas.alive = False
            self.background_sound.close()
            self.baraha.close()
            self.palms.close()
            self.library.close()
            self.dining.close()
            self.theatre.close()
            self.knocknock.close()
            self.alarm.close()
            
        if self.thomas.alive == False: 
            image(self.dead, 187, 59)
            self.background_sound.close()
            self.baraha.close()
            self.palms.close()
            self.library.close()
            self.dining.close()
            self.theatre.close()
            self.knocknock.close()
            self.alarm.close()
            
            return
        if library.win == True and alarm.win == True and palms.win == True and baraha.win == True and theatre.win == True and knocknock.win == True and dining.win == True: #winning of the game 
            self.totalwin= True
            image(self.won, 187, 59)
            self.background_sound.close()
            self.baraha.close()
            self.palms.close()
            self.library.close()
            self.dining.close()
            self.theatre.close()
            self.knocknock.close()
            self.alarm.close()
            return

            
        self.thomas.update()
        self.thomas.display() 
                    
        for g in self.cats:
            g.display() 
   
 #coordinates of the different sounds   
game = Game(1024, 768, 585)
library = Locations (250,270,100)
palms = Locations(250,470,100)
baraha = Locations (400, 310, 50)
theatre = Locations (790, 250, 100)
dining= Locations (950, 400, 100)
knocknock= Locations (800, 620, 200)
alarm= Locations (570, 570, 200)


            
def setup():
    size(game.w, game.h)
    background(255, 255, 255)

def draw():
    print(game.thomas.x,game.thomas.y)
    
    if game.thomas.alive == True and game.totalwin== False :
        if frameCount % 60 ==0:
            game.count -= 1
        print(game.scorecount)
        
    game.display()
    library.display()
    palms.display()
    baraha.display()
    theatre.display()
    dining.display()
    knocknock.display()
    alarm.display()
    
         

def keyPressed(): #aids in movement using the keys
    if keyCode == LEFT:
        game.thomas.key_handler[LEFT] = True
       
    elif keyCode == RIGHT:
        game.thomas.key_handler[RIGHT] = True
    elif keyCode == UP:
        game.thomas.key_handler[UP] = True
    elif keyCode == DOWN:
        game.thomas.key_handler[DOWN] = True
    
def keyReleased():
    if keyCode == LEFT:
        game.thomas.key_handler[LEFT] = False
    elif keyCode == RIGHT:
        game.thomas.key_handler[RIGHT] = False
    elif keyCode == UP:
        game.thomas.key_handler[UP] = False 
    elif keyCode == DOWN:
        game.thomas.key_handler[DOWN] = False 
        
    
def mouseClicked(): 
    global game
    if game.thomas.alive == False or game.totalwin== True: #clicks when game is over 
        game = Game(1024, 768, 585)
    

 

The game is about fighting COVID-19 by the use of your fighting tools [handwash, facemask, and faceshield] the COVID-19 cells will fall from the top of the screen and if you shoot them, you get points but the number of fighting tools decrease. If the cells reaches the bottom of the screen the number of cases go up. The objective of the game is to keep the number of cases as low as possible.

For the midterm project the progress so far has been planning the game on paper. As seen below. As of right now on processing the code consists of a game class file and a main file.

The game class file will encapsulate all the game state and will be responsible for displaying the game stats and and updating them. The game class attributes are:

1. points
2. cases
3. handwash
4. masks
5. shields
6. state
7. fightTool
8. time
9. And the icons

The game class methods are:

1. increment points
2. reduce points
3. increment cases
4. increment masks
5. decrement masks
6. increment shields
7. decrement shields
8. increment handwash
9. decrement handwash
10. change state
11. update time
12. drawGameStats

The icons for use in the game were downloaded from flaticon as seen below

 

class Game {
  // attributes
  int points = 0;
  int cases = 0;
  int handwash = 20;
  int masks = 14;
  int shields = 6;
  int state = 0; // 0->shooting 1-> buying -1 -> gameOver
  int fightingTool = 0; // 0-handwash, 1-mask, 2-shield
  int time = 120;
  PImage maskImg = loadImage("mask.png");
  PImage handwashImg = loadImage("handwash.png");
  PImage shieldImg = loadImage("shield.png");
  int timeDisplay = 0;


  //methods
  void incrementPoints() {
    if (fightingTool == 0) {
      points += 1;
    } else if (fightingTool == 1) {
      points += 3;
    } else if (fightingTool == 2) {
      points += 5;
    }
  }
  void reducePoints(int fightingTool) {
    if (state==1) {
      if (fightingTool == 1) {
      }
    }
  }
  void incrementCases() {
    cases+=1;
  }

  void incrementMasks() {
    masks+=1;
  }

  void decrementMasks() {
    masks-=1;
  }

  void incrementShields() {
    shields+=1;
  }

  void decrementShields() {
    shields-=1;
  }

  void incrementHandwash() {
    handwash+=1;
  }

  void decrementHandwash() {
    handwash-=1;
  }

  void changeState() {
    if (state==0) {
      state=1;
    } else if (state==1) {
      state=0;
    }
  }
  void updateTime() {
    if (time==0) {
      state=-1;
    }
    if (frameCount%60==0 && state!=-1) {
      time-=1;
      if (timeDisplay==0) {
        timeDisplay = 1;
      } else if (timeDisplay==1) {
        timeDisplay=0;
      }
    }
  }

  void drawGameStats() {
    color(0, 0, 0);
    imageMode(CENTER);

    // draw mask
    image(maskImg, 70, 30, 30, 30);
    text(masks+" x", 25, 30);

    //draw handwash
    image(handwashImg, 150, 30, 30, 30);
    text(handwash+" x", 110, 30);

    // draw faceshield
    image(shieldImg, 230, 30, 30, 30);
    text(shields+" x", 190, 30);

    //display time
    pushStyle();
    textSize(30);
    if (timeDisplay==1) {
      fill(0, 0, 0);
      text(time, width-100, height-30);
    } else if (timeDisplay==0) {
      fill(255, 255, 0);
      text(time, width-100, height-30);
    }
    popStyle();

    // game mode
    pushStyle();
    int rectWidth = 100;
    int rectHeight = 30;
    int cornerRadius = 10;
    noFill();
    rect(width/2-rectWidth/2, 20, rectWidth, rectHeight, cornerRadius, cornerRadius, cornerRadius, cornerRadius);
    if (state==0) {
      pushStyle();
      textAlign(CENTER);
      textSize(25);
      fill(255, 0, 0);
      text("FIGHT", width/2, 45);
      popStyle();
    }

    popStyle();
    
    //display points
    pushStyle();
    fill(0,0,0);
    textSize(25);
    text(points+" points", width-300,45);
    text(cases+" cases", width-150,45);
    popStyle();
  }
}

 

It took me a while to come up with an idea for my midterm project. I started out by looking up games online in the hopes of getting inspired by one of them. But that got me nowhere.
So, I started to think about events from my personal life that I could possibly base my game on. That’s when I got the idea to make one of my dreams/nightmares the inspiration for the game.
Unfortunately, I’m not the type of person who remembers their dreams once they wake up. However, I used to have a recurring “nightmare” when I was a kid that I, luckily, still remember.
I’m very claustrophobic. So, I used to have a nightmare where I would be in a room with a cake. The cake would get progressively bigger until it left me with no space for myself. My only way out was to eat it.
This will be the concept of the game: Eat the cake or it will “eat” you. ( it will take up all your space)

game concept

The game would start out with a character (me) and a cake (mean huge cake) in a room.
The cake can shoot the character. Each time it is able to hit it, it will grow a little bit more in size.
The character can move around, jump, and crouch to avoid the cake’s hits.
It can also take a bite out of the cake every time it gets close enough to it, and presses a specific keyboard key.
If the cake fills up the entire room, I lose. If I am able to eat it first, I win.

progress

I haven’t had much time to get a lot done because of my busy schedule this week. However, I decided to start working on some basics individually and make sure they work smoothly, so that I can later easily incorporate them into my game.

So far:

• • •  I made a start menu template with buttons allowing me to move between screens (start menu, instructions, and gameplay):

• • • I made functions to move my character to the right and left, and to jump:

 

I’ve spent a lot of time this week blurting out ideas for the code of my game. I just sat there and filled page upon page with notes, lists, and bullet points to try to figure out what logic is suitable for my game and how I could get it to function. By the end of that brainstorming session, I flipped through what I wrote…a little terrified by starting because it felt like there’s so much to think about.

The Idea

Last week, while brainstorming for this project, I realized that I’ve never seen anyone making a children’s game in this class or Intro to CS and thought it would be an interesting thing to explore. I think I also got a little too excited about the design possibilities that a project like this would give me.

So, I’m going for a spelling game, where a visual of an animal is displayed on the screen and the child has to click on letter blocks on the screen to spell out the animal’s name. When they get it right, the animal sound is triggered and they move on to the next level which presents an animal with a name more difficult to spell.

What I Have So Far

This weekend I got a few things done:

• Made a list of classes needed and their properties
• Finalized the list of animals I’m going to use (the levels)
• Researched some games online to understand switching between different displays/windows
• Planned my logic (the variables I need, what my logic could look like)
• Started coding by creating a Button, Animal, and Letter class as well as a very simple start screen (only a start button).

I’m at a point where I kind of know what I need to do, but not sure how to organize it. So I’m hoping that talking through it today and spending more time breaking it down could make it easier to approach.

 

 

 

My midterm project underwent several changes (and will undergo some more) during the past week.

With 2020 coming to an end and after all of what we have gone through with this coronavirus pandemic, it would have been a shame if I did not make at least one of my projects in this class have a theme of COVID-19.

I imagined a game where a character is moved by the user around the screen while holding a hand sanitizer using which they fire shots at the incoming corona particles. I imagined that there would be two terrified characters, a couple who are the main character’s elderly parents and who would remain inside the house which has its interior visible to the user from the outside. I wanted the main character to try to prevent the particles from reaching their parents inside the house or else they would lose the game.

But then I thought that the game might not be as I want it to be because the interior of the house must be of some relevance to the functionalities where the character should be able to get inside or climb up the stairs for example, which would be unnecessary coding that I do not see as being worth it. In addition, I felt like it was very similar to other online games I have seen which makes it redundant.

Furthermore, I decided to change the idea a bit my making the fight not involve any parents but rather be inside a house and a character tries to protect themselves from being hit by the virus particles to survive.

 

 

 

 

I imagined that the player can, for example, go from floor to the other by running into one of the edges of the screen, and that they keep moving and shooting until they take down all of the corona particles.

The idea was actually better now for me and I decided that this character would best suit what I want to do in general, even if I have to alter the background to be more appealing design-wise.

But then after further research I found some sprites of the US president Donald Trump and I then thought that I can make my game political! I decided that I can make it be outside the White House and the main character would be Trump. The game would be of satirical nature and makes fun of the disastrous way the president dealt with the coronavirus pandemic allowing for the USA to be reportedly the number one country with COVID-19 cases worldwide.

Trump would try to kill the coronavirus particles with the ability to run only on the grass and jump once if the spacebar is pressed. I also decided to print out his most famous quotes about the pandemic, which were the most controversial, and let them fall down from the sky on banners to add to the excitement of the game.

I want to add power-up facial masks which act as some sort of temporary shield for Trump while dodging the corona particles’ attacks. I decided to use this sanitizer and this “bullet” for shooting.

 

 

 

 

 

I am still very unsure about my next steps and I hope to get a better sense of direction after meeting Aaron during today’s class.

For my midterm, I am planning to create a memo game that lets players find matching colors, images and sounds and maybe also shapes. I am thinking about incorporating synesthetic associations of sounds to certain colors or similar but will need to do more thinking about this. Currently I am drafting the final visual design and exploring ways of writing efficient and clean code for this assignment.

My vision for this project started out by wanting a blurred image to have a sort of spot light that unblurs the parts where the mouse moves. I looked into the Blur example on processing and the spot light example and encountered many obstacles.

From the blur effect:

I applied this blur code to my image at first and it showed a side by side image. One was the original image and the other was, a grayscaled version of my image. This was after even after the learning from the professor how to fix this issue. So I experimented with the Kernels and I chose to use the “ Edge detection” way for this effect, rather than blurring it. ( it just seemed cooler )

after that I wanted to remove the side by side view so I inspected that code and found a way to remove the original display. Know I am left with the display with the effect but I wasn’t able to figure out how to move it to the center. I tried many things but my attempts , though they were close, did not work.

After consulting Jack he told me that my issue was at the end of the code, “ image(destination, 400, 0);” this was where my display  was controlled.

Once I finished my experiments with this code I started with the spot light

 

From the Spot light:

In this effect the spot light was working fine by my image was distorted and I didn’t know why,

Once I figure out why it’s distorted I can attempt to combine the codes together, I consulted Jack and he told me that my issue was in the “destination code”. Once I fixed that I attempted combing both codes.

Combing codes:

When combing the two codes, the codes didn’t run. I went through it with Jack and fixed a few things within the spot light loops.

When I included these two separate codes into one, they didn’t combine. They were their own separate entity. So I tried to create a trancperancy between them , since they overlapped, but I struggled since I didn’t really understand that code.

In the end my results though it not what I planned it was as close as my abilities can get me ( with help, lol).

so here is my final result :

float v = 1.0;  
float[][] kernel = {{ -1*v, -1*v, -1*v}, 
  { -1*v, 8*v, -1*v }, 
  { -1*v, -1*v, -1*v }};

PImage img, destination;

void setup() {
  size(800, 800);
  img = loadImage("vibe.jpg"); // Load the original image
  destination = createImage(img.width, img.height, RGB);
  // noLoop();
} 

void draw() {
  //image(img, 0, 0); // Displays the image from point (0,0) 
  img.loadPixels();

  // Create an opaque image of the same size as the original
  PImage centerImg = createImage(img.width, img.height, RGB);

  // Loop through every pixel in the image
  for (int y = 1; y < img.height-1; y++) {   // Skip top and bottom edges
    for (int x = 1; x < img.width-1; x++) {  // Skip left and right edges
      float sum = 0; // Kernel sum for this pixel
      for (int ky = -1; ky <= 1; ky++) {
        for (int kx = -1; kx <= 1; kx++) {
          // Calculate the adjacent pixel for this kernel point
          int pos = (y + ky)*img.width + (x + kx);
          // Image is grayscale, red/green/blue are identical
          float val = red(img.pixels[pos]);
          // Multiply adjacent pixels based on the kernel values
          sum += kernel[ky+1][kx+1] * val;
        }
      }
      // For this pixel in the new image, set the gray value
      // based on the sum from the kernel
      centerImg.pixels[y*img.width + x] = color(sum);
    }
  }
  // State that there are changes to edgeImg.pixels[]
  centerImg.updatePixels();


  image(centerImg, 0, 0); // Draw the new image

  destination.loadPixels();
  for (int y=0; y<img.height; y++) { // must include img. so that it takes the w/h of the image.
    for (int x=0; x<img.width; x++) {
      int loc = x+(y*img.width);
      float r = red(img.pixels[loc]);
      float g = green(img.pixels[loc]);
      float b = blue(img.pixels[loc]);
      float distance=dist(x, y, mouseX, mouseY);
      float adjustBrightness = (50-distance)/50;//((float) mouseX / width) * 8.0;
      r*=adjustBrightness; //a*=b
 same as 
a = a * b
      g*=adjustBrightness;
      b*=adjustBrightness;
      r=constrain(r, 0, 255); 
      g=constrain(g, 0, 255);
      b=constrain(b, 0, 255);
      destination.pixels[loc]=color(r, g, b);
    }
  }
  img.updatePixels();
  destination.updatePixels();
  image(destination, 400, 0); // top left is like the bottom
}

 

for reference this is the original :

Since October the 10th is World Mental Health Day, I decided to make this week’s assignment somehow related to Depression.
As I was looking for inspiration, I came across this picture: I liked the scattered effect, so I decided to create something similar with Image pixels. After some brainstorming, I got the idea to represent the feeling of depression with a drowning animation and a wave crash effect for the pixels.

The Point class

To do this, I first thought about creating a Point class. Every pixel, of the image  used, would be represented by a point. The class includes a drawPoint() function that draws a point at the x and y positions of the pixel with the color of that pixel, and then updates its y-position to give a “bouncing” effect. There is a gravity variable that pulls down the point. When the point reaches the bottom of the screen(or a certain boundary), we multiply by -1 so that it goes back up. There is also slowDown variable to reduce the distance the point travels every time it goes back up or down.

Here is the code for this class:

class Point{
  color col;
  float x,y,vy, gravity, slowDown;
  
  Point(int x2,int y2,color col2){
    x= x2;
    y= y2;
    col= col2;
    vy = 0;
    
    gravity = 1;
    slowDown = random(0.5,0.7);
  }
  
  void drawPoint(){
    vy += gravity;
    y += vy;
    
    if (y>= height/1.5){
      y = height/1.5;
      vy *= -1;
      vy *= slowDown;
    }
    strokeWeight(2);
    stroke(col);
    point(x,y);
  
  }

}

Failed Attempts

At first, I tried to keep it simple. So, I wanted to iterate through the image’s pixel, and for every pixel, add a new Point to the array of points (pointsArray). Then, I would iterate through the points and draw them.
However, this made the pixels of the transparent background also get drawn, which resulted in there being too many pixels. This made the animation super slow and it didn’t give the effect I was looking for.
Here is how it looked like:

I didn’t know how to approach fixing this, so with a lot of research and help from online forums, I got the idea to create a new image. This image would be the “difference” (difference in the color of the pixels) between my image and a black image (color values are zeros). This gives us a new image that contains my image but with a black background. Then, all I had to do was iterate through the image pixels and only populate the pointsArray if the pixel isn’t black. (For this to work, make sure the image you’re using doesn’t have any black parts that you want to be drawn.)
However, this resulted in the image being still. This is what was displayed when I ran the program:

solution

To solve this, I turned to Google once again. Apparently, this was happening because the for loop (that makes the pixels of our new image) nested inside the draw() loop makes the points continuously draw in their initial spot because the new image is consistently being made.
To solve this, I again made the new image be the difference between my image and a black image, BUT THEN, it is turned into the difference between my image and itself. This means that the new image becomes fully black when the draw() is called for the second time, so it isn’t being considered anymore.

I also added a noise wave at the bottom using the code from an example on processing.org (https://processing.org/examples/noisewave.html)

Here is the code for that:

int nPixels;
int imgWidth = 480;
int imgHeight =240;
int[] toBlack, difference;
PImage img, differenceImage;
Point[] pointsArray;
int index;
float yoff = 0.0;


void setup(){
  size(700,700);
  //initializing all variables
  nPixels = imgWidth*imgHeight;
  pointsArray = new Point [nPixels];
  difference = new int[nPixels];
  toBlack = new int[nPixels];
  differenceImage = createImage (imgWidth,imgHeight,RGB); //create a new empty image to be filled with pixels
  img = loadImage("falling.png");
  img.loadPixels();
}
 
void draw(){
  background(51);
  
  for (int i = 0; i<nPixels; i++){
    color img_color = img.pixels[i];
    color toBlack_color = toBlack[i]; //here this array just has the values: 0
    //so the first time the difference is made, it only gets rid of the transparent background
    
    //setting the color variables for the pixels of the new image created
    int r =int(red(img_color)) - int(red(toBlack_color));
    int g =int(green(img_color)) - int(green(toBlack_color));
    int b =int(blue(img_color)) - int(blue(toBlack_color));

    difference[i] = color(r,g,b);
    toBlack[i] = img_color; //we set this to img_color so that from now on, the difference will always give a black pixel
    //and so these pixels won't be considered from now on
}
  //creating the difference image using the array of colors/pixels
  differenceImage.loadPixels();
  for (int i=0; i<img.pixels.length;i++){
    differenceImage.pixels[i] = difference[i];
  }
  //updating its pixels
  differenceImage.updatePixels();
  
  //populating the Point array with points only when the pixels aren't black!
  int index = 0;
  color col;
  for (int y=0; y<imgHeight;y++){
    for (int x=0; x<imgWidth; x++){
      if(differenceImage.get(x,y)>color(20)){ //needs to be not black(>0) but I put 10 just to be safe
        col = color(img.get(x,y));
        pointsArray[index] = new Point(int(map(x,0,imgWidth,0,width)),int(map(y,0,imgHeight,0,height/2)),col); 
      }
      index++;
    }
  }
  //drawing a point for each pixel and moving it up and down like a wave crash
  for (int i=0; i<pointsArray.length;i++){
    if (pointsArray[i]!=null){ //some of the points are empty because we skipped the index where the pixel is black
      pointsArray[i].drawPoint();
    }
  }
  //waves. code copied from an example on processing.org 
  fill(0,25,35);
  noStroke();
  beginShape();
  float xoff = 0;
  for (float x = 0; x <= width; x += 10) {
    float y = map(noise(xoff, yoff), 0, 1, 400,470);
    vertex(x, y);
    xoff += 0.05;
  }
  yoff += 0.01;
  vertex(width, height);
  vertex(0, height);
  endShape(CLOSE);

}

 

Final outcome