phaser/README.md

155 lines
8 KiB
Markdown
Raw Normal View History

2016-06-16 11:33:09 +00:00
# Phaser - HTML5 Game Framework
2015-01-05 16:30:22 +00:00
2024-09-05 12:30:28 +00:00
![Phaser Banner](changelog/assets/phaser-banner.png "Phaser Banner")
2015-01-06 02:26:03 +00:00
2024-06-21 15:53:59 +00:00
[![Discord](https://img.shields.io/discord/244245946873937922?style=for-the-badge)](https://discord.gg/phaser)
![JSDelivr](https://img.shields.io/jsdelivr/npm/hm/phaser?style=for-the-badge)
2024-02-02 14:49:52 +00:00
![GitHub](https://img.shields.io/github/downloads/phaserjs/phaser/total?style=for-the-badge)
2020-01-29 17:21:03 +00:00
2024-09-05 12:30:28 +00:00
Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop and mobile web browsers and has been actively developed for over 10 years. Games can be built for the web, YouTube Playables, Discord Activies, Twitch Overlays or compiled to iOS, Android and native apps using 3rd party tools. You can use JavaScript or TypeScript for development. Phaser supports over 40 different front-end frameworks, such as React and Vue.
2018-02-13 05:25:25 +00:00
2024-09-05 12:30:28 +00:00
Phaser is commercially developed and maintained by **Phaser Studio Inc** along with our fantastic open source community. As a result of rapid support, and a developer friendly API, Phaser is currently one of the [most starred](https://github.com/collections/javascript-game-engines) game frameworks on GitHub.
2015-01-06 05:47:51 +00:00
2024-09-05 12:30:28 +00:00
Interested in learning more? Click the image below to watch our intro video.
2023-04-12 18:47:27 +00:00
2024-09-05 12:30:28 +00:00
[![YouTube](http://i.ytimg.com/vi/jHTRu4iNTcA/hqdefault.jpg)](https://www.youtube.com/watch?v=jHTRu4iNTcA)
2015-01-06 06:20:46 +00:00
2024-09-05 12:30:28 +00:00
## Create Phaser Game App
2013-05-16 01:36:58 +00:00
2024-09-05 12:30:28 +00:00
The easiest way to get started quickly with Phaser is our `create-phaser-game` app. This CLI tool presents an interactive selection of official project templates and demo games. Issue the command, answer some questions and the app will download and configure the right package for you.
2018-02-13 05:25:25 +00:00
```bash
2024-09-05 12:30:28 +00:00
npm create @phaserjs/game@latest
npx @phaserjs/create-game@latest
yarn create @phaserjs/game
pnpm create @phaserjs/game@latest
bun create @phaserjs/game@latest
2018-02-13 05:25:25 +00:00
```
2024-09-05 12:30:28 +00:00
We support all of the following frameworks and bundlers:
2024-06-21 15:53:59 +00:00
| Frameworks | Bundlers |
| --------- | ------- |
| Vue.js | Vite |
| React | Rollup |
| Angular | Parcel |
| Next.js | Webpack |
| SolidJS | ESBuild |
| Svelte | Import Map |
| Remix | Bun |
2024-09-05 12:30:28 +00:00
Most come in both JavaScript and TypeScript versions.
2024-06-21 15:53:59 +00:00
2024-09-05 12:30:28 +00:00
[View the create game app tutorial](https://phaser.io/tutorials/create-game-app).
2015-03-26 02:10:57 +00:00
2024-09-05 12:30:28 +00:00
## Installing Phaser from NPM
2018-03-05 12:43:50 +00:00
2024-09-05 12:30:28 +00:00
Install via [npm](https://www.npmjs.com):
2018-02-13 05:25:25 +00:00
2024-09-05 12:30:28 +00:00
```bash
npm install phaser
2018-02-13 05:25:25 +00:00
```
2024-09-05 12:30:28 +00:00
## Using Phaser from a CDN
[Phaser is on jsDelivr](https://www.jsdelivr.com/package/npm/phaser) which is a "super-fast CDN for developers". Include _either_ of the following in your html:
2018-02-13 05:25:25 +00:00
```html
2024-09-05 12:30:28 +00:00
<script src="//cdn.jsdelivr.net/npm/phaser@3.85.0/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser@3.85.0/dist/phaser.min.js"></script>
2018-02-13 05:25:25 +00:00
```
2015-03-26 02:10:57 +00:00
2024-09-05 12:30:28 +00:00
## Phaser TypeScript Definitions
2018-03-30 14:24:00 +00:00
2024-09-05 12:30:28 +00:00
Full TypeScript definitions can be found inside the [types folder]((https://github.com/phaserjs/phaser/tree/master/types)). They are also referenced in the `types` entry in `package.json`, meaning modern IDEs such as VSCode will detect them automatically.
2019-06-27 15:39:48 +00:00
Depending on your project, you may need to add the following to your `tsconfig.json` file:
```json
2022-11-22 21:55:20 +00:00
"lib": ["es6", "dom", "dom.iterable", "scripthost"],
"typeRoots": ["./node_modules/phaser/types"],
"types": ["Phaser"]
2019-06-27 15:39:48 +00:00
```
2018-03-30 14:24:00 +00:00
2024-09-05 12:30:28 +00:00
## API Documentation
2019-11-22 17:22:39 +00:00
2024-09-05 12:30:28 +00:00
Go to https://newdocs.phaser.io/ to read our API documentation. Use the links at the top of the page to navigate the namespaces, classes, events and Game Objects and also to use the search box.
2015-03-26 02:10:57 +00:00
2024-09-05 12:30:28 +00:00
## Getting Started with Phaser
2015-03-26 02:10:57 +00:00
2024-09-05 12:30:28 +00:00
New tutorials are being published every week. We recommend the following to begin your journey:
2018-02-23 13:29:52 +00:00
* [Getting Started with Phaser 3](https://phaser.io/tutorials/getting-started-phaser3) (useful if you are completely new to Phaser)
* [Making your first Phaser 3 Game](https://phaser.io/tutorials/making-your-first-phaser-3-game)
2018-09-20 15:57:25 +00:00
* The [Complete Phaser 3 Game Development course](https://academy.zenva.com/product/html5-game-phaser-mini-degree/?a=13) contains over 15 hours of videos covering all kinds of important topics.
2021-11-28 17:39:13 +00:00
* Plus, there are [over 700 Phaser tutorials](https://phaser.io/learn) listed on the official website.
2018-02-23 13:29:52 +00:00
2024-09-05 12:30:28 +00:00
## Phaser by Example Book
2024-06-21 15:53:59 +00:00
2024-09-05 12:30:28 +00:00
We have published a brand-new free 500 page book on game development with Phaser. Learn by building shoot-em-ups, puzzle games, rogue-likes and more.
2024-06-21 15:53:59 +00:00
![Phaser by Example](https://cdn.phaser.io/news/2024/04/phaser-by-example-book.jpg)
2024-09-05 12:30:28 +00:00
Written by long-time prolific Phaser enthusiast Pello Xabier Altadill and Richard Davey, creator of Phaser, it features up-to-date content on building games with Phaser v3.85.
2024-06-21 15:53:59 +00:00
2024-09-05 12:30:28 +00:00
The book takes you through the process of creating a variety of different games. As the title implies, this allows you to learn by working through real-life examples. The games start simple, with an infinite runner game, and then progresses to building a shoot-em-up, a platformer, a puzzle game, a rogue-like, a story game and even 3D and multiplayer games.
2015-03-26 02:10:57 +00:00
2024-09-05 12:30:28 +00:00
It also contains a large section on the core concepts of Phaser, covering the terminology and conventions used by the framework, as well as a comprehensive deep dive into Game Objects.
2015-03-26 02:10:57 +00:00
2024-09-05 12:30:28 +00:00
Register for a free Phaser account to [Download the book](https://phaser.io/news/2024/04/phaser-by-example-book).
2022-06-23 17:29:37 +00:00
2024-09-05 12:30:28 +00:00
## Source Code Examples
2022-06-23 17:29:37 +00:00
2024-09-05 12:30:28 +00:00
We have created hundreds of examples and they are all available with full source code and assets. Browse the examples on the [Phaser 3 Labs](https://labs.phaser.io)
2022-09-20 21:32:01 +00:00
2024-09-05 12:30:28 +00:00
## Phaser 3 Plugins
2020-07-13 15:15:45 +00:00
2024-09-05 12:30:28 +00:00
Super community member RexRainbow has been publishing Phaser 3 content for years, building up an impressive catalogue that all Phaser developers should be aware of.
2020-07-13 15:15:45 +00:00
2024-09-05 12:30:28 +00:00
You'll find [Phaser Plugins](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html#list-of-my-plugins) that extend the framework with features such as UI controls, text input boxes, Firebase support, Finite State Machines and lots more. His set of 'Phaser Notes' are also invaluable reading. Find them at [https://rexrainbow.github.io](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html)
2018-02-13 06:25:51 +00:00
2024-09-05 12:30:28 +00:00
## Phaser Sandbox
2024-06-21 15:53:59 +00:00
2024-09-05 12:30:28 +00:00
The Phaser Sandbox is a fully-configured online editor, ready to go. It's loaded with all the core versions of Phaser and packed full of handy features. [Register for a free Phaser account](https://phaser.io/register) to create and save your own sandbox entries. Or view one [just like this](https://phaser.io/sandbox/XyqPcjNr).
2018-02-13 06:25:51 +00:00
2024-09-05 12:30:28 +00:00
## Phaser Compressor
2015-03-26 02:10:57 +00:00
2024-06-21 15:53:59 +00:00
Use our powerful new web-based tool to crunch your Phaser bundles down by up to 60%, enabling only the features your game requires.
2018-09-04 14:42:10 +00:00
2024-06-21 15:53:59 +00:00
Read more about [Phaser Compressor](https://phaser.io/news/2024/05/phaser-compressor-released)
2024-09-05 12:30:28 +00:00
## Change Log
2018-05-16 14:08:01 +00:00
2024-09-05 12:30:28 +00:00
We meticulously keep track of new features, updates and bug fixes in our change logs. Each version of Phaser has its own change log:
2020-12-16 16:21:31 +00:00
2024-06-21 15:53:59 +00:00
* [v3.85 Change Log](changelog/3.85/CHANGELOG-v3.85.md)
* [v3.0.0 to v3.80.1. Change Logs](CHANGELOG.md)
2020-12-16 16:21:31 +00:00
2024-09-05 12:30:28 +00:00
**Visit** the [Phaser website](https://phaser.io)<br />
**Play** some [amazing games](https://phaser.io/games)<br />
**Learn** By browsing our [API Docs](https://newdocs.phaser.io), [Support Forum][forum] and [StackOverflow](https://stackoverflow.com/questions/tagged/phaser-framework)<br />
**Code Examples?** We've over 2000 [Examples](https://phaser.io/examples) to learn from<br />
**Read** the weekly [Phaser World](https://phaser.io/newsletter/2024) Newsletter<br />
**Be Social:** Join us on [Discord](https://discord.gg/phaser) and [Reddit](https://phaser.io/community/reddit) or follow us on [Twitter](https://twitter.com/phaser_)<br />
2013-04-12 16:19:56 +00:00
2024-09-05 12:30:28 +00:00
Grab the source and join the fun!
2024-09-05 12:30:28 +00:00
Phaser wouldn't have been possible without the fantastic support of the community. Thank you to everyone who supports our work, who shares our belief in the future of HTML5 gaming, and Phaser's role in that.
2015-01-03 01:31:42 +00:00
2024-09-05 12:30:28 +00:00
Happy coding everyone!
2013-04-12 16:19:56 +00:00
2024-09-05 12:30:28 +00:00
Cheers,
2013-04-12 16:38:44 +00:00
2024-09-05 12:30:28 +00:00
[Rich](mailto:rich@phaser.io) and the whole team at Phaser Studio<br>
[@photonstorm](https://twitter.com/photonstorm)
2024-09-05 12:30:28 +00:00
![boogie](https://www.phaser.io/images/spacedancer.gif)
2013-04-12 16:19:56 +00:00
2024-09-05 12:30:28 +00:00
Powered by coffee, anime, pixels and love.
2015-01-06 06:20:46 +00:00
2024-02-02 14:49:52 +00:00
The Phaser logo and characters are &copy; 2011 - 2024 Phaser Studio Inc.
2015-01-06 06:20:46 +00:00
2015-01-06 05:47:51 +00:00
All rights reserved.
2013-04-12 16:19:56 +00:00
"Above all, video games are meant to be just one thing: fun. Fun for everyone." - Satoru Iwata