md_lasalle Posted October 23, 2016 Share Posted October 23, 2016 Hey guys, total Phaser noob here. I'm interested in doing shaders in Phaser, and looking at this example : http://phaser.io/examples/v2/filters/bacteria#comments I should be able to use : game.load.shader('bacteria', 'assets/shaders/bacteria.frag'); to get my fragment shader loaded but I get a "Uncaught TypeError: game.load.shader is not a function" Anyone ever encountered this issue? Looking in the docs it seems that load.shader is not even available. So I'm a bit confused as to why it is present on Phaser's official website. Link to comment Share on other sites More sharing options...
rgk Posted October 23, 2016 Share Posted October 23, 2016 Are you running the game with webgl? I'm pretty sure you need to run the game with webgl and not canvas for the shader. Link to comment Share on other sites More sharing options...
md_lasalle Posted October 23, 2016 Author Share Posted October 23, 2016 Just like in the example I linked to, I'm using Phaser.AUTO in the game initialization. I tried forcing it to Phaser.WEBGL but it doesn't change the fact that game.load.shader is not a valid function it seems. Link to comment Share on other sites More sharing options...
samme Posted October 24, 2016 Share Posted October 24, 2016 It's in http://phaser.io/docs/2.6.2/Phaser.Loader.html#shader . Link to comment Share on other sites More sharing options...
md_lasalle Posted October 24, 2016 Author Share Posted October 24, 2016 32 minutes ago, samme said: It's in http://phaser.io/docs/2.6.2/Phaser.Loader.html#shader . Yup, that's why I really wonder why I can't get this working. Here is my complete code mostly taken from the tutorials : <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 1</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update }); var filter; function preload() { game.load.shader('simple', 'assets/shaders/simple.frag'); } function create() { filter = new Phaser.Filter(game, null, game.cache.getShader('simple')); filter.addToWorld(0, 0, 800, 600); } function update() { filter.update(); } </script> </body> </html> Link to comment Share on other sites More sharing options...
rich Posted October 24, 2016 Share Posted October 24, 2016 What version of Phaser does it log out to the console when you run your example? If load.shader isn't found, it's likely not a new enough version. Link to comment Share on other sites More sharing options...
md_lasalle Posted October 24, 2016 Author Share Posted October 24, 2016 3 hours ago, rich said: What version of Phaser does it log out to the console when you run your example? If load.shader isn't found, it's likely not a new enough version. You are right, the output version is 2.0.1. I'm guessing that the tutorials on the web are using an old version of the framework. Locally I got the latest Phaser from github, 2.6.2, now the question is, how do I make sure it uses this particular version? Link to comment Share on other sites More sharing options...
md_lasalle Posted October 24, 2016 Author Share Posted October 24, 2016 (edited) After a bit more research, it seems like the problem comes from my html file not finding the script file needed Failed to load resource: net::ERR_FILE_NOT_FOUND : file://cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js I changed the script from <script src="//cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script> to <script src="http://cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script> and now seems to be correct... It's strange that the "file://" protocol would be used by default, it's even causing me issues for the call to game.load.shader('simple', 'assets/shaders/simple.frag'); phaser.js:74719 XMLHttpRequest cannot load file:///some/path/wwwroot/Test/assets/shaders/simple.frag. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.xhr it really should be using http since i've setuped MAMP and was able to go through all the tutorials... EDIT : That's me being a total beginner, forgot to test my file goign through localhost:port/Project.... Hopefully it can help someone Edited October 24, 2016 by md_lasalle Found my issue Link to comment Share on other sites More sharing options...
Recommended Posts