TinyDancer Posted December 10, 2014 Share Posted December 10, 2014 <!DOCTYPE HTML><html><head> <title>pixi.js simple line example</title> <style> body { margin: 100; padding: 100; background-color: #000000; } </style> <script src="pixi.js"></script></head><body> <script> // set up screen stuff var stage = new PIXI.Stage(0x66FF99); var renderer = new PIXI.autoDetectRenderer(400, 300); document.body.appendChild(renderer.view); requestAnimFrame( animate ); // draw a sprite var texture = PIXI.Texture.fromImage("evil bunny.png"); var evilBunny = new PIXI.Sprite(texture); stage.addChild(evilBunny); // draw a line var graphics = new PIXI.Graphics(); graphics.beginFill("red"); graphics.lineStyle(10, "white"); graphics.moveTo(100, 100); graphics.lineTo(200, 200); graphics.endFill(); stage.addChild(graphics); // put text on screen var text = new PIXI.Text("Pixi.js can has text!", {font:"20px Arial", fill:"black"}); text.position.x = 10; text.position.y = 10; stage.addChild(text); function animate() { requestAnimFrame( animate ); renderer.render(stage); } </script> </body></html> I'm sure this topic must have been covered somewhere, but I couldn't find it anywhere so here goes... I'm using PIXI.js with the above script on a number of browsers (using Windows 7) and I've had the following problems: - Chrome: Draws a black line but no Sprite - Firefox: Draws a Sprite but no line - IE(9 I think): Draws a black line but no Sprite In all three cases, the text is shown, meaning that the Sprite/line creation code does get run through. Is there anything obvious I'm missing? I also don't quite understand why the line gets drawn (and the width is correct), but it always comes up as black I've been programming with other languages for a while but this is my first foray into Javascript and PIXI so any help would be massively appreciated. Cheers! Quote Link to comment Share on other sites More sharing options...
msha Posted December 18, 2014 Share Posted December 18, 2014 You should use a local web-server(like XAMPP or https://www.npmjs.com/package/simplehttpserver) to serve the app, otherwise it may not have the permission to load the image because of CORS. As for the line, try passing the colors as integers - 0xFF0000, 0xFFFFFF. 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.