I am learning a PixiJS to make an animation like this: http://ift.tt/1S5a96N.
I have already created a project environment. But I am struggling with making a big stage and having a drag / flick interaction in it like the one in the website mentioned above.
How should I make a BIG stage with drag & flick inside a canvas created using PixiJS?
Here is my JavaScript code so far:
var screen_width = $(window).innerWidth();
var screen_height = $(window).innerHeight();
var renderer = PIXI.autoDetectRenderer(screen_width, screen_height, {backgroundColor: 0xcccccc});
var stage = new PIXI.Container();
var texture = new PIXI.Texture.fromImage('images/pixel.jpg');
var bg = new PIXI.Sprite(texture);
$('body').append(renderer.view);
bg.position.x = 0;
bg.position.y = 0;
stage.addChild(bg);
function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}
animate();
I do not know how to:
- draw a 1:1 size background image. This image is more than 1920x1800 in dimensions.
- implement the drag & flick interactions if the image exceeds the viewport / screen size.
Thanks. Hopefully someone will provide me with some references.
Aucun commentaire:
Enregistrer un commentaire