Search the Community
Showing results for tags 'site'.
-
Hi, I'm a total noob in this area so I'm not even sure if Pixi is right for what I need. I'm a front end developer and turns out that I have to create a interactive website. The client is wants to rely on sprite sheet images (vertical mostly) to create some fancy cartoon-like animations. For rendering issues my original idea is to do this with PIxi (I've read how great it works on top of WebGL, when supported) and I saw some examples in devices and was very impressed with the performance. To the point, is Pixi the best tool for this or I'm going a little over board by using it?. I mean would be a significant difference in performance if I use Pixi or just change the background position of a bunch of DOM elements?. Should I use another canvas framework for this purpose?. If Pixi is the right choice, how can I animate this type of stuff (big linear sprite images)?. One of the sprites is over 11000 pixels of height and I get a width or height out of range warning in the console so I can't even get the image in the stage. In other scenario the sprite is composed of 4 images of 400 pixels of height each one (1600 pixels total). The stage has 800 pixels of height and I want to show just one image, I'm using this code: var mainStage = new PIXI.Stage(0xeeeeee), mainRenderer = PIXI.autoDetectRenderer(960,800);document.body.appendChild(mainRenderer.view);var // the image Sprite imported as a texture testTexture = new PIXI.Texture.fromImage('img/bird.jpg'), // the actual element in the stage testSprite = new PIXI.TilingSprite(testTexture,640,800);mainStage.addChild(testSprite);// render the canvas stagerequestAnimFrame( animate ); function animate(){ requestAnimFrame( animate ); // render the stage mainRenderer.render(mainStage);}And I'm getting this result, which shows more than I want. What I need is just the top part of the image: And if I change the code to this: var // the image Sprite imported as a texture testTexture = new PIXI.Texture.fromImage('img/bird.jpg'), // the actual element in the stage testSprite = new PIXI.TilingSprite(testTexture,640,400);The result is this: The image is scaled down as the height is changed. How can I correct this?. Many thanks in advance, Rodrigo.