catafest Posted December 29, 2015 Share Posted December 29, 2015 I want to move the mask with mouse and I think I make something wrong.But seam the problem come when I put animate() function ... the javascript code not be for me very clean , but I'm new with pixijs.This is the default project http://free-tutorials.org/download/pixi_001_tutorial.htmlThis is the next step with animate function:<!DOCTYPE html><html><title>Page Title</title><script type="text/javascript" src="pixi.js"></script></script><body style="background:black"><h3 style="color:white" >Demo with PIXI and mask png file type image !</h3><p style="color:white">Moving mask:</p><script type="text/javascript">var renderer = new PIXI.WebGLRenderer(480, 385);document.body.appendChild(renderer.view);var stage = new PIXI.Container();PIXI.loader.add([ 'bur_effect.jpg', 'datini.jpg', 'mask.png']).load(function() { var ground = new PIXI.Sprite(PIXI.utils.TextureCache['bur_effect.jpg']); var light = new PIXI.Sprite(PIXI.utils.TextureCache['datini.jpg']); var mask = new PIXI.Sprite(PIXI.utils.TextureCache['mask.png']); stage.addChild(ground); light.blendMode = PIXI.BLEND_MODES.ADD; light.mask = mask; stage.addChild(light); renderer.render(stage);};animate();function animate() { count += 0.1; mask.clear(); mask.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count)* 20); light.mask = mask; renderer.render(stage); requestAnimationFrame(animate);});</script></body></html> Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 30, 2015 Share Posted December 30, 2015 1) Cant download its resources Do I have to register/login? 2) new PIXI.Sprite(PIXI.utils.TextureCache['mask.png']) is same as Sprite.fromImage('mask.png') just for your knowledge Quote Link to comment Share on other sites More sharing options...
catafest Posted December 30, 2015 Author Share Posted December 30, 2015 1) see all ... in the bottom is a link : http://free-tutorials.org/download/pixi_001_tutorial.html2) it's a load and add functions , I think is need to rewrite the code with animate and mouse movement function , but I don't know how.1) Cant download its resources Do I have to register/login? 2) new PIXI.Sprite(PIXI.utils.TextureCache['mask.png']) is same as Sprite.fromImage('mask.png') just for your knowledge Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 30, 2015 Share Posted December 30, 2015 1) see all ... in the bottom is a link : http://free-tutorials.org/download/pixi_001_tutorial.html2) it's a load and add functions , I think is need to rewrite the code with animate and mouse movement function , but I don't know how. I didnt register yet BUT i can point you in right directions, there are two ways: 1) DIRECT WAY: renderer.plugins.interaction.mouse.global is the mouse position, and you can follow it in animate(). 2) stage.on('mousemove', function(data) { ... } ) will register a listener in which you can move mask position In any case, if you want to study pixi or make something with it , i recommend to clone https://github.com/pixijs/pixi.js/ and browse the code. We're working on new examples and docs but some answers can be obtained only by looking inside, there's nothing nightmarish in that code. Quote Link to comment Share on other sites More sharing options...
xerver Posted December 31, 2015 Share Posted December 31, 2015 Don't do this: PIXI.loader.add([ 'bur_effect.jpg', 'datini.jpg', 'mask.png']).load(function() { var ground = new PIXI.Sprite(PIXI.utils.TextureCache['bur_effect.jpg']); var light = new PIXI.Sprite(PIXI.utils.TextureCache['datini.jpg']); var mask = new PIXI.Sprite(PIXI.utils.TextureCache['mask.png']);Instead use the resources argument:PIXI.loader.add([ 'bur_effect.jpg', 'datini.jpg', 'mask.png']).load(function(loader, resources) { var ground = new PIXI.Sprite(resources['bur_effect.jpg'].texture); var light = new PIXI.Sprite(resources['datini.jpg'].texture); var mask = new PIXI.Sprite(resources['mask.png'].texture);TextureCache is a private, internal object that will go away eventually. You can also access the loaded resources at any time via PIXI.loader.resources. Quote Link to comment Share on other sites More sharing options...
catafest Posted January 6, 2016 Author Share Posted January 6, 2016 @xerver : I don't want to crop with circle ( seam this is the result of your code) , just I want to move the mask.@ivan.popelyshev : I think both solutions can working if I will dig for example, but I want to lerning the corect way to do it, so if you help me... 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.