puffsmalli Posted November 15, 2015 Share Posted November 15, 2015 Trying to learn Pixi i created this small file: PixiRenderer.jsdefine(["references/pixi"], function(PIXI) { var PixiRenderer = function(){ var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb}); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); // create a texture from an image path var texture = PIXI.Texture.fromImage("assets/bunny.png"); // create a new Sprite using the texture var bunny = new PIXI.Sprite(texture); stage.addChild(bunny); renderer.render(stage); } return new PixiRenderer();});My html: index.html<html> <head> <script data-main="scripts/PixiRenderer" src="scripts/Require.js"></script> </head> <body> </body></html>I can see the canvas added to the DOM and the blue background is rendered but the bunny is missing !There are no errors in console, everything seems to be working alrightAnd im using local Node.js server to get the files so the bunny.png saved locally on my machine but my browser can still access it now if i replace renderer.render(stage);with animate();function animate() { requestAnimationFrame(animate); renderer.render(stage);}everything works. Can anyone tell me what is the problem ? Quote Link to comment Share on other sites More sharing options...
xerver Posted November 15, 2015 Share Posted November 15, 2015 Because the first render call runs before the texture image is loaded. The second one loops forever so it keeps drawing and eventually the texture loads and it draws it. jfhs 1 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.