Category: Spring 2023 – Shiloh

Concept

Whenever I’m traveling to someplace new, driving around my hometown, or even walking down a new street, I am always intrigued by that one small, cozy cafe sitting at the corner of the street. The ones with soft, lo-fi music playing in the background with fairy lights hanging all around. For my midterm, I thought of replicating that thought and creating a similar experience but with one important addition: Interaction. I decided to sway away from making games for once and to try something new that i would enjoy just as much. So I came to the conclusion of making a small but interactive cafe experience in p5.

The whole concept behind my idea is to let the user explore the artwork on their own and immerse themselves in the calm environment of the cafe. The way I would make this work is to add small interactable elements in the cafe like books that the user can read, a menu that they can view, or a jukebox that they can use to change the music. All of these elements will be subtle but noticeable enough to make the user want to interact with them. This way, the user will be able to experience something new in every corner.

Design

For this project, I’ve decided to keep the design simple but intuitive. The color scheme would be soft and pastel-like and the overall design of the objects in the canvas would replicate SVG images. I want my cafe to have a calm and relaxing feel to it with soothing music and close-to-real-life sound effects, such as the sound of opening a door when it is clicked, the sound of flipping a page when the user decides to interact with the book and turn its pages, and the familiar sound of brewing coffee in the background.

In order to visualize my design and concept, I started to draw the relevant wireframes on my iPad. These are very minimalistic for now but they give an idea of what the design and feel of the experience would be like.

Frightening / Challenging Aspects

• Switching the user perspective from scene-to-scene. For example, displaying the outside of the cafe at first, and then changing the perspective to view the inside of the cafe when the user clicks on the cafe’s entrance.
• Drawing! All the structures and objects, however big or small, will have to drawn using shapes in p5, this is a very time consuming task.
• Implementing buttons / Highlighted objects on mouse hover: For instance, the cafe’s door would be highlighted in a darker color when the user hovers over it since it stores an interaction. Implementing the different interactable shapes on the canvas as buttons is challenging as well.

Risk Prevention

• In order to tackle the “switching from scene-to-scene” challenge, I started creating layers to keep a track of the different scenes in the experience and to display them at the correct times. Boolean variables would dynamically keep a track of which scene the user is currently in and the relevant objects would be displayed to the user under that layer. For example, if the user is at the first scene, or layer1, the outside of the cafe would be displayed along with the sky and other background objects, but as soon as the user clicks on the cafe’s door, the first layer would be erased (or not be displayed) and the interior of the cafe (the second layer) would be displayed.
• One of the most time-consuming parts of this project would be to design all the individual objects from scratch using basic shapes and lines. Although this seems daunting, I have started to work on different objects simultaneously on different canvases so that I can get them done faster, and also so that I don’t have to scroll endlessly just to find a particular object. In the end, I would combine the different canvases into one project, which would be easier since I’m designing all the layers separately.
• Implementing different objects in the canvas as buttons is also a bit daunting since I would have to compare the mousePos with every single interactable object to see if it is inside the object. Since the objects are made up of different shapes, making the interactions and mouse hovers seem natural would consume a lot of time so I’ve given myself a head-start for working on those interactions as well.

PROJECT PROPOSAL

A 2-player maze chase game built on p5.js. Players are each assigned a role, the hunter and the prey. The maze is set in the nighttime, meaning that neither the prey nor the target can see the full maze. Each player is equipped with a flashlight, which spotlights them and allows them to see some surroundings. Prey’s goal is to escape the maze before the hunter chases them. Hunter’s goal is to catch the prey before they escape from the maze. Prey’s flashlight is stronger and hence allows us to see more of the maze because I feel like their goal may be more challenging to fulfill.

BIGGEST CHALLENGE

I identify my biggest challenge for this project as the building of the maze itself. I have the hardest time understanding the logic behind the building of anything that uses grids. Besides that, I have minimal knowledge of algorithms that allow for maze generation. To help myself with that, I will refer to the multi-part youtube tutorial by The Coding Train, in which they create a maze generator using a depth-first search algorithm with recursive backtracking. I have also found this page useful in introducing myself to the pros and cons of different maze-building algorithms.

