How to use Phaser.js library? Newest releases - Frontend News #8

Watch the Frontend News #8 podcast! Hosts Chris and Tommy K are - as always - ready to share tech and front end innovations.

Today we will discuss:

• 00:48 - Contents
• 01:24 - Newest Deno 1.9 release
• 04:48 - What’s new in D3 library
• 05:53 - React Markdown 6
• 07:20 - Node v16.0.0
• 08:32 - Curated Project of the week
• 10:42 - Live coding - How to utilize Phaser.js library?

Transcription

Chris

Hey, guys, welcome to yet another front end news podcast. Today, it's the 8th episode, and again, I'm here with Tommy K. Hi Tommy!

Tommy

Hi, Chris. How are you? I'm fine. How are you?

Chris

Perfect! Because it's the next episode, but first, watch the intro.

So we have very bad news today because this week was quite lazy in terms of the development and in terms of the technology, but we still found some interesting news for you guys. We have four of them.

And the first one is about the newest Demo release, which is 1.9.

Chris

Second one is going to be about the D3 library update. And the third one is a React Markdown update to version 6.

The last one is again about Node v16.0.0 update.

Tommy

I missed Node updates.

Chris

Really? Yeah, me too. I mean, for the first five episodes it was always about Node. So we are back to the roots, back to foundations. Go ahead.

Deno 1.9 release

Tommy

OK, so the first one, let's speak about the Deno release. So a few days ago, we received a new release of the popular JavaScript and TypeScript runtime, which is Deno. We spoke about what Deno is like a few chapters ago, I believe. So you probably know and you are familiar with that tool. So today, I just want to mention a few things that came in 1.9 version, some improvements for performance, some security updates and obviously bug fixes and new features.

So the first one is like the HTTP 2 is being default set up for the web server that is handled by Deno. We have faster calls into the Rus with V8 which is something we can call the engine for transpiring the Rust instructions and it's about 98% performance improvement and it's almost 100 percent. Two times faster. Two times faster. I still have to do a benchmark for the libraries, for the animations. I have a surprise but I will mention it later. Let me finish the Deno update first, man! You just want these benchmarks. You want to see the performance tests everywhere all the time. Performance, show me performance. This is what I hear every week, every day, every hour.

The next thing is url support and improvements to fetch API. We have some updates around the filesystem and many, many, many more. I really recommend checking this into the documentation because you will have the best source of what's going on inside. And in my private opinion, you really have to check the Rust itself because it's fabulous. I started to learn Rust...

Chris

Yes, really?

Tommy

Yes, why are you always surprised?

Chris

I'm very surprised because you are not a backend developer at all.

Tommy

Because Rust is not only for backend developers. To be honest, Rust can be also used to create the frontend. And I don't know if you remember the Warsaw IT Days, there was a presentation about Rust usage and it was spoken in a Web development context. And it seems that Rust isn't any more about the backend. And it's not only about the frontend, it's like a combination of those two words.

So, OK, I would say it's a new approach, like no diversion in like the backend and frontend. It has been combined together. I really recommend checking it out because it's very interesting. And I think that in a few years, a few years, it will be a huge, huge boom for Rust developers. Yes. Two years three. I'm a witch - the male version of a witch.

D3 library

Tommy

Chris, quick question. Do you know what the D3 library is? Can you tell our audience what the D3 library is?

Chris

D3 library is about chance and big data.

Tommy

Yes, you are right. It's all about the data presentation on the beautiful charts and so many people present the big data trades. We received a small update for the free library like we got a new timer, which is sent UTC time interval. We just do the same but in local time, so that's the only difference, and that's it, it's a really small update. But I just want to refresh your memory in terms of D3 library.

Chis

Thank you. Nice presentation. So maybe you have another nice presentation about React Markdown 6?

React Markdown 6

Tommy

In the sixth version of the React Markdown there are some not breaking changes, but new features, improvements for the performance, bug fixes. So yeah, it's a popular library to parse the markdown and to present the markdowns in the React apps. So I believe you used this library or just head about it because. Yeah, it's very popular. So what's inside? Well, they removed a HDMI parser, for example.

