How to Make a Game? JavaScript, Tools and More - Experts Zone Talks #10

In this 10th episode of EZ Talks we will discuss the process of game development in just one month during the internship. Want to build a game for your brand? Contact us via form on https://frontendhouse.com.

In the "How to Make a Game? JavaScript, Tools and More" episode you will find:

• 1:41 Game screen sharing
• 4:30 Tommy tells about the process of video game development during the internship
• 6:55 How is it possible to build a game in a month with interns? In 2 weeks you built an entire game engine?
• 9:17 What was the biggest challenge in terms of the code and features?
• 10:04 How did you build the collision mechanism?
• 10:54 As a client, what do I need to build a game?
• 12:30 Is it worth it to build a game in JavaScript?
• 14:45 What tools do you use for game development? 2D: Phaser, Pixi.js; 3D: PlayCanvas, Three.js; AR: 8th wall, A-frame.
• 17:59 How big a team should be to make a game?
• 19:27 What was the most pleasant part of the game development process?
• 20:50 What kind of projects we as a software house can handle?

Liked the episode? Don't forget to subscribe to the channel and leave comments!

Transcription

Chris

Hey, everyone. Today we shot Expert Zone. There is no Olga because she's on her holiday. So that’s me - Chris - and Tommy K. Hey, Tommy!

Tommy

Hi, guys. Hi, everyone.

Chris

Just to make sure it's not Frontend News, it's Experts Zone. Game programming is on the table. And we're going to talk about how to make a game. Because last year, during the internship at Liki and Frontend House, every year, we did a summer internship for a bunch of very talented developers. And last year, we did a game design and a game development for the Comic Museum here in Lodz here in Poland. They sent us a visualization of all the floors because they just started building this museum. They're going to finish it in one year or something.

Hop&TRAch game

Chris

So they sent us a 3D visualization of all the floors, and we moved them to the pixel art. One of our designers designed everything to 3D pixel art. Game art. And after that, we moved it to the game, Tommy K was our tech leader. He was leading 3 developers or two? Sorry, guys. Three developers were building the game. They finished it in one month. Can you imagine? Like a fully production game in one month? And today we're gonna show this game to you guys. We won a lot of awards, like 3 awards for building this game, and we're gonna talk about how to build it, how to make it.

And is it worth it to make it in JavaScript? Like, code games in JavaScript. So let's see. But first thing first, I will show you what it looks like. Let me share my screen. Okay, guys, as you see, it's a mobile game. It's available on Chrome, Safari, and also all the markets, Android and iOS. You can go download it from here and play yourself. But what's most important is to visit EC1, which is a Comics Museum. It is based on three main characters from very old Polish comics.

And they tell you what is in the museum, what you can see and play. Interesting, so let’s start. Of course, you see the introduction, and it describes what's in it. Let's go through all the screens, and it asks you if you want to see a tutorial. Obviously, we don't. So as you can see, you have your main character. He needs to collect points. He needs to jump through obstacles. I will show you just one floor of this museum. So everything you see in the background is like how it's going to look like, of course, in the real life. Like an online visit.

Okay, as you can see, we finished the first floor. There are a couple more floors of this. One of the characters tells you, what is this floor about. Because there are multiple, multiple floors. Every floor is assigned to a different topic. So all those characters are going through everything. And once you complete all the floors, you can go to like three kinds of levels. That's only about this course. And of course, we have leaderboards to see who is the best in completing the game. And that's it from the presentation.

As you see, it's not a very, very big one. However, it's very interesting, and it was a challenge to make it with all the internship developers we had the last year. That's why I have Tommy. So after this very long introduction, let's see the intro.

Okay, welcome back. Let's talk about the game or let's talk about how to build the game. And Tommy, the first question for you is…. tell us a bit more about the time you had with the internship, what was the process of the game development and what stages you guys had while you worked on the game.

Internship and video game development

Tommy

Hello, guys. Thank you for the great introduction, Chris, thank you for the first question. And yeah, I want to go straight to the middle. So my answer about the video game industry, I will try to keep it short but meaningful. Okay. But to make a long story short, the challenge was pretty huge, and we did not have much time to complete our task, which was creating the game in one month. Starting the process was not so hard because we made a simple boilerplate for the React application - web application. And we managed to start with some workshops and some presentations about the process of developing a game.

So we learned about how to use Gitflow, how to work with the repository, how to communicate across the team, what process we will be using, what methodology - we were working in Scrum. We need to spread the knowledge about how to work in scrum etc, and what kind of tools we'll be using. So the very first week was, like setting up everything in the right place, setting up an architecture, putting the correct knowledge for our interns, and pushing things in motion. The second week was quite challenging because this is the time where we start a really hard implementation and translating the design, which was created before.

