Italianbadboy

Members
  • Content Count

    5
  • Joined

  • Last visited

  1. Italianbadboy

    use canvas as texture in pixi v3

    i have read this post https://github.com/pixijs/pixi.js/issues/430 this one https://github.com/pixijs/pixi.js/issues/761 but 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
  2. Italianbadboy

    use canvas as texture in pixi v3

    <!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 texture var stella1 = new PIXI.Sprite(texturestella1); stella1.height=8; stella1.weight=8; var texturestella2 = PIXI.Texture.fromImage('stella2_.png'); // create a new Sprite using the texture var stella2 = new PIXI.Sprite(texturestella2); stella2.height=8; stella2.weight=8; // center the sprite's anchor point stella1.anchor.x = 0.5; stella1.anchor.y = 0.5; // center the sprite's anchor point stella2.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>
  3. Italianbadboy

    use canvas as texture in pixi v3

    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.
  4. Italianbadboy

    use canvas as texture in pixi v3

    What you mean? I wanted to create a sprite with rhat texture
  5. Italianbadboy

    use canvas as texture in pixi v3

    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!