8Observer8 Posted October 12, 2019 Share Posted October 12, 2019 Hello, I want to load an image on playground. My code works locally but when I load on Playground it does not work. And I do not see errors in console. The Example on Playground. This message is strange: Quote %c %c %c PixiJS 5.0.4 - ✰ WebGL 1 ✰ %c %c http://www.pixijs.com/ %c %c ♥%c♥%c♥ background: #ff66a5; padding:5px 0; background: #ff66a5; padding:5px 0; color: #ff66a5; background: #030307; padding:5px 0; background: #ff66a5; padding:5px 0; background: #ffc3dc; padding:5px 0; background: #ff66a5; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; color: #ff2424; background: #fff; padding:5px 0; Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 That's the first time i see text png file with base64 inside. Also in case there will be crossorigin problem after you fix that base64 mishap: usually in playgrounds i use this setting const loadOptions = { crossOrigin: true }; app.loader.add("enemy", "./assets/48_enemy.png", loadOptions); I hope you wont meet with Cross-Origin-Ritual-Sacrifice, and I really dont have time to explain what is that Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 41 minutes ago, ivan.popelyshev said: That's the first time i see text png file with base64 inside. It works on localhost by why does it not work on Playground? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 I have better question: why the heck it works on localhost? ? Maybe something with different mime-types that depend on your web-server. Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 I think when I copy cat.png to Playground it automatically is converted to base64. It works locally. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 its because texture doesnt exist. maybe crossOrigin issue. Oh , right, dropbox - you cant load files from dropbox , their server prevents that. 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
eXponeta Posted October 12, 2019 Share Posted October 12, 2019 Because it is not direct link. 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 1 minute ago, eXponeta said: Because it is not direct link. This is direct and it works locally: https://dl.dropboxusercontent.com/s/wl4akzer41ltthl/7herbs.jpg Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 2 minutes ago, ivan.popelyshev said: its because texture doesnt exist. maybe crossOrigin issue. Oh , right, dropbox - you cant load files from dropbox , their server prevents that. It did not work locally because I forgot to comment this: Object.keys(PIXI.utils.TextureCache).forEach((texture) => { PIXI.utils.TextureCache[texture].destroy(true); }); Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 Ivan, why does it work now without cross origin? https://next.plnkr.co/edit/0FmksaR02yCUs63T?preview Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 Here, I added my png, its not base64. However, now that playground doesnt serve me that file. At all. There's nothing in "images/ship.png" it tried to load. I dont have anymore time to "play" with that playground, i use others. https://next.plnkr.co/edit/TMhxNzFY0h2vBRDg 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 Yes, your demo works for me now 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 OK , my ship.png was converted to base64 now. Curse that playground, just choose another! Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 2 minutes ago, ivan.popelyshev said: Here, I added my png, its not base64. My image is not too. Click on your image on Playground and you will see that it is base64. I think it is converted automatically. Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 Just now, ivan.popelyshev said: Curse that playground, just choose another! Please, give me a link on another that can keep TypeScript classes in separated files. I found only this one. I think it is the best. I do not know another. I will keep my image files on DropBox. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 https://codesandbox.io/ , there's limit on uploaded files (images), but everything else is fine. Except online editing with friends - dont try that. Here's one of my js projects: https://codesandbox.io/s/tender-franklin-iycmu I dont remember about TS, but i thought i tested it there too. Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 3 minutes ago, ivan.popelyshev said: https://codesandbox.io/ , there's limit on uploaded files (images), but everything else is fine. Except online editing with friends - dont try that. I tried it. It does not work with TypeScript Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 Plunker is the best as TypeScript Plaground. There's just limit on uploaded images. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 TS works fine: https://codesandbox.io/s/hexagon-stars-l4mms?fontsize=14 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 I wouldn't use that playground on your place, it seems that it over-uses webpack. If you have problem with codesandbox , make a project that doesnt work for yuo and I and @eXponeta will help with fixing it 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 Good. But I do not use Webpack, Gulp, Grunt and so on. I use AMD-compilation and Require.js for debug mode in VSCode. And Browserify for Release mode. I can just copy my files on Plunker without modifications. I do not have enough time for modifications and I do not have time to study new Playground. Plunker is ideal for me. I do not this this because it is complicated for beginners: (window as any).PIXI = PIXI; export let app = (global.app = new Application()); And it is complicated for me too. I make this examples for beginners. As you said CodeSandbox is limited to upload images. It is not difference where I will keep files for Plunker and CodeSandbox. I will keep them on DropBox. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted October 12, 2019 Share Posted October 12, 2019 Dropbox has traffic/requests limit. Also you can just specify "import * as PIXI from 'pixi.js" in every file, you dont need plugins, right? 8Observer8 1 Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 33 minutes ago, ivan.popelyshev said: Dropbox has traffic/requests limit. As you can see I have low-traffic examples. I found this information: Quote According to Dropbox support, public links for free accounts may not use more than 10GB of bandwidth per day It is enough for me now. But what do you think about keeping images on GitHub? I can get a direct link like this: https://raw.githubusercontent.com/8Observer8/8observer8.github.io/master/Assets/LearnPixiJS/Images/cat.png And it works on Plunker: https://next.plnkr.co/edit/0FmksaR02yCUs63T?preview Quote Link to comment Share on other sites More sharing options...
8Observer8 Posted October 12, 2019 Author Share Posted October 12, 2019 1 hour ago, ivan.popelyshev said: Also you can just specify "import * as PIXI from 'pixi.js" in every file, you dont need plugins, right? What plugins? 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.