On the previous internships for the UI/UX Department, we managed to take all these beautiful designs onto our app. And from the beginning, we don't work on the game engine itself. With the Phaser.js, we didn't manage to work on the Phaser game engine. We start working on the user interface in terms of the React. So starting from building a very simple welcome page and some sets of components that will be reusable across the game, like buttons or some icons or even other elements that are from the, you know, React world, let's say.
How is it possible to build a game in a month with interns?

Chris

You want to tell us that you spend one week on, like, introduction, second week on the React components and what - in two weeks you built this entire game engine? There was no Unreal Engine or other? That sounds crazy!

Tommy

I know that it sounds crazy, but this is a little bit for me, it's like building a Lego building. A building, a Lego building. You need to have all the smaller pieces at the place to start creating the whole structure. So we did take everything into one place. We create a reasonable layer of the components we have set up for all the tooling that was necessary for game development. We have the environment, we have a repository, we have all the knowledge that has been spread across the team. We had all in one, it's much more effective than online courses.

So it was the right time to connect all of these dots and start working on the game engine itself. All three interns were focused on working on different parts of mobile games. So someone was responsible for making a background in motion, like the whole scene was moving. So it creates the effect that our character is running on the platform. Someone was working on the collision algorithm and all necessary functionalities around it, and the third guy was working on all these characteristics, collecting points, losing life and etc, etc.

So there are different layers of this game engine that were completed by the different intern, and at the end of this two weeks process, we have a really nice looking bag free - almost bug free - version of the platform game, which you have presented a while ago, and that's how it looks from the development perspective.

Chris

Okay, Tomasz, thank you for this very long introduction. However, hopefully, it really makes sense for you guys. So just a quick sum up. So we had React, we had Phaser.js, we had styles components, CSS, and you have a bunch of very talented people. So from this point. I'm very curious. What was the big challenge, but not from team management, because obviously if it's project managers involved. However, what was the biggest range in terms of the code, in terms of the features you had to build in this game? And I ask you Tomasz for a very quick, very quick answer.

Collision mechanism

Tommy

I will try. But answering your question, the biggest challenge was not the user interface itself, because it was pretty simple. The biggest challenge was to create a game engine and to connect all the dots, all the functionalities to cooperate together well. So, yeah, I believe the collision mechanism was the hardest part.

Chris

When I was actually thinking about this question, the collision algorithm was on top of my head. Did you guys use any ready-to-go library or did you do it from scratch?

Tommy

Yeah. For the collision mechanism, obviously, we used Phaser.js, but to detect the collision, we use the mechanism that Phaser.js delivered to us. But in most of the most in parts, it was our own development, our own solution. That's because we just want to learn new stuff because that was an internship, not the work with professional game developer or developers. So education was an important part of this.
What do I need to build a game?

Chris

Yes. Absolutely. Absolutely. Okay. And let's say our client and I want to build the game for my brand, but I don't have any idea what to do, how to start. What do I need to start to actually build this game? So what do you recommend - as a client, what do I need to have to start talking with the team you leaded last year.

Tommy

Yeah. Very good question. My dear customers, if you want to build a game. Just reach us via the frontendhouse.com website and let's speak about it. But to give a more precise answer. Yeah. First of all, you need to think about what your brand is all about, what your business is all about, what kind of customers you have, why you want to create a game. You need to answer a few questions yourself and after you will know why you want to create a game, what kind of business you represent, what kind of customers you have, what they can expect from you.

Ok? This is the right time to actually use the contact form, which I've mentioned before, and cooperate with a software studio like ours, so we can make your idea become true and help you understand more details about your idea or game, your business. And of course, we can create this success together.

Chris

Sounds easy like that.

Tommy

Yeah. So it's easy like that. But, Chris, I have also some questions for you.

Chris

I’m all yours.

Is it worth it to build a game in JavaScript?

Tommy

Yeah. Thank you. You're like the supervisor for all this project. So we were making the decisions. You are the product owner, and I'm really curious. Like, do you think it's worth it to build a game with JavaScript? Why JavaScript?

Chris

Of course it's worth building in JavaScript. For web games, it really depends on what you guys need. Obviously, we won't be building AAA type of video games. Like we won’t do another Fifa or another Call of Duty using JavaScript, but for sure, we're gonna do very good advertisements games as we did for the Comics Museum. I showed you previously. Like, the Web is easy to reach, right? So you don't need a user to install anything to download anything. They just type the URL and go straight to your game.

And you can have a lot of your personal content in the game. Let's jump to the comic museum game and see yourself. There's a lot of logos, a lot of invitations for users to go there and see the museum in real life. It's really easy and as Tomasz showed you, it’s quick to build games on the website. We built it in one month, but the Call of Duty was built in years. Many, many years by hundreds of developers. So obviously it's worth it. Performance is good, accessibility is good, easy to spread around the world.

So, yeah, nothing to complain about, to be honest.

Tommy

