js13k-2d
js13k-2d copied to clipboard
Texture size must always be power of 2
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
}
and the actual image

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