IMPLEMENTATION

I decided to start by addressing my biggest concern for this project, which is adding a self-generating maze. The tutorial that I have referred to uses a randomized depth-first search. After looking through other possible algorithms, I have settled on Kruskal’s algorithm, which generates more dead ends in the maze. So far, the code that I have generates a maze with one player and one maze exit. The player can move around the maze using WASD for controls. The maze exit doesn’t do anything yet.

THINGS TO WORK ON

Basically everything else (e.g. sound, player sprites, spotlight, intro window, player interaction, etc). As for the maze, I need to add another player to it, and possibly control the position of the maze exit so that it is closer to the “prey” than to the hunter. For now, it is pretty easy to get from the start to the end of the maze even with all of the dead ends. However, I think that the difficulty of the game won’t be a question once I have the spotlight feature implemented.

 

Concept & Design

For this Midterm Project I would like to create a game using everything I have learned so far in class. The game will be called “The Martian” and the objective of the game is to guide the Mars Rover through the treacherous terrain of Mars, collecting valuable resources and avoiding hostile alien spaceships and rocks on the surface. The player will have to navigate using keyboard and mouse as they progress through the game. In “The Martian” the player will experience the thrill of driving a Mars Rover on the surface of the red planet. With challenging terrain, hostile aliens, and valuable resources to collect, the game will offer hours of exciting gameplay. The use of p5.js will enable the creation of a visually stunning and engaging game.

Potential Design Elements

Complex part of midterm project

For me personally the most frightening  or complex part of this midterm project is to implement a collision detection algorithm. The idea is to detect the collision between Mars Rover and other objects like valuable resources and hostile alien spaceships or rocks. I also have to somehow come up with an algorithm to distinguish between these various collisions with different objects. Because if the Mars Rover collides with valuable resources the Score should increase and if it collides with the rock or alien spaceship it should end the game and display the restart button. Also because I didn’t have any previous background in using sound and animation libraries I would have to test them out.

Implementation & Reducing the risk

Here I wrote some code for the collision algorithm between Mars Rover and Rock:

if(ufo$.isTouching(rover)||stone.isTouching(rover)) {
            console.log("end");
            state="end";
            ufo$.destroyEach();
            stone.x=width+400;
            stone.velocityX=0;
            rover.visible=false;

            gmov.play();
               
            textSize(30);
            textFont(font);
            fill("black");
            text("The End",width/2,height/2);
        }

        if(mousePressedOver(switchBtn)) {
            sd=1;
            click.play();
        }
        if(sd==1) {
            state="pause";
        }

I also tried to implement the spawn of Alien Spaceships:

function spawnEnemy() {
    ufo=createSprite(width+50,Math.round(random(xp-100,xp+20)),80,80);
    ufo.velocityX=-5;
    ufo.addAnimation("ufo",ufo_);
    ufo.scale=0.2;
    ufo.lifetime=Math.round(width/3)+15;

    //ufo.debug=true;

    ufo.setCollider("circle",0,0,200);

    ufo$.add(ufo);
    console.log(xp);
    cx-=4;
}

 

Concept

For the midterm, I want to develop a simple game “Survive the semester”. In this game, a player should catch different items to continue playing until time is over. In case time reaches 0, the player won. For now, my plan is to make game over in cases when player’s health or joy levels reaches 0. I intend to include 2 progress bars reflecting student’s health and joy. Different items will have different effects on the bars, e.g. catching sleep will increase player’s health. Though, the game logic is not yet finalized. I may do it the way that if student fails to catch something, health/joy is deducted.

Design

I chose the NYUAD night picture as a background image. I am a kind of student who does a lot of study-related work at nights, so this choice was a bit relevant to me to reflect the game theme on studying.

Implementation

For me, the most frightening part was to get an idea of what game I want to develop. I would not describe myself as creative, and creating original game takes a lot of effort and time to me. I was also concerned on the progress bars and updates to them. I did not finish their implementation now, but I got the idea on how to work on them and I believe I should be able to finish it well before submitting my work.

