# phaser3-typescript

**Repository Path**: jiash/phaser3-typescript

## Basic Information

- **Project Name**: phaser3-typescript
- **Description**: Phaser 3 and TypeScript
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-29
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <img width=60% src="assets/github/phaser3-typescript.png">
</p>

<p align="center">
  Phaser 3 Game Examples written in TypeScript.
</p>

<div align="center">

  ![Dependencies](https://img.shields.io/david/digitsensitive/phaser3-typescript.svg)
  ![GitHub issues](https://img.shields.io/github/issues/digitsensitive/phaser3-typescript.svg)
  ![GitHub stars](https://img.shields.io/github/stars/digitsensitive/phaser3-typescript.svg)
  ![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)
  ![Code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
  ![GitHub licence](https://img.shields.io/github/license/digitsensitive/phaser3-typescript.svg)

</div>

<p align="center">
  <sub>
    Examples made with ❤︎ by <a href="https://github.com/digitsensitive">digitsensitive</a></br>
    Framework created by <a href="https://github.com/photonstorm">Photonstorm</a>
  </sub>
</p>

# Phaser 3 and TypeScript

[Phaser](https://github.com/photonstorm/phaser) is a wonderful, fast and
free open source HTML5 game framework.
Here you will find everything you need to develop games with Phaser 3
in TypeScript. Have fun discovering, developing and playing!
Ideas and corrections are highly desirable to constantly
improve this repository!

<div align="center">
<a href="https://www.buymeacoffee.com/JZDVjsT26" target="blank">
<img src="https://www.buymeacoffee.com/assets/img/custom_images/black_img.png" alt="Buy Me A Coffee" style="height: auto !important; width: auto !important;"></a>
</div>

## Getting started

### Prerequisites

```
Download and install npm with Node.js @ https://nodejs.org/en
```

### Installing

Select a folder, navigate to it, and clone this repository
with this command-line:

```
git clone https://github.com/digitsensitive/phaser3-typescript.git
```

Install the dependencies with this command-line:

```
npm install
```

### Building and Running

Perform a quick build (bundle.js) and start server:

```
npm run dev
```

## Game Examples

![Beginner](https://img.shields.io/badge/Difficulty-Beginner-green.svg)

<p float="left">
  <a href="src/games/coin-runner/coin-runner.md"><img src="src/games/coin-runner/assets/github/coinRunner.png"></a>
  <a href="src/games/alpha-adjust/alpha-adjust.md"><img src="src/games/alpha-adjust/assets/github/alphaAdjust.png"></a>
</p>
<p float="left">
  <a href="src/games/snake/snake.md"><img src="src/games/snake/assets/github/snake.png"></a>
  <a href="src/games/blockade/blockade.md"><img src="src/games/blockade/assets/github/blockade.png"></a>
</p>
<p float="left">
  <a href="src/games/asteroid/asteroid.md"><img src="src/games/asteroid/assets/github/asteroid.png"></a>
  <a href="src/games/flappy-bird/flappy-bird.md"><img src="src/games/flappy-bird/assets/github/flappyBird.png"></a>
</p>

![Intermediate](https://img.shields.io/badge/Difficulty-Intermediate-blue.svg)

<p float="left">
  <a href="src/games/space-invaders/space-invaders.md"><img src="src/games/space-invaders/assets/github/spaceInvaders.png"></a>
  <a href="src/games/tank/tank.md"><img src="src/games/tank/assets/github/tank.png"></a>
</p>
<p float="left">
  <a href="src/games/super-mario-land/super-mario-land.md"><img src="src/games/super-mario-land/assets/github/super-mario-land.png"></a>
</p>

- If you have any suggestion for a next game example, let me know!

## Cheat Sheets

- [Browse through the Cheat Sheets](https://github.com/digitsensitive/phaser3-typescript/blob/master/cheatsheets)

## Tutorials

- [Learn to create a HTML5 Game in 5 Minutes](https://medium.com/@digit.sensitivee/learn-to-create-a-html5-game-in-5-minutes-604118f5d0ab)

## External Resources

- [Phaser 3 Framework](https://github.com/photonstorm/phaser)
- [Phaser 3 Docs with TypeScript Definition File](https://github.com/photonstorm/phaser3-docs)
- [Phaser 3 Online Docs](https://photonstorm.github.io/phaser3-docs/index.html)
- [Phaser 3 Official Examples](https://github.com/photonstorm/phaser3-examples)
- [Phaser 3 Discourse](https://phaser.discourse.group)

## Helpful tools

- [Leshy SpriteSheet Tool](https://www.leshylabs.com/apps/sstool)
- [Tiled](https://www.mapeditor.org)
- [Littera](http://kvazars.com/littera)
- [Tile Extruder](https://github.com/sporadic-labs/tile-extruder)

## TypeScript Configuration

### tsconfig.json

The following `Compiler Options` have been set in the `tsconfig.json` file:

| Option | Value     |
| :------------- | :------------- |
| target       | ES2016 |
| module       | CommonJS |
| sourceMap    | true |
| noImplicitAny| true [WIP] |
| strict       | true [WIP] |

You can see the complete list of the available options at [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
Interesting read about [setting up a nodejs-project](https://codeburst.io/tips-for-setting-up-a-typescript-nodejs-project-5d1c48dc1a2d).

## Changelog

[Learn about the latest improvements](https://github.com/digitsensitive/phaser3-typescript/blob/master/CHANGELOG.md)

## Contributing

Want to correct a bug, contribute some code, or improve the codes? Excellent! Let me know!
Please read [CONTRIBUTING.md](https://github.com/digitsensitive/phaser3-typescript/blob/master/CONTRIBUTING.md) for details on our code of conduct.

I would like to thank the following persons for their support and help:
[@FakeBarenziah](https://github.com/FakeBarenziah)
[@emedws](https://github.com/emedws)
[@evanlanglais](https://github.com/evanlanglais)
[@iliyaZelenko](https://github.com/iliyaZelenko)

## License

This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/digitsensitive/phaser3-typescript/blob/master/LICENSE) file for details.