All Projects â†’ photonstorm â†’ Phaser3 Typescript Project Template

photonstorm / Phaser3 Typescript Project Template

Licence: mit
A quick-start project template that uses Phaser 3, TypeScript and Rollup for bundling

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

Projects that are alternatives of or similar to Phaser3 Typescript Project Template

Phaser Arcade Slopes
📐 A Phaser CE plugin that brings sloped tile collision handling to the Arcade Physics engine
Stars: ✭ 124 (-38.31%)
Mutual labels:  phaser
Phaser Collection
phaser h5å°æ¸¸æˆéĄšį›Žé›†é”Ļ
Stars: ✭ 147 (-26.87%)
Mutual labels:  phaser
Slick Ui
Lightweight Phaser UI plugin
Stars: ✭ 184 (-8.46%)
Mutual labels:  phaser
Reldens
Reldens - You can make it - Open Source MMORPG Platform
Stars: ✭ 130 (-35.32%)
Mutual labels:  phaser
Phaser Examples
🎮 Game collections made by Phaser
Stars: ✭ 140 (-30.35%)
Mutual labels:  phaser
Ion Phaser
A web component to use Phaser Framework with Angular, React, Vue, etc 🎮
Stars: ✭ 152 (-24.38%)
Mutual labels:  phaser
Phaser Spine
A plugin for Phaser 2 that adds Spine support
Stars: ✭ 111 (-44.78%)
Mutual labels:  phaser
Navmesh
A plugin for path-finding in JS using navmeshes, with wrappers for Phaser 3 and Phaser 2
Stars: ✭ 186 (-7.46%)
Mutual labels:  phaser
Phaser Project Template Es6
Phaser 3 - Starter Template with ES6 (ESNext features included) and webpack.
Stars: ✭ 142 (-29.35%)
Mutual labels:  phaser
Expo Phaser
Build awesome 2D games with Phaser.js and Expo
Stars: ✭ 182 (-9.45%)
Mutual labels:  phaser
Phaser3 Particle Editor
A flexible editor for building phaser particles.
Stars: ✭ 131 (-34.83%)
Mutual labels:  phaser
Creature webgl
2D Skeletal Animation WebGL Runtimes for Creature ( PixiJS, PhaserJS, ThreeJS, BabylonJS, Cocos Creator )
Stars: ✭ 140 (-30.35%)
Mutual labels:  phaser
Slither.io Clone
Learn how to make Slither.io with JavaScript and Phaser! This game clones all the core features of Slither.io, including mouse-following controls, snake collisions, food, snake growth, eyes, and more. Progress through each part of the source code with our Slither.io tutorial series.
Stars: ✭ 168 (-16.42%)
Mutual labels:  phaser
Machine Learning Flappy Bird
Machine Learning for Flappy Bird using Neural Network and Genetic Algorithm
Stars: ✭ 1,683 (+737.31%)
Mutual labels:  phaser
Phaser Ui Tools
Functions for creating a UI in Phaser. Rows, columns, viewports, scrollbars, stuff like that.
Stars: ✭ 187 (-6.97%)
Mutual labels:  phaser
Phaser Kinetic Scrolling Plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
Stars: ✭ 117 (-41.79%)
Mutual labels:  phaser
Generator Phaser Plus
[🛑 DISCONTINUED] It has been a long journey but development of `generator-phaser-plus` is now over. I recommend you have a look and fork `yandeu/phaser-project-template` instead.
Stars: ✭ 148 (-26.37%)
Mutual labels:  phaser
Phaser Input
Adds input boxes to Phaser like CanvasInput, but also works for WebGL and Mobile, made for Phaser only.
Stars: ✭ 191 (-4.98%)
Mutual labels:  phaser
Phaser Project Template
🕹ī¸ Phaser 3 - Starter Template with TypeScript and webpack.
Stars: ✭ 186 (-7.46%)
Mutual labels:  phaser
Phaser State Transition
State transition plugin for Phaser.js
Stars: ✭ 169 (-15.92%)
Mutual labels:  phaser

Phaser 3 TypeScript Project Template

This quick-start project template combines Phaser 3.50 with TypeScript 4 and uses Rollup for bundling.

Requirements

Node.js is required to install dependencies and run scripts via npm.

Available Commands

Command Description
npm install Install project dependencies
npm run watch Build project and open web server running project, watching for changes
npm run dev Builds project and open web server, but do not watch for changes
npm run build Builds code bundle with production settings (minification, no source maps, etc..)

Writing Code

After cloning the repo, run npm install from your project directory. Then, you can start the local development server by running npm run watch. The first time you run this you should see the following demo run:

Screenshot

After starting the development server with npm run watch, you can edit any files in the src folder and Rollup will automatically recompile and reload your server (available at http://localhost:10001 by default).

Configuring Rollup

  • Edit the file rollup.config.dev.js to edit the development build.
  • Edit the file rollup.config.dist.js to edit the distribution build.

You will find lots of comments inside the rollup config files to help you do this.

Note that due to the build process involved, it can take around 20 seconds to build the initial bundle. Times will vary based on CPU and local drive speeds. The development config does not minify the code in order to save build time, but it does generate source maps. If you do not require these, disable them in the config to speed it up further.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].