title category import { OrbitControl } from "@oasis-engine/controls" ; import { AssetType , Camera , Entity , Script , Sprite , SpriteMask , SpriteMaskInteraction , SpriteMaskLayer , SpriteRenderer , Texture2D , Vector3 , WebGLEngine } from "oasis-engine" ; const engine = new WebGLEngine ( "canvas" ) ; engine . canvas . resizeByClientSize ( ) ; const rootEntity = engine . sceneManager . activeScene . createRootEntity ( ) ; const cameraEntity = rootEntity . createChild ( "Camera" ) ; cameraEntity . transform . setPosition ( 0 , 0 , 50 ) ; cameraEntity . addComponent ( Camera ) ; cameraEntity . addComponent ( OrbitControl ) ; engine . resourceManager . load ( [ { url : "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*rgNGR4Vb7lQAAAAAAAAAAAAAARQnAQ" , type : AssetType . Texture2D } , { url : "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*qyhFT5Un5AgAAAAAAAAAAAAAARQnAQ" , type : AssetType . Texture2D } , { url : "https://gw.alipayobjects.com/mdn/rms_7c464e/afts/img/A*pgrpQIneqSUAAAAAAAAAAAAAARQnAQ" , type : AssetType . Texture2D } ] ) . then ( ( textures ) => { const pos = new Vector3 ( ) ; const scale = new Vector3 ( ) ; const sprite = new Sprite ( engine , textures [ 0 ] ) ; const maskSprite0 = new Sprite ( engine , textures [ 1 ] ) ; const maksSprite1 = new Sprite ( engine , textures [ 2 ] ) ; pos . setValue ( - 5 , 0 , 0 ) ; scale . setValue ( 2 , 2 , 2 ) ; addSpriteRenderer ( pos , scale , sprite , SpriteMaskInteraction . VisibleInsideMask , SpriteMaskLayer . Layer0 ) ; addMask ( pos , maskSprite0 , SpriteMaskLayer . Layer0 , ScaleScript ) ; pos . setValue ( 5 , 0 , 0 ) ; scale . setValue ( 2 , 2 , 2 ) ; addSpriteRenderer ( pos , scale , sprite , SpriteMaskInteraction . VisibleOutsideMask , SpriteMaskLayer . Layer1 ) ; addMask ( pos , maksSprite1 , SpriteMaskLayer . Layer1 , RotationScript ) ; } ) ; engine . run ( ) ; /**
 * Add sprite renderer and set mask interaction and layer.
 */ function addSpriteRenderer ( pos , scale , sprite , maskInteraction , maskLayer ) { const entity = rootEntity . createChild ( "Sprite" ) ; const renderer = entity . addComponent ( SpriteRenderer ) ; const { transform } = entity ; transform . position = pos ; transform . scale = scale ; renderer . sprite = sprite ; renderer . maskInteraction = maskInteraction ; renderer . maskLayer = maskLayer ; } /**
 * Add sprite mask and set influence layers, include mask animation script.
 */ function addMask < T extends Script > ( pos , sprite , influenceLayers , scriptType ) { const entity = rootEntity . createChild ( "Mask" ) ; const mask = entity . addComponent ( SpriteMask ) ; entity . addComponent ( scriptType ) ; entity . transform . position = pos ; mask . sprite = sprite ; mask . influenceLayers = influenceLayers ; } class ScaleScript extends Script { private _scaleSpeed : number = 0.01 ; param deltaTime onUpdate ( deltaTime ) { const { transform } = this . entity ; let curScale = transform . scale . x ; if ( curScale <= 0 || curScale >= 2 ) { this . _scaleSpeed *= - 1 ; } curScale += this . _scaleSpeed ; transform . setScale ( curScale , curScale , curScale ) ; } } class RotationScript extends Script { private _rotationSpeed : number = - 0.5 ; param deltaTime onUpdate ( deltaTime ) { this . entity . transform . rotate ( 0 , 0 , this . _rotationSpeed ) ; } }