UNPKG

@drincs/pixi-vn

Version:

Pixi'VN is a npm package that provides various features for creating visual novels.

1,927 lines (1,905 loc) 68.7 kB
'use strict'; var pixi_js = require('pixi.js'); require('deep-diff'); var sha1 = require('crypto-js/sha1'); var devtools = require('@pixi/devtools'); function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; } var sha1__default = /*#__PURE__*/_interopDefault(sha1); var __defProp = Object.defineProperty; var __defProps = Object.defineProperties; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropDescs = Object.getOwnPropertyDescriptors; var __getOwnPropSymbols = Object.getOwnPropertySymbols; var __hasOwnProp = Object.prototype.hasOwnProperty; var __propIsEnum = Object.prototype.propertyIsEnumerable; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __spreadValues = (a, b) => { for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]); if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) { if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]); } return a; }; var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); var __decorateClass = (decorators, target, key, kind) => { var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target; for (var i = decorators.length - 1, decorator; i >= 0; i--) if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result; if (kind && result) __defProp(target, key, result); return result; }; var __async = (__this, __arguments, generator) => { return new Promise((resolve, reject) => { var fulfilled = (value) => { try { step(generator.next(value)); } catch (e) { reject(e); } }; var rejected = (value) => { try { step(generator.throw(value)); } catch (e) { reject(e); } }; var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); step((generator = generator.apply(__this, __arguments)).next()); }); }; function getTexture(imageUrl) { return __async(this, null, function* () { if (pixi_js.Assets.cache.has(imageUrl)) { return pixi_js.Assets.get(imageUrl); } return pixi_js.Assets.load(imageUrl).then((texture) => { if (!texture) { console.error("[Pixi'VN] Texture not found", imageUrl); return; } if (!(texture instanceof pixi_js.Texture)) { console.error("[Pixi'VN] File not is a image", imageUrl); return; } return texture; }).catch((e) => { console.error("[Pixi'VN] Error loading image", e); return; }); }); } function getFillGradientFillPattern(prop, propName) { if (!(prop instanceof Object)) { return prop; } console.warn(`[Pixi'VN] CanvasText.style.${propName} is a FillGradient or FillPattern, this is not supported yet.`, prop); return void 0; } function getTextStyle(style) { return { align: style.align, breakWords: style.breakWords, dropShadow: style.dropShadow, fill: getFillGradientFillPattern(style.stroke, "fill"), fontFamily: style.fontFamily, fontSize: style.fontSize, fontStyle: style.fontStyle, fontVariant: style.fontVariant, fontWeight: style.fontWeight, leading: style.leading, letterSpacing: style.letterSpacing, lineHeight: style.lineHeight, padding: style.padding, stroke: getFillGradientFillPattern(style.stroke, "stroke"), textBaseline: style.textBaseline, trim: style.trim, whiteSpace: style.whiteSpace, wordWrap: style.wordWrap, wordWrapWidth: style.wordWrapWidth }; } // src/decorators/EventDecorator.ts var registeredEvents = {}; function getEventTypeById(eventId) { try { let eventType = registeredEvents[eventId]; if (!eventType) { console.error(`[Pixi'VN] Event ${eventId} not found`); return; } new eventType(); return eventType; } catch (e) { console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e); return; } } function getEventInstanceById(eventId) { try { let eventType = registeredEvents[eventId]; if (!eventType) { console.error(`[Pixi'VN] Event ${eventId} not found`); return; } let event = new eventType(); return event; } catch (e) { console.error(`[Pixi'VN] Error while getting Event ${eventId}`, e); return; } } // src/classes/canvas/CanvasSprite.ts var CANVAS_SPRITE_ID = "CanvasSprite"; var CanvasSprite = class _CanvasSprite extends pixi_js.Sprite { constructor(options) { super(options); this.pixivnId = CANVAS_SPRITE_ID; this._onEvents = {}; this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_SPRITE_ID; } get memory() { return getMemorySprite(this); } set memory(value) { setMemorySprite(this, value); } get onEvents() { return this._onEvents; } /** * is same function as on(), but it keeps in memory the children. * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc. * @param eventClass The class that extends CanvasEvent. * @returns * @example * ```typescript * \@eventDecorator() * export class EventTest extends CanvasEvent<CanvasSprite> { * override fn(event: CanvasEventNamesType, sprite: CanvasSprite): void { * if (event === 'pointerdown') { * sprite.scale.x *= 1.25; * sprite.scale.y *= 1.25; * } * } * } * ``` * * ```typescript * let sprite = addImage("alien", 'https://pixijs.com/assets/eggHead.png') * await sprite.load() * * sprite.eventMode = 'static'; * sprite.cursor = 'pointer'; * sprite.onEvent('pointerdown', EventTest); * * GameWindowManager.addCanvasElement("bunny", sprite); * ``` */ onEvent(event, eventClass) { let id = eventClass.prototype.id; let instance = getEventInstanceById(id); this._onEvents[event] = id; if (instance) { super.on(event, () => { instance.fn(event, this); }); } return this; } /** * on() does not keep in memory the event class, use onEvent() instead * @deprecated * @private * @param event * @param fn * @param context */ on(event, fn, context) { return super.on(event, fn, context); } static from(source, skipCache) { let sprite = pixi_js.Sprite.from(source, skipCache); let mySprite = new _CanvasSprite(); mySprite.texture = sprite.texture; return mySprite; } }; function getMemorySprite(element) { let temp = getMemoryContainer(element); return __spreadProps(__spreadValues({}, temp), { pixivnId: element.pixivnId, textureImage: getTextureMemory(element.texture), anchor: { x: element.anchor.x, y: element.anchor.y }, roundPixels: element.roundPixels, onEvents: element.onEvents }); } function setMemorySprite(element, memory) { setMemoryContainer(element, memory); getTexture(memory.textureImage.image).then((texture) => { if (texture) { element.texture = texture; } }); if (memory.anchor) { if (typeof memory.anchor === "number") { element.anchor.set(memory.anchor, memory.anchor); } else { element.anchor.set(memory.anchor.x, memory.anchor.y); } } memory.roundPixels && (element.roundPixels = memory.roundPixels); for (let event in memory.onEvents) { let id = memory.onEvents[event]; let instance = getEventTypeById(id); if (instance) { element.onEvent(event, instance); } } } // src/classes/canvas/CanvasImage.ts var CANVAS_IMAGE_ID = "CanvasImage"; var CanvasImage = class _CanvasImage extends CanvasSprite { constructor(options, imageLink) { super(options); this.pixivnId = CANVAS_IMAGE_ID; this.imageLink = ""; if (imageLink) { this.imageLink = imageLink; } } get memory() { return __spreadProps(__spreadValues({}, getMemorySprite(this)), { pixivnId: this.pixivnId, imageLink: this.imageLink }); } set memory(memory) { setMemorySprite(this, memory); this.imageLink = memory.imageLink; } static from(source, skipCache) { let sprite = pixi_js.Sprite.from(source, skipCache); let mySprite = new _CanvasImage(); mySprite.texture = sprite.texture; return mySprite; } /** * Load the image from the link and set the texture of the sprite. * @param image The link of the image. If it is not set, it will use the imageLink property. * @returns A promise that resolves when the image is loaded. */ load(image) { return __async(this, null, function* () { if (!image) { image = this.imageLink; } return getTexture(this.imageLink).then((texture) => { if (texture) { this.texture = texture; } }).catch((e) => { console.error("[Pixi'VN] Error into CanvasImage.load()", e); }); }); } }; var CANVAS_TEXT_ID = "CanvasText"; var CanvasText = class extends pixi_js.Text { constructor(options) { super(options); this.pixivnId = CANVAS_TEXT_ID; this._onEvents = {}; this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_TEXT_ID; } get memory() { return getMemoryText(this); } set memory(value) { setMemoryText(this, value); } get onEvents() { return this._onEvents; } /** * is same function as on(), but it keeps in memory the children. * @param event The event type, e.g., 'click', 'mousedown', 'mouseup', 'pointerdown', etc. * @param eventClass The class that extends CanvasEvent. * @returns * @example * ```typescript * \@eventDecorator() * export class EventTest extends CanvasEvent<CanvasText> { * override fn(event: CanvasEventNamesType, text: CanvasText): void { * if (event === 'pointerdown') { * text.scale.x *= 1.25; * text.scale.y *= 1.25; * } * } * } * ``` * * ```typescript * const text = new CanvasText(); * text.text = "Hello World" * * text.eventMode = 'static'; * text.cursor = 'pointer'; * text.onEvent('pointerdown', EventTest); * * GameWindowManager.addCanvasElement("text", text); * ``` */ onEvent(event, eventClass) { let id = eventClass.prototype.id; let instance = getEventInstanceById(id); this._onEvents[event] = id; if (instance) { super.on(event, () => { instance.fn(event, this); }); } return this; } /** * on() does not keep in memory the event class, use onEvent() instead * @deprecated * @private * @param event * @param fn * @param context */ on(event, fn, context) { return super.on(event, fn, context); } }; function getMemoryText(element) { let temp = getMemoryContainer(element); return __spreadProps(__spreadValues({}, temp), { pixivnId: element.pixivnId, anchor: { x: element.anchor.x, y: element.anchor.y }, text: element.text, resolution: element.resolution, style: getTextStyle(element.style), roundPixels: element.roundPixels, onEvents: element.onEvents }); } function setMemoryText(element, memory) { setMemoryContainer(element, memory); if (memory.anchor) { if (typeof memory.anchor === "number") { element.anchor.set(memory.anchor, memory.anchor); } else { element.anchor.set(memory.anchor.x, memory.anchor.y); } } memory.text && (element.text = memory.text); memory.resolution && (element.resolution = memory.resolution); memory.style && (element.style = memory.style); memory.roundPixels && (element.roundPixels = memory.roundPixels); for (let event in memory.onEvents) { let id = memory.onEvents[event]; let instance = getEventTypeById(id); if (instance) { element.onEvent(event, instance); } } } // src/decorators/CanvasElementDecorator.ts var registeredCanvasElement = {}; function getCanvasElementInstanceById(canvasId) { try { let eventType = registeredCanvasElement[canvasId]; if (!eventType) { if (canvasId === CANVAS_CONTAINER_ID) { eventType = CanvasContainer; } else if (canvasId === CANVAS_IMAGE_ID) { eventType = CanvasImage; } else if (canvasId === CANVAS_SPRITE_ID) { eventType = CanvasSprite; } else if (canvasId === CANVAS_TEXT_ID) { eventType = CanvasText; } } if (!eventType) { console.error(`[Pixi'VN] CanvasElement ${canvasId} not found`); return; } let canvasElement = new eventType(); return canvasElement; } catch (e) { console.error(`[Pixi'VN] Error while getting CanvasElement ${canvasId}`, e); return; } } // src/functions/CanvasUtility.ts function getTextureMemory(texture) { let sourceTexture = texture.source; let textureMemory = { image: sourceTexture.label }; return textureMemory; } function exportCanvasElement(element) { return element.memory; } function importCanvasElement(memory) { let element = getCanvasElementInstanceById(memory.pixivnId); if (element) { element.memory = memory; } else { throw new Error("[Pixi'VN] The element " + memory.pixivnId + " could not be created"); } return element; } // src/classes/canvas/CanvasContainer.ts var CANVAS_CONTAINER_ID = "CanvasContainer"; var CanvasContainer = class extends pixi_js.Container { constructor(options) { super(options); this.pixivnId = CANVAS_CONTAINER_ID; this.pixivnId = this.constructor.prototype.pixivnId || CANVAS_CONTAINER_ID; } get memory() { let memory = getMemoryContainer(this); this.children.forEach((child) => { memory.elements.push(exportCanvasElement(child)); }); return memory; } set memory(value) { setMemoryContainer(this, value); value.elements.forEach((child) => { this.addChild(importCanvasElement(child)); }); } }; function getMemoryContainer(element) { let className = "CanvasContainer"; if (element.hasOwnProperty("pixivnId")) { className = element.pixivnId; } return { pixivnId: className, elements: [], width: element.width, height: element.height, isRenderGroup: element.isRenderGroup, blendMode: element.blendMode, tint: element.tint, alpha: element.alpha, angle: element.angle, renderable: element.renderable, rotation: element.rotation, scale: { x: element.scale.x, y: element.scale.y }, pivot: { x: element.pivot.x, y: element.pivot.y }, position: { x: element.position.x, y: element.position.y }, skew: { x: element.skew.x, y: element.skew.y }, visible: element.visible, x: element.x, y: element.y, boundsArea: element.boundsArea, cursor: element.cursor, eventMode: element.eventMode, interactive: element.interactive, interactiveChildren: element.interactiveChildren, hitArea: element.hitArea }; } function setMemoryContainer(element, memory) { memory.isRenderGroup && (element.isRenderGroup = memory.isRenderGroup); memory.blendMode && (element.blendMode = memory.blendMode); memory.tint && (element.tint = memory.tint); memory.alpha && (element.alpha = memory.alpha); memory.angle && (element.angle = memory.angle); memory.renderable && (element.renderable = memory.renderable); memory.rotation && (element.rotation = memory.rotation); if (memory.scale) { if (typeof memory.scale === "number") { element.scale.set(memory.scale, memory.scale); } else { element.scale.set(memory.scale.x, memory.scale.y); } } if (memory.pivot) { if (typeof memory.pivot === "number") { element.pivot.set(memory.pivot, memory.pivot); } else { element.pivot.set(memory.pivot.x, memory.pivot.y); } } memory.position && element.position.set(memory.position.x, memory.position.y); memory.skew && element.skew.set(memory.skew.x, memory.skew.y); memory.visible && (element.visible = memory.visible); memory.x && (element.x = memory.x); memory.y && (element.y = memory.y); memory.boundsArea && (element.boundsArea = memory.boundsArea); memory.cursor && (element.cursor = memory.cursor); memory.eventMode && (element.eventMode = memory.eventMode); memory.interactive && (element.interactive = memory.interactive); memory.interactiveChildren && (element.interactiveChildren = memory.interactiveChildren); memory.hitArea && (element.hitArea = memory.hitArea); memory.width && (element.width = memory.width); memory.height && (element.height = memory.height); } // src/constants.ts var Repeat = "repeat"; function Pause(duration) { return { type: "pause", duration }; } // src/functions/ExportUtility.ts function createExportableElement(element) { try { let elementString = JSON.stringify(element); return JSON.parse(elementString); } catch (e) { console.error("[Pixi'VN] Error creating exportable element", e); throw new Error("[Pixi'VN] Error creating exportable element"); } } // src/classes/ticker/TickerBase.ts var TickerBase = class { /** * @param args The arguments that you want to pass to the ticker. * @param duration The duration of the ticker in seconds. If is undefined, the step will end only when the animation is finished (if the animation doesn't have a goal to reach then it won't finish). @default undefined * @param priority The priority of the ticker. @default UPDATE_PRIORITY.NORMAL */ constructor(args, duration, priority) { /** * Get the id of the ticker. This variable is used in the system to get the ticker by id, {@link geTickerInstanceById} */ this.id = "ticker_id_not_set"; this.args = args; this.duration = duration; this.priority = priority; this.id = this.constructor.prototype.id; } /** * The method that will be called every frame. * This method should be overridden and you can use GameWindowManager.addCanvasElement() to get the canvas element of the canvas, and edit them. * @param _ticker The ticker that is calling this method * @param _args The arguments that you passed when you added the ticker * @param _tags The tags of the canvas elements that are connected to this ticker * @param _tickerId The id of the ticker. You can use this to get the ticker from the {@link GameWindowManager.currentTickers} */ fn(_ticker, _args, _tags, _tickerId) { throw new Error("[Pixi'VN] The method TickerBase.fn() must be overridden"); } }; // src/decorators/TickerDecorator.ts var registeredTickers = {}; function tickerDecorator(name) { return function(target) { if (!name) { name = target.name; } if (registeredTickers[name]) { console.info(`[Pixi'VN] Ticker ${name} already exists, it will be overwritten`); } target.prototype.id = name; registeredTickers[name] = target; }; } function geTickerInstanceById(tickerId, args, duration, priority) { try { let ticker = registeredTickers[tickerId]; if (!ticker) { console.error(`[Pixi'VN] Ticker ${tickerId} not found`); return; } return new ticker(args, duration, priority); } catch (e) { console.error(`[Pixi'VN] Error while getting Ticker ${tickerId}`, e); return; } } // src/functions/EasterEgg.ts function asciiArtLog() { console.info(` ____ _ _ ___ ___ _ | _ \\(_)_ _(_| ) \\ / / \\ | | | |_) | \\ \\/ / |/ \\ \\ / /| \\| | | __/| |> <| | \\ V / | |\\ | |_| |_/_/\\_\\_| \\_/ |_| \\_| `); } // src/types/ticker/TagToRemoveAfterType.ts var tagToRemoveAfter = "tagToRemoveAfter"; // src/managers/WindowManager.ts var _GameWindowManager = class _GameWindowManager { constructor() { } /** * The PIXI Application instance. * It not recommended to use this property directly. */ static get app() { if (!_GameWindowManager._app) { throw new Error("[Pixi'VN] GameWindowManager.app is undefined"); } return _GameWindowManager._app; } /** * If the manager is initialized. */ static get isInitialized() { return _GameWindowManager._isInitialized; } static get screen() { return _GameWindowManager.app.screen; } /** * Initialize the PIXI Application and the interface div. * This method should be called before any other method. * @param element The html element where I will put the canvas. Example: document.body * @param width The width of the canvas * @param height The height of the canvas * @param options The options of PIXI Application * @example * ```typescript * const body = document.body * if (!body) { * throw new Error('body element not found') * } * await GameWindowManager.initialize(body, 1920, 1080, { * backgroundColor: "#303030" * }) * ``` */ static initialize(element, width, height, options) { return __async(this, null, function* () { _GameWindowManager.canvasWidth = width; _GameWindowManager.canvasHeight = height; _GameWindowManager._app = new pixi_js.Application(); return _GameWindowManager.app.init(__spreadValues({ resolution: window.devicePixelRatio || 1, autoDensity: true, width, height }, options)).then(() => { devtools.initDevtools({ app: _GameWindowManager._app }); _GameWindowManager._isInitialized = true; this.addCanvasIntoHTMLElement(element); window.addEventListener("resize", _GameWindowManager.resize); _GameWindowManager.resize(); asciiArtLog(); }); }); } /** * Add the canvas into a html element. * @param element it is the html element where I will put the canvas. Example: document.body */ static addCanvasIntoHTMLElement(element) { if (_GameWindowManager.isInitialized) { element.appendChild(_GameWindowManager.app.canvas); } else { console.error("[Pixi'VN] GameWindowManager is not initialized"); } } /** * Initialize the interface div and add it into a html element. * @param element it is the html element where I will put the interface div. Example: document.getElementById('root') * @example * ```tsx * const root = document.getElementById('root') * if (!root) { * throw new Error('root element not found') * } * GameWindowManager.initializeHTMLLayout(root) * const reactRoot = createRoot(GameWindowManager.htmlLayout) * reactRoot.render( * <App /> * ) * ``` */ static initializeHTMLLayout(element) { let div = document.createElement("div"); div.style.position = "absolute"; div.style.pointerEvents = "none"; element.appendChild(div); _GameWindowManager.htmlLayout = div; _GameWindowManager.resize(); } /* Resize Metods */ /** * This method returns the scale of the screen. */ static get screenScale() { let screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); let screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); return Math.min(screenWidth / _GameWindowManager.canvasWidth, screenHeight / _GameWindowManager.canvasHeight); } /** * This method returns the width of the screen enlarged by the scale. */ static get screenWidth() { return Math.floor(_GameWindowManager.screenScale * _GameWindowManager.canvasWidth); } /** * This method returns the height of the screen enlarged by the scale. */ static get screenHeight() { return Math.floor(_GameWindowManager.screenScale * _GameWindowManager.canvasHeight); } /** * This method returns the horizontal margin of the screen. */ static get horizontalMargin() { let screenWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); return (screenWidth - _GameWindowManager.screenWidth) / 2; } /** * This method returns the vertical margin of the screen. */ static get verticalMargin() { let screenHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); return (screenHeight - _GameWindowManager.screenHeight) / 2; } /** * This method is called when the screen is resized. */ static resize() { if (_GameWindowManager.isInitialized) { let style = _GameWindowManager.app.canvas.style; style.width = `${_GameWindowManager.screenWidth}px`; style.height = `${_GameWindowManager.screenHeight}px`; style.marginLeft = `${_GameWindowManager.horizontalMargin}px`; style.marginRight = `${_GameWindowManager.horizontalMargin}px`; style.marginTop = `${_GameWindowManager.verticalMargin}px`; style.marginBottom = `${_GameWindowManager.verticalMargin}px`; } if (_GameWindowManager.htmlLayout) { _GameWindowManager.htmlLayout.style.width = `${_GameWindowManager.screenWidth}px`; _GameWindowManager.htmlLayout.style.height = `${_GameWindowManager.screenHeight}px`; _GameWindowManager.htmlLayout.style.marginLeft = `${_GameWindowManager.horizontalMargin}px`; _GameWindowManager.htmlLayout.style.marginRight = `${_GameWindowManager.horizontalMargin}px`; _GameWindowManager.htmlLayout.style.marginTop = `${_GameWindowManager.verticalMargin}px`; _GameWindowManager.htmlLayout.style.marginBottom = `${_GameWindowManager.verticalMargin}px`; } } /* Edit Canvas Elements Methods */ /** * This is a dictionary that contains all Canvas Elements of Canvas, currently. */ static get currentCanvasElements() { return _GameWindowManager._children; } /** * Add a canvas element to the canvas. * If there is a canvas element with the same tag, it will be removed. * @param tag The tag of the canvas element. * @param canvasElement The canvas elements to be added. * @example * ```typescript * const texture = await Assets.load('https://pixijs.com/assets/bunny.png'); * const sprite = CanvasSprite.from(texture); * GameWindowManager.addCanvasElement("bunny", sprite); * ``` */ static addCanvasElement(tag, canvasElement) { if (_GameWindowManager._children[tag]) { _GameWindowManager.removeCanvasElement(tag); } _GameWindowManager.app.stage.addChild(canvasElement); _GameWindowManager._children[tag] = canvasElement; _GameWindowManager.childrenTagsOrder.push(tag); } /** * Remove a canvas element from the canvas. * And remove all tickers that are not connected to any canvas element. * @param tags The tag of the canvas element to be removed. * @returns * @example * ```typescript * GameWindowManager.removeCanvasElement("bunny"); * ``` */ static removeCanvasElement(tags) { if (typeof tags === "string") { tags = [tags]; } tags.forEach((tag) => { if (_GameWindowManager._children[tag]) { _GameWindowManager.app.stage.removeChild(_GameWindowManager._children[tag]); delete _GameWindowManager._children[tag]; _GameWindowManager.removeTickerByCanvasElement(tag); } }); _GameWindowManager.childrenTagsOrder = _GameWindowManager.childrenTagsOrder.filter((t) => !tags.includes(t)); } /** * Get a canvas element by the tag. * @param tag The tag of the canvas element. * @returns The canvas element. * @example * ```typescript * const sprite = GameWindowManager.getCanvasElement<CanvasSprite>("bunny"); * ``` */ static getCanvasElement(tag) { return _GameWindowManager._children[tag]; } /** * Check if a DisplayObject is on the canvas. * @param pixiElement The DisplayObject to be checked. * @returns If the DisplayObject is on the canvas. */ static canvasElementIsOnCanvas(pixiElement) { return _GameWindowManager.app.stage.children.includes(pixiElement); } /** * Remove all canvas elements from the canvas. * And remove all tickers that are not connected to any canvas element. */ static removeCanvasElements() { _GameWindowManager.app.stage.removeChildren(); _GameWindowManager._children = {}; _GameWindowManager.childrenTagsOrder = []; _GameWindowManager.removeAllTickers(); } /** * Edit the tag of a canvas element. * @param oldTag The old tag of the canvas element. * @param newTag The new tag of the canvas element. */ static editCanvasElementTag(oldTag, newTag) { if (_GameWindowManager._children[oldTag]) { _GameWindowManager._children[newTag] = _GameWindowManager._children[oldTag]; delete _GameWindowManager._children[oldTag]; } if (_GameWindowManager._currentTickersSteps[oldTag]) { _GameWindowManager._currentTickersSteps[newTag] = _GameWindowManager._currentTickersSteps[oldTag]; delete _GameWindowManager._currentTickersSteps[oldTag]; } for (let id in _GameWindowManager._currentTickers) { let ticker = _GameWindowManager._currentTickers[id]; if (ticker.canvasElementTags.includes(oldTag)) { ticker.canvasElementTags = ticker.canvasElementTags.map((t) => t === oldTag ? newTag : t); if (ticker.args.hasOwnProperty(tagToRemoveAfter)) { let tagToRemoveAfter2 = ticker.args.tagToRemoveAfter; if (typeof tagToRemoveAfter2 === "string") { tagToRemoveAfter2 = [tagToRemoveAfter2]; } if (Array.isArray(tagToRemoveAfter2)) { ticker.args.tagToRemoveAfter = tagToRemoveAfter2.map((t) => t === oldTag ? newTag : t); } } } } for (let timeout in _GameWindowManager._currentTickersTimeouts) { let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout]; if (TickerTimeout.tags.includes(oldTag)) { TickerTimeout.tags = TickerTimeout.tags.map((t) => t === oldTag ? newTag : t); } } } /** Edit Tickers Methods */ /** * Currently tickers that are running. */ static get currentTickers() { return _GameWindowManager._currentTickers; } static get currentTickersList() { return Object.values(_GameWindowManager._currentTickers); } static get currentTickersWithoutCreatedBySteps() { return Object.fromEntries(Object.entries(_GameWindowManager._currentTickers).filter(([_, ticker]) => !ticker.createdByTicketStepsId)); } /** * The steps of the tickers */ static get currentTickersSteps() { return _GameWindowManager._currentTickersSteps; } static generateTickerId(tickerData) { try { return sha1__default.default(JSON.stringify(tickerData)).toString() + "_" + Math.random().toString(36).substring(7); } catch (e) { throw new Error(`[Pixi'VN] Error to generate ticker id: ${e}`); } } /** * Run a ticker. You can run multiple addTicker with the same tag and different tickerClasses. * If you run a ticker with the same tag and tickerClass, the old ticker will be removed. * If already exists a sequence of tickers with the same tag, it will be removed. * @param canvasEslementTag The tag of the canvas element that will use the ticker. * @param ticker The ticker class to be run. * @param args The arguments to be used in the ticker. * @param duration The time to be used in the ticker. This number is in seconds. If it is undefined, the ticker will run forever. * @param priority The priority to be used in the ticker. * @returns * @example * ```typescript * GameWindowManager.addTicker("alien", new RotateTicker({ speed: 0.2 })) * ``` */ static addTicker(canvasElementTag, ticker) { let tickerId = ticker.id; if (typeof canvasElementTag === "string") { canvasElementTag = [canvasElementTag]; } if (!geTickerInstanceById(tickerId, ticker.args, ticker.duration, ticker.priority)) { console.error(`[Pixi'VN] Ticker ${tickerId} not found`); return; } let tickerHistory = { fn: () => { }, id: tickerId, args: createExportableElement(ticker.args), canvasElementTags: canvasElementTag, priority: ticker.priority, duration: ticker.duration }; let id = _GameWindowManager.generateTickerId(tickerHistory); _GameWindowManager.pushTicker(id, tickerHistory, ticker); if (ticker.duration) { let timeout = setTimeout(() => { _GameWindowManager.removeTickerTimeoutInfo(timeout); let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()]; if (tickerTimeoutInfo) { _GameWindowManager.removeTicker(id); } }, ticker.duration * 1e3); _GameWindowManager.addTickerTimeoutInfo(canvasElementTag, tickerId, timeout.toString(), true); } } static pushTicker(id, tickerData, ticker) { _GameWindowManager.removeAssociationBetweenTickerCanvasElement(tickerData.canvasElementTags, ticker); _GameWindowManager._currentTickers[id] = tickerData; tickerData.fn = (t) => { let data = _GameWindowManager._currentTickers[id]; if (data) { ticker == null ? void 0 : ticker.fn(t, data.args, data.canvasElementTags, id); } }; _GameWindowManager.app.ticker.add(tickerData.fn, void 0, tickerData.priority); } /** * Run a sequence of tickers. If exists a ticker steps with the same tag, it will be removed. * @param tag The tag of canvas element that will use the tickers. * @param steps The steps of the tickers. * @param currentStepNumber The current step number. It is used to continue the sequence of tickers. * @returns * @example * ```typescript * GameWindowManager.addTickersSteps("alien", [ * new RotateTicker({ speed: 0.1, clockwise: true }, 2), // 2 seconds * Pause(1), // 1 second * new RotateTicker({ speed: 0.2, clockwise: false }, 2), * Repeat, * ]) * ``` */ static addTickersSteps(tag, steps, currentStepNumber = 0) { if (steps.length == 0) { console.warn("[Pixi'VN] The steps of the tickers is empty"); return; } _GameWindowManager.removeTickerStepByCanvasElement(tag); _GameWindowManager._currentTickersSteps[tag] = { currentStepNumber, steps: steps.map((step) => { if (step === Repeat) { return step; } if (step.hasOwnProperty("type") && step.type === "pause") { return step; } let tickerId = step.id; return { ticker: tickerId, args: createExportableElement(step.args), duration: step.duration }; }) }; _GameWindowManager.runTickersSteps(tag); } static restoneTickersSteps(data) { for (let tag in data) { let steps = data[tag]; _GameWindowManager._currentTickersSteps[tag] = steps; _GameWindowManager.runTickersSteps(tag); } } static runTickersSteps(tag) { let step = _GameWindowManager._currentTickersSteps[tag].steps[_GameWindowManager._currentTickersSteps[tag].currentStepNumber]; if (step === Repeat) { step = _GameWindowManager._currentTickersSteps[tag].steps[0]; _GameWindowManager._currentTickersSteps[tag].currentStepNumber = 0; if (step === Repeat) { console.error("[Pixi'VN] TikersSteps has a RepeatType in the first step"); return; } } if (step.hasOwnProperty("type") && step.type === "pause") { let timeout = setTimeout(() => { let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()]; if (tickerTimeoutInfo) { tickerTimeoutInfo.tags.forEach((tag2) => { _GameWindowManager.nextTickerStep(tag2); }); } _GameWindowManager.removeTickerTimeoutInfo(timeout); }, step.duration * 1e3); _GameWindowManager.addTickerTimeoutInfo(tag, "steps", timeout.toString(), false); return; } let ticker = geTickerInstanceById(step.ticker, step.args, step.duration, step.priority); if (!ticker) { console.error(`[Pixi'VN] Ticker ${step.ticker} not found`); return; } let tickerName = ticker.id; let tickerHistory = { fn: () => { }, id: tickerName, args: createExportableElement(ticker.args), canvasElementTags: [tag], priority: ticker.priority, duration: ticker.duration, createdByTicketStepsId: tag }; let id = _GameWindowManager.generateTickerId(tickerHistory); _GameWindowManager.pushTicker(id, tickerHistory, ticker); if (ticker.duration) { let timeout = setTimeout(() => { let tickerTimeoutInfo = _GameWindowManager._currentTickersTimeouts[timeout.toString()]; if (tickerTimeoutInfo) { _GameWindowManager.removeTicker(id); tickerTimeoutInfo.tags.forEach((tag2) => { _GameWindowManager.nextTickerStep(tag2); }); } _GameWindowManager.removeTickerTimeoutInfo(timeout); }, ticker.duration * 1e3); _GameWindowManager.addTickerTimeoutInfo(tag, tickerName, timeout.toString(), false); } } static nextTickerStep(tag) { if (_GameWindowManager._currentTickersSteps[tag]) { let steps = _GameWindowManager._currentTickersSteps[tag]; if (steps.currentStepNumber + 1 < steps.steps.length) { steps.currentStepNumber++; _GameWindowManager._currentTickersSteps[tag] = steps; _GameWindowManager.runTickersSteps(tag); } else { _GameWindowManager.removeTickerStepByCanvasElement(tag); } } } static onEndOfTicker(canvasElementTags, ticker, canvasElementTagsToDelete, tickerId) { let tickerData = _GameWindowManager._currentTickers[tickerId]; _GameWindowManager.removeAssociationBetweenTickerCanvasElement(canvasElementTags, ticker); _GameWindowManager.removeCanvasElement(canvasElementTagsToDelete); if (tickerData) { _GameWindowManager.removeTicker(tickerId); if (tickerData.duration == void 0 && tickerData.createdByTicketStepsId) { _GameWindowManager.nextTickerStep(tickerData.createdByTicketStepsId); } } } /** * Remove a connection between a canvas element and a ticker. * And remove the ticker if there is no canvas element connected to it. * @param tags The tag of the canvas element that will use the ticker. * @param ticker The ticker class to be removed. * @example * ```typescript * GameWindowManager.removeAssociationBetweenTickerCanvasElement("alien", RotateTicker) * ``` */ static removeAssociationBetweenTickerCanvasElement(tags, ticker) { let tickerId; if (typeof ticker === "string") { tickerId = ticker; } else if (ticker instanceof TickerBase) { tickerId = ticker.id; } else { tickerId = ticker.prototype.id; } if (typeof tags === "string") { tags = [tags]; } for (let id in _GameWindowManager._currentTickers) { let ticker2 = _GameWindowManager._currentTickers[id]; if (ticker2.id === tickerId) { _GameWindowManager._currentTickers[id].canvasElementTags = ticker2.canvasElementTags.filter((e) => !tags.includes(e)); } } for (let timeout in _GameWindowManager._currentTickersTimeouts) { let TickerTimeout = _GameWindowManager._currentTickersTimeouts[timeout]; if (TickerTimeout.ticker === tickerId && TickerTimeout.canBeDeletedBeforeEnd) { _GameWindowManager._currentTickersTimeouts[timeout].tags = TickerTimeout.tags.filter((t) => !tags.includes(t)); } } _GameWindowManager.removeTickersWithoutAssociatedCanvasElement(); } /** * Remove all tickers that are not connected to any existing canvas element. */ static removeTickersWithoutAssociatedCanvasElement() { for (let id in _GameWindowManager._currentTickers) { let ticker = _GameWindowManager._currentTickers[id]; ticker.canvasElementTags = ticker.canvasElementTags.filter((e) => _GameWindowManager._children[e]); if (ticker.canvasElementTags.length === 0) { _GameWindowManager.removeTicker(id); } } for (let tag in _GameWindowManager._currentTickersSteps) { if (_GameWindowManager._children[tag] === void 0) { delete _GameWindowManager._currentTickersSteps[tag]; } } Object.entries(_GameWindowManager._currentTickersTimeouts).forEach(([timeout, { tags }]) => { if (tags.length === 0) { _GameWindowManager.removeTickerTimeout(timeout); } }); } static addTickerTimeoutInfo(tags, ticker, timeout, canBeDeletedBeforeEnd) { if (typeof tags === "string") { tags = [tags]; } _GameWindowManager._currentTickersTimeouts[timeout] = { tags, ticker, canBeDeletedBeforeEnd }; } static removeTickerTimeoutInfo(timeout) { if (typeof timeout !== "string") { timeout = timeout.toString(); } if (_GameWindowManager._currentTickersTimeouts[timeout]) { delete _GameWindowManager._currentTickersTimeouts[timeout]; } } static removeTickerTimeout(timeout) { if (typeof timeout !== "string") { timeout = timeout.toString(); } clearTimeout(Number(timeout)); _GameWindowManager.removeTickerTimeoutInfo(timeout); } static removeTickerTimeoutsByTag(tag, checkCanBeDeletedBeforeEnd) { for (let timeout in _GameWindowManager._currentTickersTimeouts) { let tagsWithoutTagToRemove = _GameWindowManager._currentTickersTimeouts[timeout].tags.filter((t) => t !== tag); if (tagsWithoutTagToRemove.length === 0) { let canBeDeletedBeforeEnd = _GameWindowManager._currentTickersTimeouts[timeout].canBeDeletedBeforeEnd; if (!checkCanBeDeletedBeforeEnd || canBeDeletedBeforeEnd) { _GameWindowManager.removeTickerTimeout(timeout); } } else { _GameWindowManager._currentTickersTimeouts[timeout].tags = tagsWithoutTagToRemove; } } } /** * Remove all tickers from the canvas. */ static removeAllTickers() { _GameWindowManager._currentTickersSteps = {}; Object.keys(_GameWindowManager._currentTickers).forEach((id) => { _GameWindowManager.removeTicker(id); }); _GameWindowManager._currentTickers = {}; for (let timeout in _GameWindowManager._currentTickersTimeouts) { _GameWindowManager.removeTickerTimeout(timeout); } } /** * Remove all tickers from a canvas element. * @param tag The tag of the canvas element that will use the ticker. */ static removeTickerByCanvasElement(tag) { if (typeof tag === "string") { tag = [tag]; } tag.forEach((tag2) => { for (let id in _GameWindowManager._currentTickers) { let ticker = _GameWindowManager._currentTickers[id]; if (ticker.canvasElementTags.includes(tag2)) { _GameWindowManager.removeTicker(id); } } if (_GameWindowManager._currentTickersSteps[tag2]) { delete _GameWindowManager._currentTickersSteps[tag2]; } _GameWindowManager.removeTickerTimeoutsByTag(tag2, false); delete _GameWindowManager._currentTickersSteps[tag2]; }); } static removeTickerStepByCanvasElement(tag) { if (_GameWindowManager._currentTickersSteps[tag]) { delete _GameWindowManager._currentTickersSteps[tag]; } for (let id in _GameWindowManager._currentTickers) { let ticker = _GameWindowManager._currentTickers[id]; if (ticker.createdByTicketStepsId === tag) { _GameWindowManager.removeTicker(id); } } } static removeTicker(tickerId) { let ticker = _GameWindowManager._currentTickers[tickerId]; if (ticker) { if (ticker.args.hasOwnProperty(tagToRemoveAfter)) { let tagToRemoveAfter2 = ticker.args.tagToRemoveAfter; _GameWindowManager.removeCanvasElement(tagToRemoveAfter2); } _GameWindowManager.app.ticker.remove(ticker.fn); delete _GameWindowManager._currentTickers[tickerId]; } } /** * Clear the canvas and the tickers. */ static clear() { _GameWindowManager.removeCanvasElements(); } /* Export and Import Methods */ /** * Export the canvas and the tickers to a JSON string. * @returns The JSON string. */ static exportJson() { return JSON.stringify(this.export()); } /** * Export the canvas and the tickers to an object. * @returns The object. */ static export() { let currentElements = {}; for (let tag in _GameWindowManager._children) { currentElements[tag] = exportCanvasElement(_GameWindowManager._children[tag]); } return { currentTickers: createExportableElement(_GameWindowManager.currentTickersWithoutCreatedBySteps), currentTickersSteps: createExportableElement(_GameWindowManager._currentTickersSteps), currentElements: createExportableElement(currentElements), childrenTagsOrder: createExportableElement(_GameWindowManager.childrenTagsOrder) }; } /** * Import the canvas and the tickers from a JSON string. * @param dataString The JSON string. */ static importJson(dataString) { _GameWindowManager.import(JSON.parse(dataString)); } /** * Import the canvas and the tickers from an object. * @param data The object. */ static import(data) { _GameWindowManager.clear(); try { if (data.hasOwnProperty("childrenTagsOrder") && data.hasOwnProperty("currentElements")) { let currentElements = data["currentElements"]; let childrenTagsOrder = data["childrenTagsOrder"]; childrenTagsOrder.forEach((tag) => { if (currentElements[tag]) { let element = importCanvasElement(currentElements[tag]); _GameWindowManager.addCanvasElement(tag, element); _GameWindowManager.childrenTagsOrder.push(tag); } }); } else { console.error("[Pixi'VN] The data does not have the properties childrenTagsOrder and currentElements"); return; } if (data.hasOwnProperty("currentTickers")) { let currentTickers = data["currentTickers"]; for (let id in currentTickers) { let t = currentTickers[id]; let tags = t.canvasElementTags; let ticker = geTickerInstanceById(t.id, t.args, t.duration, t.priority); if (ticker) { _GameWindowManager.addTicker(tags, ticker); } else { console.error(`[Pixi'VN] Ticker ${t.id} not found`); } } } if (data.hasOwnProperty("currentTickersSteps")) { let currentTickersSteps = data["currentTickersSteps"]; _GameWindowManager.restoneTickersSteps(currentTickersSteps); } } catch (e) { console.error("[Pixi'VN] Error importing data", e); } } }; _GameWindowManager._app = void 0; _GameWindowManager._isInitialized = false; _GameWindowManager._children = {}; /** * The order of the children tags. */ _GameWindowManager.childrenTagsOrder = []; _GameWindowManager._currentTickers = {}; _GameWindowManager._currentTickersSteps = {}; _GameWindowManager._currentTickersTimeouts = {}; var GameWindowManager = _GameWindowManager; // src/classes/ticker/FadeAlphaTicker.ts var FadeAlphaTicker = class extends TickerBase { fn(ticker, args, tags, tickerId) { let type = args.type === void 0 ? "hide" : args.type; let duration = args.duration === void 0 ? 1 : args.duration; let speed = 1 / (duration * 60); let limit = args.limit === void 0 ? type === "hide" ? 0 : 1 : args.limit; let tagToRemoveAfter2 = args.tagToRemoveAfter || []; if (typeof tagToRemoveAfter2 === "string") { tagToRemoveAfter2 = [tagToRemoveAfter2]; } if (type === "hide" && limit < 0) { limit = 0; } if (type === "show" && limit > 1) { limit = 1; } tags.filter((tag) => { var _a; let element = GameWindowManager.getCanvasElement(tag); if (args.startOnlyIfHaveTexture) { if (element && element instanceof pixi_js.Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") { return false; } } return true; }).forEach((tag) => { let element = GameWindowManager.getCanvasElement(tag); if (element && element instanceof pixi_js.Container) { if (type === "show" && element.alpha < limit) { element.alpha += speed * ticker.deltaTime; } else if (type === "hide" && element.alpha > limit) { element.alpha -= speed * ticker.deltaTime; } if (type === "show" && element.alpha >= limit) { element.alpha = limit; GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId); } else if (type === "hide" && element.alpha <= limit) { element.alpha = limit; GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId); } } }); } }; FadeAlphaTicker = __decorateClass([ tickerDecorator() ], FadeAlphaTicker); // src/functions/TickerUtility.ts function updateTickerProgression(args, propertyName, progression, valueConvert) { let limit = valueConvert && progression.limit ? valueConvert(progression.limit) : progression.limit; if (args[propertyName] === void 0 || !progression || args[propertyName] === limit) { return; } if (typeof args[propertyName] === "number") { if (progression.type === "linear") { args[propertyName] = getLinearProgression(args[propertyName], progression); } else if (progression.type === "exponential") { args[propertyName] = getExponentialProgression(args[propertyName], progression); } } else if (args[propertyName] !== void 0 && typeof args[propertyName] === "object" && args[propertyName].haveOwnProperty("x") && args[propertyName].haveOwnProperty("y") && typeof args[propertyName].x === "number" && typeof args[propertyName].y === "number") { if (progression.type === "linear") { args[propertyName].x = getLinearProgression(args[propertyName].x, progression); args[propertyName].y = getLinearProgression(args[propertyName].y, progression); } else if (progression.type === "exponential") { args[propertyName].x = getExponentialProgression(args[propertyName].x, progression); args[propertyName].y = getExponentialProgression(args[propertyName].y, progression); } } } function getLinearProgression(number, progression, valueConvert) { let limit = valueConvert && progression.limit ? valueConvert(progression.limit) : progression.limit; let amt = valueConvert ? valueConvert(progression.amt) : progression.amt; if (limit !== void 0) { if (number > limit && amt > 0) { return limit; } else if (number < limit && amt < 0) { return limit; } } return number + amt; } function getExponentialProgression(number, progression, valueConvert) { let limit = valueConvert && progression.limit ? valueConvert(progression.limit) : progression.limit; if (limit !== void 0) { if (number > limit && progression.percentage > 0) { return limit; } else if (number < limit && progression.percentage < 0) { return limit; } } return number + number * progression.percentage; } // src/classes/ticker/MoveTicker.ts var MoveTicker = class extends TickerBase { fn(ticker, args, tags, tickerId) { let xSpeed = 1; let ySpeed = 1; if (args.speed) { if (typeof args.speed === "number") { xSpeed = this.speedConvert(args.speed); ySpeed = this.speedConvert(args.speed); } else { xSpeed = this.speedConvert(args.speed.x); ySpeed = this.speedConvert(args.speed.y); } } let destination = args.destination; let tagToRemoveAfter2 = args.tagToRemoveAfter || []; if (typeof tagToRemoveAfter2 === "string") { tagToRemoveAfter2 = [tagToRemoveAfter2]; } tags.filter((tag) => { var _a; let element = GameWindowManager.getCanvasElement(tag); if (args.startOnlyIfHaveTexture) { if (element && element instanceof pixi_js.Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") { return false; } } return true; }).forEach((tag) => { let element = GameWindowManager.getCanvasElement(tag); if (element && element instanceof pixi_js.Container) { let xDistance = destination.x - element.x > 0 ? 1 : -1; if (xDistance != 0) { element.x += xDistance * xSpeed * ticker.deltaTime; let newDistance = destination.x - element.x; if (xDistance < 0 && newDistance > 0 || xDistance > 0 && newDistance < 0) { element.x = destination.x; } } let yDistance = destination.y - element.y > 0 ? 1 : -1; if (yDistance != 0) { element.y += yDistance * ySpeed * ticker.deltaTime; let newDistance = destination.y - element.y; if (yDistance < 0 && newDistance > 0 || yDistance > 0 && newDistance < 0) { element.y = destination.y; } } if (element.x == destination.x && element.y == destination.y) { GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId); } } }); if (args.speedProgression) updateTickerProgression(args, "speed", args.speedProgression, this.speedConvert); } speedConvert(speed) { return speed / 6; } }; MoveTicker = __decorateClass([ tickerDecorator() ], MoveTicker); var RotateTicker = class extends TickerBase { fn(ticker, args, tags, tickerId) { let speed = this.speedConvert(args.speed === void 0 ? 1 : args.speed); let clockwise = args.clockwise === void 0 ? true : args.clockwise; let tagToRemoveAfter2 = args.tagToRemoveAfter || []; if (typeof tagToRemoveAfter2 === "string") { tagToRemoveAfter2 = [tagToRemoveAfter2]; } tags.filter((tag) => { var _a; let element = GameWindowManager.getCanvasElement(tag); if (args.startOnlyIfHaveTexture) { if (element && element instanceof pixi_js.Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") { return false; } } return true; }).forEach((tag) => { let element = GameWindowManager.getCanvasElement(tag); if (element && element instanceof pixi_js.Container) { if (clockwise) element.rotation += speed * ticker.deltaTime; else element.rotation -= speed * ticker.deltaTime; if (speed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) { GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId); } } }); if (args.speedProgression) updateTickerProgression(args, "speed", args.speedProgression, this.speedConvert); } speedConvert(speed) { return speed / 60; } }; RotateTicker = __decorateClass([ tickerDecorator() ], RotateTicker); var ZoomTicker = class extends TickerBase { fn(ticker, args, tags, tickerId) { let xSpeed = 0.1; let ySpeed = 0.1; if (args.speed) { if (typeof args.speed === "number") { xSpeed = this.speedConvert(args.speed); ySpeed = this.speedConvert(args.speed); } else { xSpeed = this.speedConvert(args.speed.x); ySpeed = this.speedConvert(args.speed.y); } } let tagToRemoveAfter2 = args.tagToRemoveAfter || []; if (typeof tagToRemoveAfter2 === "string") { tagToRemoveAfter2 = [tagToRemoveAfter2]; } let type = args.type || "zoom"; let xLimit = type === "zoom" ? Infinity : 0; let yLimit = type === "zoom" ? Infinity : 0; if (args.limit) { if (typeof args.limit === "number") { xLimit = args.limit; yLimit = args.limit; } else { xLimit = args.limit.x; yLimit = args.limit.y; } } tags.filter((tag) => { var _a; let element = GameWindowManager.getCanvasElement(tag); if (args.startOnlyIfHaveTexture) { if (element && element instanceof pixi_js.Sprite && ((_a = element.texture) == null ? void 0 : _a.label) == "EMPTY") { return false; } } return true; }).forEach((tag) => { let element = GameWindowManager.getCanvasElement(tag); if (element && element instanceof pixi_js.Container) { if (type === "zoom" && (element.scale.x < xLimit || element.scale.y < yLimit)) { element.scale.x += xSpeed * ticker.deltaTime; element.scale.y += ySpeed * ticker.deltaTime; } else if (type === "unzoom" && (element.scale.x > xLimit || element.scale.y > yLimit)) { element.scale.x -= xSpeed * ticker.deltaTime; element.scale.y -= ySpeed * ticker.deltaTime; } if (type === "zoom") { if (element.scale.x > xLimit) { element.scale.x = xLimit; } if (element.scale.y > yLimit) { element.scale.y = yLimit; } if (element.scale.x >= xLimit && element.scale.y >= yLimit) { element.scale.x = xLimit; element.scale.y = yLimit; this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2); } } else if (type === "unzoom") { if (element.scale.x < xLimit) { element.scale.x = xLimit; } if (element.scale.y < yLimit) { element.scale.y = yLimit; } if (element.scale.x <= xLimit && element.scale.y <= yLimit) { element.scale.x = xLimit; element.scale.y = yLimit; this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2); } } if (xSpeed < 1e-5 && ySpeed < 1e-5 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) { this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2); } } }); if (args.speedProgression) updateTickerProgression(args, "speed", args.speedProgression, this.speedConvert); } speedConvert(speed) { return speed / 60; } onEndOfTicker(tag, tickerId, _element, tagToRemoveAfter2) { GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter2, tickerId); } }; ZoomTicker = __decorateClass([ tickerDecorator() ], ZoomTicker); var ZoomInOutTicker = class extends ZoomTicker { constructor(props, duration, priority) { super(props, duration, priority); } onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2) { if (element.children.length > 0) { let elementChild = element.children[0]; GameWindowManager.addCanvasElement(tag, elementChild); } super.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter2); } }; // src/functions/ImageUtility.ts function addImage(tag, imageUrl) { let image = new CanvasImage(); image.imageLink = imageUrl; GameWindowManager.addCanvasElement(tag, image); return image; } function loadImage(canvasImages) { return __async(this, null, function* () { if (!Array.isArray(canvasImages)) { return [canvasImages]; } let promises = Array(canvasImages.length); for (let i = 0; i < canvasImages.length; i++) { promises[i] = getTexture(canvasImages[i].imageLink); } return Promise.all(promises).then((textures) => { return textures.map((texture, index) => { if (texture) { canvasImages[index].texture = texture; return canvasImages[index]; } canvasImages[index].load(); return canvasImages[index]; }); }); }); } function showImage(tag, imageUrl) { return __async(this, null, function* () { let image = addImage(tag, imageUrl); yield image.load(); return image; }); } function removeCanvasElement(tag) { GameWindowManager.removeCanvasElement(tag); } function showWithDissolveTransition(_0, _1) { return __async(this, arguments, function* (tag, image, props = {}, priority) { var _a; let oldCanvasTag = void 0; if (GameWindowManager.getCanvasElement(tag)) { oldCanvasTag = tag + "_temp_disolve"; GameWindowManager.editCanvasElementTag(tag, oldCanvasTag); } let canvasElement; if (typeof image === "string") { canvasElement = addImage(tag, image); } else { canvasElement = image; GameWindowManager.addCanvasElement(tag, canvasElement); } if (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") { yield canvasElement.load(); } canvasElement.alpha = 0; let effect = new FadeAlphaTicker(__spreadProps(__spreadValues({}, props), { type: "show", tagToRemoveAfter: oldCanvasTag, startOnlyIfHaveTexture: true }), 10, priority); GameWindowManager.addTicker(tag, effect); return; }); } function removeWithDissolveTransition(tag, props = {}, priority) { if (typeof tag === "string") { tag = [tag]; } let effect = new FadeAlphaTicker(__spreadProps(__spreadValues({}, props), { type: "hide", tagToRemoveAfter: tag, startOnlyIfHaveTexture: true }), 10, priority); GameWindowManager.addTicker(tag, effect); } function showWithFadeTransition(_0, _1) { return __async(this, arguments, function* (tag, image, props = {}, priority) { var _a; if (!GameWindowManager.getCanvasElement(tag)) { return showWithDissolveTransition(tag, image, props, priority); } let oldCanvasTag = tag + "_temp_fade"; GameWindowManager.editCanvasElementTag(tag, oldCanvasTag); let canvasElement; if (typeof image === "string") { canvasElement = addImage(tag, image); } else { canvasElement = image; GameWindowManager.addCanvasElement(tag, canvasElement); } if (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") { yield canvasElement.load(); } canvasElement.alpha = 0; GameWindowManager.addTickersSteps(oldCanvasTag, [ new FadeAlphaTicker(__spreadProps(__spreadValues({}, props), { type: "hide", startOnlyIfHaveTexture: true })) ]); GameWindowManager.addTickersSteps(tag, [ Pause(props.duration || 1), new FadeAlphaTicker(__spreadProps(__spreadValues({}, props), { type: "show", startOnlyIfHaveTexture: true })) ]); }); } function removeWithFadeTransition(tag, props = {}, priority) { return removeWithDissolveTransition(tag, props, priority); } function moveIn(_0, _1) { return __async(this, arguments, function* (tag, image, props = { direction: "right" }, priority) { var _a; let canvasElement; if (typeof image === "string") { canvasElement = addImage(tag, image); } else { canvasElement = image; GameWindowManager.addCanvasElement(tag, canvasElement); } if (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") { yield canvasElement.load(); } let destination = { x: canvasElement.x, y: canvasElement.y }; if (props.direction == "up") { canvasElement.y = GameWindowManager.canvasHeight + canvasElement.height; } else if (props.direction == "down") { canvasElement.y = -canvasElement.height; } else if (props.direction == "left") { canvasElement.x = GameWindowManager.canvasWidth + canvasElement.width; } else if (props.direction == "right") { canvasElement.x = -canvasElement.width; } let effect = new MoveTicker(__spreadProps(__spreadValues({}, props), { destination, startOnlyIfHaveTexture: true }), priority); GameWindowManager.addTicker(tag, effect); }); } function moveOut(tag, props = { direction: "right" }, priority) { let canvasElement = GameWindowManager.getCanvasElement(tag); if (!canvasElement) { console.warn("[Pixi'VN] The canvas element is not found."); return; } let destination = { x: canvasElement.x, y: canvasElement.y }; if (props.direction == "up") { destination.y = -canvasElement.height; } else if (props.direction == "down") { destination.y = GameWindowManager.canvasHeight + canvasElement.height; } else if (props.direction == "left") { destination.x = -canvasElement.width; } else if (props.direction == "right") { destination.x = GameWindowManager.canvasWidth + canvasElement.width; } let effect = new MoveTicker(__spreadProps(__spreadValues({}, props), { destination, startOnlyIfHaveTexture: true, tagToRemoveAfter: tag }), priority); GameWindowManager.addTicker(tag, effect); } function zoomIn(_0, _1) { return __async(this, arguments, function* (tag, image, props = { direction: "right" }, priority) { var _a; let canvasElement; if (typeof image === "string") { canvasElement = new CanvasImage({}, image); } else { canvasElement = image; } let container = new CanvasContainer(); container.addChild(canvasElement); container.height = GameWindowManager.canvasHeight; container.width = GameWindowManager.canvasWidth; GameWindowManager.addCanvasElement(tag, container); if (canvasElement instanceof CanvasImage && ((_a = canvasElement.texture) == null ? void 0 : _a.label) == "EMPTY") { yield canvasElement.load(); } if (props.direction == "up") { container.pivot.y = GameWindowManager.canvasHeight; container.pivot.x = GameWindowManager.canvasWidth / 2; container.y = GameWindowManager.canvasHeight; container.x = GameWindowManager.canvasWidth / 2; } else if (props.direction == "down") { container.pivot.y = 0; container.pivot.x = GameWindowManager.canvasWidth / 2; container.y = 0; container.x = GameWindowManager.canvasWidth / 2; } else if (props.direction == "left") { container.pivot.x = GameWindowManager.canvasWidth; container.pivot.y = GameWindowManager.canvasHeight / 2; container.x = GameWindowManager.canvasWidth; container.y = GameWindowManager.canvasHeight / 2; } else if (props.direction == "right") { container.pivot.x = 0; container.pivot.y = GameWindowManager.canvasHeight / 2; container.x = 0; container.y = GameWindowManager.canvasHeight / 2; } container.scale.set(0); let effect = new ZoomInOutTicker(__spreadProps(__spreadValues({}, props), { startOnlyIfHaveTexture: true, type: "zoom", limit: 1 }), priority); GameWindowManager.addTicker(tag, effect); }); } function zoomOut(tag, props = { direction: "right" }, priority) { let canvasElement = GameWindowManager.getCanvasElement(tag); if (!canvasElement) { console.warn("[Pixi'VN] The canvas element is not found."); return; } let container = new CanvasContainer(); container.addChild(canvasElement); container.height = GameWindowManager.canvasHeight; container.width = GameWindowManager.canvasWidth; GameWindowManager.addCanvasElement(tag, container); if (props.direction == "up") { container.pivot.y = GameWindowManager.canvasHeight; container.pivot.x = GameWindowManager.canvasWidth / 2; container.y = GameWindowManager.canvasHeight; container.x = GameWindowManager.canvasWidth / 2; } else if (props.direction == "down") { container.pivot.y = 0; container.pivot.x = GameWindowManager.canvasWidth / 2; container.y = 0; container.x = GameWindowManager.canvasWidth / 2; } else if (props.direction == "left") { container.pivot.x = GameWindowManager.canvasWidth; container.pivot.y = GameWindowManager.canvasHeight / 2; container.x = GameWindowManager.canvasWidth; container.y = GameWindowManager.canvasHeight / 2; } else if (props.direction == "right") { container.pivot.x = 0; container.pivot.y = GameWindowManager.canvasHeight / 2; container.x = 0; container.y = GameWindowManager.canvasHeight / 2; } container.scale.set(1); let effect = new ZoomInOutTicker(__spreadProps(__spreadValues({}, props), { startOnlyIfHaveTexture: true, type: "unzoom", limit: 0, tagToRemoveAfter: tag }), priority); GameWindowManager.addTicker(tag, effect); } exports.addImage = addImage; exports.loadImage = loadImage; exports.moveIn = moveIn; exports.moveOut = moveOut; exports.removeCanvasElement = removeCanvasElement; exports.removeWithDissolveTransition = removeWithDissolveTransition; exports.removeWithFadeTransition = removeWithFadeTransition; exports.showImage = showImage; exports.showWithDissolveTransition = showWithDissolveTransition; exports.showWithFadeTransition = showWithFadeTransition; exports.zoomIn = zoomIn; exports.zoomOut = zoomOut; //# sourceMappingURL=ImageUtility.js.map //# sourceMappingURL=ImageUtility.js.map