convex-pixel
Version:
The library for creating pseudo 3d interactive scenes based on webgl
265 lines • 9.7 kB
JavaScript
import { __extends } from "tslib";
import { TweenMax, Expo, Sine } from "gsap";
import * as PIXI from "pixi.js";
import * as SonarUtils from "../utils/sonar";
import { CameraControllerManager, CameraControllerEventTypes } from "./controller";
import { Vector2D } from "../utils/geom";
var DEFAULT_BOUNDS = new PIXI.Rectangle(0, 0, 640, 480);
var Camera = /** @class */ (function (_super) {
__extends(Camera, _super);
function Camera(_room, _viewport, config) {
if (_viewport === void 0) { _viewport = DEFAULT_BOUNDS; }
var _this = _super.call(this) || this;
_this._room = _room;
_this._viewport = _viewport;
_this._x = 0;
_this._y = 0;
_this._cameraPosition = Vector2D.new();
_this._pov = Vector2D.new();
_this._maxZoom = 1;
_this._handlerCameraMove = function (target) {
var needAnimation = _this.normalizeCameraMove(target);
if (!needAnimation) {
_this._handlePivotUpdate();
return;
}
if (_this._tweenPivot) {
_this._tweenPivot.updateTo({ x: target.x, y: target.y }, true);
}
else {
_this._tweenPivot = TweenMax.to(_this._cameraPosition, 2, {
x: target.x,
y: target.y,
onUpdate: _this._handlePivotUpdate,
ease: Sine.easeOut,
});
}
target.free();
};
_this._handlerCameraPOV = function (target) {
_this.normalizeCameraPOV(target);
if (_this._tweenPOV) {
_this._tweenPOV.updateTo({ x: target.x, y: target.y }, true);
}
else {
_this._tweenPOV = TweenMax.to(_this._pov, 0.5, {
x: target.x,
y: target.y,
onUpdate: _this._handlePOVUpdate,
ease: Expo.easeOut,
});
}
target.free();
};
_this._handlePivotUpdate = function () {
_this._x = _this._cameraPosition.x;
_this._y = _this._cameraPosition.y;
_this.emit(CameraControllerEventTypes.MOVE, _this._cameraPosition);
};
_this._handlePOVUpdate = function () {
_this.emit(CameraControllerEventTypes.POV, _this._pov);
};
_this._handlerCameraZoom = function (zoom) {
_this.emit(CameraControllerEventTypes.ZOOM, zoom);
};
_this._handlerCameraRotate = function (rotation) {
_this.emit(CameraControllerEventTypes.ROTATE, rotation);
};
_this._povFactor = config.pov || 1;
_this._dof = (1 / (config.dof || 35)) * 30;
_this._maxXOffset = config.maxXOffset || 100;
_this._maxYOffset = config.maxYOffset || 100;
_this._xOffset = config.xOffset || 10;
_this._yOffset = config.yOffset || 10;
_this._float = config.float || false;
_this.createControllerManager();
_this._sonarViewport = new SonarUtils.SonarDetector(_this._viewport, ["x", "y", "width", "height"], "change");
_this._sonarViewport.addListener("change", function () {
// this.emit("change-bound", { ...this._bounds });
});
return _this;
}
Object.defineProperty(Camera.prototype, "room", {
get: function () {
return this._room;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "maxZoom", {
get: function () {
return this._maxZoom;
},
set: function (v) {
this._maxZoom = v;
this.emit(CameraControllerEventTypes.ZOOM, { maxZoom: this._maxZoom });
// reposition the camera target
TweenMax.killTweensOf(this._cameraPosition);
this.normalizeCameraMove(this._cameraPosition);
this._handlePivotUpdate();
// reset pov factor
TweenMax.killTweensOf(this._pov);
this.normalizeCameraPOV(this._pov);
this._handlePOVUpdate();
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "viewport", {
/**
* If you change the properties of the Bound then the Sonar will
* begin to check it for changes.
*/
get: function () {
return this._viewport;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "float", {
get: function () {
return this._float;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "pov", {
/**
* Returns PointOfView
*/
get: function () {
return this._pov;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "dof", {
get: function () {
return this._dof;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "controllers", {
get: function () {
return this._controllers;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "x", {
get: function () {
return this._x;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "y", {
get: function () {
return this._y;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "povFactor", {
get: function () {
return this._povFactor;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "maxXOffset", {
get: function () {
return this._maxXOffset;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "maxYOffset", {
get: function () {
return this._maxYOffset;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "xOffset", {
get: function () {
return this._xOffset;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Camera.prototype, "yOffset", {
get: function () {
return this._yOffset;
},
enumerable: true,
configurable: true
});
Camera.prototype.destroy = function () {
if (this._tweenPivot) {
this._tweenPivot.kill();
this._tweenPivot = undefined;
}
this.removeControllerManager();
this._sonarViewport.destroy();
this._cameraPosition.free();
this._pov.free();
};
/**
* Normalize and modify the target
*/
Camera.prototype.normalizeCameraMove = function (target) {
var sceneBounds = this._room.roomBound;
var sWidth = sceneBounds.width * this._room.scale.x;
var sHeight = sceneBounds.height * this._room.scale.y;
var maxX = sWidth - this._viewport.width;
var maxY = sHeight - this._viewport.height;
if (maxX <= 0) {
target.x = maxX * 0.5;
}
else {
if (target.x > maxX)
target.x = maxX;
else if (target.x < 0)
target.x = 0;
}
if (maxY <= 0) {
target.y = maxY * 0.5;
}
else {
if (target.y > maxY)
target.y = maxY;
else if (target.y < 0)
target.y = 0;
}
return true;
};
Camera.prototype.normalizeCameraPOV = function (target) {
/*if (this._maxXOffset && Math.abs(target.x) > this._maxXOffset) {
target.x = this._maxXOffset * Math.sign(target.x);
}
if (this._maxYOffset && Math.abs(target.y) > this._maxYOffset) {
target.y = this._maxYOffset * Math.sign(target.y);
}*/
};
Camera.prototype.createControllerManager = function () {
this._controllers = new CameraControllerManager(this);
this._controllers.addListener(CameraControllerEventTypes.MOVE, this._handlerCameraMove);
this._controllers.addListener(CameraControllerEventTypes.POV, this._handlerCameraPOV);
this._controllers.addListener(CameraControllerEventTypes.ZOOM, this._handlerCameraZoom);
this._controllers.addListener(CameraControllerEventTypes.ROTATE, this._handlerCameraRotate);
};
Camera.prototype.removeControllerManager = function () {
if (this._controllers) {
this._controllers.removeListener(CameraControllerEventTypes.MOVE, this._handlerCameraMove);
this._controllers.removeListener(CameraControllerEventTypes.POV, this._handlerCameraPOV);
this._controllers.removeListener(CameraControllerEventTypes.ZOOM, this._handlerCameraZoom);
this._controllers.removeListener(CameraControllerEventTypes.ROTATE, this._handlerCameraRotate);
this._controllers.destroy();
}
};
return Camera;
}(PIXI.utils.EventEmitter));
export { Camera };
//# sourceMappingURL=camera.js.map