angularjs - Phaser3: Hvordan lage en grafikk med tekst?

Jeg bruker Phaser3 i Angular-prosjektet mitt og så langt har jeg klart å lage en grafisk firkant og en tekst. Det virker imidlertid komplisert og kjedelig å behandle dem separat. Finnes det en måte å lage ett objekt som lar meg integrere både en grafisk form og tekst sammen?

Dette er hva min nåværende kode er:

    this.graphics = this.add.graphics();
    this.graphics.lineStyle(1,0xff0000);
    this.graphics.fillStyle(0x02455f, .5);
    this.graphics.strokeRect(100,200,250,250);
    this.graphics.fillRect(100,200,250,250);
    this.helloWorld = this.add.text(
      225,
      300,
      "Hello World", {
        font: "40px Arial",
        color: "#ffffff"
      }
    );

Koden ovenfor lager et kvadrat og en tekst, og jeg har plassert dem slik at de er nær hverandre, slik ser det ut: Det koden har vist

Jeg vil behandle dette som en egen separat ting, men jeg kan ikke når det er kodet på denne måten. Finnes det et bedre alternativ for å lage ett enkelt objekt som lar meg legge til begge stilene?

Svar #1

Jeg foreslår å bruke Phaser.GameObjects.Container

Et container-spillobjekt.

En beholder, som navnet tilsier, kan «inneholde» andre typer spillobjekter. Når et spillobjekt legges til i en beholder, blir beholderen ansvarlig for rendering av det.

[...]

Hvis du endrer en transform-egenskap til Container, slik som Container.x eller Container.rotation, vil det automatisk påvirke alle barn også.

Svar #2

Jeg er litt sen til festen, men en annen måte kan være å lage en ny tekstur og tegne/skrive teksten på den. (basert på det offisielle eksemplet)

Du må "bare":

  1. opprett et graphics-objekt
  2. opprett et text-objekt
  3. opprett en renderTexture
  4. tegn graphics og text på renderTexture
  5. slett de opprettede objektene
  6. bruk nå den opprettede nye texture, når og etter behov.

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    },
    banner: false
}; 

function create () {
    
    let graphics = this.make.graphics();
    graphics.lineStyle(1,0xff0000);
    graphics.fillStyle(0x02455f, .5);
    graphics.strokeRect(10, 20, 160, 80);
    graphics.fillRect(10, 20, 160, 80);
    
    let helloWorld = this.add.text( 35, 50, "Hello World")
      .setFont("20px Arial")
      .setColor('#ffffff');
    
    let renderTexture = this.add.renderTexture(9, 19, 172, 102);
    
    renderTexture.draw(graphics);
    renderTexture.draw(helloWorld);
    
    renderTexture.saveTexture('newTexture');
    
    graphics.destroy();
    helloWorld.destroy();
    renderTexture.destroy();
    
    let image = this.add.image(100,100, 'newTexture').setOrigin(.5);
    
     this.tweens.add({
        targets: image,
        angle: {from: 0, to: 360},
        duration: 6000,
        repeat:-1
    });
    
    
}

new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/[email /dist/phaser.js"></script>

Relaterte artikler