vmars316 Posted January 7, 2016 Share Posted January 7, 2016 Hello & Thanks ,Windows 10 x64 I am anxious to learn pixi.js but :http://www.goodboydigital.com/pixi-js-tutorial-getting-started/ The example above works on Edge browser , but doesn't work on Chrome .Is there a fix for this ? Pls , aim me at a good tutorial . Thanks...Vern Quote Link to comment Share on other sites More sharing options...
rich Posted January 7, 2016 Share Posted January 7, 2016 Looks fine in Chrome to me. However the tutorial is nearly 3 years old, and I'm pretty sure hasn't been updated for Pixi 3. Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 8, 2016 Author Share Posted January 8, 2016 I ran it in both pixi 1 and pixi 3 . Same results .http://www.goodboydigital.com/pixijs/example_1_basics.zip This much , without the sprite , works fine : <!DOCTYPE HTML><html><head><title>pixi.js example 1</title><style>body {margin: 0;padding: 0;background-color: #000000;}</style><script src="pixi.js"></script></head><body><script>// create an new instance of a pixi stagevar stage = new PIXI.Stage(0x66FF99);// create a renderer instance.var renderer = PIXI.autoDetectRenderer(400, 300);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);requestAnimFrame( animate );function animate() {requestAnimFrame( animate );// render the stagerenderer.render(stage);}</script></body></html> But the full code , just shows a black screen: <!DOCTYPE HTML><html><head><title>pixi.js example 1</title><style>body {margin: 0;padding: 0;background-color: #000000;}</style><script src="pixi.js"></script></head><body><script>// create an new instance of a pixi stagevar stage = new PIXI.Stage(0x66FF99);// create a renderer instancevar renderer = PIXI.autoDetectRenderer(400, 300);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);requestAnimFrame( animate );// create a texture from an image pathvar texture = PIXI.Texture.fromImage("bunny.png");// create a new Sprite using the texturevar bunny = new PIXI.Sprite(texture);// center the sprites anchor pointbunny.anchor.x = 0.5;bunny.anchor.y = 0.5;// move the sprite t the center of the screenbunny.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);}</script></body></html>Can you aim me at a Tutorial ? Thanks Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 8, 2016 Author Share Posted January 8, 2016 Chrome Version 47.0.2526.106 m Quote Link to comment Share on other sites More sharing options...
rich Posted January 8, 2016 Share Posted January 8, 2016 And the errors in the console say? I'd suspect it's unable to load the bunny.png for some reason. Perhaps you're opening the file directly instead of via a local httpd server? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 8, 2016 Share Posted January 8, 2016 There is no "requestAnimFrame" in pixiv3. Use standart window.requestAnimationFrame. Quote Link to comment Share on other sites More sharing options...
xerver Posted January 8, 2016 Share Posted January 8, 2016 I recommend starting with the examples and other tutorials. That one is outdated. A good one to start with is: https://github.com/kittykatattack/learningPixi And our examples are nice place to start as well: http://pixijs.github.io/examples/ jdnichollsc 1 Quote Link to comment Share on other sites More sharing options...
fire7side Posted January 8, 2016 Share Posted January 8, 2016 There's a rework of the getting started tutorial for v3 here:http://goose.ninja/2015/08/29/pixi-js-tutorial-getting-started/ Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 8, 2016 Author Share Posted January 8, 2016 Great helps folks..Thanks Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 8, 2016 Author Share Posted January 8, 2016 And the errors in the console say? I'd suspect it's unable to load the bunny.png for some reason. Perhaps you're opening the file directly instead of via a local httpd server?I don't know about "local httpd server?" Where do i get this ?Thanks Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 8, 2016 Author Share Posted January 8, 2016 I don't know about "local httpd server?" Where do i get this ?Thanks Is there a .zip file to install pixi.js ? Thanks Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 8, 2016 Author Share Posted January 8, 2016 And the errors in the console say? I'd suspect it's unable to load the bunny.png for some reason. Perhaps you're opening the file directly instead of via a local httpd server?Console , oh , i see what you mean here:Chrome:Failed to load resource: net::ERR_FILE_NOT_FOUND09_movingSprites.html:9 Uncaught ReferenceError: PIXI is not defined IE:HTML1300: Navigation occurred.09_movingSprites.htmlDOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=29133709_movingSprites.htmlSCRIPT5009: 'PIXI' is undefined09_movingSprites.html (9,1) Thanks.. Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 9, 2016 Author Share Posted January 9, 2016 Well , I have made some headway: When i changed this:<script src="../pixi.js/bin/pixi.js"> to this:<script src="C:\pixi.js\bin\pixi.js"> and changed this: images/cat.png to this"file:///C:/pixi.jslearningPixi-masterexamples/images/cat.png Things got somewhat better . But still having probs (different probs) , so i'll Post a new message . ..vm Quote Link to comment Share on other sites More sharing options...
fire7side Posted January 10, 2016 Share Posted January 10, 2016 Same thing here as another post. Start a new project in a new folder. The only file in that folder is your index.html. Then make two folders a "js" folder and an "assets" folder. Put the pixi.js in the "js" folder. Now your path will be "js/pixi.js". That is a relative path so you can just copy the folder and paste it on your server. If you use the absolute path with C: whatever, it won't work when you paste it onto your server folder anymore. Quote Link to comment Share on other sites More sharing options...
vmars316 Posted January 11, 2016 Author Share Posted January 11, 2016 Thanks , fire7side ..vm 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.