This is from the back fix in Syria, or they did add a new plugin handler, which is called - I don't remember - not just kidding, which is called rehype so you can install plugins from the rehype and they replace these buggy HTML parser with the parser from the rehype environment. So there is obviously much more inside open release notes. Guys, check it out. It's yeah, it's worth knowing because maybe you are using the React Markdown in your project and you actually want to update it to the newest version.

Chris

That’s it?

Tommy

That's it.

Node v16.00

Chris

And finally, finally, the thing I was waiting for the entire episode. It's about sixteen point zero update.

Tommy

This is great news for both of us. And I hope that it's also great news for you. We received the newest release, which is the 16 version. There are no breaking changes. There are some bunch of updates from the filesystem library module process. So, yeah, a bunch of updates for the different layers, but nothing that is worth to mention in terms of, hey, something great has been out there or something great has been removed.

It's more like remove the deprecated functionality and do some cleanup. But if you want to know in detail what's going on. As always, I direct you to the release notes and all the links for the libraries we present today. You can find where? In the description. I want to see you point with your finger. That is exactly great. Thank you. And that's it from the news.

Chris

That was a short list. But now we have a prepared very, very long and engaging Tips and Tricks session.

Tommy

And also the website of the week presentation.

Curated project of the week - The Ocean Agency

Chris

Hola chicos! Let me present to you a stylish web performance landing page of Ocean Agency. With Creative Ideas they address the most urgent ocean issues but in an unexpected way. From the top, I’m super impressed by user experience. They explain in a few words what their goal is and give us access to navigation in the top right corner. We can easily jump to desired section or scroll through the experience.

They mostly play with typography. They play with fresh photos captured underwater. They connected it all with a large dose of interactions and it simply looks great like here, background photo of coral reef covered by a mask of shapes you can play with.

You can stay there, play a little bit or go further - to the major project section. Every case study has a similar composition and image effects. By the way, do you remember my tips and tricks section about Pixi.js library? And here is this kind of effect. It fits here well, where it moves like small water waves. Hey, such a shame I can't return to play this section. Let me go back quickly. Scrolling, scrolling, scrolling, and my favorite section is hidden quite deeply. Ocean Image Bank - beautiful photos collection of underwater animals and plants.

You can download all of them. It's completely free. In the last section, we can see all brands and partners they work with, dividing parties, brands, foundations, scientific institutions and so on. Guys hope you like it. We have just finished scrolling. You can donate or you can simply go to the subscription list in the footer. See you next time. Ciao!

Tips and Tricks

Tommy

Hello! It's again me - Tommy K and this is another round of tips and tricks. I know that I promised the benchmark and the comparison between the Phaser, Pixi.js and Fabric. OK, guys, I don't have a benchmark for you. Not yet, but I have a plan.

What I want to show you today is how we can utilize the Phaser.js Library. So, you know, previous chapters Chris shared with us the Pixi.js library usage. So today, let's focus on the Phaser.js and what you can see on the screen. This is our target for today's implementation. This is what we want to achieve as we can see the tennis balls hitting each other and we have some limitations over our scene.

So we have some boundaries, OK? And our ball is getting much faster and faster during this time. Cool. So this is what we want to achieve and obviously we can manipulate the number of the balls. So let's check what will happen on the fifty. OK, we have the full screen in here and it looks crazy, but you're probably wondering what's under the hood and how to implement such, you know, simple animation that can be utilized on our page. I don't know. Obviously, it needs to be tuned up, but yeah, let's deal with it and let's build something similar.

Cool. So let's come to the game example and let's check what our game function actually does. Let's put one quantity. So will we receive the single tennis ball being displayed on the screen ? Not yet. This is something we have to implement. Cool. So at the beginning we need to import the Phaser library. Oops, I forgot about the error.

So we need to import the Phaser library. We will be using it and we need to create the new instance of our game. And put some conflicts aside, like the type of the game that we want to face or deal with instead of us, we need to display the size of our scene. And I want to have something like that. Oh, we do not put units in here. We can define the physics configuration.

