Phaser.d.ts

[Ailene Goldhirsh]

Iam setting up the typescript version in VS and noticed when I downloaded version 3.15.1 there was no typesript folder or file "As of Phaser 2 the TypeScript definitions are found in a folder called typescript in the root of the repository. You need to select the phaser.d.ts file from there. If you have an earlier version of Phaser the defs file can be found in the build folder."

The issue was with the Require.js library, but this template is using Rollup. In any case, Require.js is no longer supported. Phaser works with it only after modifying the phaser.d.ts file. But using Require.js is the only way I know of to put TypeScript examples into the Plunker sandbox.

Choose your development environment. You can always use plain old Notepad if you wish, but I would suggest using something more helpful. As for me, I prefer developing pet projects in Emacs, therefore I have installed tide and followed the instructions to set it up.

If we were developing on JavaScript, we would be perfectly fine to start coding without all these preparation steps. However, as we want to use TypeScript, we have to set up the infrastructure to make the future development as fast as possible. Thus we need to install node and npm.

As I write this tutorial, I use node 10.13.0 and npm 6.4.1. Please note that the versions in the frontend world update extremely fast, so you simply take the latest stable versions. I strongly recommend using nvm instead of installing node and npm manually; it will save you a lot of time and nerves.

We will use npm for building the project, so to start the project go to an empty folder and run npm init. npm will ask you several questions about your project properties and then create a package.json file. It will look something like this:

TypeScript is a statically typed language. Therefore, it requires type definitions for the compilation. At the time of writing this tutorial, the definitions for Phaser 3 were not yet available as the npm package, so you may need to download them from the official repository and put the file in the src subdirectory of your project.

We have almost finished the project set up. At this moment you should have created package.json, webpack.config.js, and tsconfig.json, and added src/phaser.d.ts. The last thing we need to do before starting to write code is to explain what exactly npm has to do with the project. We update the scripts section of the package.json as follows:

Let me briefly explain the main concepts of Phaser 3. The game is an instance of the Phaser.Game class (or its descendant). Each game contains one or more instances of Phaser.Scene descendants. Each scene contains several objects, either static or dynamic, and represents a logical part of the game. For example, our trivial game will have three scenes: the welcome screen, the game itself, and the score screen.

Our game now knows about the game scene. If the game config contains a list of scenes then the first one is started when the game is begun, and all others are created but not started until explicitly called.

Rapidly Evolving TypeScriptThis guide was written when TypeScript was on version 0.9.5 and using Visual Studio 2013. TypeScript is being rapidly updated, so if you find any problems with the current guide against the latest release please leave a comment and we'll update it.

Ensure you have both of these installed before carrying on, as it probably won't work with earlier builds of TypeScript. You will also need a local copy of the Phaser repository. See the Phaser Getting Started Guide for details on how to download this.

In Visual Studio create a new Project. Make sure you pick "HTML Application built with TypeScript" as the Template, which can be found under the TypeScript template category on the left. We've called our sample project "PhaserTypeScript".

The first thing we need to do is add the Phaser build files and TypeScript definitions file into the Project. To do this select "Add Existing Item" from the "Project" menu in Visual Studio (or press Shift + Alt + A). It will open a standard Windows File Explorer.

As of Phaser 2 the TypeScript definitions are found in a folder called typescript in the root of the repository. You need to select the phaser.d.ts file from there. If you have an earlier version of Phaser the defs file can be found in the build folder.

The files should all appear in the Solution Explorer window. Visual Studio has copied them from the Phaser repository over into the Project folder, so remember this if you ever update Phaser; it won't automatically update our Visual Studio projects too.

In order to complete this part of the tutorial you'll also need to download this image file and save it to your Project folder. So it should be saved in the same place as default.htm, app.ts, and the other files.

You'll notice it has connected to localhost on port 5407. Visual Studio selects a port at random, so if your page loads on a different port then don't worry. Hopefully if you've got the paths correct and copied the files over then you'll see a Phaser logo displayed in the middle of your game.

This has served as a basic introduction to using Phaser with TypeScript. The next article in the series is Advanced TypeScript Project Structures. This covers using TypeScript features to extend Phaser classes and our approach for a project structure.

Otherwise for getting started with Phaser in Visual Studio using TypeScript this tutorial is a great place to start. A few things have changed ( like the above mentioned Get TypeScript link process no longer working ) and a few of the generated names are different ( default.htm is now index.html ), but otherwise it will get you up and running in a few minutes. Basically you just download or clone Phaser from Git. Truth is though you only need to add a few files to your project all available in this folder. The files of importance are phaser.js and phaser.d.ts. The first file is Phaser itself ( the .min version is optimized for size for when you deploy, but use the full slower to load version for development ) and the .d.ts are the TypeScript definitions.

Most important lines here are the two tags, bringing in first the Phaser libraries then your generated js code. ( app.ts will automatically be converted to app.js by Visual Studio when you run if no errors occur ).

3a8082e126