How to Create a Title Scene with Phaser 3

ACCESS the FULL COURSE here: https://academy.zenva.com/product/html5-game-phaser-mini-degree/?zva_src=youtube-html5md

TRANSCRIPT

Hello, everyone. In this lesson, we are going to create the first scene in our game, a title scene. As I mentioned in the previous lesson, scenes are the screens in our game. For example, in this course, we are going to have a battle screen, a memory screen, title screen, and world maps. Each one of these will be represented by a scene. In addition, the title screen is the first one the player will see in the game, and it is also the most simple one to implement. That's why we'll start by implementing the title screen. So here I am. With the code from the previous lesson, and the first thing I'm going to do is creating a new directory called "scenes." So here, inside the source, we're going to create a new folder called "scenes," and all scenes code that we use in our game will be in the scenes directory. This way, we can organize our code. Then, inside this folder, I'm going to create a TitleScene.js file. In order to create a scene, we need to create a class that extends Phaser.Scene. So here, create a new class called "TitleScene," which extends Phaser.Scene This is the Phaser.Scene class we need to extend, and it is the same we have created here. So, let's start by creating the constructor. In the constructor, we need to call the constructor from Phaser.Scene we call it Super, and it expects this parameter, the key, with the name of the scene. So we are going to extend the key like TitleScene to tell Phaser that this scene, here, is called TitleScene And then, after creating the class, we need to export it so that it can be created in the main.js file. So export the full TitleScene.

Now we are going to add two methods in our title scene: preload and create. The preload method is called by Phaser when the scene has just started, and before any sprite has been created. So it is the correct place to load the assets for our game. The only asset we are going to use here is the background image, so let's add it. Let's create a preload method, and inside of it, let's call this.load.image(). this.load will access the loader object from Phaser, and the image method will load an image from our assets folder. So, we need to send, add those two parameters here. The first one is the key we are going to use to create a sprite of this image later. In our case it will be background_image and the second one is the path of this asset. Here, I have added in the assets folder an image folder with all the images you are going to use in this course. You can download all these images from the course source code and then you can copy and paste the image folder to the assets. And here inside images and battle you will see a background.png i ... https://www.youtube.com/watch?v=KZpbt2jccjE