Pizza RPG Part 9 - Expanded Cutscene behaviors!

In this video, we expand on our cutscene system by creating Text events and cutscene Triggers. These events will enable us to create conversational NPCs in our game and connect the Overworld Maps with map changes.
IMPORTANT NOTE: Please see the code download links in Video 17 for latest changes to these systems! (There are a few straggling bugs in this episode, but we'll fix them later!)
#pizzalegends
Starting Code (08):
drive.google.com/file/d/1JFC6...
Ending Code (09):
drive.google.com/file/d/1UZEq...
NOTE: Please see the code download links in Video 17 for latest changes to these systems.
** Links **
More about Pizza Legends:
gamedevshift.com/pizza-legends
Support me on Ko-fi:
ko-fi.com/drewconley
Join our Discord community:
/ discord
Join our email list for early access to full courses:
us13.list-manage.com/subscrib...
Twitter:
/ drewconley13

[@DrewConley]

Hey all, quick heads up that we make some changes to these systems in Part 17. Please reference the description and code download links in that video for changes. Thanks!

probably best series on this topic ... thank you for great stuff

[@DelPieroJoga10]

you deserve much more views, this series is mind-blowing

[@YMRGUITAR]

I’m watching all of these through before starting to code along. I can’t help but pause and write ideas down for the game I’m going to make. Crazy potential. Thanks for this, Drew.

[@pavelerokhin1512]

I am obsessed with this series, can't wait for the next episode!

[@postymusic4387]

Hey i am really enjoying the series and re-wrote a version in lua. It is at the point of this video. I had some fun figuring out how to achieve similar behavior as async and await has, but found coroutines a very nice way around and learned something new. In my lua version as in the js version I found a bug: You can't talk to a Person when it is walking, afterwards his behavior will be resumed and this means that the person's coordinates are not on the grid anymore(we stop the behavior of the NPC while walking). The NPC will walk in strange ways and making walls off grid. You cant talk to him anymore. In my Lua version I discovered this bug when implementing the changeMap(following video). I came around it (in my lua version) by stopping the Controller, that every Person object had and giving the Objects a little amount of time to finish their behavior before switching to the cutscene. This controller was only handling each individual NPC, in my main app I had the global cutscene coroutine. DId anyone figured out how to work around in JS, I am new in this language.

[@TimKeegstra]

So far so good! Loving the series.

[@trongph.animation]

I can see this series gonna be big and popular in the future if you keep doing this bro !!!

[@TuRnaDo88]

Around 19:39 I run the code with you, but after i hit enter my NPC's is standing completely still. I don't mean to be rude or anything, I know it can be hard to keep up with the code in long videos and you are doing an amazing job explaining stuff with this series. But just wanted to let you know that, this is like 3rd time through the series that this happens. You type something behind the scene and forget to record it. Now, I'm sure I'll figure out a way to solve my code, but for beginners that is following along, it can be hard to find the problem, cause they took every step with you in the video and suddenly yours work, but theirs don't. Thank you so much for the time you put into this, we are learning a lot of good stuff thanks to you

[@zile8869]

Yo, I know it's been a while, but did you find a fix? Can you help me out? I have gone through this video a few times already and still cant find the problem. At 23:30 , when he hits enter to find a match with an NPC, instead of finding a match, it just always says 'undefined' for me... idk if this is related to the problem you mentioned, or if you even remember watching this video, but I'd really appreciate your help if you have any.

[@TuRnaDo88]

@@zile8869 Yeah I did fix it at the time, but it's been a while, so I can't even remember any of the code to be honest, you can join the discord server, there's a lot of nice people there that might be able to help you

[@musicisasuperpower]

@@zile8869 I got stuck for a little bit, but it's cause I had written object.key = key; instead of object.id = key. (which becomes the character id). Best thing to do is look in console and find where the error occurs, and put a debugger; statement right there. One of the values is likely undefined due to a typo somewhere.

[@C75525]

same issue with me, so frustrated lol

[@a.j.outlaster1222]

Bro, I am so exited! I am using getters to make dialog change for now, Turns out, They function as a regular, Well, Function. Meaning that they can change properties such as counters for how many times you have spoken to them or binary, Using getters, Your CURRENT setup is so op, *I* made something(slightly) impressive! I made an npc representing myself with such a changing dialog! Drew, That was before I made the entire event property an object, Now instead of changing individual events, I can change the whole LIST! Thank you so much, Drew! Thank you for helping me turn my dream into a reality! Err...A game? Whatever, Just thank you!

[@Magistrado1914]

Excellent course. Viewed on 2024/13/01

[@vsowill]

You have taught me how to take my blockchain development skills into the gaming world!!!!

[@gregoryedwards9097]

Drew you are the MAN!

[@MadameCocotte23]

Yes, I made it !!! Wonderful !

[@kashnigahbaruda]

This is fantastic

[@mattmcnett2635]

Awesome!

[@r1pfake521]

Should the current NPC event chain(s) be canceled before a map change action?

[@austinmurphy9074]

let's go!

[@OlddGregg]

Nice

[@liione]

Great Series so far I LOVE it! I started to create a house with a cutscene event to the second floor and then i added another cutscene event to the 2nd floor with which i can go back to the 1st floor. When i start on the 2nd floor and go down it works totally fine and i spawn right at where i wanted to spawn in the middle of the room (lets say its 5,5) when i now go to the cutscene field on the first floor at 2,7 it also works totally fine and i spawn on the second floor where i wanted to spawn. But now when i want to go down again i do not spawn at 5,5 where i should spawn on the first floor but at 2,7 where my cutscene field is and i really cant figure out why because it doesnt throw any errors. also i have an npc at the first floor which behaves nearly the same like your girl npc in the demo room when i spawn at 5,5 at the first floor. but when i spawn at the 2,7 position so the wrong position my game starts to get reeeeeeaaaallllyyyy slow and the npc has an highly increased speed for his behaviors. i did not want to start watching part 17 because i want to follow step by step and not get confused by some code u could have added in the tutorials before part 17 so i dont know if u maybe cover it up in the video but if so pls let me know then i will continue later with connecting maps and continue with the series now :) but if not do you have any suggestions how to fix this?

