UncleAcid

Just released Phaser + NPM + Webpack + TypeScript Starter Project on GitHub

Recommended Posts

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)!

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
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 by MikeW
forgot soemthing

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

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!

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.