Mask

The Mask component can cut the display range of the GameObject, and a renderer needs to be installed before use.

Demo

Install

With NPM

  1. npm i @eva/plugin-renderer @eva/plugin-renderer-mask

In Browser

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

Usage

  1. import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
  2. import {RendererSystem} from '@eva/plugin-renderer'
  3. import {Img, ImgSystem} from '@eva/plugin-renderer-img'
  4. import {Mask, MaskSystem, MASK_TYPE} from '@eva/plugin-renderer-mask'
  6. resource.addResource([
  7.   {
  8.     name:'heart',
  9.     type: RESOURCE_TYPE.IMAGE,
  10.     src: {
  11.       image: {
  12.         type:'png',
  13.         url:'//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
  14.       }
  15.     },
  16.     preload: false
  17.   },
  18.   {
  19.     name:'tag',
  20.     type: RESOURCE_TYPE.SPRITE,
  21.     src: {
  22.       image: {
  23.         type:'png',
  24.         url:'//gw.alicdn.com/mt/TB1KcVte4n1gK0jSZKPXXXvUXXa-150-50.png'
  25.       },
  26.       json: {
  27.         type:'json',
  28.         url:'//gw.alicdn.com/mt/TB1d4lse4D1gK0jSZFsXXbldVXa.json'
  29.       }
  30.     },
  31.     preload: true
  32.   }
  33. ])
  35. const game = new Game({
  36.   systems: [
  37.     new RendererSystem({
  38.       canvas: document.querySelector('#canvas'),
  39.       width: 750,
  40.       height: 1000
  41.     }),
  42.     new ImgSystem(),
  43.     new MaskSystem()
  44.   ]
  45. })
  47. game.scene.transform.size = {
  48.   width: 750,
  49.   height: 1000
  50. }
  52. const image = new GameObject('image', {
  53.   size: {width: 200, height: 200}
  54. })
  55. image.addComponent(
  56.   new Img({
  57.     resource:'heart'
  58.   })
  59. )
  60. game.scene.addChild(image)
  61. image.addComponent(
  62.   new Mask({
  63.     type: MASK_TYPE.Circle,
  64.     style: {
  65.       x: 100,
  66.       y: 100,
  67.       radius: 70
  68.     }
  69.   })
  70. )
  72. const image1 = new GameObject('image', {
  73.   size: {width: 200, height: 200 },
  74.   position: {x: 400, y: 300}
  75. })
  76. image1.addComponent(
  77.   new Img({
  78.     resource:'heart'
  79.   })
  80. )
  82. image1.addComponent(
  83.   new Mask({
  84.     type: MASK_TYPE.Img,
  85.     style: {
  86.       width: 100,
  87.       height: 100,
  88.       x: 20,
  89.       y: 20
  90.     },
  91.     resource:'heart'
  92.   })
  93. )
  94. game.scene.addChild(image1)
  96. const image2 = new GameObject('image', {
  97.   size: {width: 200, height: 200 },
  98.   position: {x: 100, y: 400}
  99. })
  100. image2.addComponent(
  101.   new Img({
  102.     resource:'heart'
  103.   })
  104. )
  106. image2.addComponent(
  107.   new Mask({
  108.     type: MASK_TYPE.Sprite,
  109.     style: {
  110.       width: 100,
  111.       height: 100,
  112.       x: 20,
  113.       y: 20
  114.     },
  115.     resource:'tag',
  116.     spriteName:'task.png'
  117.   })
  118. )
  119. game.scene.addChild(image2)

Options

type: MARK_TYPE

style: object

| | Circle | MASK_TYPE.Circle | {style: {x,y,radius}} | | Ellipse | MASK_TYPE.Ellipse | {style:{x,y,width,height}} | | Rectangle | MASK_TYPE.Rect | {style:{x,y,width,height}} | | Rounded rectangle | MASK_TYPE.RoundedRect | {style:{x,y,width,height,radius}} | | Polygon | MASK_TYPE.Polygon | {style: {paths: [x,y,x,y,x,y]}} or {style: {paths: [{x,y},{x,y},{x ,y}]}} | | Picture | MASK_TYPE.Img | {resource,style:{x,y,width,height}} | | Sprite image | MASK_TYPE.Sprite | {resource,spriteName,style:{x,y,width,height}} |