ImageContainer

Il componente ImageContainer estende il componente Container, così puoi utilizzare tutti i metodi e le proprietà di Container. Consente di raggruppare più immagini in un unico componente e di manipolarle come se fossero una sola.

I children di ImageContainer sono componenti ImageSprite.

Per inizializzare questo componente, è necessario passare i seguenti parametri:

• options (Opzionale): Le opzioni per il componente, corrispondenti all'interfaccia ImageContainerOptions<ImageSprite>.
• imageUrls (Opzionale): Una serie di URL o percorsi di immagini. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture.

import { canvas, ImageContainer } from "@drincs/pixi-vn"

let james = new ImageContainer({
    anchor: { x: 0.5, y: 0.5 },
    x: 100,
    y: 100,
}, [
    'https://image.com/body.webp',
    'https://image.com/head.webp',
    'https://image.com/eyes.webp',
])

await james.load()
canvas.add("james", james)

Rispetto al componente Container, ImageContainer aggiunge le seguenti funzionalità:

• load(): Carica tutti gli URL delle immagini e imposta le texture risultanti nei figli.
• Posizionamento aggiuntivo: Allinea e posiziona con la percentuale.

Visualizza

Il modo più semplice per mostrare un gruppo di immagini sul canvas è utilizzare la funzione showImageContainer. Questa funzione combina load e canvas.add.

Questa funzione restituisce un ImageContainer che è possibile utilizzare per manipolare il componente. Questa funzione ha i seguenti parametri:

• alias: L'alias per identificare il componente.
• imageUrls (Opzionale): Una serie di URL o percorsi di immagini. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture.
• options (Optional): The options for the component.

import { canvas, MoveTicker, newLabel, showImageContainer } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    async () => {
        let james = await showImageContainer("james", ["m01-body", "m01-eyes", "m01-mouth"], { 
            xAlign: 0.5, 
            yAlign: 1, 
        }); 
    },
    () => {
        canvas.removeAllTickers();
        let tickerId = canvas.addTicker("james", new MoveTicker({ destination: { x: 0, y: 1, type: "align" } }));
    },
]);

Aggiungi

Per aggiungere un gruppo di immagini al canvas, puoi utilizzare la funzione addImageCointainer. Questa funzione aggiunge solo il componente al canvas; non lo mostra né ne carica la texture. Utilizza canvas.add per aggiungere l'immagine al canvas.

Questa funzione restituisce un ImageContainer che è possibile utilizzare per manipolare il contenitore. Questa funzione ha i seguenti parametri:

• alias: L'alias per identificare il componente.
• imageUrls (Opzionale): Una serie di URL o percorsi di immagini. Se hai inizializzato la matrice delle risorse, puoi utilizzare l'alias della texture.
• options (Optional): The options for the component.

import { addImageCointainer, canvas, ImageContainer, newLabel } from "@drincs/pixi-vn";

export const startLabel = newLabel("start_label", [
    () => {
        let james = await addImageCointainer("james", ["m01-body", "m01-eyes", "m01-mouth"], { 
            xAlign: 0.5, 
            yAlign: 1, 
        }); 
    },
    async () => {
        let james = canvas.find<ImageContainer>("james");
        james && (await james.load());
    },
]);

Rimuovi

Come con altri componenti canvas, puoi rimuovere questo componente utilizzando la funzione canvas.remove.