phaser 设置全屏

In this tutorial I want to detail an optimal setup to get started building a game using 3.

在本教程中，我想详细介绍一种最佳设置，以开始使用 3构建游戏。

Let’s install phaser in a folder using :

让我们使用将phaser安装在文件夹中：

npm init -ynpm install phaser

Now let’s setup to bundle our game:

现在，让我们设置来捆绑我们的游戏：

npm install -g parcel-bundler

Now create a game.js file with this content:

现在创建具有以下内容的game.js文件：

import Phaser from 'phaser'new Phaser.Game()

Now run

现在运行

parcel watch game.js

and Parcel will build our JavaScript in the dist/game.js file.

然后Parcel将在dist/game.js文件中构建我们JavaScript。

Now create an index.html file with this content:

现在创建具有以下内容的index.html文件：

Install browser-sync to run an HTTP server with the content of this folder:

安装browser-sync以使用此文件夹的内容运行HTTP服务器：

npm install -g browser-sync

then run

然后跑

browser-sync start —server —files "."

The above command watches all files in the current folder (and all subfolders) for changes, and launches a web server on port 3000, automatically opening a browser window to connect to the server.

上面的命令监视当前文件夹(和所有子文件夹)中的所有文件是否有更改，并在端口3000上启动Web服务器，自动打开浏览器窗口以连接到服务器。

Any time you change a file, the browser will refresh.

每次更改文件时，浏览器都会刷新。

This will be very useful while we prototype our games.

在我们制作游戏原型时，这将非常有用。

You should now see a blank screen in your browser, because we initialize Phaser:

现在，您将在浏览器中看到一个空白屏幕，因为我们初始化了Phaser：

import Phaser from 'phaser'new Phaser.Game()

but nothing else happens.

但是没有其他事情发生。

Copy this code in game.js:

将此代码复制到game.js ：

import Phaser from 'phaser'function preload() {  this.load.setBaseURL('http://labs.phaser.io')  this.load.image('sky', 'assets/skies/space3.png')  this.load.image('logo', 'assets/sprites/phaser3-logo.png')  this.load.image('red', 'assets/particles/red.png')}function create() {  this.add.image(400, 300, 'sky')  const particles = this.add.particles('red')  const emitter = particles.createEmitter({    speed: 100,    scale: { start: 1, end: 0 },    blendMode: 'ADD'  })  const logo = this.physics.add.image(400, 100, 'logo')  logo.setVelocity(100, 200)  logo.setBounce(1, 1)  logo.setCollideWorldBounds(true)  emitter.startFollow(logo)}const config = {  type: Phaser.AUTO,  width: 800,  height: 600,  physics: {    default: 'arcade',    arcade: {      gravity: { y: 200 }    }  },  scene: {    preload: preload,    create: create  }}const game = new Phaser.Game(config)

and you should quickly see the Phaser demo app running in your browser:

并且您应该很快在浏览器中看到运行的Phaser演示应用程序：

翻译自:

phaser 设置全屏