catafest

pixijs - set script.

Recommended Posts

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="pixi.js"></script>
</head>
<body>
   
 <script>
 var stage = new PIXI.Stage(0xFFFFFF);
    var renderer = PIXI.autoDetectRenderer(800, 600);
    document.body.appendChild(renderer.view);
    var texts = [];
    for (var ii = 0; ii < 15; ++ii) {
      
      var text = new PIXI.Text("Hello World", {font: (ii * 10) +"px Arial", fill:"black"});
      text.scale.x = 1 / (1 + ii);
      text.scale.y = 1 / (1 + ii);
      texts.push(text);
    }
      
      var scrollArea = new PIXI.DisplayObjectContainer();
      
      scrollArea.interactive = true;
      scrollArea.buttonMode = true;
      
      
     scrollArea.addChild(text);      
      stage.addChild(scrollArea);
      
      
      scrollArea.mousedown = function(data) {
        data.originalEvent.preventDefault();
        this.data = data;
        this.dragging = true;
      }
      
      scrollArea.mouseup = scrollArea.mouseupoutside = function(data) {
        this.dragging = false;
        this.data = null;
      }
      
      scrollArea.mousemove = function(data) {
        if (this.dragging) {
          var newPos = this.data.getLocalPosition(this.parent);
          this.position.x = newPos.x;
          this.position.y = newPos.y;
        }
      }
      
      text = undefined;
      function animate() {
          var t = Date.now() * 0.001;
          var scale = 1 + 14 * (Math.sin(t) * 0.5 + 0.5);
          if (text) {
              scrollArea.removeChild(text);
          }
          text = texts[Math.floor(scale)];
          scrollArea.addChild(text);
          scrollArea.scale.x = scale;
          scrollArea.scale.y = scale;
          renderer.render(stage);        
          requestAnimFrame(animate);
      }
      
      animate();
      </script>
</body>
</html> 

I put pixi.js into same folder with my source code ( the last version of pixi.js) and the source code not working.

But If I put for example this  <script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script> It's working well.

Why ?

Share this post


Link to post
Share on other sites

Your code is not in pixi v3. So if the pixi.js you are using is the latest then that's the reason. The url that works is 1.6.1 so that works. What you need to change is replace Stage and DisplayObjectContainer with Container.

Share this post


Link to post
Share on other sites
5 hours ago, Exca said:

Your code is not in pixi v3. So if the pixi.js you are using is the latest then that's the reason. The url that works is 1.6.1 so that works. What you need to change is replace Stage and DisplayObjectContainer with Container.

I make changes but not working.

I take a look at http://www.goodboydigital.com/pixi-js-tutorial-getting-started/ . (old version of pixi).

Yes, I use the last version of pixi has many changes: 808 kb  - the new pixi.js - v3.0.10  * Compiled 2016-02-25T20:39:20.286Z

Also I take a look at https://github.com/aksharpatel47/Learn-Pixi.js

But I don't know what is the error. Maybe is need to make more changes .

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.