Jump to content

Phaser Typescript example


FakeWizard
 Share

Recommended Posts

This is a quick guide for those who have not been able to implement typescript in their project without Visual Studio (which is being used in every tutorial example, "sigh" ).

0. step - project structure:

  • project/
    • assets/
    • build/
    • css/
    • src/
      • game.main.ts
    • lib/
      • /phaser/phaser.min.js
    • typings/
  • package.json
  • tsconfig.json
  • rollup.config.js

 

1. step -  Installation of prerequisites

  • npm install typescript -g 
  • npm install typings -g
  • npm install rollup -g
  • npm install phaser --save

2. step - installing typings 

  • copy all the files from ...\your_project\node_modules\phaser\typescript\ to ...\your_project'libs\phaser\ 
  • then from your project directory type this command typings install file:lib/phaser/typings.json -GD
  • the above command will instlal all the required phaser typings into your local typings/ directory 
  • now you can feel free to remove the entire node_modules/ directory

3. step - typescript configuration

tsconfig.json

{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES5",
    "sourceMap": true,
    "noImplicitAny": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "build/ts_build"
  },

  "files": [
    "./typings/index.d.ts",
    "./src/game.main.ts"
  ],

  "exclude": [
    "lib",
    "node_modules",
    "typings"
  ]
}

 

4. step - build your project

At this step, we should have all the pre-requisites in place, so we can now finally transpile all our .ts files into .js files.

  • while in your project dir. , type tsc and hit enter
  • if the tsc found no errors while transpiling, all your files should be in the .../your_project/build/ts_build directory
    • otherwise you may need to fix all the errors that the tsc complained about while the build process 
  • the build is done but you're still not able to run your project, that's because we've defined that we're gonna use ES5 modules in our project.
    Now since the modules are still not implemented in any browser , we're gonna need either to use polyfill to make the import export features to work ...
    or we can use a module bundler like webpack, browserify ...etc ...  
  • In this case we will use Rollup ( which is IMO really easy to configure and also offers tree-shaking feature , which is also a big +.)
    • rollup.config.js
      import rollup      	from 'rollup';
      import nodeResolve  from 'rollup-plugin-node-resolve';
      
      export default {
        entry: 'build/ts_build/game.main.js',
        dest: 'build/dist/build.js', // output a single application bundle
        sourceMap: true,
        sourceMapFile: 'build/dist/build.js.map',
        format: 'iife',
        plugins: [
          nodeResolve({ jsnext: true, module: true })
        ]
      }
  • now when you type rollup -c rollup.config.js , it should bundle all the .js files located in the build/ts-Build/
  • the output of the above process is stored in .../your_project/build/dist/build.js file

5. step - Final touches  

  • once you're done with transpiling and bundling , it's time to do some amending in your index html file
  • make sure your phaser.js or phaser.min.js is added before your project build.js file.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title> Test </title>
        <script type="text/javascript" src="lib/phaser/phaser.js"></script>
      </head>
      <body>
      </body>
      <script type="text/javascript" src="build/dist/build.js"></script>
    </html>
    

     

  • Store these commands to package.json for future usage, so you won't have to type those every time you need to build your project
    •   "scripts": {
          "rollup": "rollup -c \"rollup.config.js\"",
          "build": "tsc && npm run rollup"
        },

       

 

I hope this covers it all, If not leave a comment below.

 

----------------------------------------------------------------- Extras 

In case you're behind a corporate proxy:

create file .typingsrc

proxy = "http://domain\\myusername:password@myproxyServer:port"
https-proxy = "http://domain\\myusername:password@myproxyServer:port"

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...