Full screen background image

[bringking]

I am trying to achieve a similar design as this site using pixi-

 

http://www.spaceneedle.com/home/

 

 

However I am having trouble even finding out how to make a full page texture. Any image I use won't stretch to match the viewport. I have tried setting-

 

this.sprite.texture.width = viewPort.width;

 

or 

 

this.sprite.width = viewPort.width;

 

However there is always blank space on the right hand side? Any guidance would be greatly appreciated.

 

[Neso]

Interesting I read docs and they clearly state that changing width or height will adjust scale. I haven't ever tried changing sprite size by changing width but setting scale point always worked for me.

[bringking]

I found out that I was setting the scale of the DisplayObjectContainer differently from the viewPort. My fault! 

[Rodrigo]

Hello,

I'm new to PIxi and I've been asked to create a responsive full-screen slider using Pixi.

The project is a bit complicated, since the images have to be stripped into a horizontal grid (similar to a window blind going to the left or right to show the next image), but I know my way around JS very well, but I'm struggling with what I believe should be a simple thing.

How can I make an image to stretch to the window size?. Basically I have no control over the images I'll be using (those will be served by different servers) nor their sizes, so basically what brings the biggest issue is to set the to stretch, either to use the full height or width of the screen and getting them centered.

I already have a working solution for the resize event for the Pixi stage, but I can't get the images to stretch.

I've going through the documentation, trying to adjust the width or height of a texture, because doing that on the sprite actually change the ratio of the sprite itself.

This is a basic sample code  of what I have in order to create the horizontal stripes of a single image (of course this goes inside of a loop, but I believe that is not necessary to post that code here):

var renderer = PIXI.autoDetectRenderer(1200, 400, {backgroundColor: 0xa7afbe});

document.body.appendChild(renderer.view);

var stage = new PIXI.Container();


var landscapeTexture = PIXI.Texture.fromImage('https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg');

// crop the texture to show just 100 px
var texture2 = new PIXI.Texture(landscapeTexture, new PIXI.Rectangle(0, 100, 960, 50));

// new sprite
var background = new PIXI.Sprite(texture2);


background.anchor.x = 0;
background.anchor.y = 0;

background.position.x = 0;
background.position.y = 0;

stage.addChild( background );

initPixi();

function initPixi() {
  requestAnimationFrame(initPixi);

  // render the container
  renderer.render(stage);
}

In this case the image is 960px width and if I use a bigger size for the rectangle I get an error.

So basically how can I do this?

Any help is most welcome.

Best,

Rodrigo.

[ivan.popelyshev]

Ok, lets assume your image size is 1000 by width:

var viewWidth = (renderer.width / renderer.resolution); // its the same width you assigned in resize. Resolution is used for Retina, dont ask now, you will thank me later :)

stage.scale.x = 1000 / viewWidth;
stage.scale.y = stage.scale.x;

After that you just work like your stage has width=1000.

If you want to do that ONLY to background elements, well, then you can add some container to the stage and scale it:

var viewWidth = (renderer.width / renderer.resolution); // its the same width you assigned in resize. Resolution is used for Retina, dont ask now, you will thank me later :)

var back = new PIXI.Container();


back.scale.x = 1000 / viewWidth;
back.scale.y = back.scale.x;

stage.addChild(back);

Width and height property of any PIXI.Container or PIXI.Sprite are actually changing the scale. I tried to propose new "size" variable for that, but so far my pull requests that are dedicated to it are not merged.If you want to use them.

Anyway, we can use that too:

var viewWidth = (renderer.width / renderer.resolution); // its the same width you assigned in resize. Resolution is used for Retina, dont ask now, you will thank me later :)

var back = new PIXI.Container();

back.addChild(theBackGroundSprite);
//I assume that you want some other elements in background, that's why I didnt make 'back' a Sprite.

back.width = viewWidth; // back will calculate the width of bounding box that covers all elements inside, and adjust the scale that way its your sprite actually fit the screen.

back.scale.y = back.scale.x;

stage.addChild(back);

[Rodrigo]

Hello,

Thanks for the answer but I don't think my explanation was clear enough, sorry about that.

At the end what I'm looking for is this:

http://s.codepen.io/rhernando/debug/mErJZX

If you click the button you'll see a rough approximation of what I'm trying to achieve. Of course in this sample I haven't added the resize event so you'll have to reload the window, but that's what I'd like to find out how to do in Pixi. Also as I wrote in the previous post, the problem is that not all the images will have the same size and therefore the same aspect ratio.

My idea was to crop a base texture on each pass of the loop and apply it to a sprite, then add the sprite to the stage and create the animation. The point is that I need to set the base texture dimensions to fit the screen size all the time.

Hopefully this will make a bit more clear what I'm looking for.

Thanks again,

Rodrigo.

[ivan.popelyshev]

Sorry, that is too specific case. I explained how works scale, width and height, and how to get scene dimentions. You know how to crop texture. I believe that your case is covered by this techniques.

[Rodrigo]

Hello,

I got it working now. Here's the solution I came up with:

http://codepen.io/rhernando/pen/QEKjVb?editors=0010

It still has some rough edges, like getting the natural dimensions and setting the right way to display the image in order to prevent excessive distortion.

This is the code:

var loadUrl = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/lorempixel-700.jpg';
imageLoader = PIXI.loader;
imageLoader.add('background', loadUrl);

imageLoader.once("complete", imageLoaded);

imageLoader.load();

var testTexture, testSprite;

function imageLoaded() {

  // base texture
  var backgroundTexture = PIXI.Texture.fromImage(loadUrl);

  /*	Set a loop to go through the amoun of pieces and set up the textures  
   *	and sprites for each slide
   */
  for (i = 0; i < pieces; i++) {

    var recSize, loopTexture, loopSprite;
    // this is the one used in the crop rectangle
    recSize = i * pieceHeight;

    // first set the texture
    loopTexture = new PIXI.Texture(backgroundTexture, new PIXI.Rectangle(0, recSize, 700, pieceHeight));
    // create the sprite
    loopSprite = new PIXI.Sprite(loopTexture);
    // position. Y position depends on the piece height
    loopSprite.position.x = 0;
    loopSprite.position.y = recSize;

    // set the width of the sprite
    loopSprite.width = pieceWidth;

    // finally add the new sprite
    stage.addChild(loopSprite);

  } // loop end

};

Finally one thing caught my attention and I'd like to know if someone else has seen something similar. Turns out that I'm having cross-origin issues when using the loader class. For example this image has no issues loading:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/lorempixel-700.jpg

But this throws an error:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/33073/lorempixel-1000.jpg

It is the same server, so the request header is the same and almost the same filename. Has anyone seen anything like this?

Thanks again,

Rodrigo.