Jump to content

pixijs - set script.


catafest
 Share

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 ?

Link to comment
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.

Link to comment
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 .

 

Link to comment
Share on other sites

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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