[@oliverren3172]

Im at about 14:00 and when the text message is open the hero can move around but when I have closed the text box the hero cant move. But the NPCs are working fine.

[@TheAxiys]

how would you go about using React or Svelte or some other library instead of just plain JS to create the HTML elements? is there any way to just use JSX ?

[@sneddengonsalves9320]

nice tutorial, one suggestion maybe have the event names in single constants file, was stuck for a while to find why event was getting handled because I had a typo in the dispatcher of he event

yea thats only thing I thought i would do different :D

[@dadaarno6194]

Awesome series !! Just to know guys, at this step, can your hero keep walking on the "wall" around the png map ?

[@uppast420am]

the system to build walls is implemented though, it's left for you to do yourself since most people are going to have varied maps from the DemoRoom

[@r1pfake521]

I have some questions: A, Will you add cutscenes which spawn additional characters and remove them after the cutsceen? I assume they could be added as normal persons but with a variable to hide them at the map start and then change the visibility of a person with a cutsceen event? B, Does it make sense to extract the talking object (and the talk events) to a different layer so that the person would only have a talking ID, then multiple persons could share the same talking events, like a pokemon center or shop npc who say the same thing or should we just copy&paste these specific npcs per map, because most persons will have unique dialogs anyways?

[@DrewConley]

Great questions! We don't cover adding or removing characters during cutscenes, but we will cover them changing what they say or do when you talk to them - you can extend the system to remove them from the scene at a certain time or conditionally include them on scene bootup. For common sayings, I do like the idea of storing in one place - but I also like the flexibility of having one-offs say certain things. It's can be easy and tempting to extract too quickly and lock yourself in to every single one always saying the same thing. So, maybe pull in a shared value to use in most maps, but give yourself the back door to extend later?

[@nursegilbey]

This series has been so inspirational to make me think my game idea can become a reality. But for someone who is a beginner to intermediate at JavaScript, do you think it would be a better idea to use Godot?

[@DrewConley]

Hard to go wrong either way on that one! Creating a game in either path is a huge success. Sorry for the lame answer, but it honestly depends on your long term goals and interests. If you have a working idea going with any tech, I’d say continue with that until it reaches its limitations, then adjust as needed.

[@a.j.outlaster1222]

Bro, You know Godot? If you can translate Js to Godot just like that, I am thoroughly impressed! I once translated a small script from Python to Js(As they are simular and I have more practice in Js) and it was HARD! Tbh, I don't know much about Godot, Or if it is similar to Js, But, If you got that skill, Maybe YOU need a sponser! Props to you!

[@a.j.outlaster1222]

To justify my impressed state, These files are hard on me as are, And I am used to Js... Umm... I'ma go now...