I have also implemented the main mechanical part of game – involving falling ball and catching figure. I will  change the image of falling objects and catching rectangle to adjust to my game design objectives. I kept it simple for now to test if it works as it should first.

Future Steps:

I got a lot of ideas on my mind and I am excited to see on what I will end up implemented for this game!

Yet, what I would definitely need to add to my implementation:

• Sounds. Should be fun experience to select those =)
• More images. Especially, for falling objects. Falling ball is irrelevant to my game now.
• OOP. It should not be a problem.
• Better visuals involving text. Now it is basic, I may need to make the visual part of game provide better UI and UX to the player
• More enhanced game logic and progress bars!

Link to the sketch: https://editor.p5js.org/ds6058/sketches/1lbHkjJpV

 

 

 

My idea for my midterm project is to develop a variation of the classic brick breaker game. Instead of breaking bricks, the objective of the game is to prevent the ball from dropping from the bottom of the screen. The game will feature various items that the ball can hit that the player must navigate to keep the ball in play.

One of the unique features of the game is that hitting an obstacle can affect the gameplay in various ways. For example, if the ball hits a “sizing” obstacle, the size of the bar at the bottom of the screen may increase or decrease. Another obstacle could change the speed of the ball, making it either faster or slower. Some obstacles may be stationary, while others may move back and forth, making it more challenging to keep the ball in play.

The game will have different levels, and as the player progresses through the levels, the game’s difficulty will increase, requiring the player to react quickly and adapt to the changing gameplay.

I will get a better understanding of the complexity of the game once I start coding it but some of the challenge I believe I could possibly run into are the following:

– One of the most crucial aspects of the game is the collision detection between the ball and the obstacles. I will need to create an algorithm that can detect when the ball hits an obstacle and determine the correct response, such as changing the bar size or ball speed.
– Integrating a continuous scrolling background in the game to add a dynamic and immersive element to the gameplay experience. I have looked into some code examples that I could use for this.
– Finding the right balance between challenging and enjoyable gameplay. For this I will need to playtest the game extensively to ensure that it provides enough challenge to keep the player engaged, but not too much to become frustrating.

Introduction

Pong is a classic two-player game that simulates table tennis. The players use paddles to hit a ball back and forth across the screen. The objective of the game is to score points by getting the ball past the opponent’s paddle.

Project Concept and Design

The goal of this project is to create a basic Pong game that can be played by two players. The game will have two paddles, one for each player, and a ball that bounces around the screen. The players will use their paddles to hit the ball back and forth, with the objective of getting the ball past the opponent’s paddle. The game will have a scoring system that keeps track of each player’s score, and the first player to reach a certain number of points (e.g., 10) will be declared the winner. The game will also have sound effects to enhance the gameplay experience.

The Most Frightening Part (Implemented)

Initially, the most frightening part of this project was not knowing how the game would pan out with the collisions and movement of the ball and paddles. It was essential to get that part of the game right to ensure that the game could be implemented. To reduce this risk, I decided not to leave the implementation of the game to the end but started implementing the project slowly with one feature at a time. This approach allowed me to test each feature as I implemented it and make adjustments as needed to ensure that the game was working as expected. There sure are more improvements that can be added to this system, but a decent amount of work has already been done.

The paddles now move with the UP and DOWN arrows, and the “W” and “S” keys.

Future Enhancements

• Adding a picture background in the play area.
• Adding an instruction screen(with text) in the beginning.
• Adding sound effects.
• Adding a game termination check and a “Game Over” screen.
• Adding a restart button in the “Game Over” screen that restarts the game.

Link: https://editor.p5js.org/swostikpati/full/ShPga9v6_

For my midterm project, I want to create a philosophical experience disguised as a dungeon crawler game. I am taking inspiration from The Legend of Zelda, to the point that I plan to use their assets. The experience will consist of two parts:

1. Start of the game, which looks like something you’d find in old retro games from the 90s. You’re shown that you can move around and attack, and there are monsters aroud, so you conclude that you should attack and kill them.
2. Eventually, you have to be killed by the monsters (a scripted death). Then the tone (and possibly artwork, art style) completely changes. You’re presented with a ‘path’ to the afterlive and by walking the path you have to confront all the lives you took. I essentially want to subvert the expectations of what it means to be a character in a retro video game killing other live in the game.

