Texture Packer for VS Code

Easily create texture atlases for Phaser, Pixi, and more by grouping images into a folder!

How it works

Right click on a folder with images and then select Create Texture Atlas to pack them into 1 or more atlases.

The atlas.config.json created in that folder is used for configuration options. The atlas format is automatically detected based on your project. (Currently works with Phaser 3 or Pixi projects.)

If prettier is installed then the JSON files will be formatted like everything else in your project!

Requirements

This extension only works on desktop versions of VS Code and cannot be run in the browser.

Atlas Configuration Options

name: string

default: atlas

The file name of the generated texture atlases.

format: 'phaser3' | 'pixi' | 'phaser-hash' | 'json-hash'

default: json-hash

This value is automatically detected for Phaser 3 or Pixi projects.

maxWidth: number

default: 2048

The maximum width of an atlas.

maxHeight: number

default: 2048

The maximum height of an atlas.

fixedSize: boolean

default: false

Will make atlas maxWidth x maxHeight when set to true.

pot: boolean

default: false

Force atlases to be power of two.

padding: number

default: 0

extrude: number

default: 0

allowRotation: boolean

default: true

Allow textures to be rotated in the atlas.

shareIdentical: boolean

default: true

Textures that are the same but have different filenames will only be packed once to optimize atlas size.

allowTrim: boolean

default: true

Trim empty whitespace to optimize atlas size.

trimMode: 'trim' | 'crop'

default: 'trim'

keepExtensions: boolean

default: false

Keep file extensions in texture frame keys otherwise only the filename will be used.

textureFormat: 'png' | 'jpg'

default: png

algorithm: 'max-rects' | 'max-rects-bin' | 'optimal'

default: max-rects-bin

maxRectsMethod: 'smart' | 'square' | 'smart-square' | 'smart-area' | 'square-area' | 'smart-square-area'

default: smart

maxRectsBinMethod: 'best-short-side-fit' | 'best-long-side-fit' | 'best-area-fit' | 'bottom-left-rule' | 'contact-point-rule'

default: best-short-side-fit

deep: boolean

default: false

Include textures in nested folders when deep is set to true. Nested folders that have an atlas.config.json are automatically ignored.

outDir: string

default: ./

Relative path from atlas.config.json where generated atlas image and JSON files should be saved to.

For example, saving to the the parent folder would be: "ourDir": "..".

Got an issue?

This extension is very new and not yet tested in a wide variety of projects or workflows so let us know if something's not working or if there's a use-case that you'd love to see!

Reach out on Twitter @iamsupertommy or @ourcadehq

Join the Ourcade Discord: https://discord.gg/p3vfese

Release Notes

v0.0.6

November 3rd, 2022

Add JSON Schema for atlas.config.json files to provide autocompletion when modifying them.

See Change Log for notes on previous releases.