[@tylerbassett173]

Hey love the tutorial I have a question witch u do this all the time but when ur making the textmessage class why do u add {} in the constructor... constructor({text,oncomplete}) ? Instead of just passing in parameters normally?

[@klausoficial]

He's passing an object as argument hence the { }. i think this is cleaner and easier to read but it's not mandatory args could be passed just as easy

[@Akosiyawin]

I've encountered a bug here, when I tried the npc to walk around the pattern of square and the hero interacts with it, It suddenly breaks the behavior loop pattern of the NPC (instead of moving around the square), it just walks around the map breaking all the collisions/walls that I've set

[@owencyg]

I fixed this, it seems to be a bug with the timeout if the object is blocked and is retrying. I fixed this by setting this.retrying = true before running the set timeout when blocked. Finally, when we complete a cutscene in startCutScene() and loop through the objects to reset the npcs. Check if the object is retrying and return if so

[@Akosiyawin]

@@owencyg Thanks mate, I'll try it later

[@owencyg]

One thing i forgot to mention, set this.retrying to false when starting the behaviour. On my phone at the minute so ill post the code up a bit later

[@owencyg]

Finally got chance to add my solution here, albeit at the mercy of youtube comments, hope the formatting holds: In the Person class, in the startBehavior function, I've added this at the start: startBehaviour(state, behavior) { this.retrying = false ... and in the check to see if the behavior can retry, I set this.retrying to true: if (behavior.retry) { this.retrying = true setTimeout(() => { this.startBehaviour(state, behavior) }, 10); Finally, In OverworldMap class, in the startCutScene function, I've changed the final loop to be: this.gameObjects.forEach(object => { if (object.retrying) return object.doBehaivourEvent(this) }) This fixed the issue for me!

[@postymusic4387]

It solves the issue, but now the npc is eating my walls and the player also can go over walls and remove them Edit: I had place the return of the map.isSpaceTaken block inside another if, so it didnt work.. Now it works perfect for me

[@jhjhj2172]

till 15:18

[@LucasDev]

18:30 - is the a reason for the event listeners not be inside an arrow function as the other methods?

[@onehalfHDSM]

In this particular instance, there's not really a difference in how he is using them, but typically you might want to use the function keyword over arrow functions in event listeners in order to access the DOM element that triggered the event using "this". Using arrow functions in that case would change the scope so that using "this" within the function would no longer reference the DOM element, but would instead reference the object or function you were in when you added the event listener. Also in that particular instance, he declared the functions as their own variables outside of the event listener instead of passing them in anonymously as arguments so that he could easily reference them back in the "unbind" method to use in the "removeEventListener"s he sets up there.

[@kevmorel210]

Loving these videos so far. My game is really starting to shape up and your explanation of the logic is great. I've come across a bug though and am completely stumped. When changing map, everything draws as expected and the game loop must still be running as my hero's breathing animation still works, but the hero will not move when keys are pressed. I have logged isCutscenePlaying as i suspected this could be the issue and it does indeed log true, suggesting the cutscene hasn't resolved correctly, but even if I set isCutscenePlaying to false in the changeMap function before the resolve is invoked, the log of isCutscenePlaying changes to false, but the hero stil doesn't move. Any thoughts on where the bug may lie?

[@kevmorel210]

Bug fixed :) Thanks Drew and everyone on the Discord group for being so quick to offer help

[@marleylossa4682]

@@kevmorel210 i have the same problem do u still have the fix?

[@kevmorel210]

I think it might have been fixed in the next video...

[@kevmorel210]

I think isCutscenePlaying may be hardcoded to true somewhere 🤔

[@marleylossa4682]

@@kevmorel210 ye i changed my iscutscene playing to false in overworld and that seemed to work for me

[@ilug5197]

🍟

[@raivologins9299]

How can I add or remove wall after Cutscene??

[@a.j.outlaster1222]

Hey, Drew, Idk what happened, But, My characters completely forgot their behaviors, Any idea what went wrong? I'll hear anyone who will answer.

[@a.j.outlaster1222]

Problem fixed. (End of comment) Just kidding! I had run the doBehaviorEvent calls BEFORE I set isCutscenePlaying to false, So they shorted.

[@zimablue2001]

There is really bad recursion in your code: overworld -> overworldMap -> overwolrd. IDK maybe it's a good practise, but it eats my RAM. And when I'm trying to load my project on old PCs or some mobile phones it's going so long.