can i control basetexture size?

[GBear]

hi...

 

i wanna make two version client to optimize 

 

so i will control basetexture but it will be same Image but different size(resoltuion).

 

for example. 

 

 

HI-Res version will use 2048*2048

Low-Res version will use 1024*1024

 

but this two basetexture will be same image but different size..

 

 

how can i control with pixi easliy..?

 

 

thx..

 

 

[ivan.popelyshev]

Which one is your "base" version?

 

We can use trick from https://github.com/pixijs/pixi-compressed-textures , 

 

Assume that 1024x1024 is your "native" and you have two files:

 

• thing.png - 1024x1024

• [email protected] - 2048x2048

//this thing tells loader to use @2x whenever is possibleloader.before(PIXI.compressedTextures.extensionChooser(["@2x.png"]));//specify this options if resource has @2x versionvar highResOptions = { metadata: {choice: ["@2x.png"]} };loader.add("thing", "thing.png", highResOptions);

In case if 2048x2048 is your native, use @0.5x instead.

 

In both cases Texture will be created with resolution=2 or 0.5, and sprites will still have the "native" size.

 

For atlases use @2x.json, but I doubt your spine atlas loader is ready for this, it works only for texturePacker json files for now

 

UPD. you need latest pixi for that

[GBear]

is this controlled automatically like resolution? or does it have to control by self?

 

for example when i set highResOption by metadata. 

it have to control by self like resoltion or json scale? or it will be controlled like trim/crop?

 

 

 

 

second question(different thing)

 how can i use texture compress?

 

 

thx a lot always....

[ivan.popelyshev]

There's an option to generate different JSON files and atlases in texturePacker. I think there's an option in spine too.

 

Places that use "resolution":

 

1) loader.

2) textureParser

3) BaseTexture

4) Sprite (roundToPixels)

 

Texture compression (https://github.com/pixijs/pixi-compressed-textures) can be used if you convert PNG to DDS (windows) and PVR (iOS). It reduces texture size in videomemory which can be helpful in your case.

 

The point is - you dont have to use "resolution" variable inside the game. Use it only when you prepare different resolutions and in the loader, then it will work automagical

[GBear]

 

Texture compression (https://github.com/p...ressed-textures) can be used if you convert PNG to DDS (windows) and PVR (iOS). It reduces texture size in videomemory which can be helpful in your case.

 

can DDS use only for window? 

i wanna service with same foramt on ios, android, window ...   

is there any idea? 

 

i wanna use same JSON and different image size.

in this case how can i control it?

[chg]

There's an option to generate different JSON files and atlases in texturePacker. I think there's an option in spine too.

 

Places that use "resolution":

 

1) loader.

2) textureParser

3) BaseTexture

4) Sprite (roundToPixels)

 

