rroylance Posted February 2, 2017 Share Posted February 2, 2017 I just released Phaser NPM Webpack TypeScript Starter Project (catchy name, isn't it?) GitHub link or my github.io link as a base starting point for creating games with Phaser using TypeScript taking advantage of the Phaser npm module and Webpack for building (which I couldn't find a template for, so I made one). It includes the typical 3 states (boot, preloader, title) to show the flow of a Phaser game. It also includes a watch task that watches the project for any changes and recompiles, and another task to run a live server that refreshes automatically after a build. It only takes a few seconds and a couple commands to get going (after having node.js installed)! It's platform agnostic (I've tested on OSX, Ubuntu running on a Chromebook, and Windows 10 in a VM running on OSX and had zero difference in behaviour). Hopefully someone here will find it useful, or at least take a look and let me know how to improve it (I plan on using this template and it's evolutions for all my future Phaser projects)! snowbillr, samme, ClusterAtlas and 1 other 4 Link to comment Share on other sites More sharing options...
rroylance Posted February 7, 2017 Author Share Posted February 7, 2017 A huge amount has changed since release last week; I've been constantly adding and improving things. I figure that enough has changed and it's much more complete now it's worth an update here. Current feature set below, as of v1.3.3; GitHub (rroylance/phaser-npm-webpack-typescript-starter-project) Features Phaser-CE 2.7.3 (npm module, no having to download the library seperatley...) TypeScript + TSLint 3 States (Boot, Preloader, Title) showing transition between states and where some things should be done and how a TypeScript state looks Google Web Font loader Webpack Seperate Development and Distribution builds Live server (builds and reloads the browser on changes) No hassle asset management requiring no code, on your part, to load and parse assets (script is smart enough to figure out what your assets are, no matter the subdirectory within assets/, if any) Setting up the game size and scaling through a script that does it all for you Automatic template background Sets up the size the game so that it is scaled only when absolutley necessary Refer to src/utils/utils.ts for an explanation on the background_template and the sizing/scaling style Link to comment Share on other sites More sharing options...
Majirefy Posted February 13, 2017 Share Posted February 13, 2017 Thanks very much! I really love that. It's very helpful for beginners. It saves a lot of time. I know there are many obstacles for those newbies in front end development. They usually spend lots of time figuring out what's Webpack, how to setup development environment and so on. Keep updating with Phaser CE, please! Thanks a lot! rroylance 1 Link to comment Share on other sites More sharing options...
bushmango Posted April 21, 2017 Share Posted April 21, 2017 This is so awesome, thank you very much. Exactly what I needed for Ludum Dare this weekend. Link to comment Share on other sites More sharing options...
rroylance Posted April 21, 2017 Author Share Posted April 21, 2017 10 hours ago, bushmango said: This is so awesome, thank you very much. Exactly what I needed for Ludum Dare this weekend. Awesome, glad I could help! I hope it all goes well for you, definitely send me the link to your game after! Link to comment Share on other sites More sharing options...
MikeW Posted April 21, 2017 Share Posted April 21, 2017 (edited) 10 hours ago, bushmango said: This is so awesome, thank you very much. Exactly what I needed for Ludum Dare this weekend. I'm going to stick with the tools I have gotten used to. Might look at this afterwords. It does sound great. 13 hours to start. Edited April 21, 2017 by MikeW forgot soemthing Link to comment Share on other sites More sharing options...
rroylance Posted April 21, 2017 Author Share Posted April 21, 2017 1 hour ago, MikeW said: I'm going to stick with the tools I have gotten used to. Might look at this afterwords. It does sound great. 13 hours to start. That is a good plan as well, you have 2 days to get something done, I'd stick with what I know too. Haha Again, send me links to anything you do with my template, if you do anything with it, I'd love to see it Link to comment Share on other sites More sharing options...
MikeW Posted April 21, 2017 Share Posted April 21, 2017 If I had time today, but today is cleaning and making food for two days (ham salad) Link to comment Share on other sites More sharing options...
bushmango Posted April 24, 2017 Share Posted April 24, 2017 It did take me a while to get set up with your system (I should have done a warm-up game hah) But wow did this make it easy for me to make a distribution version! Thanks! Here's my game that used your project setup: https://ldjam.com/events/ludum-dare/38/$25604 On 4/21/2017 at 6:38 AM, UncleAcid said: Awesome, glad I could help! I hope it all goes well for you, definitely send me the link to your game after! rroylance 1 Link to comment Share on other sites More sharing options...
rroylance Posted April 24, 2017 Author Share Posted April 24, 2017 14 hours ago, bushmango said: It did take me a while to get set up with your system (I should have done a warm-up game hah) But wow did this make it easy for me to make a distribution version! Thanks! Here's my game that used your project setup: https://ldjam.com/events/ludum-dare/38/$25604 Ya, I definitely did some things that are very different from using straight up Phaser, but I'm glad you were able to get going and it seems like it did make a positive difference in the end. If you have any feedback on any improvements to make anything easier to do or understand I'd love to hear it. The link doesn't work, it seems the games are all listed with the games name after /38/, maybe that was a pre-release link or something. What's the name of you game? Link to comment Share on other sites More sharing options...
samme Posted April 25, 2017 Share Posted April 25, 2017 23 hours ago, bushmango said: Here's my game that used your project setup: https://ldjam.com/events/ludum-dare/38/$25604 I don't see it there. Link to comment Share on other sites More sharing options...
rroylance Posted May 5, 2017 Author Share Posted May 5, 2017 On 4/23/2017 at 9:24 PM, bushmango said: Here's my game that used your project setup: https://ldjam.com/events/ludum-dare/38/$25604 Hey bushmango, could you get the proper link to your game? I'd love to see it! Maybe put a link to it in the README for my template if that's ok with you? Link to comment Share on other sites More sharing options...
briwa Posted May 14, 2017 Share Posted May 14, 2017 Hi, how do you add Phaser plugins with this setup? for example, phaser isometric plugin Link to comment Share on other sites More sharing options...
rroylance Posted May 15, 2017 Author Share Posted May 15, 2017 19 hours ago, briwa said: Hi, how do you add Phaser plugins with this setup? for example, phaser isometric plugin Simple; just put the built plugin js in your assets folder and it'll be automatically loaded, then just add it with game.plugins.add as usual. Take a look at the BlurX and BlurY in the project (not plugins, they are filters, but same loading process, all you'd have to change is having the game.plugjns.add call with Phaser.Plugin.PluginName). Any issues just let me know. Link to comment Share on other sites More sharing options...
Recommended Posts