js13k-2d icon indicating copy to clipboard operation
js13k-2d copied to clipboard

Texture size must always be power of 2

Open trszdev opened this issue 6 years ago • 2 comments

Code sample:

    import Renderer from 'js13k-2d'

    const scene = Renderer(canvas, { alpha: true })

    scene.background(0, 1, 0, 0.2)
    const atlas = scene.texture(createImageTexture(img), 0)
    const frame = atlas.frame(Renderer.Point(), atlas.size, Renderer.Point(0.5, 0.5))
    const sprites = []
    for (let i = 0; i < 0; i++) {
      const sprite = Renderer.Sprite(frame)
      sprite.rotation = Math.random() * 2 * Math.PI
      sprite.tint = Math.random() * 0xff0000
      scene.add(sprite)
      sprites.push(sprite)
    }
    scene.resize()
    scene.render()

Actual img size is (125px, 81px), so I need to use helper function createImageTexture

const createImageTexture = (img) => {
  const canvas = document.createElement('canvas')
  canvas.width = 1 << Math.ceil(Math.log2(img.width)) // eslint-disable-line
  canvas.height = 1 << Math.ceil(Math.log2(img.height)) // eslint-disable-line
  canvas.getContext('2d').drawImage(img, 0, 0)

  return canvas
}

trszdev avatar Feb 12 '19 17:02 trszdev

and the actual image selected_tile

trszdev avatar Feb 12 '19 17:02 trszdev

In the next release there will be dynamic atlases and the problem will be solved.

kutuluk avatar Feb 13 '19 05:02 kutuluk