Skip to content

3. Basic Set Up

Jump to bottom
Eric edited this page Feb 20, 2017 · 2 revisions

Create a new folder where ever you want and call it basicSetup. In this folder create the following folders.

assets
 - sprites
build
css
lib
scripts

From the phaser-2.6.1 folder you have downloaded copy the whole build and typescript folder into the lib folder. Rename the typescript folder to typings. Get the following image, rename it to phaser.png and put it into the assets/sprites folder. Now it should look like this:

assets
 - sprites
  - phaser.png
build
css
lib
 - build
   - (...)
 - typings
   - (...)
scripts

Now start Atom or any other editor you use. We will write some code, finally. In Atom click on File -> Add Project Folder... and choose the basicSetup folder. Click Open. You now have the whole folder hierarchy on the left side as a navigation.

Right-click on the folder scripts -> New File. Name the file basicSetup.ts, which will be the main file with the game logic. It is placed in the scripts folder.

Write the following code into the basicSetup.ts file:

/// <reference path="../lib/typings/phaser.d.ts"/>

class basicSetup {

  private phaserImage: Phaser.Sprite;
  private game: Phaser.Game;

    constructor(width: number, height: number) {
      this.game = new Phaser.Game(width, height, Phaser.AUTO, 'basicSetup', { preload: this.preload, create: this.create });
    }

    preload(): void {
      this.game.load.image('phaserImage', 'assets/sprites/phaser.png');
    }

    create(): void {
      this.phaserImage = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'phaserImage');
      this.phaserImage.anchor.setTo(0.5, 0.5);
    }


}

window.onload = () => {
  var game = new basicSetup(800, 600);
}

So what have we done here?

The first line is very important. /// <reference path="../lib/typings/phaser.d.ts"/> makes our TypeScript file aware of the Phaser definitions. Without this reference, TypeScript will throw many warnings because we use stuff he just can't know about.

After that is done, we create a class called basicSetup. It is the heart of the "Game". We defined two private members in this class, one called phaserImage which is of type Phaser.Sprite (another class in Phaser) and will hold a two-dimensional graphic obviously. The other member is called game and is of type Phaser.Game, which is the heart of our game. It provides access to important functions.

The constructor takes the width and height of the game screen and uses these informations to create the game class. window.onload on the bottom has defined the width and height, of course you can put more arguments there, how ever you want. It is fired when the entire page loads, including its content (scripts, images, css etc.).

In the preload() function we load our image, in create() we create the sprite out of this image and set the anchors in the center.

For more informations, particularly the parameters you can choose check the Phaser API (f.e. Phaser.Game).

The next file we need is a simple html file. Right-click on the root folder -> New File. Name the file index.html. It is placed in the root folder.

Write the following code into the index.html file:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Basic Set-Up</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <script src="lib/build/phaser.js"></script>
        <script src="build/basicSetup.js"></script>
    </head>
    <body>
      <center>
        <div class="container">
          <h1>Basic Set-Up</h1>
          <div id="basicSetup"></div>
        </div>
      </center>
    </body>
</html>

The most important code parts are <link rel="stylesheet" type="text/css" href="css/main.css"> where we link to the CSS file we will create next. Then with <script src="lib/build/phaser.js"></script> we include the Phaser library. With <script src="build/basicSetup.js"></script> we include our own game code. We have not yet created the basicSetup.js file. Our compiler will create this file for us when we execute the build command in Atom (more later).

Now we create the CSS File. Right-click on the css folder -> New File. Name the file main.css.

Write the following code into the main.css file:

body {
  font-size: 10px;
  color: white;
  background-color: #56849e;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 200;
  font-size: 25px;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 200;
  font-size: 10px;
}

div.container {
  padding-top: 10px;
}

div#basicSetup{
  border: 5px solid #FFFFFF;
  width: 800px;
}

I will not explain CSS in detail here. There are plenty good sites you will find more detailed informations regarding CSS.

So now we have the game logic itself in the basicSetup.ts file, we have our main.css file for the styling of our page and we link everything together in the index.html including the Phaser library. The most important part is missing now. We need to tell that our root directory is a TypeScript project, for which reason we need to create a tsconfig.json file in the root directory. This file specifies the root files and the compiler options required to compile the project. More informations about the tsconfig.json you find here.

Right-click on the root folder -> New File. Name the file tsconfig.json.

Write the following code into the tsconfig.json file:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "outFile": "build/basicSetup.js"
    }
}

So now this is cool. With "outFile": "build/basicSetup.js" the compiler will put all our code together (right now we only have one file, but in the future you will divide your code and it will matter) in one file called basicSetup.js. That is why we only need to link to that file in the index.html file beside the Phaser library.

Save the file and let the magic happen: Open up the basicSetup.ts file in Atom and use the following shortcut: cmd+shift+P -> type build and click on TypeScript: Build. Now our project is compiled and the compiler will create the basicSetup.js file. Build success.

Start up your http-server and upon up in your browser http://localhost:8080. You should see the following:

The final folder hierarchy

assets
 - sprites
  - phaser.png
build
 - basicSetup.js
css
 - main.css
lib
 - build
   - (...)
 - typings
   - (...)
scripts
 - basicSetup.ts
- index.html
- tsconfig.json

Congratulations, you have successfully finished this first tutorial.

Clone this wiki locally