Merge pull request #160 from DRincs-Productions/158-zoomin-zoomout

158 zoomin zoomout
DRincs-Productions · Jul 16, 2024 · fdb6073 · fdb6073
2 parents 045a744 + 4f6d165
commit fdb6073
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 13 deletions.
diff --git 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<ZoomTickerProps> {
             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
@@ -95,7 +95,7 @@ export default class ZoomTicker extends TickerBase<ZoomTickerProps> {
                         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") {
@@ -108,15 +108,38 @@ export default class ZoomTicker extends TickerBase<ZoomTickerProps> {
                         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)) {
-                        GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId)
+                        this.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter)
                     }
                 }
             })
         if (args.speedProgression)
             updateTickerProgression(args, "speed", args.speedProgression)
     }
+
+    onEndOfTicker<T extends Container = Container>(
+        tag: string,
+        tickerId: string,
+        _element: T,
+        tagToRemoveAfter: string[] | string,
+    ): void {
+        GameWindowManager.onEndOfTicker(tag, this, tagToRemoveAfter, tickerId)
+    }
+}
+
+
+export class ZoomInOutTicker extends ZoomTicker {
+    constructor(props: ZoomTickerProps, duration?: number, priority?: UPDATE_PRIORITY) {
+        super(props, duration, priority)
+    }
+    override onEndOfTicker<T extends Container = Container<ContainerChild>>(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)
+        }
+        super.onEndOfTicker(tag, tickerId, element, tagToRemoveAfter)
+    }
 }
diff --git a/src/functions/ImageUtility.ts b/src/functions/ImageUtility.ts
@@ -1,9 +1,10 @@
 import { Texture, UPDATE_PRIORITY } from 'pixi.js';
-import { CanvasBase, CanvasImage } from '../classes/canvas';
+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 } from '../types/ticker';
+import { FadeAlphaTickerProps, MoveTickerProps, ZoomTickerProps } from '../types/ticker';
 import { tagToRemoveAfterType } from '../types/ticker/TagToRemoveAfterType';
 import { getTexture } from './TextureUtility';
 
@@ -285,6 +286,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 +313,123 @@ export function moveOut(
 
     GameWindowManager.addTicker(tag, effect)
 }
+
+type ZoomInOutProps = {
+    /**
+     * The direction of the zoom effect.
+     */
+    direction: "up" | "down" | "left" | "right",
+} & Omit<ZoomTickerProps, tagToRemoveAfterType | "startOnlyIfHaveTexture" | "type">
+
+export async function zoomIn<T extends CanvasSprite | string = string>(
+    tag: string,
+    image: T,
+    props: ZoomInOutProps = { direction: "right" },
+    priority?: UPDATE_PRIORITY,
+) {
+    let canvasElement: CanvasSprite
+    if (typeof image === "string") {
+        canvasElement = new CanvasImage({}, image)
+    }
+    else {
+        canvasElement = image
+    }
+    if (canvasElement instanceof CanvasImage && canvasElement.texture?.label == "EMPTY") {
+        await canvasElement.load()
+    }
+
+    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(0)
+
+    let effect = new ZoomInOutTicker({
+        ...props,
+        startOnlyIfHaveTexture: true,
+        type: "zoom",
+        limit: 1,
+    }, 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
+    }
+
+    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({
+        ...props,
+        startOnlyIfHaveTexture: true,
+        type: "unzoom",
+        limit: 0,
+        tagToRemoveAfter: tag,
+    }, priority)
+
+    GameWindowManager.addTicker(tag, effect)
+}
diff --git 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
@@ -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 } 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"
 
@@ -37,6 +36,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 +319,35 @@ 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 () => {
+        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)
+        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 }
+        })
+    },
+    async () => {
+        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 }
+        })
+    },
+])
diff --git 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
@@ -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