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

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

In Browser

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

Usage

import {Game, GameObject, resource, RESOURCE_TYPE} from '@eva/eva.js'
import {RendererSystem} from '@eva/plugin-renderer'
import {Img, ImgSystem} from '@eva/plugin-renderer-img'
import {Mask, MaskSystem, MASK_TYPE} from '@eva/plugin-renderer-mask'

resource.addResource([
  {
    name:'heart',
    type: RESOURCE_TYPE.IMAGE,
    src: {
      image: {
        type:'png',
        url:'//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png'
      }
    },
    preload: false
  },
  {
    name:'tag',
    type: RESOURCE_TYPE.SPRITE,
    src: {
      image: {
        type:'png',
        url:'//gw.alicdn.com/mt/TB1KcVte4n1gK0jSZKPXXXvUXXa-150-50.png'
      },
      json: {
        type:'json',
        url:'//gw.alicdn.com/mt/TB1d4lse4D1gK0jSZFsXXbldVXa.json'
      }
    },
    preload: true
  }
])

const game = new Game({
  systems: [
    new RendererSystem({
      canvas: document.querySelector('#canvas'),
      width: 750,
      height: 1000
    }),
    new ImgSystem(),
    new MaskSystem()
  ]
})

game.scene.transform.size = {
  width: 750,
  height: 1000
}

const image = new GameObject('image', {
  size: {width: 200, height: 200}
})
image.addComponent(
  new Img({
    resource:'heart'
  })
)
game.scene.addChild(image)
image.addComponent(
  new Mask({
    type: MASK_TYPE.Circle,
    style: {
      x: 100,
      y: 100,
      radius: 70
    }
  })
)

const image1 = new GameObject('image', {
  size: {width: 200, height: 200 },
  position: {x: 400, y: 300}
})
image1.addComponent(
  new Img({
    resource:'heart'
  })
)

image1.addComponent(
  new Mask({
    type: MASK_TYPE.Img,
    style: {
      width: 100,
      height: 100,
      x: 20,
      y: 20
    },
    resource:'heart'
  })
)
game.scene.addChild(image1)

const image2 = new GameObject('image', {
  size: {width: 200, height: 200 },
  position: {x: 100, y: 400}
})
image2.addComponent(
  new Img({
    resource:'heart'
  })
)

image2.addComponent(
  new Mask({
    type: MASK_TYPE.Sprite,
    style: {
      width: 100,
      height: 100,
      x: 20,
      y: 20
    },
    resource:'tag',
    spriteName:'task.png'
  })
)
game.scene.addChild(image2)

Options

type: MARK_TYPE

style: object

Type	Type	Attribute
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}}