From cb80dcaf32ee9005cb068370c1b4d3ed707c580f Mon Sep 17 00:00:00 2001 From: Black Ram <67595890+BlackRam-oss@users.noreply.github.com> Date: Tue, 16 Jul 2024 12:17:43 +0200 Subject: [PATCH 1/4] improve ZoomTicker --- src/classes/ticker/ZoomTicker.ts | 9 +++++++++ src/types/ticker/ZoomTickerProps.ts | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/src/classes/ticker/ZoomTicker.ts b/src/classes/ticker/ZoomTicker.ts index e4a2a1a8..8d59e240 100644 --- a/src/classes/ticker/ZoomTicker.ts +++ b/src/classes/ticker/ZoomTicker.ts @@ -58,6 +58,7 @@ export default class ZoomTicker extends TickerBase { yLimit = args.limit.y } } + let anchorToSetAfter = args.anchorToSetAfter tags .filter((tag) => { let element = GameWindowManager.getCanvasElement(tag) @@ -112,6 +113,14 @@ export default class ZoomTicker extends TickerBase { } } if (xSpeed < 0.00001 && ySpeed < 0.00001 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) { + if (element instanceof Sprite && anchorToSetAfter) { + if (typeof anchorToSetAfter === "number") { + element.anchor.set(anchorToSetAfter) + } + else { + element.anchor.set(anchorToSetAfter.x, anchorToSetAfter.y) + } + } GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId) } } diff --git a/src/types/ticker/ZoomTickerProps.ts b/src/types/ticker/ZoomTickerProps.ts index 708a3411..6ac2dd2f 100644 --- a/src/types/ticker/ZoomTickerProps.ts +++ b/src/types/ticker/ZoomTickerProps.ts @@ -1,3 +1,4 @@ +import { Sprite } from "pixi.js" import { TickerProgrationType } from "../../interface" export type ZoomTickerProps = { @@ -34,4 +35,9 @@ export type ZoomTickerProps = { * @default false */ startOnlyIfHaveTexture?: boolean + /** + * The anchor to set after the effect is done. + * This Works only if the canvas element extends {@link Sprite} + */ + anchorToSetAfter?: { x: number, y: number } | number } From 0f0729d10755aed9b15d230d1dc99804c7408545 Mon Sep 17 00:00:00 2001 From: Black Ram <67595890+BlackRam-oss@users.noreply.github.com> Date: Tue, 16 Jul 2024 14:23:10 +0200 Subject: [PATCH 2/4] test --- src/functions/ImageUtility.ts | 101 +++++++++++++++++++++++- src/labels/ImagesAnimationsTestLabel.ts | 22 +++++- 2 files changed, 119 insertions(+), 4 deletions(-) diff --git a/src/functions/ImageUtility.ts b/src/functions/ImageUtility.ts index f84fdbda..d6f0f603 100644 --- a/src/functions/ImageUtility.ts +++ b/src/functions/ImageUtility.ts @@ -1,9 +1,9 @@ import { Texture, UPDATE_PRIORITY } from 'pixi.js'; -import { CanvasBase, CanvasImage } from '../classes/canvas'; -import { FadeAlphaTicker, MoveTicker } from '../classes/ticker'; +import { CanvasBase, CanvasImage, CanvasSprite } from '../classes/canvas'; +import { FadeAlphaTicker, MoveTicker, ZoomTicker } from '../classes/ticker'; import { Pause } from '../constants'; import { GameWindowManager } from '../managers'; -import { FadeAlphaTickerProps, MoveTickerProps } from '../types/ticker'; +import { FadeAlphaTickerProps, MoveTickerProps, ZoomTickerProps } from '../types/ticker'; import { tagToRemoveAfterType } from '../types/ticker/TagToRemoveAfterType'; import { getTexture } from './TextureUtility'; @@ -285,6 +285,7 @@ export function moveOut( ): void { let canvasElement = GameWindowManager.getCanvasElement(tag) if (!canvasElement) { + console.warn("[Pixi'VN] The canvas element is not found.") return } @@ -311,3 +312,97 @@ export function moveOut( GameWindowManager.addTicker(tag, effect) } + +type ZoomInOutProps = { + /** + * The direction of the zoom effect. + */ + direction: "up" | "down" | "left" | "right", +} & Omit + +export async function zoomIn( + tag: string, + image: T, + props: ZoomInOutProps = { direction: "right" }, + priority?: UPDATE_PRIORITY, +) { + let canvasElement: CanvasSprite + if (typeof image === "string") { + canvasElement = addImage(tag, image) + } + else { + canvasElement = image + GameWindowManager.addCanvasElement(tag, canvasElement) + } + if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") { + await canvasElement.load() + } + let oldAnchor = { x: canvasElement.anchor.x, y: canvasElement.anchor.y } + + if (props.direction == "up") { + canvasElement.anchor.y = 1 + // canvasElement.y = GameWindowManager.canvasHeight + } + else if (props.direction == "down") { + canvasElement.anchor.y = 0 + } + else if (props.direction == "left") { + canvasElement.anchor.x = 1 + } + else if (props.direction == "right") { + canvasElement.anchor.x = 0 + } + let limit = { x: canvasElement.scale.x, y: canvasElement.scale.y } + canvasElement.scale.set(0) + + let effect = new ZoomTicker({ + ...props, + anchorToSetAfter: oldAnchor, + startOnlyIfHaveTexture: true, + type: "zoom", + limit, + }, priority) + + GameWindowManager.addTicker(tag, effect) +} + +export function zoomOut( + tag: string, + props: ZoomInOutProps = { direction: "right" }, + priority?: UPDATE_PRIORITY, +) { + let canvasElement = GameWindowManager.getCanvasElement(tag) + if (!canvasElement) { + console.warn("[Pixi'VN] The canvas element is not found.") + return + } + if (!(canvasElement instanceof CanvasSprite)) { + console.error("[Pixi'VN] For zoom effect, the canvas element must be a sprite.") + return + } + + let oldAnchor = { x: canvasElement.anchor.x, y: canvasElement.anchor.y } + + if (props.direction == "up") { + canvasElement.anchor.y = 0 + } + else if (props.direction == "down") { + canvasElement.anchor.y = 1 + } + else if (props.direction == "left") { + canvasElement.anchor.x = 0 + } + else if (props.direction == "right") { + canvasElement.anchor.x = 1 + } + + let effect = new ZoomTicker({ + ...props, + anchorToSetAfter: oldAnchor, + startOnlyIfHaveTexture: true, + tagToRemoveAfter: tag, + type: "unzoom", + }, priority) + + GameWindowManager.addTicker(tag, effect) +} diff --git a/src/labels/ImagesAnimationsTestLabel.ts b/src/labels/ImagesAnimationsTestLabel.ts index a0264aed..20f874fd 100644 --- a/src/labels/ImagesAnimationsTestLabel.ts +++ b/src/labels/ImagesAnimationsTestLabel.ts @@ -4,7 +4,7 @@ import { FadeAlphaTicker, MoveTicker, RotateTicker, ZoomTicker } from "../classe import { Pause, Repeat } from "../constants" import { newLabel } from "../decorators" import { addImage, loadImage, removeWithDissolveTransition, removeWithFadeTransition, setChoiceMenuOptions, setDialogue, showWithDissolveTransition, showWithFadeTransition } from "../functions" -import { moveIn, moveOut } from "../functions/ImageUtility" +import { moveIn, moveOut, zoomIn } from "../functions/ImageUtility" import { GameStepManager, GameWindowManager } from "../managers" import { eggHeadImage, eggHeadName, flowerTopImage, flowerTopName, helmlokImage, helmlokName, juliette, skullyImage, skullyName } from "./TestConstant" @@ -37,6 +37,7 @@ export const imagesAnimationsTest = newLabel(IMAGE_ANIMAIONS_TEST_LABEL, [ new ChoiceMenuOption("Move", imagesMoveTest), new ChoiceMenuOption("Zoom", imagesZoomTest), new ChoiceMenuOption("Move in/out", imagesMoveInOutTest), + new ChoiceMenuOption("Zoom in/out", imagesZoomInOutTest), new ChoiceMenuOptionClose("Cancel", true), ]) }, @@ -319,3 +320,22 @@ const imagesMoveInOutTest = newLabel("___pixi_vn_images_move_in_out_test___", [ moveOut("skully", { speed: 800, direction: "up" }) } ]) + +const imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [ + async () => { + let eggHead = new CanvasImage({ x: 100, y: 100 }, eggHeadImage) + let flowerTop = new CanvasImage({ x: 300, y: 100 }, flowerTopImage) + let helmlok = new CanvasImage({ x: 100, y: 300 }, helmlokImage) + let skully = new CanvasImage({ x: 300, y: 300 }, skullyImage) + zoomIn("eggHead", eggHead, { speed: 3, direction: "down" }) + zoomIn("flowerTop", flowerTop, { + speed: 3, direction: "left", + speedProgression: { type: "exponential", percentage: 0.02 } + }) + zoomIn("helmlok", helmlok, { speed: 3, direction: "right" }) + zoomIn("skully", skully, { + speed: 3, direction: "up", + speedProgression: { type: "exponential", percentage: 0.02 } + }) + } +]) From a1c57628ff91170c39baa8695d5aaf3ad03aedeb Mon Sep 17 00:00:00 2001 From: Black Ram <67595890+BlackRam-oss@users.noreply.github.com> Date: Tue, 16 Jul 2024 17:00:25 +0200 Subject: [PATCH 3/4] zoomOut --- src/classes/ticker/ZoomTicker.ts | 48 +++++++++----- src/functions/ImageUtility.ts | 85 +++++++++++++++++-------- src/functions/index.ts | 2 +- src/labels/ImagesAnimationsTestLabel.ts | 12 +++- src/types/ticker/MoveTickerProps.ts | 2 +- src/types/ticker/RotateTickerProps.ts | 2 +- src/types/ticker/ZoomTickerProps.ts | 6 -- 7 files changed, 102 insertions(+), 55 deletions(-) diff --git a/src/classes/ticker/ZoomTicker.ts b/src/classes/ticker/ZoomTicker.ts index 8d59e240..4de6e199 100644 --- a/src/classes/ticker/ZoomTicker.ts +++ b/src/classes/ticker/ZoomTicker.ts @@ -1,4 +1,4 @@ -import { Container, Sprite, Ticker } from "pixi.js"; +import { Container, ContainerChild, Sprite, Ticker, UPDATE_PRIORITY } from "pixi.js"; import { tickerDecorator } from "../../decorators"; import { updateTickerProgression } from "../../functions/TickerUtility"; import { GameWindowManager } from "../../managers"; @@ -46,8 +46,8 @@ export default class ZoomTicker extends TickerBase { tagToRemoveAfter = [tagToRemoveAfter] } let type = args.type || "zoom" - let xLimit = Infinity - let yLimit = Infinity + let xLimit = type === "zoom" ? Infinity : 0 + let yLimit = type === "zoom" ? Infinity : 0 if (args.limit) { if (typeof args.limit === "number") { xLimit = args.limit @@ -58,7 +58,6 @@ export default class ZoomTicker extends TickerBase { yLimit = args.limit.y } } - let anchorToSetAfter = args.anchorToSetAfter tags .filter((tag) => { let element = GameWindowManager.getCanvasElement(tag) @@ -96,7 +95,7 @@ export default class ZoomTicker extends TickerBase { if (element.scale.x >= xLimit && element.scale.y >= yLimit) { element.scale.x = xLimit element.scale.y = yLimit - GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId) + this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter) } } else if (type === "unzoom") { @@ -109,23 +108,42 @@ export default class ZoomTicker extends TickerBase { if (element.scale.x <= xLimit && element.scale.y <= yLimit) { element.scale.x = xLimit element.scale.y = yLimit - GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId) + this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter) } } if (xSpeed < 0.00001 && ySpeed < 0.00001 && !(args.speedProgression && args.speedProgression.type == "linear" && args.speedProgression.amt != 0)) { - if (element instanceof Sprite && anchorToSetAfter) { - if (typeof anchorToSetAfter === "number") { - element.anchor.set(anchorToSetAfter) - } - else { - element.anchor.set(anchorToSetAfter.x, anchorToSetAfter.y) - } - } - GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId) + this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter) } } }) if (args.speedProgression) updateTickerProgression(args, "speed", args.speedProgression) } + + onEndOfTicker( + tag: string, + tickerId: string, + _element: T, + tagToRemoveAfter: string[] | string, + ): void { + GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId) + } +} + + +export class ZoomInOutTicker extends ZoomTicker { + constructor(tagChild: string, props: ZoomTickerProps, duration?: number, priority?: UPDATE_PRIORITY) { + super(props, duration, priority) + this.tagChild = tagChild + } + tagChild: string + override onEndOfTicker>(conteinerTag: string, tickerId: string, element: T, tagToRemoveAfter: string[] | string): void { + let elementChild = GameWindowManager.getCanvasElement(this.tagChild) + element.removeChildren() + if (elementChild) { + GameWindowManager.addCanvasElement(this.tagChild, elementChild) + } + GameWindowManager.removeCanvasElement(conteinerTag) + super.onEndOfTicker(conteinerTag, tickerId, element, tagToRemoveAfter) + } } diff --git a/src/functions/ImageUtility.ts b/src/functions/ImageUtility.ts index d6f0f603..0e534ea0 100644 --- a/src/functions/ImageUtility.ts +++ b/src/functions/ImageUtility.ts @@ -1,6 +1,7 @@ import { Texture, UPDATE_PRIORITY } from 'pixi.js'; -import { CanvasBase, CanvasImage, CanvasSprite } from '../classes/canvas'; -import { FadeAlphaTicker, MoveTicker, ZoomTicker } from '../classes/ticker'; +import { CanvasBase, CanvasContainer, CanvasImage, CanvasSprite } from '../classes/canvas'; +import { FadeAlphaTicker, MoveTicker } from '../classes/ticker'; +import { ZoomInOutTicker } from '../classes/ticker/ZoomTicker'; import { Pause } from '../constants'; import { GameWindowManager } from '../managers'; import { FadeAlphaTickerProps, MoveTickerProps, ZoomTickerProps } from '../types/ticker'; @@ -318,7 +319,7 @@ type ZoomInOutProps = { * The direction of the zoom effect. */ direction: "up" | "down" | "left" | "right", -} & Omit +} & Omit export async function zoomIn( tag: string, @@ -337,33 +338,48 @@ export async function zoomIn( if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") { await canvasElement.load() } - let oldAnchor = { x: canvasElement.anchor.x, y: canvasElement.anchor.y } + + let container = new CanvasContainer() + container.addChild(canvasElement) + container.height = GameWindowManager.canvasHeight + container.width = GameWindowManager.canvasWidth + let containerTag = tag + "_zoomIn_container" + GameWindowManager.addCanvasElement(containerTag, container) if (props.direction == "up") { - canvasElement.anchor.y = 1 - // canvasElement.y = GameWindowManager.canvasHeight + 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") { - canvasElement.anchor.y = 0 + container.pivot.y = 0 + container.pivot.x = GameWindowManager.canvasWidth / 2 + container.y = 0 + container.x = GameWindowManager.canvasWidth / 2 } else if (props.direction == "left") { - canvasElement.anchor.x = 1 + 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") { - canvasElement.anchor.x = 0 + container.pivot.x = 0 + container.pivot.y = GameWindowManager.canvasHeight / 2 + container.x = 0 + container.y = GameWindowManager.canvasHeight / 2 } - let limit = { x: canvasElement.scale.x, y: canvasElement.scale.y } - canvasElement.scale.set(0) + container.scale.set(0) - let effect = new ZoomTicker({ + let effect = new ZoomInOutTicker(tag, { ...props, - anchorToSetAfter: oldAnchor, startOnlyIfHaveTexture: true, type: "zoom", - limit, + limit: 1, }, priority) - GameWindowManager.addTicker(tag, effect) + GameWindowManager.addTicker(containerTag, effect) } export function zoomOut( @@ -376,33 +392,46 @@ export function zoomOut( console.warn("[Pixi'VN] The canvas element is not found.") return } - if (!(canvasElement instanceof CanvasSprite)) { - console.error("[Pixi'VN] For zoom effect, the canvas element must be a sprite.") - return - } - let oldAnchor = { x: canvasElement.anchor.x, y: canvasElement.anchor.y } + let container = new CanvasContainer() + container.addChild(canvasElement) + container.height = GameWindowManager.canvasHeight + container.width = GameWindowManager.canvasWidth + let containerTag = tag + "_zoomOut_container" + GameWindowManager.addCanvasElement(containerTag, container) if (props.direction == "up") { - canvasElement.anchor.y = 0 + 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") { - canvasElement.anchor.y = 1 + container.pivot.y = 0 + container.pivot.x = GameWindowManager.canvasWidth / 2 + container.y = 0 + container.x = GameWindowManager.canvasWidth / 2 } else if (props.direction == "left") { - canvasElement.anchor.x = 0 + 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") { - canvasElement.anchor.x = 1 + container.pivot.x = 0 + container.pivot.y = GameWindowManager.canvasHeight / 2 + container.x = 0 + container.y = GameWindowManager.canvasHeight / 2 } - let effect = new ZoomTicker({ + let effect = new ZoomInOutTicker(tag, { ...props, - anchorToSetAfter: oldAnchor, startOnlyIfHaveTexture: true, - tagToRemoveAfter: tag, type: "unzoom", + limit: 0, + tagToRemoveAfter: tag, }, priority) - GameWindowManager.addTicker(tag, effect) + GameWindowManager.addTicker(containerTag, effect) } diff --git a/src/functions/index.ts b/src/functions/index.ts index f3e83647..dc52667d 100644 --- a/src/functions/index.ts +++ b/src/functions/index.ts @@ -1,7 +1,7 @@ export { clearChoiceMenuOptions, clearDialogue, getChoiceMenuOptions, getDialogue, getDialogueHistory, setChoiceMenuOptions, setDialogue } from './DialogueUtility'; export { getFlag, setFlag } from './FlagsUtility'; export { clearAllGameDatas } from './GameUtility'; -export { addImage, loadImage, removeCanvasElement, removeWithDissolveTransition, removeWithFadeTransition, showImage, showWithDissolveTransition, showWithFadeTransition } from './ImageUtility'; +export { addImage, loadImage, moveIn, moveOut, removeCanvasElement, removeWithDissolveTransition, removeWithFadeTransition, showImage, showWithDissolveTransition, showWithFadeTransition, zoomIn, zoomOut } from './ImageUtility'; export { getSaveData, getSaveJson, loadSaveData, loadSaveJson } from './SavesUtility'; export { getTexture } from './TextureUtility'; diff --git a/src/labels/ImagesAnimationsTestLabel.ts b/src/labels/ImagesAnimationsTestLabel.ts index 20f874fd..e397e14b 100644 --- a/src/labels/ImagesAnimationsTestLabel.ts +++ b/src/labels/ImagesAnimationsTestLabel.ts @@ -3,8 +3,7 @@ import { CanvasImage } from "../classes/canvas" import { FadeAlphaTicker, MoveTicker, RotateTicker, ZoomTicker } from "../classes/ticker" import { Pause, Repeat } from "../constants" import { newLabel } from "../decorators" -import { addImage, loadImage, removeWithDissolveTransition, removeWithFadeTransition, setChoiceMenuOptions, setDialogue, showWithDissolveTransition, showWithFadeTransition } from "../functions" -import { moveIn, moveOut, zoomIn } from "../functions/ImageUtility" +import { addImage, loadImage, moveIn, moveOut, removeWithDissolveTransition, removeWithFadeTransition, setChoiceMenuOptions, setDialogue, showWithDissolveTransition, showWithFadeTransition, zoomIn, zoomOut } from "../functions" import { GameStepManager, GameWindowManager } from "../managers" import { eggHeadImage, eggHeadName, flowerTopImage, flowerTopName, helmlokImage, helmlokName, juliette, skullyImage, skullyName } from "./TestConstant" @@ -323,6 +322,7 @@ const imagesMoveInOutTest = newLabel("___pixi_vn_images_move_in_out_test___", [ const imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [ async () => { + GameWindowManager.removeCanvasElements() let eggHead = new CanvasImage({ x: 100, y: 100 }, eggHeadImage) let flowerTop = new CanvasImage({ x: 300, y: 100 }, flowerTopImage) let helmlok = new CanvasImage({ x: 100, y: 300 }, helmlokImage) @@ -337,5 +337,11 @@ const imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [ speed: 3, direction: "up", speedProgression: { type: "exponential", percentage: 0.02 } }) - } + }, + async () => { + zoomOut("eggHead", { speed: 1, direction: "down" }) + zoomOut("flowerTop", { speed: 1, direction: "left" }) + zoomOut("helmlok", { speed: 1, direction: "right" }) + zoomOut("skully", { speed: 1, direction: "up" }) + }, ]) diff --git a/src/types/ticker/MoveTickerProps.ts b/src/types/ticker/MoveTickerProps.ts index 8df49cba..b4a8976d 100644 --- a/src/types/ticker/MoveTickerProps.ts +++ b/src/types/ticker/MoveTickerProps.ts @@ -2,7 +2,7 @@ import { TickerProgrationType } from "../../interface" export type MoveTickerProps = { /** - * The speed of the movement in pixels per second + * The speed of the movement * @default 1 */ speed?: number | { x: number, y: number } diff --git a/src/types/ticker/RotateTickerProps.ts b/src/types/ticker/RotateTickerProps.ts index 4888453d..3402aa7d 100644 --- a/src/types/ticker/RotateTickerProps.ts +++ b/src/types/ticker/RotateTickerProps.ts @@ -2,7 +2,7 @@ import { TickerProgrationType } from "../../interface" export type RotateTickerProps = { /** - * The speed of the rotation in pixels per second + * The speed of the rotation * @default 1 */ speed?: number diff --git a/src/types/ticker/ZoomTickerProps.ts b/src/types/ticker/ZoomTickerProps.ts index 6ac2dd2f..708a3411 100644 --- a/src/types/ticker/ZoomTickerProps.ts +++ b/src/types/ticker/ZoomTickerProps.ts @@ -1,4 +1,3 @@ -import { Sprite } from "pixi.js" import { TickerProgrationType } from "../../interface" export type ZoomTickerProps = { @@ -35,9 +34,4 @@ export type ZoomTickerProps = { * @default false */ startOnlyIfHaveTexture?: boolean - /** - * The anchor to set after the effect is done. - * This Works only if the canvas element extends {@link Sprite} - */ - anchorToSetAfter?: { x: number, y: number } | number } From 4f6d165afafab247c47e2bb3879cd6bdb9c47e64 Mon Sep 17 00:00:00 2001 From: Black Ram <67595890+BlackRam-oss@users.noreply.github.com> Date: Tue, 16 Jul 2024 19:27:34 +0200 Subject: [PATCH 4/4] zoomOut --- src/classes/ticker/ZoomTicker.ts | 16 ++++++---------- src/functions/ImageUtility.ts | 18 ++++++++---------- src/labels/ImagesAnimationsTestLabel.ts | 14 ++++++++++---- 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/classes/ticker/ZoomTicker.ts b/src/classes/ticker/ZoomTicker.ts index 4de6e199..8da0d058 100644 --- a/src/classes/ticker/ZoomTicker.ts +++ b/src/classes/ticker/ZoomTicker.ts @@ -132,18 +132,14 @@ export default class ZoomTicker extends TickerBase { export class ZoomInOutTicker extends ZoomTicker { - constructor(tagChild: string, props: ZoomTickerProps, duration?: number, priority?: UPDATE_PRIORITY) { + constructor(props: ZoomTickerProps, duration?: number, priority?: UPDATE_PRIORITY) { super(props, duration, priority) - this.tagChild = tagChild } - tagChild: string - override onEndOfTicker>(conteinerTag: string, tickerId: string, element: T, tagToRemoveAfter: string[] | string): void { - let elementChild = GameWindowManager.getCanvasElement(this.tagChild) - element.removeChildren() - if (elementChild) { - GameWindowManager.addCanvasElement(this.tagChild, elementChild) + override onEndOfTicker>(tag: string, tickerId: string, element: T, tagToRemoveAfter: string[] | string): void { + if (element.children.length > 0) { + let elementChild = element.children[0] + GameWindowManager.addCanvasElement(tag, elementChild as any) } - GameWindowManager.removeCanvasElement(conteinerTag) - super.onEndOfTicker(conteinerTag, tickerId, element, tagToRemoveAfter) + super.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter) } } diff --git a/src/functions/ImageUtility.ts b/src/functions/ImageUtility.ts index 0e534ea0..cbe934ad 100644 --- a/src/functions/ImageUtility.ts +++ b/src/functions/ImageUtility.ts @@ -329,11 +329,10 @@ export async function zoomIn( ) { let canvasElement: CanvasSprite if (typeof image === "string") { - canvasElement = addImage(tag, image) + canvasElement = new CanvasImage({}, image) } else { canvasElement = image - GameWindowManager.addCanvasElement(tag, canvasElement) } if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") { await canvasElement.load() @@ -343,8 +342,7 @@ export async function zoomIn( container.addChild(canvasElement) container.height = GameWindowManager.canvasHeight container.width = GameWindowManager.canvasWidth - let containerTag = tag + "_zoomIn_container" - GameWindowManager.addCanvasElement(containerTag, container) + GameWindowManager.addCanvasElement(tag, container) if (props.direction == "up") { container.pivot.y = GameWindowManager.canvasHeight @@ -372,14 +370,14 @@ export async function zoomIn( } container.scale.set(0) - let effect = new ZoomInOutTicker(tag, { + let effect = new ZoomInOutTicker({ ...props, startOnlyIfHaveTexture: true, type: "zoom", limit: 1, }, priority) - GameWindowManager.addTicker(containerTag, effect) + GameWindowManager.addTicker(tag, effect) } export function zoomOut( @@ -397,8 +395,7 @@ export function zoomOut( container.addChild(canvasElement) container.height = GameWindowManager.canvasHeight container.width = GameWindowManager.canvasWidth - let containerTag = tag + "_zoomOut_container" - GameWindowManager.addCanvasElement(containerTag, container) + GameWindowManager.addCanvasElement(tag, container) if (props.direction == "up") { container.pivot.y = GameWindowManager.canvasHeight @@ -424,8 +421,9 @@ export function zoomOut( container.x = 0 container.y = GameWindowManager.canvasHeight / 2 } + container.scale.set(1) - let effect = new ZoomInOutTicker(tag, { + let effect = new ZoomInOutTicker({ ...props, startOnlyIfHaveTexture: true, type: "unzoom", @@ -433,5 +431,5 @@ export function zoomOut( tagToRemoveAfter: tag, }, priority) - GameWindowManager.addTicker(containerTag, effect) + GameWindowManager.addTicker(tag, effect) } diff --git a/src/labels/ImagesAnimationsTestLabel.ts b/src/labels/ImagesAnimationsTestLabel.ts index e397e14b..bfeac8d6 100644 --- a/src/labels/ImagesAnimationsTestLabel.ts +++ b/src/labels/ImagesAnimationsTestLabel.ts @@ -339,9 +339,15 @@ const imagesZoomInOutTest = newLabel("___pixi_vn_images_zoom_in_out_test___", [ }) }, async () => { - zoomOut("eggHead", { speed: 1, direction: "down" }) - zoomOut("flowerTop", { speed: 1, direction: "left" }) - zoomOut("helmlok", { speed: 1, direction: "right" }) - zoomOut("skully", { speed: 1, direction: "up" }) + zoomOut("eggHead", { + speed: 3, direction: "down", + speedProgression: { type: "exponential", percentage: 0.02 } + }) + zoomOut("flowerTop", { speed: 3, direction: "left" }) + zoomOut("helmlok", { speed: 3, direction: "right" }) + zoomOut("skully", { + speed: 3, direction: "up", + speedProgression: { type: "exponential", percentage: 0.02 } + }) }, ])