NinePatch

We often encounter some pictures that are not fixed in size, but the surrounding or four-pass style is not deformed, that is, the .9 picture, such as a message bubble. If you directly set the width and height, the entire bubble picture will be deformed. In the picture below, the second one is a bubble created by Jiugongge, and the last one is created by directly stretching the picture. The first two are clearly in line with expectations. Demo

image.png

Install

With NPM

  1. npm i @eva/plugin-renderer @eva/plugin-renderer-nine-patch

In Browser

  1. <script src="https://unpkg.com/@eva/plugin-renderer-nine-patch@1.2.x/dist/EVA.plugin.renderer.ninePatch.min.js"></script>

Usage

  1. import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  3. import {NinePatch, NinePatchSystem} from '@eva/plugin-renderer-nine-patch'
  5. resource.addResource([
  6.   {
  7.     name:'nine',
  8.     type: RESOURCE_TYPE.IMAGE,
  9.     src: {
  10.       image: {
  11.         type:'png',
  12.         url:'https://img.alicdn.com/tfs/TB17uSKkQ9l0K4jSZFKXXXFjpXa-363-144.png'
  13.       }
  14.     },
  15.     preload: false
  16.   }
  17. ])
  19. const game = new Game({
  20.   systems: [
  21.     new RendererSystem({
  22.       canvas: document.querySelector('#canvas'),
  23.       width: 750,
  24.       height: 1000,
  25.       backgroundColor: 0xffffff
  26.     }),
  27.     new NinePatchSystem()
  28.   ]
  29. })
  31. const patch = new GameObject('patch', {
  32.   size: {width: 360, height: 145 },
  33.   origin: {x: 0, y: 0 },
  34.   position: {
  35.     x: 10,
  36.     y: 10
  37.   },
  38.   anchor: {
  39.     x: 0,
  40.     y: 0
  41.   }
  42. })
  43. const ninePatch = patch.addComponent(
  44.   new NinePatch({
  45.     resource:'nine',
  46.     leftWidth: 100,
  47.     topHeight: 40,
  48.     rightWidth: 40,
  49.     bottomHeight: 40
  50.   })
  51. )
  53. const patch1 = new GameObject('patch1', {
  54.   size: {width: 660, height: 345 },
  55.   origin: {x: 0, y: 0 },
  56.   position: {
  57.     x: 10,
  58.     y: 300
  59.   },
  60.   anchor: {
  61.     x: 0,
  62.     y: 0
  63.   }
  64. })
  66. const ninePatch1 = patch1.addComponent(
  67.   new NinePatch({
  68.     resource:'nine',
  69.     leftWidth: 100,
  70.     topHeight: 40,
  71.     rightWidth: 40,
  72.     bottomHeight: 40
  73.   })
  74. )
  76. game.scene.addChild(patch)
  77. game.scene.addChild(patch1)

Options

resource string

Resource Name

spriteName

This property can be set if the resource type is Sprite

leftWidth

Correspond to Figure A below

topHeight

Correspond to Figure C below

rightWidth

Correspond to Figure B below

bottomHeight

Corresponding to the figure D below

image.png