Crafty.viewport

事件

ViewportScroll: 当视口的x或者y坐标发生变化时触发

ViewportScale: 当视口缩放时触发

ViewportResize: 当视口改变尺寸时触发

InvalidateViewport: 当视口改变时触发

StopCamera: 当任何摄像机动画停止时触发，例如开始新的动画。

CameraAnimationDone: 当摄像机动画完成时触发。

视口本质上是看着舞台的2D摄像机，可以移动和缩放，这和在某个方向上移动摄像机的情形一样。

有多种相机动画方法可用——这些是具有动画时间参数的视口方法和后续方法。一次只能运行一个动画。开始一个新的动画将取消前一个，关联的事件也会被取消。

提示: 在任何特定的时刻，你能看到的东西是…

x 在 (-Crafty.viewport._x) 和 (-Crafty.viewport._x + (Crafty.viewport._width / Crafty.viewport._scale)) 之间

y 在 (-Crafty.viewport._y) 和 (-Crafty.viewport._y + (Crafty.viewport._height / Crafty.viewport._scale)) 之间

例子

防止视窗在游戏世界之外调整自己。缩放视口，使实体出现两倍大。然后在3秒的时间内将视点集中在一个实体上。动画完成后，开始跟随实体。

var ent = Crafty.e('2D, DOM').attr({x: 250, y: 250, w: 100, h: 100});

Crafty.viewport.clampToEntities = false;
Crafty.viewport.scale(2);
Crafty.one("CameraAnimationDone", function() {
    Crafty.viewport.follow(ent, 0, 0);
});
Crafty.viewport.centerOn(ent, 3000);

方法

.centerOn()
.mouselook()
.follow()
.onScreen()
.pan()
.rect()
.scale()
.scroll()
.zoom()

Back to top

Crafty.viewport._scale

此值是视口的当前缩放（缩放）。当值大于1时，一切看起来更大（放大）。当值小于1时，一切看起来都变小了（放大）。这不会改变舞台本身的大小，只是放大了它显示的内容。

这是一个只读属性: 不要直接设置。可以使用 Crafty.viewport.scale(...) 或 Crafty.viewport.zoom(...) 代替

Back to top

Crafty.viewport.bounds

定义视口边界的矩形。它应该是一个具有两个属性的对象，max和min，它们都是具有x和y属性的对象。

如果此属性为空，则使用舞台上所有项目的边框。这是初始值。（为了防止这种行为，设置 Crafty.viewport.clampToEntities 为 false)

如果希望将视口绑定在一个轴上而不是另一个轴上，可以使用-Infinity和+Infinity作为边界。

参见

.clampToEntities

例子

设置边界为500，500的方框

Crafty.viewport.bounds = {min:{x:0, y:0}, max:{x:500, y:500}};

Back to top

Crafty.viewport.clampToEntities

决定视口函数是否应该锁定到游戏实体。当设置为true时功能和Crafty.viewport.mouselook()一样，将不会允许你移动视口到视口内没有实体。对于开发来说，将其设置为false是很有用的。

Back to top

Crafty.viewport.y

将沿着相反方向的Y轴移动舞台，从而移动每一个实体可见。

当设置这个值时，它将改变整个阶段。这意味着实体位置不完全在屏幕上。要获得准确的位置，只需设置对象的y坐标为Crafty.viewport.y

Back to top

Crafty.viewport.centerOn()

public void Crafty.viewport.centerOn(Object target, Number time)

Object target: 一个 2D 组件

Number time: 摄像机运动的毫秒数

聚焦视口到指定实体

例子

var ent = Crafty.e('2D, DOM').attr({x: 250, y: 250, w: 100, h: 100});
Crafty.viewport.centerOn(ent, 3000);

Back to top

Crafty.viewport.mouselook()

public void Crafty.viewport.mouselook(Boolean active)

Boolean active: 激活或取消视角

在当前视口切换视角。只需调用这个函数，用户就可以拖动周围的视口。

如果用户开始拖动，“StopCamera”将被触发，这将取消任何现有的摄像机动画。

Back to top

Crafty.viewport.x

将沿着相反方向的x轴移动舞台和每个可见实体。

当设置这个值时，它将改变整个阶段。这意味着实体位置不完全在屏幕上。要获得准确的位置，只需设置对象的x坐标为Crafty.viewport.x

