DEV Community: AruPV

Making my first game with Unreal Engine 5!

AruPV — Tue, 01 Nov 2022 21:20:27 +0000

Hey all!

It's been a little while since I posted here (it was a hectic summer). I'm working on a game now! I would describe it as a first person, sandwich-making, single-player overcooked clone.

The general gameplay loop is quite simple. Clients come in and order what sandwich they want, and you just go have to build it fast for them.

Let me guide you through my code right now and show you how it all works!

Player

The player character is relatively simple. It holds the movement events, an event on left click that interacting with things in its environment, and a couple of blueprints for both adding ingredients to its hand and putting them down.

The left click was one of the first things I implemented and I was really proud of it when I made it. This is how the player grabs and places ingredients, but also how the player confirms that an order is ready to be delivered to the costumer. It fist line traces from the camera forward and gets its hit result, then it checks to see if the player is within that element's collision box. If it does, then it sends a message through an interface "PlayerInteractionInterface" that tells the item the character has interacted with it.

The other two interesting events in this blueprint are implemented from two different interfaces. AddToHand is a message sent from the ingredients blueprint that checks if the character is holding something, and if they aren't sets the character's "OnHandString" to the name of the ingredient, adds a mesh to "OnHandMesh" and sets the "HandFull?" boolean to true. EmptyHand simply clears every one of these variables I just mentioned and is called by the trash can blueprint.

Ingredients

Probably my simplest blueprint at the moment. It holds a couple of variable: It's own static mesh, a mesh that shows when held on the players hand, the name of the ingredient, and whether or not the ingredient is a kind of bread.

It only shows one event, which is part of an interface with the player blueprint. When the player interacts with the ingredient on the table, the ingredient will send its relevant data to the player (ingredient name and on-hand mesh).

Sandwich

This blueprint might need a bit of a redesign later, but as of right now it is the plate onto which the player builds the sandwich, the object a client sends the order information to, and the one in charge for comparing that both the sandwich made by the player and the one ordered by the client match

I was really struggling at first to figure out how to not have all the different meshes for each of the ingredients of the sandwich not just appear in the same space (or float at odd intervals from one another), but I think I figured out an okay solution!

When a character send a message to the sandwich that it has interacted with it, the sandwich calls its own "AddToSandwich" event and messages the character to empty its hand. AddToSandwich checks to see if the character is holding an item, and if it is, it adds the string of the ingredient it to an array called "BuiltSandwich." It then creates in itself a new static mesh at the transform "NextMeshPosition," which has default values of 0 for all axis, and that uses the mesh from the ingredient on the player's hand. Finally, it changes the Z value of NextMeshPosition to itself plus whatever the Z value of the new mesh is.

Next couple of events are the "AddClientToQueue" and "SubmitSandwich." The first one just adds a reference of any new client that is assigned to that sandwich to an array that holds them called "ClientQueue," and the second compares the built sandwich array to the ordered sandwich.

