Jump to content

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


Recommended Posts

i am learning a Pixi.js to make a animation web like this link below.


I already created a project environment.

But i face a question such as this title.

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

First i want to prepare a full screen canvas,

var screen_width = $(window).innerWidth();
var screen_height = $(window).innerHeight();

var renderer = PIXI.autoDetectRenderer(screen_width, screen_height, {backgroundColor : 0xcccccc});

Then i append the view to body tag.


According to Pixi document, create the root of the scene graph

var stage = new PIXI.Container();

var texture = new PIXI.Texture.fromImage("images/pixel.jpg");
var bg = new PIXI.Sprite(texture);

bg.position.x = 0;
bg.position.y = 0;


Then start the animation, fine.

function animate() {

But i don't know how to make the effect,

  1. 1:1 size background-image
  2. My background-image is over than 1920x1800, a huge background
  3. If over than screen size, how to make the drag & flick inside a canvas like the link above.

Thanks and hope to give me some references.

Link to comment
Share on other sites

  • 9 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...