In this post I am going to walk you through how I create a simple typescript Phaser project that I use as a boilerplate for most of my Phaser 3 projects. If not, cd into it. We need to set up the typescript configuration file first.
To do so type in the following in the terminal window. If successful it should have created a tsconfig. It should look something like this. We are going to remove most of them, change a few lines, and add a new parameter to it. Here is what the config. To keep things simple we are just going to copy the Phaser files we need into our project folder. Add the following files to your project:. The phaser.
At the time of writing this post, the phaser.
In the explorer window create a new file and name it init. Let now test it and see if it compiles. The terminal window should still be open. Type in tsc to compile. Watching for file changes.
You should now see the Example. You can simply do it using Visual Studio Code and an extension. Click the link to install it or click the extension icon in the command palette and search for Live Server. Once installed restart VSC. Right click on your index. If successful you should see a black canvas when the html loads in the browser.
You can also open up the developer tools and see if the Phaser banner appeared in the output window. Setting Up TypeScript We need to set up the typescript configuration file first. Use to control the output directory structure with --outDir.
Get Instant Access. The minimum development environment you need consists in a code editor, a web browser and a local web server. The first two are trivial, but the latter requires a bit more explanation. Why is it that we need a local web server? When you load a normal website, it is common that the content of the page is loaded before the images, right? Well, imagine if that happened in a game.
It would indeed look terrible if the game loads but the player image is not ready. This means, the game will need to access files after the page has been loaded. This brings us to the need of a web server. If they did, the web would be a very dangerous place!
If you double click on the index. A web server is a program that handles HTTP requests and responses.
Luckily for us, there are multiple free and easy to setup local web server alternatives! Once you install this application, you can launch if from Chrome directly, and load your project folder. You can find the Phaser library here.The goal of this tutorial is to help you create a Phaser template that you will be able to reuse and extend in any future project you work on.
The benefit of having a template is that it is a good starting point for your game, and it can save you a lot of time when you are setting up your game. You can download all of the files associated with the source code for part one here. Don't miss out!
For this tutorial, it is recommended that you are familiar with basic Phaser concepts such as scenes, setting up the config for your game, running your game locally, etc.
Getting Started in Phaser 3 (ES6) – Create a Boomdots game part 2
If you are not familiar with these concepts, you will be able to follow along with the tutorial, but we will not be covering these topics in depth. Also, for this tutorial, it is recommended that you are familiar with Git and NodeJS, but it is a not a requirement for this tutorial. If you are not familiar with these concepts, you will still be able to follow along. You can obtain a copy of this template in one of two ways: 1 You can use Git to clone the repository locally 2 Or you can download a zipped version of the repository from GitHub.
To clone the repository, copy the URL that is shown, and in your terminal or command prompt, run the following command:. After you get a copy of the template files, you will need to install the required Node dependencies to get the template to run. This will take a few seconds to run, and once it is done, you should see a message that a number of packages was added to your project. The first thing we are going to do is take all of the logic from the index. We are going to take the game logic and the Phaser config, and put those components in their own files.
Most of this code should look similar to the code that was in the original index. Now, to use our new config object and GameScene class we will need to import them in our index. Open index. Now, if you go back to your browser, you should see the Phaser logo and it should not be moving since we removed the logic for tween.
Next, we will create the rest of the scenes that will be used in our template. For each scene we will create a new class that does nothing for the time being. In your project folder create the following files: BootScene.
Finally, we need to import these new scenes into index. With all of our scenes in place, we will start building out the rest of our template. The first scene we will focus on is the Boot Scene. This scene will be the first scene that is loaded by our game, and we will use it load any assets that will be displayed in the Preloader Scene.
For our template, the only asset we need for the Preloader Scene is a logo image. To follow along with the tutorial, you can use the following image:.
If you have your own logo image, you are welcome to use it. Once you have your image, save it in the assets folder. In BootScene. In the code above, we loaded in our logo image and once it is loaded we transition to the Preloader scene. With the Boot Scene in place, we can now focus on the Preloader Scene. In this scene, we are going to display the logo we loaded in the Boot Scene, add a progress bar, and finally load the rest of the assets we will be using in our template.
For the progress bar, we are going to reuse some of the code from the Creating a Preloading Screen in Phaser 3 tutorial.Software developer and consultant. Passionate about delivering quality software that meets client needs. Hobbyist game developer and Unity aficionado.
Taylor guitar enthusiast. Manchester United fan.
Create a Phaser 3 Typescript Game Project using Visual Studio Code Part 1
It worked out great. I wanted to write this tutorial to help others get their Phaser 3 and TypeScript projects up and running as quickly as possible. Phaser is compatible with any editor or IDE. Visual Studio Code tends to be one of the better options because of its built-in TypeScript support, but feel free to pick your preferred environment. Once you have a new folder, type yarn init to go through the process of creating a package. This will contain all of the information about your project and its dependencies.
You can answer the init questions however you want — you can edit all of your answers later. The first command will install all of the modules we need to run and test our code locally. It will also bundle them into files we can eventually host online for people to play. All of those modules are added to our development dependencies. The Phaser repository, as of version 3.
We added a few dependencies to help do this already, like the ts-loader plugin and the copy-webpack-plugin. However, webpack also requires a webpack. Rather than go through each line of what we need, copy the contents of this file from the starter kit I wrote into a file called webpack.
As a brief overview, the first part of the file from the entry to the output property is just telling webpack where our project starts, where the compiled version should be output, and how to resolve TypeScript files. The latter part, under pluginsdefines some of the webpack additions it needs in order to work with Phaser. Similar to webpack, TypeScript also needs a tsconfig. Create a new file in your root directory with that file name, and type this:.
You can even keep this running while you work—it will automatically rebuild whenever it detects a code change. Now that our project infrastructure is all good to go, we can start actually coding. At a high level, every game in Phaser has a single Game object that contains information about the game and how it should run.
So, for the primary Game scene, I extend Phaser. But let's say I have a player, which will involve 's of lines of code that I would like to keep in a separate file for code cleanliness. How do I organize that? So, I just create a player class, that doesn't extend anything?
Or should I extend it by something like Phaser. To answer your specific question "So, I just create a player class, that doesn't extend anything? I'm working in TypeScript, so my structure and code is a bit different, but I have a src directory structure like the following :.
Looking at the game I'm working on now, I have one that extends Phaser. Groupthree that extend off of that custom object, and then a couple that don't extend off of anything. In the past I've extended off of Phaser.
Sprite as well. The real question of whether to extend off of Phaser. Sprite or not is based upon what you want the object to do for you. In my case I wanted to create a basic Character class that my Hero and Monster instances could extend, and that would create sprites within the game when I created them.
Install our development dependencies by typing this to the terminal. It takes some time to install these dependencies. Next, create a webpack. Copy and paste this config into the file. The entry section will transpile all js files inside src folder to a single app js file. Vendor-specific files such as phaser are separated. The module section is where we set rules what to do with the files.
The plugin section has different plugins for cleaning the previous build folder, HTML injection, minification, copying of all assets etc. Create two folders — assets and src inside our project folder.
Create a Basic Multiplayer Game in Phaser 3 with Socket.io – Part 1
Open package. The file looks like this. Go to our src and create index. Preloader scene is not created yet so let us create it. Then copy paste the following code. This is the index. The plugin will auto inject the scripts. This will start webpack-dev-server as specified in package. The copy-webpack-plugin will copy our assets into the build folder.
Let us add our game background. The background is an infinite scrolling texture, phaser has a special class for this called TileSprite. I have a white png which is used as a static bg and a striped arrow bg which is overlaid over the static one.
So if I need a color change later, I could simply change the tint of the static bg. Simply follow the tutorials with your own custom artwork.In Part 1 of this tutorial, we created our Node. In this tutorial, we are going to add the client side logic for displaying other players in our game, add the logic for handling player input, and add logic for the collectibles players will pick up. You can download all of the files associated with the source code for Part 3 here. Don't miss out!
In our last tutorial, we wrapped up by adding the logic for displaying the player in our game and now we will work on displaying other players in our game.
In part two of this tutorial, we set up Socket. Before we can test our new logic for adding other players to our game, we need to load an asset for these players.
You can find that asset here. Once the image is there, we can load this image into our game. If you open another tab or browser and navigate to your game, you should see multiple sprites appear in the game window, and if you close one of those games you should see that sprite disappear from the other games.Guest Tutorial #8: Phaser Game Development with Catt Small
With the logic for displaying all of the players in the game in place, we will move on to handling player input and allow our player to move. This will populate the cursors object with our four main Key objects up, down, left, and rightwhich will bind to those arrows on the keyboard. Since we will be using Socket. However, this would result in a large number of calls to the server that are not needed.
The reason for this is because we only need to be aware of when a player first presses a key down and when they let go of the key. To keep track of this, we will use the three variables we created above to store the state of which keys are being pressed, and when the state changes we will then send a message to the server.
In the io. If you save, restart your server, and refresh your game, you should now be able to move your ship around the screen. For this tutorial, we are going to add a star collectible to the game for the players to collect, and when they do, their team will get ten points.
To do this, we will need to create a few new game objects and a few new Socket. IO events. The asset for this collectible can be downloaded here. Next, in the io. With the code changes for the server in place, we will switch to the client side. Next, we will need a way of letting the players know what the current score is. When we created these two objects, we passed the location of where the object would be placed, the default text of the object, and the font size and fill that would be used for the text object.
IO events we created. If you save your code changes, restart the server, and refresh your browser you should see the new star collectible and the team scores. If you move your ship over the star collectible, you should see the star move to a new location and you should see the team score update.
With the star collectible added to the game, that brings this tutorial to a close. In summary, it showed you how to create a simple multiplayer game with an authoritative server in Phaser — mainly using Socket. IO and Node. I hope you enjoyed all of these tutorials and found them helpful. If you have any questions, or suggestions on what we should cover next, please let us know in the comments below. Send me a download link for the files of.
Offer ends in. First, we created three new variables: leftrightand up. These variables will be used to store the previous state of the pressed keys.