From the start, I realized that one of the most difficult parts would be creating a good and efficient animation system, where I would be able to animate entities in the game using sprites/spritesheets. Therefore this is the first major thing I implemented. This actually consisted of two major things: 1) a mechanism for loading assets (images, sounds, etc.), and 2) a way to animate game entities.

Loading assets

I wanted to make my mechanism for loading assets easily configurable, so that I could easily change and configure images, spritesheets, and animations without going through several places in the code. I came up with the concept of having a file, such as assets.txt, which contains all my assets. Each line in the file would look like one of the following:

Texture [TextureName] [FilePath]
Animation [AnimationName] [TextureName] [FrameCount] [Speed]

(Note: I plan to add a way to define sounds too. And I will explain how animations work in a bit.)

I am essentially giving a name to all assets so I can reuse and easily find them later when creating the game entities. At the same place I am configuring them.

In practice, the concept of having a file that tells you which other files to load (i.e. images) seems difficult to implement in p5, even using the preload function. Therefore I had to define the ‘assets’ file as a list of strings, which is functionally the same, although looks a bit uglier. Still, it accomplished what I wanted.

Moving on. I created an Assets class which handles the loading of all asset files and creating all animations, and I do these things in the preload function of p5. In the assets class, I have two maps, which I populate using information from the file:

1. textureName (a string) –> p5.Image (the thing created when using loadImage)
2. animationName (a string) –> Animation (a class I created and will describe soon)

When loading assets, I had to make sure that all textures are loaded before all animations, because every animation object has a texture which is passed to its constructor and whose properties are used immediately. To accomplish this order of loading, I had to use callback functions, but everything turned out alright in the end.

Animations

I created an Animation class which contains its name, its spritesheet (texture, i.e. a p5.Image), how many frames the animation should have before ending or repeating, and its speed (how often it should update). For example, a texture I used is the following:

Then I create an animation that uses this texture (i.e. this texture is the animation’s spritesheet). The animation has a frameCount of 2 and a speed of 15, which means that it should change its state every 15 frames.

To draw animations I used p5’s feature to only draw sections of its spritesheet. I also store at which ‘cell’ I currently am in the animation in order to speed things up a bit.

Switching between animations based on state

I wanted my player character to use a different animation depending on whether they are standing, running, attacking, etc. To implement this I also store a state component in the player, which is just a string with one of these values: “stand”, “run”, or “attack”. I also store the direction the player is facing along each axis, which changes when they move. For example, if they are currently facing down, the facing would be a vector (0, 1). Facing up: (0, -1). Facing right: (1, 0). Facing left: (-1, 0). Using this, every frame, I update the animation to display.

The sketch

Future plans

With the asset and animation systems done, it is now very easy to add and use new textures and animations. I can now focus on creating the level, adding sounds/music, and most importantly creating the second component of the game.

Concept:

My concept this week is to continue building on the “SURVIVE” game I made in week 3. It is an interactive video game in which the player is a triangle located at the cursor and the objective is to avoid incoming projectiles RGB colored projectiles.I have removed the “MISSION ACCOMPLISHED” page as I have opted to make the game Tetris style. That means the game is an endless mode in which the goal is to survive for as long as possible and get a highscore. Instead of counting down the timer counts up and speed of  the projectiles get faster based off of the time elapsed. I have also added different menus to help navigate the game. This includes a main menu and game over menu.

Embedded:

Code:

function resetGame() {
  rain = [];
  range = 400;
  size = 30;
  health = 3;
  ctr = 0;
  count = 0;
  lost = 0;
  win = 0;
  speedinc = 0;
  starttime = 2;
  timer = 0;
  for (let i = 0; i < 120; i++) {
    rain.push(new raindrop());
  }
}

 

The main change between this new iteration is the ability to reset the game back to its original state without rerunning theb sketch. This is made possible using the resetGame() function. The purpose of this function is to reinitialize all the games attributes back to its baseline.

