173 lines
3.3 KiB
HTML
173 lines
3.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>pixi.js example 6 Interactivity</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
}
|
|
|
|
#help{
|
|
position: absolute;
|
|
z-index: 20;
|
|
color: black;
|
|
top: 20px;
|
|
left: 120px;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../bin/pixi.dev.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
// create an new instance of a pixi stage
|
|
// the second parameter is interactivity...
|
|
var interactive = true;
|
|
var stage = new PIXI.Stage(0x000000, interactive);
|
|
|
|
// create a renderer instance.
|
|
var renderer = PIXI.autoDetectRenderer(620, 400);
|
|
|
|
// add the renderer view element to the DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
// create a background..
|
|
var background = PIXI.Sprite.fromImage("button_test_BG.jpg");
|
|
|
|
// add background to stage...
|
|
stage.addChild(background);
|
|
|
|
// create some textures from an image path
|
|
var textureButton = PIXI.Texture.fromImage("button.png");
|
|
var textureButtonDown = PIXI.Texture.fromImage("buttonDown.png");
|
|
var textureButtonOver = PIXI.Texture.fromImage("buttonOver.png");
|
|
|
|
var buttons = [];
|
|
|
|
var buttonPositions = [175,75,
|
|
600-145, 75,
|
|
600/2 - 20, 400/2 + 10,
|
|
175, 400-75,
|
|
600-115, 400-95];
|
|
|
|
|
|
for (var i=0; i < 5; i++)
|
|
{
|
|
var button = new PIXI.Sprite(textureButton);
|
|
button.buttonMode = true;
|
|
|
|
button.anchor.x = 0.5;
|
|
button.anchor.y = 0.5;
|
|
|
|
button.position.x = buttonPositions[i*2];
|
|
button.position.y = buttonPositions[i*2 + 1];
|
|
|
|
// make the button interactive..
|
|
button.interactive = true;
|
|
|
|
// set the mousedown and touchstart callback..
|
|
button.mousedown = button.touchstart = function(data){
|
|
|
|
this.isdown = true;
|
|
this.setTexture(textureButtonDown);
|
|
this.alpha = 1;
|
|
}
|
|
|
|
// set the mouseup and touchend callback..
|
|
button.mouseup = button.touchend = button.mouseupoutside = button.touchendoutside = function(data){
|
|
this.isdown = false;
|
|
|
|
if(this.isOver)
|
|
{
|
|
this.setTexture(textureButtonOver);
|
|
}
|
|
else
|
|
{
|
|
this.setTexture(textureButton);
|
|
}
|
|
}
|
|
|
|
// set the mouseover callback..
|
|
button.mouseover = function(data){
|
|
|
|
this.isOver = true;
|
|
|
|
if(this.isdown)return
|
|
|
|
this.setTexture(textureButtonOver)
|
|
}
|
|
|
|
// set the mouseout callback..
|
|
button.mouseout = function(data){
|
|
|
|
this.isOver = false;
|
|
|
|
if(this.isdown)return
|
|
this.setTexture(textureButton)
|
|
}
|
|
|
|
button.click = function(data){
|
|
|
|
console.log("CLICK!");
|
|
}
|
|
|
|
button.tap = function(data){
|
|
|
|
console.log("TAP!!");
|
|
}
|
|
|
|
// add it to the stage
|
|
stage.addChild(button);
|
|
|
|
// add button to array
|
|
buttons.push(button);
|
|
};
|
|
|
|
// set some silly values...
|
|
|
|
buttons[0].scale.x = 1.2;
|
|
|
|
buttons[1].scale.y = 1.2;
|
|
|
|
buttons[2].rotation = Math.PI/10;
|
|
|
|
buttons[3].scale.x = 0.8;
|
|
buttons[3].scale.y = 0.8;
|
|
|
|
buttons[4].scale.x = 0.8;
|
|
buttons[4].scale.y = 1.2;
|
|
buttons[4].rotation = Math.PI;
|
|
|
|
function animate() {
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
// render the stage
|
|
renderer.render(stage);
|
|
}
|
|
|
|
// add a logo!
|
|
var pixiLogo = PIXI.Sprite.fromImage("pixi.png");
|
|
stage.addChild(pixiLogo);
|
|
|
|
pixiLogo.buttonMode = true;
|
|
|
|
pixiLogo.position.x = 620 - 56;
|
|
pixiLogo.position.y = 400 - 32;
|
|
|
|
pixiLogo.setInteractive(true);
|
|
|
|
pixiLogo.click = pixiLogo.tap = function(){
|
|
|
|
var win=window.open("http://www.pixijs.com", '_blank');
|
|
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|