The comparison is handled by a "CompareSandwiches" event (don't really think I needed another event just for this but oh well!).

Client!

This is I think my most complicated blueprint right now.

When initialized, a client runs three different events, "Initialize Bread Fillings," "New Order," and "Attach to Sandwich." The last thing it does is it toggles the visibility of its speech bubble (how you know what the order is) to invisible.

The first event, the "Initialize Bread Fillings" grabs all the different ingredients in the scene and adds them to an array. It puts all ingredients that have a the "isBread?" boolean true to the breads array, and adds all the ingredients that do not to the fillings array.

After that, the New Order event is triggered. This picks a random number (between 1 and 4 at the moment) and runs the "GetRandomBread" function to get a bread to be used in the sandwich, adds this bread to the ClientOrder array, and then runs the "GetRandomFilling" function for as many times as the random number said to do, adding each to the array. At the end, it adds another slice of bread to the ClientOrder array.

Finally, the client will "attach" itself to a sandwich with the "Attach to Sandwich" Event. This event simply looks at all the sandwiches in the scene, picks one at random, saves a reference to it and sends a message to this sandwich to add the client to the queue.

Finally, when the game starts for the client, the game will grab a reference to a material in its mesh (this will be used to change the color of the client with time), moves itself to the sandwich, updates the speech bubble to have the correct order, and on arriving at the check-out will change the visibility of the bubble to visible and make the client more impatient

Once the player sends either an incorrect or correct order, the following code runs which calculates the score and pushes it to the game mode

The calculation of the score is quite simple. There is a minimum score that any correct order will get, and there is a bonus score that the player can get depending on how fast they make the sandwich

Patience and time until the client storms out the door is handled by this event, which is also in charge of making the client appear more red as the time to it being "pissed off" decreases (right now, the client does nothing when pissed off but will do in the future).

This post is getting a bit long!

It's been really eye opening seeing how much goes into making even this simple of a game. TBH Maybe I'm biting off a bit more than I can chew right now, but I am having a blast so I don't really care too much. I haven't shown you all everything in the game, but I think this post is getting rather long already. I will make shorter posts in the future talking about each feature as I add it!

Thank you for following me along this journey!

Aru

My Experience with Codecademy's "Learn JavaScript" course

AruPV — Sat, 09 Jul 2022 16:56:55 +0000

So I just finished Codeacademy's beginner level Javascript course (Hooray!). I had a lot of fun with it and thought it might be a good idea to go through what I learned there both because I want to review some stuff I was a tad bit iffy on still and because I want to get into the habit of journaling a bit more (this counts as journaling, right?).

And I guess maybe someone who, like me, is learning JavaScript might find this useful too!

I'll go through each of the sections (units?) of the course, give a general description, a quick "cheat-sheet" of concepts.

I did get the "pro" version of Codecademy (which is somewhat affordable with a student discount), so I'll be talking about the bite-sized "projects" they have you do while you're taking the main course also

Introduction

This one is actually the second unit of the course, but the first one is just a small article (they call them "informationals") welcoming you to the course.

The first part of the course introduces us to comments, the console.log() method, fundamental data-types, dot notation, and the Math object.

//I'm a single-line Javascript comment!

/*
And I'm a multi-line Javascript comment!
*/

The console.log() method is self-explanatory. It logs _things onto your _console.

console.log("Like this!")

And the Math object allows us to performs all kinds of operations on numbers, like:


//Round down
Math.floor(x)

//Round up
Math.ceiling(x)

//Trig
Math.sin(x)
Math.tan(x)
Math.cos(x)

The second part of the unit introduces us to variable. Javascript seems to have a couple of different keywords one can use to create variables: "var," "let," and "const." The keyword "const" gives you a static variable, while the keyword "let" allows for dynamic variables (not really sure when we're supposed to use the "var" keyword, but whatever).

//Use let to define a dynamic variable
let changeMe

//Use const to define a static variable
const doNotChangeMe

Another cool thing about JS is the ability to use template literals (woah!). Obsessed with these at the moment.

let favoriteFood = "Mapo Tofu"
console.log(`I wish I was eating ${favoriteFood} rn.`)

The Pro-jects

The projects for this unit were relatively simple, I think. We were tasked with making a little program that converted degrees in Kelvin to celsius and farenheit.

//kelvin is the forecast for today
const kelvin = 0
//celsius is kelvin -273
let celsius = kelvin - 273
//farenheit calculations
let farenheit = celsius * (9/5) + 32
//round down farenheit number
farenheit = Math.floor(farenheit)
console.log(`The temperature is ${farenheit} degrees Farenheit.`)

And a similar one to convert human years to dog years.

const myAge = 21
//first two years of a dogs life counts as 10.5 dog years
let earlyYears = 2
earlyYears *= 10.5
//first two years from my age
let laterYears = myAge - 2
//make laterYears into dog years
laterYears *= 4
//sum both later and young years
let myAgeInDogYears = laterYears + earlyYears
//save my name turn it to lowercase
const myName = "Aru".toLowerCase() 
//print it all out
console.log(`My name is ${myName}, I am ${myAge} years old in human years and ${myAgeInDogYears} years old in dog years.`)

But generally speaking, this was a relatively short unit that is meant to serve as a foundation for the rest of the course!

Conditionals

After that we have a section on conditionals. Coming from a background in analytic philosophy computational logic makes me feel right at home!

We went over a couple of things: comparison operators, if statements and "truthy and falsy" values.

Comparison operators seem really standard, you have your >s, and <s, the <= and >=, and (this threw me for a bit of a loop) === for identity relations (isn't it often two equal signs?).

if and else if statements are really straight forward also.

let something = true
let someOtherThing = false

if (something){
   return 'do the first thing'
} else if (someOtherThing){
   return 'do the second thing'
} else {
   return 'do the the third thing'
}

You can also write conditionals as ternary expressions. Which shortens them by a couple of keystrokes.

something ? return 'do the first thing'

Javascript also allows for switch statements, which instead let you do something like

let something = 'peanut'

switch (something){
   case 'apple':
     return "I like!"
     break;
   case 'peanut':
     return "I like!"
     break;
   case 'eggplant':
     return "I'm so sorry, I should have said this before you started making dinner, but I'm actually allergic to eggplant. No omg it's okay don't worry about it I'll just get something on the way home. No please I promise I'm fine I wasn't too hungry anyways."
     break;
}

Still somewhat confused about the whole "truthy" and "falsy" thing. I think it means that you can evaluate non-boolean data types as if they were. That empty strings and 0s will evaluate to false, and that most other things will evaluate to true.

The Pro-jects

Projects started to get a little more complex here, but nothing too crazy yet. We were tasked with making a little magic 8-ball that you would ask a question to and get a response to in return.

//get user's name
let userName = ''
//get user's question
let userQuestion = 'Will I get a million dollars today?'
//if username then non-generic, otherwise generic welcome
userName ? console.log(`Hello ${userName}!`) : console.log("Hello!")
//print what the user asked for, options for generic and non-generic
userName ? console.log(`So, ${userName}, you want to know "${userQuestion}"`) : console.log(`So, you want to know "${userQuestion}"`)
//get a random number to determine the outcome 
let randomNumber = Math.floor(Math.random() * 8)
//define eightball with global scope so its accessible outside the switch statement
let eightBall = ""
//switch statement depending on the random number for different responses
switch(randomNumber) {
  case 0:
    eightBall = "It is certain"
    break;
  case 1:
    eightBall = "It is certain-ish"
    break;
  case 2:
    eightBall = "hmm idk ask me again"
    break;
  case 3:
    eightBall = "i dont care"
    break;
  case 4:
    eightBall = "woah!"
    break;
  case 5:
    eightBall = "Maybe tomorrow? You should probably ask again tomorrow"
    break;
  case 6:
    eightBall = "That's actually so rude of you to ask. No"
    break;
  case 7:
    eightBall = "Yeah! probably!"
    break;
}
console.log(eightBall)

Functions

Next up was a section about functions, and it seems like there are generally two ways one can go about defining them.

There is the common function declaration that looks pretty similar to most other languages I've perused through in the past.

function imAFunction (firstParam, secondParam){
   return firstParam + secondParam
}

But there are also "arrow" functions that have slightly different syntax but seem to do just about the same things

const imAFunction = (firstParam, secondParam) => {
   return firstParam + secondParam
}

Arrow functions can also be written concisely like this

 const imAFunction = (firstParam, secondParam) => firstParam + secondParam

I'm not quite sure which one is best to use when, but I'm under the impression the safe bet is to use arrow functions when possible, so that's what I've been doing.

The Pro-jects

This project was kind more fun than the past two! I was tasked with making a rock, paper, scissors game that took one input and played it against a computer.

//A function that gets a user input and checks its validity, makes it lowercase 
const getUserChoice = userInput => {
  userInput = userInput.toLowerCase();
  if (userInput == 'rock' || userInput == 'paper' || userInput == "scissors"){
    return userInput;
  }else {
    console.log("Error!");
  }
};

// A function that picks between rock, paper, and scissors randomly for the opponent
function getComputerChoice(){
  let choiceNumber = Math.floor(Math.random()*3);
  switch(choiceNumber){
    case 0:
      return 'rock';
      break;
    case 1:
      return 'paper';
      break;
    case 2:
      return 'scissors';
      break;
  }
}

// A function that plays the game out!
function determineWinner(userChoice, computerChoice){
  // If both are same, its a tie
  if(userChoice == computerChoice){
    console.log(`It's a tie! ${userChoice}`);
  // Now the options for user picking rock
  } else if (userChoice == 'rock'){
    // User picked rock, computer picked paper. Computer wins
    if(computerChoice == 'paper'){
      console.log("Computer wins! Paper beats rock")
    // User picked rock, computer picked scissors. User wins
    } else {
      console.log("You win! rock beats scissors")
    }
  // Now the options for user picking paper
  } else if (userChoice == 'paper'){
    // User picked paper, computer picked rock. User wins  
    if(computerChoice == 'rock'){
      console.log("You win! Paper beats rock")
    // User picked paper, computer picked scissors. Computer wins  
    } else {
      console.log("Computer wins! scissors beats paper")
    }
  // Now the options for user picking scissors
  } else {
     // User picked scissors, computer picked rock. Computer wins
     if(computerChoice == 'rock'){
      console.log("Computer wins! rock beats scissors")
    // User picked scissors, computer picked paper. User wins
    } else {
      console.log("you win! scissors beats paper")
    }
  }

}
computerChoice = getComputerChoice();
console.log(computerChoice);
console.log(determineWinner(getUserChoice("Paper"),

Scope

So, Scope. This was a rather short lesson that went over best practices for scoping in Javascript. My main takeaway from it was that you cant access local variables from outside their block, but that you should still try to narrow down the scope of variables so you don't create a lot of scope pollution.

I don't think I will post the project I made here because it really was pretty small and consisted mostly of fixing the scoping of code provided by codeacademy. Definitely an important lesson (just maybe not the most exciting one)!

Arrays

I really enjoyed the arrays unit! There was a ton of information on array methods and I'm not quite sure I remember all of it, but generally speaking we went over the following.

Arrays are defined in much the same way they tend to be defined, with square brackets, with the first item in the array having an index of 0.

let myArray= ['First Item', ' Second Item', ' Third item']
return myArray[0] //returns 'First Item'

You have functions that allow you to really easily implement stacks with arrays:

.push(): Add items to the end of an array
.pop (): Delete item from the end of an array

You also have the "shift" function if you want to implement queues.

.shift(): Delete item from the beginning of an array

and the un-shift function, which is the inverse of the shift function

.unshift(): Add item to the beginning of an array

let myArray= ['First Item', ' Second Item', ' Third item']
//Add element to the end of the array
myArray.push('Fourth item') //['First Item', ' Second Item', 'Third item', 'Fourth item']
//Delete element from the end of the array
myArray.pop() //['First Item', ' Second Item', ' Third item']

//Delete element from the beginning of the array
myArray.shift() //[' Second Item', ' Third item']

//Add element to the beginning of the array
myArray.unshift('New First Item') //['New First Item', ' Second Item', ' Third item']

Another couple of useful methods that arrays have are:

.splice(x,y): Removes an item from array at a given index. x is the index of first item to be deleted and y (optional) the amount of total items (including the one at index x) that will be deleted.

.join(x): Merge the elements of the array, outputs a string. You can provide a string in "x" (optional) that will be placed between elements of the array, by default this is commas.

.indexOf(x): Finds the first element in the array with value "x"

let myArray= [1, 2, 3, 4, 5, 6, 7]
myArray.splice(1,2) // [1, 4, 5, 6, 7]
myArray.indexOf(4) // returns 1
myArray.join() // returns "1,4,5,6,7"

There's a ton more! I think I'll be using this documentation as a resource moving forward

Pro-jects

There was one project for the arrays unit; it tasked me with "decipher" a secret message in an array. The only thing I had to do was perform the several methods I outlined previously so I won't post it here.

Loops

Loops! We went through three different kinds of loops here: for loops, while loops, do while loops.

For loops are the easiest in my opinion, you give it a counter and it performs an operation a certain amount of times.

for (i = 0; i < 10; i++){
  //do the thing
}

You can also do for loops through an array

let myArray  = ['a', 'b', 'c']
for (const letter in myArray){
  return `The letter ${letter} is in this array'
}

I'm not entirely sure of the difference between a while loop and a do..while loop, but I think it's that a do..while loop will always run at least once because of its conditions being evaluated at the end of the loop, but a while loop will not do so unless the conditions are met at the beginning of the loop.

// This will not run
let i = 10
while (i < 10){
   i *= 10
}

// But this one will
do {
 i *= 10
} while (i < 10)

Pro-jects

This project was a lot of fun actually! I had to make a string into "whalespeech" (only vowels, O's and U's get repeated). I went about it like this

//Input for whale-ification
let input = " War. War never changes. The end of the world occurred pretty much as we had predicted. Too many humans, not enough space or resources to go around. The details are trivial and pointless, the reasons, as always, purely human ones";
//These are the vowels in the english language
const vowels = ['a','e','i','o','u'];
//array that will contain whalespeech
let resultArray = [];
//iterate through the input string
for ( i = 0 ; i < input.length ; i++ ){
  //iterate through the vowels array
  for ( c = 0 ; c < vowels.length ; c++ ){
    //if the character in position i in the string is a vowel, then run this block of code
    if (input.charAt(i) == vowels[c]){
      let toArray = input.charAt(i);
      //add the character to the output array
      resultArray.push(toArray);
      //if its an o or u then add it again
      if (toArray == 'o' || toArray == 'u'){
              resultArray.push(toArray);
      }
    }
  }
}

let resultString = resultArray.join("").toUpperCase();
console.log(resultString) // AAEEAEEEOOEOOOOUUEEUUAEAEIEOOOOAUUAOOEOOUUAEOOEOOUUEOOOOAOOUUEEAIAEIIAAOOIEEEAOOAAAUUEUUAOOE

Iterators

Another short lesson, it goes through a couple more array methods:

.forEach(): executes the same code on each element of an array. Does not change the array and returns undefined

.map(): executes the same code on each element of an array. Does not change the array and returns a new array

.filter(): returns an array with the elements that meet a condition

.reduce(): operates on all elements of an array, returns a single value.

Objects

The last unit of the course (finally!). Thank you for getting this far! This unit (as the name suggests) introduces you to the concepts of objects and methods.

Objects have a really simple syntax in JS

let myObject = {
  //properties of the object
  name: 'My First Object',
}

You can nest objects in objects as such

let myCar = {
  //properties of the object
  name: 'My First Car',
  passengers: {
    driver: {
      name: 'Vaquita Jose',
      age: 3
  }
}

And you can make objects have methods by writing them like a funnction

let myCar = {
  //properties of the object
  name: 'My First Car',
  passengers: {
    driver: {
      name: 'Vaquita Jose',
      age: 3
  },
  startUp (){ return 'Vroom Vroom' }
}

Some particularly important functions are setters and getters. Setters allow you to safely change information in an object, while getters do the same for getting information from an object

let myCar = {
  //properties of the object
  _name: 'My First Car',
  passengers: {
    driver: {
      name: 'Vaquita Jose',
      age: 3
  },
  startUp (){ return 'Vroom Vroom' },
  get name() { return this._name },
  set name(newName) { this._name = newName }
}

And finally, there's the factory functions that allow us to quickly build objects

   let robotFactory = (model, mobile) => {
  return{
    model: model,
    mobile: mobile,
    beep(){
      console.log('Beep Boop')
    }
  }
};

Pro-jects

The project for this lesson required me to put it all together and create a menu!

const menu = {
  _meal: '',
  _price: 0,
  //setter methods
  set mealToCheck(meal) {
    if (typeof meal == 'string'){
      this._meal = meal;
    };
  },
  set priceToCheck(price){
    if (typeof price == 'number'){
      this._price = price;
    };
  },
  //getter methods
  get todaysSpecial (){
    if ((this._meal == true) && (this._price == true)){
      return `Today's special is ${this._meal} for ${this._price}!`
    } else {
      console.log(this._meal == true)
      console.log('Meal or price was not set correctly');
    }
  }
};

menu.priceToCheck = 10;
menu.mealToCheck = 'pasta con caraotas';

console.log(menu)

console.log(menu.todaysSpecial)

Closing Thoughts

I think this course was a really fun experience and a great way to get me started on my Javascript journey! I'm sorry for the rather long post, but I think there was a fair amount to cover. I hope to post a big more about my own projects soon.

Thank you for reading !
Aru

First Post

AruPV — Thu, 07 Jul 2022 22:27:38 +0000

Hey~!

Made this Dev account to blog about my learning to code. Just recently finished the "Intro to JavaScript" course on Codecademy and will probably make a post about it soon!

Thanks!
Aru

(P.S: Drop a follow if you can)