greenboffin Posted January 26, 2016 Share Posted January 26, 2016 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); Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 26, 2016 Share Posted January 26, 2016 Whats the different between "relative to file path" and "relative to the url" in your case? Quote Link to comment Share on other sites More sharing options...
catafest Posted January 26, 2016 Share Posted January 26, 2016 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 26, 2016 Share Posted January 26, 2016 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 Quote Link to comment Share on other sites More sharing options...
xerver Posted January 26, 2016 Share Posted January 26, 2016 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 Quote Link to comment Share on other sites More sharing options...
Fricken Hamster Posted January 27, 2016 Share Posted January 27, 2016 I think relative urls would only work if the game is served from the same url. Can you access the image just on your browser? Are your images in a public assets directory, and are you routes correct? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.