Table of Contents
这里记录的是 Phaser3.50 示例中的 Camera 部分 api 的用法。详情还是看 Phaser api 文档比较好。
Camera
游戏里所有的对象都是通过摄像机看到的。摄像机大小默认和游戏一样。但可以通过 setViewport 和 setSize 调整。
16 Camera Test
class example extends Phaser.Scene { constructor() { super() } preload() { this.load.baseURL = globalConfig.baseUrl this.load.image('einstein', 'assets/pics/ra-einstein.png') } create() { this.image = this.add.image(200, 150, 'einstein') this.cameras.main.setSize(200, 150) for (let y = 0; y < 4; y++) { for (let x = 0; x < 4; x++) { if (x === 0 && y === 0) { continue } this.cameras.add(x * 200, y * 150, 200, 150) } } } update () { this.image.rotation += 0.01 } } const config = { type: Phaser.AUTO, parent: 'demo', width: 800, height: 600, scene: [example] } const game = new Phaser.Game(config)
this.camera.main.setSize(width [, height])
默认情况下,main 摄像机就是第一个摄像机。下面设置的位置、宽高都是指摄像机的视野(viewport)
参数 | 说明 |
---|---|
width | 摄像机宽度 |
height | 摄像机高度。默认为 width |
this.cameras.add([x] [, y] [, width] [, height] [, makeMain] [, name])
添加摄像机。摄像机管理器最多支持 31 个不同的摄像机。
参数 | 说明 |
---|---|
x | 摄像机水平位置。默认 0 |
y | 摄像机垂直位置。默认 0 |
width | 摄像机宽度。默认游戏宽度 |
height | 摄像机高度。默认游戏高度 |
makeMain | 是否设置为 main 摄像机。默认 false |
name | 摄像机名称。默认 ” |
Add Camera On Click
this.cameras.getTotal([isVisible])
获取摄像机数量。isVisible 表示是否只获取显示的摄像机。
Background Color Interpolate
new Phaser.Display.Color([red] [, green] [, blue] [, alpha])
返回颜色类,参数都为 0~255. alpha 默认 255,其余默认 0.
this.cameras.main.startFollow(target [, roundPixels] [, lerpX] [, lerpY] [, offsetX] [, offsetY])
设置摄像机追踪某个游戏对象。
参数 | 说明 |
---|---|
target | 游戏对象 |
roundPixels | 摄像机位置是否取整,以避免次像素渲染。默认 false |
lerpX | 0~1 之间。水平方向线性插值量。值越接近 1,跟踪速度越快。默认 1 |
lerpY | 垂直方向,同上。 |
offsetX | 追踪时的水平偏移量。默认 0 |
offsetY | 垂直方向。同上。 |
Phaser.Display.Color.Interpolate.ColorWithColor(color1, color2 [, length] [, index])
获取两种颜色指定位置的插值。(大概是这样)
参数 | 说明 |
---|---|
color1 | 第一个颜色 |
color2 | 第二个颜色 |
length | 两个颜色之间的距离。默认 100 |
index | 插值位置。默认 0 |
this.cameras.main.setBackgroundColor([color])
设置摄像机背景。默认 rgba(0, 0, 0, 0)。
这种学习方式效率太慢了。笔记不记了。直接看案例查 api 吧。