title category import { AssetType , Camera , Sprite , SpriteAtlas , SpriteRenderer , 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 , 4 ) ; cameraEntity . addComponent ( Camera ) . isOrthographic = true ; engine . resourceManager . load < SpriteAtlas > ( { url : "https://gw.alipayobjects.com/os/bmw-prod/da0bccd4-020a-41d5-82e0-a04f4413d9a6.atlas" , type : AssetType . SpriteAtlas } ) . then ( ( atlas ) => { const from = new Vector3 ( ) ; const to = new Vector3 ( ) ; let sprite = atlas . getSprite ( "terrains-5" ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 6 , - 6 , 0 ) , to . setValue ( 6 , - 6 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 6 , 6 , 0 ) , to . setValue ( 6 , 6 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 6 , - 5 , 0 ) , to . setValue ( - 6 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 6 , - 5 , 0 ) , to . setValue ( 6 , 5 , 0 ) ) ; sprite = atlas . getSprite ( "terrains-3" ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 5 , - 2 , 0 ) , to . setValue ( - 5 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 4 , - 3 , 0 ) , to . setValue ( - 4 , - 1 , 0 ) ) ; addSpriteRenderer ( sprite , from . setValue ( - 3 , - 2 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 2 , - 3 , 0 ) , to . setValue ( - 2 , - 2 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 1 , - 2 , 0 ) , to . setValue ( - 1 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 5 , - 2 , 0 ) , to . setValue ( 5 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 4 , - 3 , 0 ) , to . setValue ( 4 , - 1 , 0 ) ) ; addSpriteRenderer ( sprite , from . setValue ( 3 , - 2 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 2 , - 3 , 0 ) , to . setValue ( 2 , - 2 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 1 , - 2 , 0 ) , to . setValue ( 1 , 5 , 0 ) ) ; sprite = atlas . getSprite ( "terrains-0" ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 0 , - 5 , 0 ) , to . setValue ( 0 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 1 , - 3 , 0 ) , to . setValue ( 1 , - 3 , 0 ) ) ; sprite = atlas . getSprite ( "terrains-45" ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 5 , - 5 , 0 ) , to . setValue ( - 1 , - 4 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 4 , - 3 , 0 ) , to . setValue ( - 4 , - 3 , 0 ) ) ; addSpriteRenderer ( sprite , from . setValue ( - 5 , - 3 , 0 ) ) ; addSpriteRenderer ( sprite , from . setValue ( - 3 , - 3 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 1 , - 5 , 0 ) , to . setValue ( 5 , - 4 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 4 , - 3 , 0 ) , to . setValue ( 4 , - 3 , 0 ) ) ; addSpriteRenderer ( sprite , from . setValue ( 5 , - 3 , 0 ) ) ; addSpriteRenderer ( sprite , from . setValue ( 3 , - 3 , 0 ) ) ; sprite = atlas . getSprite ( "terrains-46" ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 4 , 0 , 0 ) , to . setValue ( - 2 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( - 3 , - 1 , 0 ) , to . setValue ( - 2 , - 1 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 2 , 0 , 0 ) , to . setValue ( 4 , 5 , 0 ) ) ; addGroupSpriteRenderer ( sprite , from . setValue ( 2 , - 1 , 0 ) , to . setValue ( 3 , - 1 , 0 ) ) ; addSpriteRenderer ( atlas . getSprite ( "npcs-0" ) , from . setValue ( 0 , - 4 , 1 ) ) ; addSpriteRenderer ( atlas . getSprite ( "npcs-7" ) , from . setValue ( - 1 , - 3 , 1 ) ) ; } ) ; param spriteName param from param to function addGroupSpriteRenderer ( sprite , from , to ) { const { x : fromX , y : fromY } = from ; const { x : toX , y : toY } = to ; for ( let i = fromX , n = toX ; i <= n ; i ++ ) { for ( let j = fromY , m = toY ; j <= m ; j ++ ) { addSpriteRenderer ( sprite , from . setValue ( i , j , 0 ) ) ; } } } param spriteName param position function addSpriteRenderer ( sprite , position ) { const spriteEntity = rootEntity . createChild ( ) ; spriteEntity . transform . position = position ; spriteEntity . transform . scale . setValue ( 4 , 4 , 4 ) ; spriteEntity . addComponent ( SpriteRenderer ) . sprite = sprite ; } engine . run ( ) ;