mardi 4 août 2015

How to make a BIG stage with drag & flick inside a canvas using Pixi.js?

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