Sign in to follow this  
greenboffin

pixi.js loader loading assets from sever path not URL

Recommended Posts

I am trying to load images in pixi, but it seems the loader needs paths relative to the URL. I am working through a Flask server and the image URL folder is not exposed. Any other way I can point loader to an image relative to file path on the server (not url?)

loader = PIXI.loader,
loader.add("images/pixie96x48.png").load(setup);

 

Share this post


Link to post
Share on other sites

Take a simple html5 temaplte and add this source of code ( the "..." can be replace with your code)  :

<script type="text/javascript" src="pixi.js"></script>
</script>
...
<body style="background:black">
...
<img src="your_image.jpg">
...
<script type="text/javascript">
var renderer = new PIXI.WebGLRenderer(480, 385);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
PIXI.loader.add(['your_image.jpg']).load(function() {
    var var_image = new PIXI.Sprite(PIXI.utils.TextureCache['your_image.jpg']);
    ...}
    stage.addChild(var_image);

renderer.render(stage);
});
</script>

gavatar is a great tool :P

Share this post


Link to post
Share on other sites

Loader cant do that stuff yet. But that thing will work for sure:

//this is for single image

var tex = PIXI.Texture.fromCanvas(document.getElementById("my_image_id")); 

//and this will help if you want to track all elements loading process:

var pages= [
   PIXI.Texture.fromCanvas(document.getElementById("pic1")),
   PIXI.Texture.fromCanvas(document.getElementById("pic2"))
];
PIXI.utils.async.each(pages, function (page, done) {
                if (page.baseTexture.hasLoaded) {
                    done();
                }
                else {
                    page.baseTexture.once('loaded', done);
                }
            }, complete);

function complete() {
   var tex1 = pages[0];
   var tex2 = pages[1];
}

UPD. I fixed the code. Try it again , please

Share this post


Link to post
Share on other sites
Quote

 I am working through a Flask server and the image URL folder is not exposed. Any other way I can point loader to an image relative to file path on the server (not url?)

Correct me if I am misreading, but it sounds like you are saying the server doesn't serve the image you want to load. If that is the case, then you can't load it. The server has to serve the file and you can specify any url you want in the loader (absolute or otherwise).

-------------

As far as using an element already on the page as the specific element to track loading from, it would be trivial to update the resource loader to allow you to pass in the element instead of a url.

https://github.com/englercj/resource-loader

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.