108 lines
3.7 KiB
Markdown
108 lines
3.7 KiB
Markdown
# pixi-textures
|
|
Compressed textures and retina support for pixi v4. Loader can choose textures depends on platform and rendering mode.
|
|
|
|
Supports DDS (S3TC DXT1-3-5, ATC, ATCA/ATC explicit, ATCI/ATC interpolated) and PVR (PVRTC, ETC1, S3TC DXT1-3-5, PVRTC 2-4bpp RGB-RGBA)
|
|
|
|
Supports advanced DXT compression [crunch](https://github.com/BinomialLLC/crunch)
|
|
|
|
## Minimum demo
|
|
|
|
Pretty easy to hack parser into your loader.
|
|
|
|
```js
|
|
var loader = new PIXI.loaders.Loader();
|
|
loader.before(PIXI.compressedTextures.imageParser());
|
|
loader.add('building', 'building.dds');
|
|
loader.load(function(loader, resources) {
|
|
var sprite = new PIXI.Sprite(resources['building'].texture);
|
|
});
|
|
```
|
|
|
|
## Full example
|
|
|
|
If your app has no detection of supported formats it is not ready for production.
|
|
|
|
This [example](http://pixijs.github.io/examples/#/textures/dds.js)
|
|
shows how to handle multiple resolutions and multiple image formats for single images and for atlases.
|
|
|
|
```js
|
|
var renderer = PIXI.autoDetectRenderer(800, 600, { resolution: window.devicePixelRatio || 1 });
|
|
renderer.view.style.width = "800px";
|
|
renderer.view.style.height = "600px";
|
|
document.body.appendChild(renderer.view);
|
|
|
|
// this will form list of allowed extensions based on renderer.
|
|
var extensions = PIXI.compressedTextures.detectExtensions(renderer);
|
|
|
|
var loader = new PIXI.loaders.Loader();
|
|
// this middleware chooses appropriate file. It also has imageParser() inside
|
|
loader.before(PIXI.compressedTextures.extensionChooser(extensions));
|
|
// use @2x texture if resolution is 2, use dds format if its windows
|
|
var textureOptions1 = { metadata: {choice: ["@2x.png", ".dds", "@2x.dds"]} };
|
|
// use dds format if its windows but dont care for retina
|
|
var textureOptions2 = { metadata: {choice: [".dds"]} };
|
|
// while loading atlas, choose resolution for atlas and choose format for image
|
|
var atlasOptions = { metadata: { choice: ["@2x.json", "@1x.json"], imageMetadata: { choice: [".dds"]} } };
|
|
|
|
var stage = new PIXI.Container();
|
|
|
|
loader.add('building1', '_assets/compressed/building1.png', textureOptions1)
|
|
.add('building2', '_assets/compressed/building2.png', textureOptions2)
|
|
.add('atlas1', '_assets/compressed/buildings.json', atlasOptions )
|
|
.load(function(loader, resources) {
|
|
var spr1 = new PIXI.Sprite(resources.building1.texture);
|
|
var spr2 = new PIXI.Sprite(resources.building2.texture);
|
|
var spr3 = new PIXI.Sprite.fromImage('goldmine_10_5.png');
|
|
var spr4 = new PIXI.Sprite.fromImage('wind_extractor_10.png');
|
|
spr1.position.y = spr3.position.y = 150;
|
|
spr2.position.y = spr4.position.y = 350;
|
|
spr1.position.x = spr2.position.x = 250;
|
|
spr3.position.x = spr4.position.x = 450;
|
|
stage.addChild(spr1);
|
|
stage.addChild(spr2);
|
|
stage.addChild(spr3);
|
|
stage.addChild(spr4);
|
|
});
|
|
|
|
animate();
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
renderer.render(stage);
|
|
}
|
|
```
|
|
|
|
## Note about atlases
|
|
|
|
PIXI recognizes resolution of atlas by suffix (@1x, @2x, ... )
|
|
|
|
If you dont specify that, resolution of the atlas will be taken from "meta.scale" which in our example is 1 and 0.5 instead of 2 and 1. It will shrink everything!
|
|
|
|
|
|
### Browserify
|
|
|
|
If you use browserify you can use pixi-textures like this:
|
|
|
|
```js
|
|
var PIXI = require('pixi.js'),
|
|
TEX = require('pixi-compressed-textures');
|
|
|
|
var loader = new PIXI.loaders.Loader();
|
|
// textureParser will form list of allowed extensions based on renderer.
|
|
loader.before(PIXI.compressedTextures.extensionChooser(PIXI.compressedTextures.detectExtensions(renderer)));
|
|
```
|
|
|
|
## Building
|
|
|
|
You will need to have [node][node]
|
|
|
|
Then you can install dependencies and build:
|
|
|
|
```js
|
|
npm i && npm run build
|
|
```
|
|
|
|
That will output the built distributables to `./dist`.
|
|
|
|
[node]: http://nodejs.org/
|