Code Monkey home page Code Monkey logo

phaser-typescript-vscode-boilerplate's Introduction

Phaser Typescript VS Code Boilerplate

Boilerplate project to get up and running with Typescript and Phaser in VS Code.

Derived from: http://divillysausages.com/2015/06/09/using-phaser-with-visual-studio-code/

Getting Started

  1. Install Node.

  2. Use NPM (comes with Node) to install Typescript from the command line.

npm install -g typescript
  1. Install VS Code.

  2. Download and extract this repository to desired destination. Rename the folder as desired.

  3. Open this folder using VS Code. You can do this by right-clicking the folder and selecting 'Open with Code' from your desktop, or from File > Open Folder from within VS Code.

  4. Press Ctrl+Shift+P to bring up the command palette and select 'Tasks: Run Test Task'. This will install required node modules.

  5. Press Ctrl+Shift+B to compile the typescript files in src/ to bin/js/.

  6. Press F5 to start the webserver.

  7. Open localhost:5858 in your favorite web browser. To modify this port, make sure to update the port number in .vscode/launch.json and server/server.js.

Project Structure Overview

Contains VS Code project setup to handle compiling typescript code and running the webserver. Only needed if you are using VS Code for these purposes.

Directory of all output files that can be directly uploaded to host your game files.

Directory of all assets that the game/site/webpage will use. Feel free to make more directories for better organization.

Directory of compiled javascript as well as Phaser. Any additional javascript libraries can be placed here as well.

Contains Node specific setup and packages. Currently the only package used is node-static to allow VS Code to run a server.

Contains server setup for the packaged node-static web server.

Contains all your source Typescript files. These compile into /bin/js. Feel free to make more directories for better organization. This is where you will mainly be working.

Contains Typescript definition files. This is what the typescript compiler uses to add types to objects/functions.

Updating Dependencies

This setup uses the node.js package node-static to handle the hosting of files. While we will attempt to keep this up to date, if your project needs to update this package, run the following command in the command line if the project folder:

npm update node-static

Updating Phaser

Current Version 2.7.2 Community Edition (2016-12-14)

To update Phaser, run /update_phaser.sh.

Contributing

If something is out of date, please make an Issue or a Pull Request and I'll update it.

phaser-typescript-vscode-boilerplate's People

Contributors

djfdat avatar murgo avatar nefd avatar schenkfab avatar brandonmanke avatar

Watchers

bigboss avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.