What is really nice in this library is that under the hood, we've got a lot of implementation and building functionalities that take the responsibility from us to deal with, you know, advanced physics, all the algorithms. And it just makes our work much easier.

We can utilize this library to build really complex games. And I believe that my little tutorial, my little preview will encourage you to take a look on your own and play with this library. OK, so stop talking. Start coding. Sorry, guys. The next thing is to define the callbacks for the different, let's say, Life-cycle phase. We want to do something on the preload face and we want to do something OK on the creative face. Cool.

Now we can see the default scene with a different background, which is good because it means that the game has been initialized. But as you can see, we do not allow anything either. We did not create nothing. Cool. So what's all about with the preload face? This is the place where we load all of our assets that we will be using in our game. And what we want to have is to set up the base url from which we will be fetching our assets. And in our case it will be the source directory. And we want to load an image which is in here. I will show you.

OK, this is our ball, it is huge. I know, but it won't be so huge on our canvas. OK, let's back up here and name this simple ball and it's under the image bowl. Great. So we have an error in here. Oh gosh, I don't like it. And this is because of the anonymous function. So let's put it in here. Sorry guys. I want to be too modern or I don't know too ignorant for what has happened already. Sorry. OK, preload, and let's leave it as ‘create’.

So if you use the anonymous function, the scope is not being blinded. So you are not able to use the disk. You are inside the function.

OK, so we did load our assets, our bill, but you know how to deal with the functionality we want to have. So we have defined quantity and we want to utilize it to create a certain amount of the balls.

OK, so at first we want to create something we can call balls group, balls manager. Let's leave it as a boys group because there is something we need to do special with that and we will be extending the Phaser.js group class.

So, hm, our balls will be obviously... OK. I did not create the class. I know. I know. So let's create the class - class balls. And as I said, we want to extend the Phaser base group class and we know that we will be animating those objects. OK, so I'm using the physics and arcade which reflects our config. OK, I'm using Physics Arcade’s namespace to take the group implementation. I mean group class, OK, and extend it by our balls and we have a constructor.

The first parameter is our scene and the next one will be quantity.

So as we are extending the group class, we need to use the super expression in our constructor and set the proper arguments. So we need to set up the world which will come from our physics. It's already created. We need to pass the whole scene. And I believe that's it for now.

Yeah, we want to manage bowls, but we do not have such class. So let's create the bowl class and it will be extending the Phaser Physics Arcade Image Class. We need to do similar stuff to define the constructor where we are creating the default. Yeah, obviously we can use the functionality that is in Phaser that makes it faster because there is a method to create a number of objects inside the group and actually bind it to the scene and trigger all of this. Yeah that's true. But I want to show you the advanced usage of Phaser.js and how you can actually extend the existing class and build your own custom structure. So this example is a little bit advanced. I would say it's not a basic one, but still the example is really simple.

So I hope it's not too complex for the single video. If you want to know about, you know, more details, what's going on in the particular class, just take a look in the documentation where you can find all of the descriptions. OK, so, yeah, let's move forward again. I'm talking too much and let's pass the parameters to the super expression in our constructor. And as the last argument, we need to pass the texture name and its name is Ball as we import in the preload phase.

OK, cool. So yeah, that's it. I'm not at all, as we can see, cannot read property physics of undefined. OK, so we have some problems and that's because we didn't pass the arguments to our balls instanced construction.

So let's pass the scene which is this because it gets this cold from the Phaser came and the quantity which will be passed from the upper scope... and nothing has happened. Unfortunately, I'm really sad and I don't know how to deal with it. Now, just kidding! Next thing we need to do is to use the creator inside the group. This is the one of the many ways to add elements to the group and we are going to use the method that creates the multiple instances of the given class. And frame quantity is responsible for the quantity already, so that's great, the name of our texture. This should be the name we will use inside the unique property and it will be the ball. I want to see all the elements be active right from the beginning and visible.

