Detta är ett startprojekt för spelutvecklingen. Projektet använder

• 11ty för att skapa html
• Sass för att skapa css
• Rollup för att kompilera javascript
• Phaser 3 som spelmotor

Detta är en fortsättning på det vi har övat tidigare och detta är för att ni ska fortsätta använda er av dessa tekniker. Projektets nyheter kommer att förklaras här i denna fil.

Rollup kompilerar javascript till en enkel fil. En så kallad bundle. Detta gör att du kan skriva ditt spel och dela upp koden i flera filer. Rollup skapar sedan en fil och vi kan då även använda oss av npm-paket och annat för den JS som kommer att köras i webbläsaren.

Rollup behöver en config-fil och själva bygg-kommandot körs från projektets package-script.

Phaser3 laddas från en CDN. Detta för att byggtiden med Rollup blir enorm.

dist/
src/
    _data/
    _includes/
        layouts/
            base.njk
        components/
        assets/
            spelgrafik
        js/
            game.js
            scenes.js
        scss/
    index.njk
.eleventy.js
rollup.config.js
package.json

Denna struktur bör du känna igen sedan tidigare. Kolla igenom filerna och bekanta dig med innehållet.

Själva spelet laddas in från index.html(byggs från index.njk). Phaser laddas från CDN och spelet från den bundle som Rollup bygger. Rollup tar alla filerna från js mappen och bygger en fil utav det. Den är länkad från index.html, bundle.js.

API docs Phaser3 notes

Tutorials och annat, se classroom.

Till skillnad från tidigare exempel vi tittat på för Phaser så är nu spelet uppdelat i olika filer och skrivet med ES6 klasser. Ni ser väl om ni gillar denna typ av syntax, det påminner mer om Java.

Phaser initieras först i filen game.js. Filen importerar vilka scener som spelet ska använda och listar dem sen i config objektet.

const config = {
    type: Phaser.AUTO,
    width: 896,
    height: 448,
    pixelArt: true,
    transparent: true,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 400 },
            debug: true
        }
    },
    scene: [PreloadScene, PlayScene, MenuScene],
    parent: 'game'
};

Sedan så initieras ett nytt Phaser spel med denna config.

Scenerna är uppdelad och strukturen på detta är:

• preload
• play
• menu

Detta låter oss använda en preload scene först och när denna har laddat färdigt så visas spelet. Detta kan vara smart om det är mycket och stora filer som ska laddas. Om en önskar en loadingscreen / spinner så placerar ni denna i preload scenen.

När allt laddas från preload så startas play scenen.

¨Kolla kommentarerna i koden!

För projektet kommer vi att jobba med programmet Tiled och tilemaps skapade med det. Ladda ned och installera.

Klicka runt, kolla. Ladda tilemap filen.

Delar av det vi gör och grunden som estetklassen arbetat med är hämtat från denna tutorial. Vill du veta mer om Tiled och hur en tilemap skapas så kolla igenom den.

Filerna som skapas från Tiled, tilemaps sparas sedan som JSON och kan laddas in i Phaser.

Doc

Kollisioner i Phaser kan göras på ett antal olika sätt. Med tilemaps så kan vi ladda in detta från tilemap filen. Det funkar sådär.

Tiled har en collisions editor, för att rita collisions på varje tile. Evig ära till den som får det att funka.

// krocka med allt
this.platforms.setCollisionByExclusion(-1, true);
// om vi sätter en collision property på en tile i Tiled
this.platforms.setCollisionByProperty({ collides: true });
// ladda kollisioner från Tiles collisioner / grupp
this.platforms.setCollisionFromCollisionGroup(
    true,
    true,
    this.platforms
);
platforms.setCollision(1, true, true);

Projektet innehåller ett exempel för en PAUSED skärm. Detta illustrerar hur du kan använda en scen som en meny i spelet.

Anpassa och använd för hiscore, game over osv.

Vill ni spara data som hi-scores kan ni använda localstorage i webbläsaren.

let score = 100;

hiscore = localStorage.getItem('hiscore');

if (score > hiscore) {
    localStorage.setItem('hiscore', score);
}