Search the Community
Showing results for tags 'phaser typescript'.
Found 2 results
-
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"
-
Hi, I am trying to play with phaser and typescript, and i noticed that it misses js doc comments, which i can see in the js files themselves. Could you please fix this? Latest phaser from github Best Regards
