jdotrjs / phaser3-nineslice

A Nineslice plugin for Phaser 3
Other
108 stars 28 forks source link

can we have this lib a bit reduced? #20

Open jcyuan opened 5 years ago

jcyuan commented 5 years ago

I mean the file size. even minimized it still has 12kb. our environment only has 4mb space, and Phaser takes 800+kb. I think for the murmurhash we can just use a sequenced number (static member) instead to generate the frame name.

besides, it's better to not eval things when combine all files using webpack, this makes the source file really hard to read when debugging and use it as the source.

jcyuan commented 5 years ago

https://github.com/jdotrjs/phaser3-nineslice/blob/c5ca67dd556bbbcf8b3e176c7ad7cb16304c3057/src/NineSlice.js#L87

actually RenderTexture inherits from GameObject which already has this member.

to dispatch event:

this.emit(....)
jcyuan commented 5 years ago

https://github.com/jdotrjs/phaser3-nineslice/blob/c5ca67dd556bbbcf8b3e176c7ad7cb16304c3057/src/NineSlice.js#L274

better to have a cache to store these pieces, otherwise if update the niceslice frequently there will be a lot of js GC.

and, should call this.scene.make.image({...}, false), to avoid add these pieces into the displayList. I'm not sure if this is a bug in Phaser, make should not add thing into the scene by default, but unfortunately the default value is true if missing.

jcyuan commented 5 years ago

https://github.com/jdotrjs/phaser3-nineslice/blob/c5ca67dd556bbbcf8b3e176c7ad7cb16304c3057/src/NineSlice.js#L288

should pass all the pieces as an array into this method to do the batch drawing.

   if (!foundInCache) {
          frameImage = this.scene.make.image({
                key: this.sourceTex.key,
                frame: curFrame.name
        }).setOrigin(0)
    }
    else frameImage = cache.get(frame.name)

    // then refresh features
    const scaleX = wantWidth / curFrame.width
    const scaleY = wantHeight / curFrame.height
    frameImage
      .setPosition(x, y)    // store XY into it then later the batch drawing will use them automatically
      .setScale(scaleX, scaleY)

   // -------
   // call in the `drawFrames` method but not in the temporary `draw` method
    this.draw([ all image pieces ])   // without x, y