9 Slice Sprite for you ;)

I want to Present you my 9 Slice implementation for PlayCanvas.
As some of you maybe find it useful. I based it on sprite.js .
It is by far not Perfect. Here is a gist link Slice9Sprite.js

I expanded the events that get handled.
You can register:

The variables pixelXMinSlice, pixelYMaxSlice, pixelXMinSlice, pixelYMaxSlice describe where to slice.
pixelYMaxSlice and pixelYMaxSlice can also filled with negative values so it slices relative to the texture borders.

And you can configure with repeatX and repeatY if you want to repeat the Texture instead of stretching it.

margin is needed when the slicing is not accurate enough to display it seamless.

At the moment scales Playcanas imported Pictures to power of 2 sizes.
So you maybe need to slice different than you thought.

No SpriteAtlas Support.

If enough people like it I maybe put it into a git repo for now I think a gist should be sufficient.
I would like to hear some comments especially about Technical Improvements.

best regards


Cool :slight_smile: I’ll give it a try when I get a chance

Its not compiling…

Nice. Some example project demonstrating few features would be useful.

By the way, textures being resized to Power of Two is not PlayCanvas limitation, but WebGL 1.0, as it will not generate mip maps and misbehave in certain scenarios if textures are not power of two.

Also there are number of warnings in console when running code, related to use of deprecated methods, would be good to update it.

Any tips on how to use the click event on sprite.js?

how can I catch only the click event fired by one specific sprite? I mean, the sprite.js fires a click event, how to catch it on the same entity or sprite?

I changed the sprite script to do this where the click event is fire:

if( this.entity.script.SpriteButton ){

This way I must have a SpriteButton script on the same entity… Is there a better way to do this?