음악, 삶, 개발

간단한 Grid 그려보기 본문

개발 Web/PixiJS

간단한 Grid 그려보기

Lee_____ 2021. 7. 21. 01:53

import * as PIXI from 'pixi.js'

const app = new PIXI.Application({ 

    resizeTo : window,

})

document.body.appendChild(app.view)

/* DOC : http://pixijs.download/release/docs/PIXI.Sprite.html */

const SPRITE_COLUMN_COUNT   = 8
const SPRITE_ROW_COUNT      = 5
const SPRITE_TOTAL_COUNT    = SPRITE_COLUMN_COUNT * SPRITE_ROW_COUNT
const SPRITE_WIDTH          = app.screen.width / SPRITE_COLUMN_COUNT
const SPRITE_HEIGHT         = app.screen.height / SPRITE_ROW_COUNT

const container = new PIXI.Container()

const sprites: PIXI.Sprite[] = []

for (let i = 0; i < SPRITE_TOTAL_COUNT; ++i) {

    const sprite    = new PIXI.Sprite(PIXI.Texture.WHITE)

    sprite.tint     = 0xffffff * Math.random()
    sprite.width    = SPRITE_WIDTH
    sprite.height   = SPRITE_HEIGHT
    sprite.x        = sprite.width * (i % SPRITE_COLUMN_COUNT)
    sprite.y        = sprite.height * Math.floor(i / SPRITE_COLUMN_COUNT)

    sprites.push(sprite)
    container.addChild(sprite)

}

app.stage.addChild(container)