So this is something we call initializing the object, the group, I mean, sorry, I mean the group and it still won't work as we expected. As you can see, there is a single ball that just drops down and never comes back to the screen. And that's because we just initialized the object without setting the size, setting all of the parameters for the physics of the object. OK, so how we can extend the solution to, you know, to achieve what we want, let's hide our objects from the beginning. So, yeah, they will be loaded and initialized, but in our group. So the ball will be already there, but they won't be, they won't be displayed. Cool.

OK, so we have balls and this is the variable that contains all of our balls inside our group. So we want to iterate over it single ball and let's you know, we need the method that will give us the possibility to set all of the parameters like velocity, display size and any kind of options we want to set up for the particular ball.

So let's call it maybe 'create'. OK, are you fine with it? Hopefully, yes. And we need to define such methods inside the ball. So let's do this, create method. Hello. So what we need to override I mean, to set up is obviously the size of our ball that the initial position for the, uh, for our ball. OK, cool. And let's say we need velocity for the X and Y coordinates and I believe that's it.

OK, so first of all, we need to set the initial position and this is the reset property because we have some the following set up in the create multiple face, OK, and now we need to override it and we will use the reset function to deal with it.

I mean, meth upset the balance volleyer and yeah, this is something that is responsible for, you know, how the elements collide with each other and with, you know, in other objects. And we want to put in X and Y coordinates value 1.05. So the velocity will increase during the time. And what we want to define is that our ball will collide with other objects and we need to display the size of our ball because by default it's too big and we want to have the the same width and height.

So that's why we use the single parameter. OK, then another thing we need to do is to set up the velocity. Oh, oh wait a second. Something has got wrong in here. OK, now it's cool. And I want to set up the max velocity and that's because I don't want to. Our tennis balls move too fast. So let's put 700 for the beginning.

And what we need to do is to pass those parameters inside our create function. So say we have 50 as the size of the ball position X. Why? OK, so these values need to be a random one, let's create a helper to generate the random values for us and get random.

Oh. So that's between all 0.1 so multiply hundred and let's say plus 50.
So we have some random value in here or maybe this could be a function and we can define the multiplier here.

OK, let's do it smart. I mean, you know, to be able to define the custom value, OK, because we need some bigger value for the positioning. Um. OK, I'm not used to this editor, but, yeah, there are some tweaks that I need to learn how to move over the, you know, the ID100. OK, we have some random values, let's save all of our work and check out if it works. No, unfortunately. Why. Let's debug this.

OK, guys, I forgot to pass the class type, which will customize what class we want to use in order to create our, you know, group objects. And this will be our ball class. And unfortunately, nothing happened here. Um, let's debug the whole situation. What's going on? Uh, what I, what I forgot to do and I see this now and let me check.

I did not see the collider which is the engine to take care of the collision between the objects we can pass, you know, the different stuff inside and we will pass our group that I'm not sure about. Oh, guys, I know another thing we set in here is that to hide the balls from being displayed on the initial, you know, initial load. So we need to set active and visible attributes in the create method. Oh yeah, we have the single ball bouncing around. Let's uh, let's check if we will achieve two balls. Creating the one at the bottom looks really sad. Let's refresh it. OK, um I believe the collision will occur here uh in a few seconds or maybe minutes.

I'm not sure. Let's put some bigger number of elements.

It works. It seems that it works great. How it will behave on 20 elements. Oh, guys, a lot of tennis balls. What happens if we increase the size?
This should also be a configurator from, you know, uh, from outer scope. But yeah. Let's check it out. Oh, not refreshed. OK, the bigger balls on the screen. OK, great. Yeah, as we can see, it works pretty well. Um, so this is the example I wanted to share with you. There is a really small amount of code that you need to write to. First of all, overwrite the, um, the currently defined Phaser class for the group and for the image.

And the second thing you learned is how to compose all of this, how to use it. And I believe it's really simple. Um, so, yeah, if you want to check it on your own, just open the Phaser documentation and Phaser examples. You can learn more from, uh, from it. And thank you for your attention. See you in the next chapter.

Chris

Bye, guys. This is from today's episode. I hope you like it. If you like it, subscribe to our channel. Yeah. And check our Spotify, check our Twitter, Facebook and other social media.