ambersz/procgen-skill-tree - Change RQOE2STHW6BJO2M6LPKAGZMVAUL7N2KYXNYYLLF5XDY6BO3YW5KAC

graar texture sprites are just as slow as graphics calls

Created by Bowei Liu on December 20, 2020

RQOE2STHW6BJO2M6LPKAGZMVAUL7N2KYXNYYLLF5XDY6BO3YW5KAC

Dependencies

In channels

main

Change contents

Insertion in frontend/src/pixi/Application.ts at line 196 [5.320]
[4.654]
[4.654]

Insertion in frontend/src/pixi/Application.ts at line 198 [5.320]

[4.655]

[6.1148]

    // TODO(bowei): move this code outta here!!
    // generate a texture
    let g = new Pixi.Graphics();
    g.beginFill(0xff8080);
    g.drawRoundedRect(
      - RenderedChunk.NODE_SIZE_PX / 2,
      - RenderedChunk.NODE_SIZE_PX / 2,
      RenderedChunk.NODE_SIZE_PX,
      RenderedChunk.NODE_SIZE_PX,
      RenderedChunk.NODE_ROUNDED_PX
    );
    // g.x = 200;
    // g.y = 200;
    // this.app.stage.addChild(g);
    let texture = this.app.renderer.generateTexture(g, Pixi.SCALE_MODES.NEAREST, 1);
    // const sprite = new Pixi.Sprite(texture);
    // sprite.x = 300;
    // sprite.y = 300;
    // this.app.stage.addChild(sprite);

Replacement in frontend/src/pixi/Application.ts at line 221 [5.320]
B:BD[6.1247] → [6.1247:1285]
```
      this.config.onFocusedNodeChange
```
[6.1247]
[6.1285]
```
      this.config.onFocusedNodeChange,
      texture
```
Replacement in frontend/src/pixi/Application.ts at line 243 [5.320]
B:BD[6.1553] → [6.1553:1594]
```
    //   this.config.onFocusedNodeChange
```
[6.1553]
[6.1594]
```
    //   this.config.onFocusedNodeChange,
    //   texture
```

Replacement in frontend/src/pixi/Application.ts at line 270 [5.320]

B:BD[2.562] → [2.562:608]

              this.config.onFocusedNodeChange

[2.562]

[2.608]

              this.config.onFocusedNodeChange,
              texture

Replacement in frontend/src/pixi/Application.ts at line 276 [5.320]

B:BD[2.805] → [2.805:854]

            //   this.config.onFocusedNodeChange

[2.805]

[2.854]

            //   this.config.onFocusedNodeChange,
            //   texture

Replacement in frontend/src/pixi/Application.ts at line 301 [5.320]

B:BD[2.1410] → [2.1410:1456]

              this.config.onFocusedNodeChange

[2.1410]

[2.1456]

              this.config.onFocusedNodeChange,
              texture

Replacement in frontend/src/pixi/Application.ts at line 307 [5.320]

B:BD[2.1653] → [2.1653:1702]

            //   this.config.onFocusedNodeChange

[2.1653]

[2.1702]

            //   this.config.onFocusedNodeChange,
            //   texture

Replacement in frontend/src/pixi/Chunk.ts at line 61 [4.1220]

B:BD[4.2249] → [3.567:640]

  public renderedNodes: HashMap<Vector2, Pixi.Graphics> = new HashMap();

[4.2249]

  public renderedNodes: HashMap<Vector2, Pixi.Graphics | Pixi.Sprite> = new HashMap();

Replacement in frontend/src/pixi/Chunk.ts at line 69 [4.1220]

B:BD[4.2409] → [7.1080:1134]

  constructor(chunk: Chunk, onNodeFocus?: Function) {

[4.2409]

[4.2460]

  constructor(chunk: Chunk, onNodeFocus?: Function, texture?: Pixi.Texture) {

Replacement in frontend/src/pixi/Chunk.ts at line 77 [4.1220]

B:BD[4.2631] → [4.2631:2666]

B:BD[4.2666] → [3.688:727]

∅:D[3.727] → [4.2666:2766]

B:BD[4.2666] → [4.2666:2766]

      let g = new Pixi.Graphics();
      this.renderedNodes.put(node, g);
      g.beginFill(0xff8080);
      if (node.x == 0 && node.y == 0) {
        g.beginFill(0xff0000);

[4.2631]

[4.2766]

      let g: Pixi.Graphics | Pixi.Sprite = new Pixi.Graphics();
      if (!texture) {
        // g.beginFill(0xff8080);
        // // if (node.x == 0 && node.y == 0) {
        // //   g.beginFill(0xff0000);
        // // }
        // g.drawRoundedRect(
        //   node.x * RenderedChunk.SPACING_PX - RenderedChunk.NODE_SIZE_PX / 2,
        //   node.y * RenderedChunk.SPACING_PX - RenderedChunk.NODE_SIZE_PX / 2,
        //   RenderedChunk.NODE_SIZE_PX,
        //   RenderedChunk.NODE_SIZE_PX,
        //   RenderedChunk.NODE_ROUNDED_PX
        // );
        // this.renderedNodes.put(node, g);
      } else {
        g = new Pixi.Sprite(texture);
        g.anchor.x = 0.5;
        g.anchor.y = 0.5;
        g.x = node.x * RenderedChunk.SPACING_PX;
        g.y = node.y * RenderedChunk.SPACING_PX;
        this.renderedNodes.put(node, g);

Deletion in frontend/src/pixi/Chunk.ts at line 99 [4.1220]

B:BD[4.2774] → [4.2774:2799]

B:BD[4.2799] → [8.591:853]

∅:D[8.853] → [4.2982:2991]

B:BD[4.2982] → [4.2982:2991]

      g.drawRoundedRect(
        node.x * RenderedChunk.SPACING_PX - RenderedChunk.NODE_SIZE_PX / 2,
        node.y * RenderedChunk.SPACING_PX - RenderedChunk.NODE_SIZE_PX / 2,
        RenderedChunk.NODE_SIZE_PX,
        RenderedChunk.NODE_SIZE_PX,
        RenderedChunk.NODE_ROUNDED_PX
      );

Replacement in frontend/src/pixi/ZLevel.ts at line 33 [7.1252]

B:BD[7.1923] → [7.1923:1978]

  constructor(zLevel: ZLevel, onNodeFocus: Function) {

[7.1923]

[7.1978]

  constructor(zLevel: ZLevel, onNodeFocus: Function, texture?: Pixi.Texture) {

Replacement in frontend/src/pixi/ZLevel.ts at line 45 [7.1252]

B:BD[7.2399] → [3.2743:2808]

      let renderedChunk = new RenderedChunk(chunk, onNodeFocus);

[7.2399]

[3.2808]

      let renderedChunk = new RenderedChunk(chunk, onNodeFocus, texture);