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 22:26:45  阅读次数:4129

2006 - 2024,推荐分辨率1024*768以上,推荐浏览器Chrome、Edge等现代浏览器,截止2021年12月5日的访问次数:1872万9823 站长邮箱

沪ICP备18037240号-1

沪公网安备 31011002002865号