phaser 设置全屏
In this tutorial I want to detail an optimal setup to get started building a game using Phaser 3.
在本教程中,我想详细介绍一种最佳设置,以开始使用Phaser 3构建游戏。
Let’s install phaser
in a folder using npm:
让我们使用npm将phaser
安装在文件夹中:
npm init -y
npm install phaser
Now let’s setup Parcel 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
文件:
<!DOCTYPE html>
<html>
<head>
<script src="./dist/game.js"></script>
</head>
</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 设置全屏