02 点击一张图像

原文地址：http://www.phaser.io/examples/v2/basics/02-click-on-an-image。

效果

源代码

window.onload = function () {
    var game = new Phaser.Game(600, 400, Phaser.AUTO, 'phaser_container', { preload: preload, create: create });

    var text;
    var counter = 0;

    function preload() {

        //  在preloader函数中可以加载所需的素材

        //  我们加载了一张图像。第一个参数是该图像在代码中的唯一名称，我们可以通过这个名称使用这个图像。

        //  第二个参数是图像的相对URL地址
        game.load.image('einstein', 'images/phaser/einstein.png');

    }

    function create() {

        // 使用刚才加载的图像创建一个简单的sprite，然后将它显示在屏幕的中央。
        var image = game.add.sprite(game.world.centerX, game.world.centerY, 'einstein');

        //  将图像的锚点移至它的中心位置，这样它就可以显示在屏幕中央了
        image.anchor.set(0.5);

        //  使此图像可以处理各种输入行为(点击等)
        image.inputEnabled = true;

        text = game.add.text(200, 16, '', { fill: '#ffffff' });

        image.events.onInputDown.add(listener, this);

    }

    function listener() {

        counter++;
        text.text = "你点击了图像 " + counter + " 次！";
    }
}

解释

anchor（锚点）

anchor（锚点）设置了纹理的原点。默认值为0,0，表示纹理的原点位移它的左上角，设置为0.5,0.5表示原点位于图像中心，1,1表示图像右下角。

text对象

构造函数

new Text(game, x, y, text, style)

创建一个对象用于显示文字。第1个参数为Phaser.Game对象，第2、3个参数为文字位置，第4个参数为文字内容，第5个参数为文字样式，本例只设置了文字颜色为白色。

inputEnabled

默认情况下一个Game Object不会处理输入事件。若将inputEnabled设置为true，则会对这个对象创建一个Phaser.InputHandler，此时这个对象就可以处理点击/触摸事件了。

如果你想暂时停止输入处理，最好设置input.enabled = false ，这样不会重置Input Handler的内部属性了，在需要的时候可以随时切换回来。

发布时间：2016/7/29 下午10:26:45  阅读次数：4962