Back to top

Crafty.viewport.follow()

public void Crafty.viewport.follow(Object target, Number offsetx, Number offsety)

Object target: 一个 2D 组件

Number offsetx: 跟踪目标的中心，应该偏离视口中心 offsetx像素。正值将目标置于屏幕右侧。

Number offsety: 跟踪目标的中心，应该偏离视口中心 offsety像素。正值将目标置于屏幕底部。

使用2D组件跟踪给定实体。如果跟随目标将视野的一部分从世界范围内移开，跟随者将停止直到目标移动。

例子

var ent = Crafty.e('2D, DOM').attr({w: 100, h: 100});
Crafty.viewport.follow(ent, 0, 0);

Back to top

Crafty.viewport.onScreen()

public Crafty.viewport.onScreen(Object rect)

rect: 一个拥有以下字段的矩形 {_x: x_val, _y: y_val, _w: w_val, _h: h_val}

测试矩形是否完全在视口中

Back to top

Crafty.viewport.pan()

public void Crafty.viewport.pan(Number dx, Number dy, Number time[, String|function easingFn])

Number dx: 沿x轴的距离

Number dy: 沿y轴的距离

Number time: 整个摄像机运动的毫秒数

easingFn: 一个指定的非线性函数或字符串 (默认为线性) 更多信息见 Crafty.easing。

在指定的事件内使摄像机移动一定的距离。

例子

// pan the camera 100 px right and down over the duration of 2 seconds using linear easing behaviour
Crafty.viewport.pan(100, 100, 2000);

Back to top

Crafty.viewport.rect()

public Object Crafty.viewport.rect([Object out])

Object out: 一个写入rect的可选对象

[Returns]: 包含当前视口区域的矩形。含有 _x,_y,_w,_h 属性。

获取当前视口可见区域 rect 的便捷方法。如果没有传递 out 参数, 此函数在调用时返回一个内部的重用对象。如果要保存视口区域以便以后使用, 请传递 out 参数, 视口区域将写入此对象。

例子

rect 等价于以下属性:

var rect = Crafty.viewport.rect();

rect._x === -Crafty.viewport._x
rect._y === -Crafty.viewport._y
rect._w === Crafty.viewport._width / Crafty.viewport._scale
rect._h === Crafty.viewport._height / Crafty.viewport._scale

Back to top

Crafty.viewport.scale()

public void Crafty.viewport.scale(Number amt)

Number amt: 元素上 zoom/scale 的值

调整比例（缩放）。当amt是1，将被设置为正常的大小，例如一个实体为this.w == 20，它将展现为20像素宽。当amt为10时，同一实体将展现为200像素宽（即，放大系数为10），当amt为0.1时，同一实体将为2像素宽（即，放大系数为0.1）。

如果传递 amt 为 0, 这和传递1的处理是一样的, 即：重置缩放

这个方法是绝对缩放，Crafty.viewport.zoom是相对缩放。

参见

.zoom

例子

Crafty.viewport.scale(2); // Zoom in -- all entities will appear twice as large.

Back to top

Crafty.viewport.scroll()

Crafty.viewport.scroll(String axis, Number val)

axis: 'x' 或者 'y'

val: 坐标轴上新的绝对位置

将视口移动到指定轴上的位置。

例子

相对初始位置向右移动摄像机500像素，实际上所有的物体都在视口中向左移动了500像素。

Crafty.viewport.scroll('_x', 500);

Back to top

Crafty.viewport.zoom()

public void Crafty.viewport.zoom(Number amt, Number cent_x, Number cent_y, Number time[, String|function easingFn])

Number amt: 放大视口的倍数（如：2，4，0.5）

Number cent_x: 缩放中心点x坐标

Number cent_y: 缩放中心点y坐标

Number time: 整个缩放操作持续的毫秒数

easingFn: 一个指定的非线性函数或字符串 (默认为线性) 更多信息见 Crafty.easing。

在指定点上改变摄像机的缩放。当 amt > 1 时，将聚焦到指定的物体上。当 amt < 1 时，将远离物体。当 amt = 0 时，将重置缩放。缩放是乘法运算，如果要重置，请使用 0。

例子

// Make the entities appear twice as large by zooming in on the specified coordinates over the duration of 3 seconds using linear easing behavior
Crafty.viewport.zoom(2, 100, 100, 3000);