Texture compression (https://github.com/pixijs/pixi-compressed-textures) can be used if you convert PNG to DDS (windows) and PVR (iOS). It reduces texture size in videomemory which can be helpful in your case.

 

The point is - you dont have to use "resolution" variable inside the game. Use it only when you prepare different resolutions and in the loader, then it will work automagical

Hi Ivan - I notice you've been recommending texture compression a few times now and I'm not sure it makes sense for the kinds of uses you seem to be suggesting it for.

Firstly, while your textures might take up a quarter of their uncompressed size in "video memory" - HTML5 games typically don't have hundreds or even tens of megabytes of uncompressed texture data to really benefit from this kind of optimisation.

Secondly, as it's not practical to do compression to these formats "on the fly" you end up with a with significantly bigger files to download - you don't even get the quarter of the size of the base image I mentioned before as the files need to include compressed versions of all the mip levels (which for uncompressed textures can be generated automatically). Even zipped/gzipped you wind up with files much bigger than the PNG files for the images despite the end result looking comparable (in terms of artifacts) to a JPEG with even more higher compression that'd be smaller again.

Thirdly, you have to support S3 (aka DXTn - I think this is what you meant by DDS(?!)) for desktops, PVRTC for iOS and a fraction of Android users (PowerVR chips only), Ericsson compression (ETC) and Android Texture Compression for the remainder and providing uncompressed/regular image fallbacks for Canvas and WebGL users where the browser doesn't provide the extensions required even if the hardware might support it. You might wind up with even more if you want to support subformats (eg. alot of PowerVR chips will support the better looking PVRTC2 some will only support the lower quality PVRTC though). And you'll probably end up playing around with each format tweaking the settings to find something that looks ok.

The Crunch library might help a bit, I've not dug to deep into what it's support is like the non-S3 formats it was designed for.

Regarding the OP's question I don't really understand the optimisation he/she is asking about. Depending on what they are doing (of course) mipmapping will probably take care ensuring that the shader only samples from a 1024x1024 texture when it's onscreen on-canvas size is that or less and they can always for the texture to a smaller size by drawing it scaled by 50% to a temporary canvas which is then used as the source image for Pixi

[ivan.popelyshev]

Hi Ivan - I notice you've been recommending texture compression a few times now and I'm not sure it makes sense for the kinds of uses you seem to be suggesting it for.

 

 

Yeah, now I think in that particular case wont be good

[GBear]

hi..

Regarding the OP's question I don't really understand the optimisation he/she is asking about. Depending on what they are doing (of course) mipmapping will probably take care ensuring that the shader only samples from a 1024x1024 texture when it's onscreen on-canvas size is that or less and they can always for the texture to a smaller size by drawing it scaled by 50% to a temporary canvas which is then used as the source image for Pixi

this is only to optimize for my game

 

there is purpose to reduce capacity and rendering load.

 

PC version need to not care of it but mobiles(android and ios) is not...

 

I can not be drawing sprites like i want on mobiles.

so i need to optimize every parts.like reducing texture, skip rendering, culling, ....etc..

 

skipping is easy.. 
but texture controlling seem be not easy.  becuase normally there have to control different data(image or like json(spine animation data)..

 

so i'm finding good solution(or good function) with pixi.. 

 

thx..

[chg]

Suggestion - drop the canvas res a bit if your game doesn't get much faster then dropping the res of your textures will not help

NB: understand the implication of this test are one-way, if it does help, it still mightn't be from sampling textures less as dropping the canvas res also reduces the pixels you are drawing. Still it should be a fast-ish thing for you to try to get an idea of whether you might even expect improvements from optimising what the mobile GPU actually has to sample from and rasterise.

[ivan.popelyshev]

Yeah, the point is

1. you have to choose your "native" resolution, which will be fixed. width:800 height:600 for example. All game code must be based on that thing.
2.  switch renderer resolution between 0.5x, 1x and 2x, or 1x 2x 4x depends on what did you choose for "native".
3. all atlases must have a number of versions - @1x @2x @4x. TexturePacker or Shoebox will help you with that.

If you want auto-resize , then follow this algorithm:

 

1. choose resolution. If width and height of window is too big - @2x, too small - @0.5x
2. choose renderer width/height so renderer.width * renderer.resolution will fir into screen width
3. notify loader which resolution of textures it needs.

[ivan.popelyshev]

Also, you can choose resolution of base texture when you create it, and its easiest way if you have only a couple of textures  There's  "resolution" parameter in BaseTexture constructor

[GBear]

thx guys...

 

i will try first and i will tell you again..

thx a lots.. 

 

[GBear]

hi 

 

i test with like '@0.5x'  with altas

 

it looks good..

 

but there are some problems with pixi-spine..

 

this is Atlas object on pixi-spine

spine.Atlas = function (atlasText, baseUrl, crossOrigin) 

Atlas object has below code

var resolution = PIXI.utils.getResolutionOfUrl(baseUrl);

but this code can't use.

 

it will be only 1.

 

when i set baseUrl like 

./data/packed/@0.5x

it set 0.5 but didn't cut @0.5x 

 

so base texture couldn't create becuase it created wrong url

page.rendererObject = PIXI.BaseTexture.fromImage(baseUrl + line, crossOrigin);

so there need to modify something..

 

 

second thing

  - to use same atlas and different image 

 

  atlas has always file name like this

map_berg_object.pngsize: 4096,4096format: RGBA8888filter: Linear,Linearrepeat: none

so map_berg_object name will be changed to new name like '[email protected]

but there couldn't

 

in this case 'resolution' have to be always 1. 

 

 

i can modify code only for own code..

but it's not good to update new version.

 

how do you think about this?

[ivan.popelyshev]

I'll look at pixi-spine code, thank you.

 

There must be an atlas for every resolution too. [email protected] 

[ivan.popelyshev]

Ok, now I see the problem, and Im thiking about solution

[ivan.popelyshev]

Not working yet, Im preparing a patch.

 

these my setting by the way, I have 1024 as my @1x:

 

[GBear]

hi 

 

in this case below files is generated
  packed.atals  packed.png
  [email protected]  [email protected]

  [email protected]  [email protected]

 

in this case there is not to need anything to calculate  like below

            region.originalWidth = parseInt(tuple[0]) / resolution;            region.originalHeight = parseInt(tuple[1]) / resolution;            reader.readTuple(tuple);            region.offsetX = parseInt(tuple[0]) / resolution;            region.offsetY = parseInt(tuple[1]) / resolution;

because atlas have all information to generate texture from basetexture

 

 

in my case i will be using  one atlas and different PNGs like
 packed.atlas   packed.png  [email protected]

 

in this case have to calculate to smaller basetexture.

 

and maybe 'resolution have to multiply when  basetexture is 0.5x 

in this case if divide 'resolution', it will be range over

 

 

i tested like this 

              page.vWrap = spine.Atlas.TextureWrap.repeat;            else if (direction == "xy")                page.uWrap = page.vWrap = spine.Atlas.TextureWrap.repeat;            if(resolution != 1) {                resolution = 1;                page.rendererObject = PIXI.BaseTexture.fromImage(baseUrl + '[email protected]', crossOrigin);                //page.rendererObject = PIXI.BaseTexture.fromImage(baseUrl + 'map_berg_object.png', crossOrigin);            }else page.rendererObject = PIXI.BaseTexture.fromImage(baseUrl + line, crossOrigin);            this.pages.push(page);        } else {

in this case i can draw good image with low base texture..

this code is only for testing

 

thx...

                 
 

[ivan.popelyshev]

I'm very glad that we are working on that together. I'll commit changes in a few hours

[ivan.popelyshev]

Still working on it (even in new year), its just difficult to do it within current architecture.

 

UPD: https://github.com/englercj/resource-loader/pull/39 - first part. That patch is related to our problem.

[ivan.popelyshev]

Aaaand my patch is declined. We have to rewrite all pixi-spine for that thing to work

[ivan.popelyshev]

Now you have to modify your code according new atlasParser.js .

Dont forget to use my pixi-compressed-textures, it will change "something.atlas" to "[email protected]" inside the loader.

 

pixi spine v.1.0.9, works for me: 

 

var assetsLoader = new PIXI.loaders.Loader();
//we have 2x atlas
assetsLoader.before(PIXI.compressedTextures.extensionChooser(["@2x.atlas"]));
var lowerOptions = { metadata: { spineMetadata: { choice: ["@.5x.atlas", "@2x.atlas"] } } };

assetsLoader.add('animation', 'something.json', lowerOptions);
assetsLoader.once('complete', onAssetsLoaded);

[GBear]

hi ivan.   good to see you!

 

answer is too late... sorry about this..

module.exports = function (baseUrl, crossOrigin) {    if (baseUrl && baseUrl.lastIndexOf('/') !== (baseUrl.length-1))    {        baseUrl += '/';    }    return function(line, callback) {        callback(PIXI.BaseTexture.fromImage(line, crossOrigin));    }};

i think this function have to chagne like 

module.exports = function (baseUrl, crossOrigin) {    if (baseUrl && baseUrl.lastIndexOf('/') !== (baseUrl.length-1))    {        baseUrl += '/';    }    return function(line, callback) {       //this line changed         callback(PIXI.BaseTexture.fromImage(baseUrl + line, crossOrigin));    }};

second, is there reason call iterateParse() and break?

there is good when i delete iterateParse and break

spine.Atlas = function (atlasText, loaderFunction, callback){  ....  function iterateParser() {  ...// @ivanpopelyshev: I so want to use generators and "yield()" here, or at least promises                loaderFunction(line, function (texture) {                    page.rendererObject = texture;                    self.pages.push(page);                    if (!page.width || !page.height) {                        page.width = texture.width;                        page.height = texture.height;                        if (!page.width || !page.height) {                            console.log("ERROR spine atlas page " + page.name + ": meshes wont work if you dont specify size in atlas ()");                        }                    }                    //iterateParser();   <-- need this?                });                //break;  <-- need this?   .....}

last thing. metadata have to set unconditional ?

I set to comment it becuase it give me error 

var atlasParser = module.exports = function () {    return function (resource, next) {        ...        var atlasOptions = {            crossOrigin: resource.crossOrigin,            xhrType: Resource.XHR_RESPONSE_TYPE.TEXT,            //metadata: resource.metadata.spineMetadata        };        var imageOptions = {            crossOrigin: resource.crossOrigin,            //metadata: resource.metadata.imageMetadata          };        ...    }}

and i'using this with pixi.spine.1.0.6

   if(1){            var atlas = new PIXI.spine.SpineRuntime.Atlas(atlas_src, function(line, callback){                var baseUrl = 'data/packed/';                console.log(line, JLib.getFilenameOnly(line));                var resolution = 0.5;                if(resolution != 1){                    var fileNameOnly = JLib.getFilenameOnly(line);                    var url = baseUrl + fileNameOnly + '@' + resolution  + 'x.png';                } else {                    var url = baseUrl + line;                }                var baseTexture  = PIXI.BaseTexture.fromImage(url);                console.log(url);                callback(baseTexture);            });        }

My purpose was using different image with one ATLAS

 

So I was using with pixi.spine.1.0.4

//using codevar atlas = new PIXI.spine.SpineRuntime.Atlas(atlas_src, 'data/packed', null, 0.5);//changed pixi.spine codespine.Atlas = function (atlasText, baseUrl, crossOrigin, image_resolution) {  ......         if(image_resolution) {                var url = baseUrl + line.replace(/\.[^/.]+$/, "") + ('@' + image_resolution + 'x.png');            } else {                var url = baseUrl + line;            }            page.rendererObject = PIXI.BaseTexture.fromImage(url, crossOrigin);  ......}

in this case i can control image resolution by image_resolution parameter

 

 

thx.... always..

 

 

ps. i'm expecting always when you update new gpu patch with spine..^^/   

ps2. is there posible to optimize not meshed spine?

[ivan.popelyshev]

oh, right, thank you, I'll fix that "baseUrl + line" issue.

 

we need both "break" and "iterateParser", that's because iterateParser is async function now.

 

as for 'metadata' problem, please update your pixi.js to latest version.

 

What solution I recomment to use:

 

1) Dont try to load atlas with your own code. Look at my last post up there, load spine animation: http://www.html5gamedevs.com/topic/19465-can-i-control-basetexture-size/page-2#entry111123

loader.add('animation', 'something.json', options)

2) Ignore the animation, work only with the atlas.

loader.load(function() {   var atlas = loader.resources['animation'].atlas;   //do your stuff});

[GBear]

hi ivan..^^/

i'm using pixi.js 3.0.9 

but when i didn't set metadata i could look error.

is there reason to use forcibly  ?

 

when I updated 3.0.9 from 3.0.8., i could look error by metadata first..

 

so i changed metadataparts like this

//Original
var loadOptions = {
                crossOrigin: resource.crossOrigin,
                loadType: Resource.LOAD_TYPE.IMAGE,
                metadata: resource.metadata.imageMetadata
            };

//Changed
var loadOptions = {
                crossOrigin: resource.crossOrigin,
                loadType: Resource.LOAD_TYPE.IMAGE,
                //metadata: resource.metadata.imageMetadata
            };

this. is only to delete error and use pixi.js 3.0.9

 

does metadata set forcibly to update 3.0.9?

[ivan.popelyshev]

I dont want to think about that, I already have a headache about that all. Well in your case you dont need imageMetadata, only spineMetadata.