Yeah, it's such a great answer. But just a small thing I want to notice is that at the same festival we showed our game for the first time. Also, another software studio presented their game, which was called Cyberpunk. And you know the difference between our game and Cyberpunk?

Chris

It worked!!!

Tommy

Oops, we shouldn't really tell you about this.

Best tools for game developers

Tommy

That's so true. That's so true. Guys, fun is over. Let's come back to the serious questions. And from your experience, what kind of tools have you used to build such a product like games or some similar projects?

Chris

Okay, so we can successfully go the path you guys had. So we have JavaScript, HTML CSS, obviously for all the web games. But on top of this, we can have multiple very cool libraries that help us to speed up the development process significantly. So we have the Phaser, the tool we use for the game we are talking about. But you have Pixi.js. It's worth mentioning a very good JavaScript plugin - in one of the episodes I showed you how to use it, how to make very basic stuff with Pixi.js.

It helps us to move the functionality into the canvas and speed up the development process. Those two I recommend for 2D experiments, but we also have 3D. So let's say we can use PlayCanvas. We can use Three.js for 3D development, but maybe you want to have augmented reality. So you can use the 8th Wall, which is an amazing tool, however a very expensive one. For the 360 video kind of experiment, you can go with A-Frame. So as I mentioned, there are a lot of tools. I will probably show links in the description.

But for our lovely developers, I really recommend you to check this one. It's very fun. I really enjoy building the kind of experiences that kind of games. Yeah.

If you don't have that kind of project in your company, I just recommend you to go to those websites, check the documentation, and try yourself this process to create the game. And why did we decide to do a game for the internship? It’s because you have a lot of pure JavaScript and pure technology issues you need to solve and it teaches you a lot. You are a much better developer once you build that kind of game because you need to care about performance, assets, loading, collision detection algorithms, a lot of very tricky technical stuff that makes you a much better developer.

So yeah, in your free time, just go open the documentation. Try to create a game. Super cool, super fun, and it's super in general.

Tommy

Cool. Chris, and all this stuff you have mentioned, this is something our developers can do. Really? We are doing such amazing stuff?

Chris

Of course we do.

How big a team should be to make a game?

Tommy

Yeah. Fronted house is a really great place not only to build web apps, but games and other marketing promotional materials. But you know, technology is not everything because technology is used by people. So I'm wondering how big our teams are to create such games, such products, interactive products.

Chris

Good question Thomas. I talked about the fact that the team is not as big as the Call of Duty kind of games. It's not hundreds of developers. And for this one, we had three developers, we had a technical leader and we had a project manager and designers. So the team was six, seven people max, not that big one. Not that expensive one, but a really great one. I would say that to build your game you don't need more than ten people depending on the scope, depending on the deadline you have. So how quickly you want to go live and how quickly you want your user to engage with you and your company.

Tommy

I was pretty surprised with how a small team can build such a complicated product. Even if it's a small game, it requires a lot of effort to make it live, and you need to find a really great specialist to handle such a project.
The most pleasant part of the game development process

Chris

Yeah. Okay, Tomasz. I was also wondering because obviously you guys had a very good time on this. So what was, like, the biggest joy to lead that kind of team and make such a game?

Tommy

Yeah. Besides the game itself, it was really interesting and reminds me of my childhood because it was based on one of my favorite comics from my childhood.

Chris

Is it?

Tommy

Yes. Nice. I was reading it a lot, but the biggest joy was looking at the team, and, you know, it was internships. Our junior game developers (not just game) met on the very first day of the internships. They didn't know each other. So the first time they met was in our office, and after a few weeks of cooperating together, I saw them, like a really great cooperating team of developers, that it's really valuable. And it was the key to success to finish our game. So the biggest joy for me was watching our interns how they became not solo developers, but the cooperating team and achieving success together is a pure pleasure.

Chris

Sounds good!

What do developers from Frontend House can do for you?

Tommy

That sounds good, but, Chris, at the end of our interesting talk, I would like to ask you if you could tell me, please, what kind of games and projects we as a software house, as a Frontend House studio, can handle?

Chris

I have very quick answers to this. I think that we can build whatever you guys need.

Tommy

Oh, really?

Chris

Really! I mean, obviously, we are not a game company, so we won't be building another Witcher, and we won't be building another Grand Theft Auto. But if you need any kind of advertisement game, like mini games, mobile games, we are here. We are curious about your ideas, and as you see, we love to build those. So let us know. And what's most important: see you next week. Right, Tomasz?

Tommy

Next week? Ok.

Chris

Next week is gonna be Frontend News for sure with a bunch of good news. So to be alerted, check our YouTube and all the socials we have. Hopefully, we'll meet there, will meet in the comment section and on our website, frontendhouse.com. See you guys there. And thank you, Tomasz, very good interview. Hopefully, you guys liked it. Let us know and see you there.

Tommy

Thank you, Chris.