Pixijs マウスホバーでテキストを表示する

pixijs-interactive-hover.png

マウスホバーでテキストを表示する

<script src="http://miffysora.wikidot.com/local--files/webgl/pixi.min.js" type="text/javascript"></script>
</script>
<script type='text/javascript' >
var renderer = PIXI.autoDetectRenderer(200, 200,{backgroundColor : 0x533E25});
document.body.appendChild(renderer.view);
 
// create the root of the scene graph
var stage = new PIXI.Container();
 
var sprite = PIXI.Sprite.fromImage('http://miffysora.wdfiles.com/local--files/pixijs/favisora.png');
sprite.position.set(100,80);
sprite.interactive = true;
//onはJQueryの関数です
sprite.on('mouseover', onHover);
sprite.on('mouseout', onMouseOut);
stage.addChild(sprite);
 
var text = new PIXI.Text("ソラちゃんです",{font:'bold 8pt Arial', fill:'#A5D9DD'});
    text.position.x = 10;
    text.position.y = -10;
    text.visible = false;
sprite.addChild(text);
 
function onHover() {
   text.visible = true;
}
function onMouseOut() {
   text.visible = false;
}
//アニメーションスタート
animate();
function animate() {
    requestAnimationFrame(animate);
    renderer.render(stage);
}
</script>
<body>
</body>

サポートサイト Wikidot.com