Italianbadboy Posted January 6, 2016 Share Posted January 6, 2016 hi, my problem is that i'm not able to use canvas as texture for my sprite. i tried to write the following code, someone can help me telling what i wrong? the code: <body> <script src="file:///C|/Program Files (x86)/js/pixi.js/bin/pixi.js"></script> <script src="file:///C|/Program Files (x86)/js/pixi.js/pixi-lights-master/bin/pixi-lights.js"></script> <script> var LightRenderer = new PIXI.lights.WebGLDeferredRenderer(1355, 700), MainRenderer = new PIXI.autoDetectRenderer(1355, 700), LightStage = new PIXI.Container(), MainStage = new PIXI.Stage(0x000000), lightOnDeveloper = new PIXI.lights.PointLight(0xffffff,4) PIXI.loader .add('bg','maschera.png') .add('bg_normal','maschera_n.png') .add('block_diffuse', 'developer_2.png') .add('block_normal', 'developer_normal.png') .load(function (loader, res) { var bg = new PIXI.Sprite(res.bg.texture); var block = new PIXI.Sprite(res.block_diffuse.texture); bg.normalTexture = res.bg_normal.texture; block.normalTexture = res.block_normal.texture; block.position.set(100,70); LightStage.addChild(bg); LightStage.addChild(block); var ambientLight = new PIXI.lights.AmbientLight(0xFFFFFF,0.7); ambientLight.position.set(100,100); LightStage.addChild(ambientLight); LightStage.addChild(lightOnDeveloper); LightRenderer.view.addEventListener('mousemove', function (e) { var rect = e.target.getBoundingClientRect(); lightOnDeveloper.position.x = e.clientX - rect.left; lightOnDeveloper.position.y = e.clientY - rect.top; }); animate(); }); function animate() { requestAnimationFrame(animate); LightRenderer.render(LightStage); } document.body.appendChild(MainRenderer.view); var canvas = LightRenderer.view; var LightStageBaseTexture = new PIXI.BaseTexture.fromCanvas(canvas,PIXI.SCALE_MODES.LINEAR); var LightStageTexture = new PIXI.Texture(LightStageBaseTexture);var spriteLightStage = new PIXI.Sprite.(LightStageTexture);MainStage.addChild(LightStageTexture);// other code to add sprite to MainStageanimateMainStage();function animateMainStage() { requestAnimationFrame(animateMainStage);MainRenderer.render(MainStage);} </script> </body>i would like to know why the canvas don't display and why it isn't update. thanks in advance! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 6, 2016 Share Posted January 6, 2016 Its not every day we have pixi-lights here Are you sure that you use pixiv3? PIXI.Stage is absent here, its just regular container. I mean, PIXI.Stage doesnt work anymore. Quote Link to comment Share on other sites More sharing options...
xerver Posted January 6, 2016 Share Posted January 6, 2016 What doesn't work? What error do you get? This is a syntax error here:var spriteLightStage = new PIXI.Sprite.(LightStageTexture); Quote Link to comment Share on other sites More sharing options...
Italianbadboy Posted January 9, 2016 Author Share Posted January 9, 2016 What you mean? I wanted to create a sprite with rhat texture Quote Link to comment Share on other sites More sharing options...
Italianbadboy Posted January 9, 2016 Author Share Posted January 9, 2016 No error ...only a white page appear. If Someone have understood on the mainstage of pixi should be a sprite1.this sprite1's texture is the stage ( or container) of pixi-light.js. i do so because pixi-light.js is limited in order of metod and function respect pixi version 3.xx and don't let me rotate a little star who scroll from right to left of a text.when the star scroll each char must be light. It's a wonderful effect with normal map in pixi-light.js. then the sprite2 of the mainstage is the little star who scroll. Now i post the new test i have written using rendertexture function. In this case background image and text sprite are diplayed., the little star too but the normale map effect isn't diplayed. Quote Link to comment Share on other sites More sharing options...
Italianbadboy Posted January 9, 2016 Author Share Posted January 9, 2016 <!DOCTYPE html><html> <head> <meta charset="utf8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" /> <title>Pixi Lighting</title> <style> html, body { margin:0; padding: 0 } </style> </head> <body> <script src="file:///C|/Program Files (x86)/three.js/examples/js/libs/stats.min.js"></script> <script src="file:///C|/Program Files (x86)/js/pixi.js/bin/pixi.js"></script> <script src="file:///C|/Program Files (x86)/js/pixi.js/pixi-lights-master/bin/pixi-lights.js"></script> <script> var LightRenderer = new PIXI.lights.WebGLDeferredRenderer(1355, 700), MainRenderer = new PIXI.autoDetectRenderer(1355, 700), LightStage = new PIXI.Container(), MainStage = new PIXI.Stage(0x000000); //MainStage = new PIXI.Container(), lightOnDeveloper = new PIXI.lights.PointLight(0xffffff,4), stats = new Stats();document.body.appendChild(MainRenderer.view);//document.body.appendChild(Lightrenderer.view); /*var canvas = document.getElementsByName(canvas); var context = canvas.getContext('2d'); var LightStageBaseTexture = new PIXI.BaseTexture(canvas); var LightStageTexture = new PIXI.Texture(LightStageBaseTexture);*/ PIXI.loader .add('bg','maschera.png') .add('bg_normal','maschera_n.png') .add('block_diffuse', 'dewveloper_2.png') .add('block_normal', 'dewveloper_normal.png') .load(function (loader, res) { var bg = new PIXI.Sprite(res.bg.texture); var block = new PIXI.Sprite(res.block_diffuse.texture); /*stella1.normalTexture = res.stella1_normal.texture; stella2.normalTexture = res.stella2_normal.texture;*/ bg.normalTexture = res.bg_normal.texture; block.normalTexture = res.block_normal.texture; block.position.set(100,70); LightStage.addChild(bg); LightStage.addChild(block); var ambientLight = new PIXI.lights.AmbientLight(0xFFFFFF,0.7);ambientLight.position.set(100,100); LightStage.addChild(ambientLight); // LightStage.addChild(new PIXI.lights.DirectionalLight(0xffffff, 1, block)); LightStage.addChild(lightOnDeveloper); LightRenderer.view.addEventListener('mousemove', function (e) { var rect = e.target.getBoundingClientRect(); lightOnDeveloper.position.x = e.clientX - rect.left; lightOnDeveloper.position.y = e.clientY - rect.top; }); /* renderer.view.addEventListener('click', function (e) { var rect = e.target.getBoundingClientRect(); var clickLight = new PIXI.lights.PointLight(0xffffff); clickLight.position.x = e.clientX - rect.left; clickLight.position.y = e.clientY - rect.top; stage.addChild(clickLight); });*/ animate(); }); function animate() { LightRenderer.render(LightStage); //stats.begin(); requestAnimationFrame(animate); }var LightStageObjRenderTexture = new PIXI.RenderTexture(MainRenderer, 1355, 700, PIXI.SCALE_MODES.LINEAR, 1);var LightStageSprite = new PIXI.Sprite(LightStageObjRenderTexture);LightStageSprite.x=0;LightStageSprite.y=0;MainStage.addChild(LightStageSprite); var texturestella1 = PIXI.Texture.fromImage('stella1_.png');// create a new Sprite using the texturevar stella1 = new PIXI.Sprite(texturestella1);stella1.height=8;stella1.weight=8;var texturestella2 = PIXI.Texture.fromImage('stella2_.png');// create a new Sprite using the texturevar stella2 = new PIXI.Sprite(texturestella2);stella2.height=8;stella2.weight=8;// center the sprite's anchor pointstella1.anchor.x = 0.5;stella1.anchor.y = 0.5;// center the sprite's anchor pointstella2.anchor.x = 0.5;stella2.anchor.y = 0.5; stella2.position.set(405,74); MainStage.addChild(stella2); stella1.position.set(405, 75); MainStage.addChild(stella1);animateMainStage();function animateMainStage() { LightStageObjRenderTexture.render(LightStage); requestAnimationFrame(animateMainStage);MainRenderer.render(MainStage);} </script> </body></html> Quote Link to comment Share on other sites More sharing options...
Italianbadboy Posted January 9, 2016 Author Share Posted January 9, 2016 i have read this post https://github.com/pixijs/pixi.js/issues/430this one https://github.com/pixijs/pixi.js/issues/761but refer to an older version of pixi ... in pixi v3 there'sn't dirty property...this https://github.com/pixijs/pixi.js/issues/1980....this http://www.html5gamedevs.com/topic/9255-pixijs-caching/page-2...this https://www.snip2code.com/Snippet/181404/Update-pixi-texture-from-canvas 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.