Unable to use library functions using unhosted javascript libraries

63 views Asked by At

I am trying to run Example 01 of pixijs (you have to scroll all the way down): http://www.pixijs.com/examples/

When I run it with my local copy of pixi.js all I get is a black square. But when I run it with the web copy of pixi.js it only renders the stage. I think it might have to do with the location of the files? Either way I have all the files in the same folder, so to my knowledge it should work.

Html:

    <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>

</head>
<body>
    <!-- it will not run if i use the local file -->
    <!-- <script src="/pixi.js"> -->
    <script src="http://www.goodboydigital.com/pixijs/examples/1/pixi.js"></script> 
    <script src="test.js"></script>
</body>
</html>

The contents of test.js are so:

// create an new instance of a pixi stage
var stage = new PIXI.Stage("0x66FF99");

// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(400, 400);

// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("bunny.png");
// create a new Sprite using the texture
var bunny = new PIXI.Sprite(texture);

// center the sprites anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// move the sprite t the center of the screen
bunny.position.x = 200;
bunny.position.y = 150;

stage.addChild(bunny);

function animate() {
    requestAnimFrame( animate );

    // just for fun, lets rotate mr rabbit a little
    bunny.rotation += 0.1;

    // render the stage
    renderer.render(stage);
}

Please help.

1

There are 1 answers

1
kishanio On BEST ANSWER

If you just open the index.html in a browser, your browser will (hopefully) not allow that page to access any other files. This is a security feature that limits damage from malicious scripts.

You need local web-server to serve this scripts.

Use,<script src="pixi.js"> only but make sure index.html is served using local web-server.

If you don't know how to get local web-server running navigate to your project directory in terminal and fire the following command to run minimalistic python http server.

python -m SimpleHTTPServer 8080 

This will serve current directory files on localhost:8080 in your browser.