if (level == 0) {
    noCursor();
    background(0);
    print("lvl 0");

    fill(200, 200, 100);
    triangle(
      mouseX - 10,
      mouseY + 5,
      mouseX + 10,
      mouseY + 5,
      mouseX,
      mouseY - 10
    );
    if (frameCount % (5 * 60) == 0) {
      print("fdnsjgds");
      speedinc = speedinc + 1.25;
    }
    if (frameCount % 60 == 0) {
      timer++;
    }

    if (timer <= starttime) {
      fill(255);
      textSize(24);
      textAlign(CENTER, CENTER);
      text("OBJECTIVE: SURVIVE", width / 2, height / 2);
    } else if (timer > starttime) {
      displayTimer();

      for (let i = 0; i < 120; i++) {
        noStroke();
        rain[i].draw();
        rain[i].move();
        rain[i].checkForCollisions();
        ctr++;
        if (ctr > 2) {
          ctr = 0;
        }
      }

      if (win == 1) {
        background(0);
        fill(255);
        textSize(24);
        textAlign(CENTER, CENTER);
        text("MISSION ACCOMPLISED", width / 2, height / 2);
        win = 1;
        resetGame();
      } else if (health <= 0) {
        resetGame();
        level = 2;
      }
    }
  }
  if (level == 1) {
    background(0);
    fill(255);
    textSize(24);
    textAlign(CENTER, CENTER);
    text("Main Menu", width / 2, height / 2 - 36);
    text("Play", width / 2, height / 2 + 36);
    text("Highscores", width / 2, height / 2 + 80);
    resetGame();
    // push();
    fill(0,0,0,1);
        rect(width / 2 - 75 ,
        height / 2 - 15 + 36 ,
        75*2 ,
        30)
    stroke(0);
    // pop();
    // stroke(255);
    print("lvl 1");
     // if (mouseIsPressed) {
      if (
        mouseX > width / 2 - 75 &&
        mouseX < width / 2 + 75 &&
        mouseY > height / 2 - 10 + 36 &&
        mouseY < height / 2 + 25 + 36
      ) {
        // push();
        stroke(255);
        // pop();
        if (mouseIsPressed){
          level = 0;
        }
      }

  }
  if (level == 2) {
    cursor(CROSS);
    background(0);
    fill(255);
    textSize(24);
    textAlign(CENTER, CENTER);
    text("GAME OVER", width / 2, height / 2 - 36);
    text("Retry", width / 2, height / 2 + 36);
    text("Return to main menu", width / 2, height / 2 + 80);
    print("lvl 2");

     if (mouseIsPressed) {
      if (
        mouseX > width / 2 - 75 &&
        mouseX < width / 2 + 75 &&
        mouseY > height / 2 - 25 + 36 &&
        mouseY < height / 2 + 25 + 36
      ) {
        level = 0;
      }
      if (
        mouseX > width / 2 - 75 &&
        mouseX < width / 2 + 75 &&
        mouseY > height / 2 - 25 + 80 &&
        mouseY < height / 2 + 25 + 80
      ) {
        resetGame();
        level = 1;
      }
    }
   } 
  
  if(level == 3){
     
   }
}

 

Another aspect is navigating between the different menus. The structure that this is done with determines how clean or messy the code would be. I opted to have each menu in a different if statement which checks the current “level”. There are 4 different levels currently. These consist of the game itself, main  menu, game over screen, and high scores. Using this structure, the program is only able to access which is made available to the current level variable. This makes developing features in the game much simpler and easier.

Challenges:

I had an issue where when I return to main menu after the Game over screen the buttons would not work, the issue was fixed by temporarily commenting out the level 3 line as it has not been implemented which caused the program to completely halt as it entered level 3 (highscores).

Future Improvements:

The project is halfway completed. The next features to be developed: Add a points system which increases based on the timer, Add a background image and sound effects, Add various power ups and interactable items, complete the Highscore page and make it so that you can enter your name and score into the leaderboard, and finally to add different fonts and sprites. My hope is that the game ends up being a fun and engaging game in which friends can compete in achieving highscores.