[Plugin] Nine Patch Image

[VitaZheltyakov]

I finally finished writing the plugin implements the nine-patch image. A feature of this plugin is the relevant standards adopted among Android-developers. About this standard, you can read here.

Plugin on GitHub:

https://github.com/VitaZheltyakov/phaser-nine-patch-plugin

How plugin works

First, you create a special image according to the standard.

Then, add the plugin:

<script src="js/phaser-nine-patch.js" type="text/javascript"></script>

Then you can create an nine-patch image as follows:

game.add.ninePatch(x, y, width, height, key, keyInCache);

or

new Phaser.NinePatchImage(x, y, width, height, key, keyInCache);

This object behaves like an image, but may contain information about the padding box (read standart)

I also prepared 4 examples.

 

[stupot]

Hi Vita, good work.  This I think, now fills the missing gap in the available Phaser ninepatch implementations by adding the ability to define the stretch areas with embedded extra pixel markers.

As each ninepatch implementation offers differing specific levels of setup and usage, it might not be appropriate to add into Phaser a single limited implementation when it's quite easy for a user to add the individual components they need... but having said that, sometimes something is better than nothing, you have to start somewhere.

 

[VitaZheltyakov]

Guys, I have corrected a small mistake with scaling. Therefore, the files in the first post have been replaced. Reload them.

[VitaZheltyakov]

Guys, I have corrected the error when working on mobile devices. Therefore, the files in the first post have been replaced. Reload them.

[rich]

You should really get this up on GitHub, it'll be much easier for people to grab and integrate with their projects that way. There are loads of nine-slice plugins for Phaser, but this one looks nice, so let me know when a site of some kind (even a github repo + readme) is ready and I can happily add it to the Phaser news queue / newsletter.

[VitaZheltyakov]

Thanks for the answer

[cjke]

@VitaZheltyakov If you need a hand getting the library onto github, ping me on here, happy to help.

 

Btw looks good!

[Igor Georgiev]

Does not work on version 2.4.7, says that group.add is not a function - nine-patch.js  - line 174

[VitaZheltyakov]

24 minutes ago, Igor Georgiev said:

Does not work on version 2.4.7, says that group.add is not a function - nine-patch.js  - line 174

I am tested plugin with Phaser 2.4.7 - work perfectly.

You use code minimization or do you have a variable called "group" ?

---

Я протестировал плагин с версией 2.4.7 - работает идеально.

Вы используете минимизацию кода или у вас есть переменная с названием "group"?

[Igor Georgiev]

Привет
Я понимаю руского языка, но меня болгарин, следовательно , я не могу говорить очень хорошо

I have the following code:

 

//in index.html
    <script language="JavaScript" src="lib/phaser-nine-patch.js"></script>


//in somewhere I want ot use it .js

SomeView = function(game)
{

    this.menu = game.add.ninePatch(300, 300, 500, 500, 'sheet', 'panelBg.png');

};

 

[Igor Georgiev]

25 minutes ago, VitaZheltyakov said:

I am tested plugin with Phaser 2.4.7 - work perfectly.

You use code minimization or do you have a variable called "group" ?

---

Я протестировал плагин с версией 2.4.7 - работает идеально.

Вы используете минимизацию кода или у вас есть переменная с названием "group"?

Hey  the post is up, I forgot to quote you

[VitaZheltyakov]

5 hours ago, Igor Georgiev said:

Hey  the post is up, I forgot to quote you

You are using an atlas, and it is not supported.
At night I see the code againand may be added to support the atlas.

[VitaZheltyakov]

I did not manage to add support atlas.

[Igor Georgiev]

8 hours ago, VitaZheltyakov said:

I did not manage to add support atlas.

Товарищ, спосибо за информацию

I will try to add support for atlas. If I succeed, I will give you the code

[Igor Georgiev]

No need to do it - this works great with 2.4.7

https://github.com/netcell/nine-patch-phaser-plugin

[VitaZheltyakov]

Guys, I have placed the plugin on the GitHub and add a description.

https://github.com/VitaZheltyakov/phaser-nine-patch-plugin

[VitaZheltyakov]

I fixed a few bugs and added new argument "keyInCache". This optional argument specifies the name under which the image is stored in the PIXI.Texturecache. This is useful when creating multiple images. See examples