evidently-pixi
Version:
TypeScript powered set of modules to make it easier to make games in Pixi.js.
149 lines • 7.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const PIXI = require("pixi.js");
const GameStage_1 = require("./GameStage");
/**
* Scale mode as used by [[ScalingStage]]
*/
var ScalingStageUpscaleMode;
(function (ScalingStageUpscaleMode) {
/**
* Stage is not scaled so the game always displays in the native size.
*/
ScalingStageUpscaleMode[ScalingStageUpscaleMode["NoScale"] = 0] = "NoScale";
/**
* Scale up to fill as much of the available space as possible, while keeping the scale an integer value,
* to ensure every pixel is always the same size.
*/
ScalingStageUpscaleMode[ScalingStageUpscaleMode["SnapScale"] = 1] = "SnapScale";
/**
* Scale up to fill as much of the available space as possible, which may result in uneven pixels.
*/
ScalingStageUpscaleMode[ScalingStageUpscaleMode["FullScale"] = 2] = "FullScale";
})(ScalingStageUpscaleMode = exports.ScalingStageUpscaleMode || (exports.ScalingStageUpscaleMode = {}));
/**
* This stage will render the game to a render texture in its original dimensions as provided in the constructor,
* then depending on selected [[ScalingStageUpscaleMode]] will scale the contents proportionally. The stage will then
* be centered in the available spcae that is left.
*/
class ScalingStage {
constructor(game, baseWidth, baseHeight, scaleMode = PIXI.SCALE_MODES.NEAREST, upscaleMode = ScalingStageUpscaleMode.SnapScale) {
this._game = game;
this._mask = new PIXI.Graphics();
this._renderTexture = PIXI.RenderTexture.create({ width: baseWidth, height: baseHeight, scaleMode });
this._lastWindowWidth = baseWidth;
this._lastWindowHeight = baseHeight;
this._upscaleMode = upscaleMode;
this._baseWidth = baseWidth;
this._baseHeight = baseHeight;
this._layers = [];
this._layers[GameStage_1.GameStageLayer.Normal] = new PIXI.Container();
this._layers[GameStage_1.GameStageLayer.DebugProportional] = new PIXI.Container();
this._layers[GameStage_1.GameStageLayer.DebugFullScreen] = new PIXI.Container();
this._renderedGame = new PIXI.Sprite(this._renderTexture);
this._renderedGame.mask = this._mask;
this._renderedGame.interactive = false;
this._renderedGame.interactiveChildren = false;
this._layers[GameStage_1.GameStageLayer.DebugProportional].interactive = false;
this._layers[GameStage_1.GameStageLayer.DebugProportional].interactiveChildren = false;
this._layers[GameStage_1.GameStageLayer.DebugFullScreen].interactive = false;
this._layers[GameStage_1.GameStageLayer.DebugFullScreen].interactiveChildren = false;
this._game.pixi.stage.addChild(this._renderedGame);
this._layers.forEach(layer => this._game.pixi.stage.addChild(layer));
// Update visibility after render but before input is parsed
game.pixi.ticker.add(() => {
this._layers[GameStage_1.GameStageLayer.Normal].visible = true;
}, this, PIXI.UPDATE_PRIORITY.LOW - 1);
}
get upscaleMode() {
return this._upscaleMode;
}
set upscaleMode(mode) {
if (this._upscaleMode !== mode) {
this._upscaleMode = mode;
this.setWindowDimensions(this._lastWindowWidth, this._lastWindowHeight);
}
}
addChild(child, layer) {
this._layers[layer].addChild(child);
}
removeChild(child) {
this._layers.filter(x => x === child.parent).forEach(x => x.removeChild(child));
}
update() {
this._layers[GameStage_1.GameStageLayer.Normal].filters = this._game.postProcessManager.activeFilters;
this._layers[GameStage_1.GameStageLayer.Normal].x = 0;
this._layers[GameStage_1.GameStageLayer.Normal].y = 0;
this._layers[GameStage_1.GameStageLayer.Normal].scale.x = 1;
this._layers[GameStage_1.GameStageLayer.Normal].scale.y = 1;
this._layers[GameStage_1.GameStageLayer.Normal].alpha = 1;
this._game.pixi.renderer.render(this._layers[GameStage_1.GameStageLayer.Normal], this._renderTexture, true);
this._layers[GameStage_1.GameStageLayer.Normal].alpha = 0;
this._layers[GameStage_1.GameStageLayer.Normal].x = this._renderedGame.x;
this._layers[GameStage_1.GameStageLayer.Normal].y = this._renderedGame.y;
this._layers[GameStage_1.GameStageLayer.Normal].scale.x = this._renderedGame.scale.x;
this._layers[GameStage_1.GameStageLayer.Normal].scale.y = this._renderedGame.scale.y;
}
setWindowDimensions(windowWidth, windowHeight) {
this._lastWindowWidth = windowWidth;
this._lastWindowHeight = windowHeight;
const [targetWidth, targetHeight] = this.getDimensionsForScaleMode(windowWidth, windowHeight, this._upscaleMode);
const scaleX = targetWidth / this._baseWidth;
const scaleY = targetHeight / this._baseHeight;
const x = (windowWidth - targetWidth) / 2 | 0;
const y = (windowHeight - targetHeight) / 2 | 0;
this._renderedGame.x = x;
this._renderedGame.y = y;
this._renderedGame.scale.x = scaleX;
this._renderedGame.scale.y = scaleY;
this._layers[GameStage_1.GameStageLayer.DebugProportional].x = x;
this._layers[GameStage_1.GameStageLayer.DebugProportional].y = y;
this._layers[GameStage_1.GameStageLayer.DebugProportional].scale.x = scaleX;
this._layers[GameStage_1.GameStageLayer.DebugProportional].scale.y = scaleY;
this._mask.clear();
this._mask.lineStyle(0);
this._mask.beginFill(0, 1);
this._mask.drawRect(x, y, targetWidth, targetHeight);
this._game.mouse.scaleProperties.offsetX = x;
this._game.mouse.scaleProperties.offsetY = y;
this._game.mouse.scaleProperties.scaleX = scaleX;
this._game.mouse.scaleProperties.scaleY = scaleY;
}
getDimensionsForScaleMode(windowWidth, windowHeight, upscaleMode) {
const displayRatio = this._baseWidth / this._baseHeight;
switch (upscaleMode) {
case ScalingStageUpscaleMode.NoScale:
return [windowWidth, windowHeight];
case ScalingStageUpscaleMode.SnapScale:
const snappedMaxWidth = Math.floor(windowWidth / this._baseWidth) * this._baseWidth;
const snappedMaxHeight = Math.floor(windowHeight / this._baseHeight) * this._baseHeight;
if (snappedMaxWidth / snappedMaxHeight < displayRatio) {
return [
snappedMaxWidth,
snappedMaxWidth / displayRatio,
];
}
else {
return [
snappedMaxHeight * displayRatio,
snappedMaxHeight,
];
}
case ScalingStageUpscaleMode.FullScale:
if (windowWidth / windowHeight < displayRatio) {
return [
windowWidth,
windowWidth / displayRatio,
];
}
else {
return [
windowHeight * displayRatio,
windowHeight,
];
}
}
}
}
exports.ScalingStage = ScalingStage;
//# sourceMappingURL=ScalingStage.js.map