week2-pixi-sprites.md

Week 2 - Array van sprites

Als je voor elke sprite een property aanmaakt in de Game class, dan wordt het snel onhandig om heel veel sprites te hebben. Daarom maken we de sprite property een array. Let op dat deze property nu sprites heet.

class Game {
    sprites : PIXI.Sprite[] = []
}

For loop

Gebruik nu een for loop om een heleboel sprites tegelijk aan te maken. Gebruik push() om de sprites in de array te zetten.

Geef elke sprite weer een random kleur en positie.

class Game {
    sprites : PIXI.Sprite[] = []
    doneLoading(){
        for (let i = 0; i<10; i++) {
            let fish = new PIXI.Sprite(this.pixi.loader.resources["fish"].texture!)
            this.pixi.stage.addChild(fish)
            this.sprites.push(fish)
        }
    }
}

Animatie

In de update functie kan je door je array heen loopen, om elke sprite te verplaatsen:

class Game {
    ...
    update(delta) {
        for(let sprite of this.sprites){
            sprite.x += 1 * delta
        }
    }
}

Maak de afbeelding na met animerende bubbles en sprites. Kan je de bubbles omhoog laten bewegen en de fishes naar links?

Opdracht

Als het je is gelukt om sprites te tonen in de Game class, dan kan je met behulp van de PixiJS voorbeelden ook Text en Graphics in je Game class plaatsen.

⚠️ Let goed op:

• Je variabelen worden properties van de class
• Het function keyword kan je weglaten
• Gebruik this binnen de class om de eigen properties en functions aan te roepen.

Opdracht

• Laad je eigen afbeeldingen en kijk of je hiermee eigen animatie kan programmeren.
• Bekijk het voorbeeld van een tiling sprite. Kan je hier een animerende achtergrond mee maken?
• Bekijk wat er gebeurt als je een sprite een blendmode geeft met mysprite.blendMode = PIXI.BLEND_MODES.ADD

Links

• Sprite Voorbeeld en API
• Tiling Sprite
• Text
• Graphic
• Blend Modes