Phaserjs基础教程第五节:位移、拖拽和补间动画

 我在之前的教程中说过,所有游戏窗口中能看到的元素,几乎都是有有x,y坐标的,通过对改变坐标值,就可以实现它的移动操作,比如下面这个奔跑的机器人:

function preload() {
    game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
}

var s;
function create() {
    s = game.add.sprite(game.world.centerX, game.world.centerY, 'bot');
    s.anchor.setTo(0.5, 0.5);

    s.animations.add('run');
    s.animations.play('run', 10, true);
}

function update() {
    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
        s.x -= 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        s.x += 4;
    }

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
    {
        s.y -= 4;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
    {
        s.y += 4;
    }
}

function render() {
    game.debug.spriteInfo(s, 20, 32);
}

       这个例子中,我定义了上下左右四个方向键,使它们分别可以控制机器人的xy坐标增减,当你按下按键时,你会发想机器人的位置也发生了,这样就实现了位移的操作,就是这么简单。

       再来说说拖拽,拖拽的操作很简单:按下、移动、松开,相应地也就有了三个状态的事件,查看下面的代码:
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, render: render });

function preload() {
    game.load.image('grid', 'assets/tests/debug-grid-1920x1920.png');
    game.load.image('atari', 'assets/sprites/atari800xl.png');
    game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
}

var result = 'Drag a sprite';
function create() {
	//设置背景
    game.add.sprite(0, 0, 'grid');

	//添加一个对象组,设置对象组可用
    var group = game.add.group();
    group.inputEnableChildren = true;

    var atari = group.create(32, 100, 'atari');
    //  使atari对象可以操作
    atari.inputEnabled = true;
    atari.input.enableDrag();
//  atari.input.enableDrag(true, true, true);
    atari.events.onDragStart.add(onDragStart, this);
    atari.events.onDragStop.add(onDragStop, this);

    var sonic = group.create(300, 200, 'sonic');
    sonic.inputEnabled = true;
    sonic.input.enableDrag();
//  sonic.input.enableDrag(true, true, true);
    sonic.events.onDragStart.add(onDragStart, this);
    sonic.events.onDragStop.add(onDragStop, this);

    group.onChildInputDown.add(onDown, this);
}

function onDown(sprite, pointer) {
    result = "Down " + sprite.key;
    console.log('down', sprite.key);
}

function onDragStart(sprite, pointer) {
    result = "Dragging " + sprite.key;
}

function onDragStop(sprite, pointer) {
    result = sprite.key + " dropped at x:" + pointer.x + " y: " + pointer.y;
    if (pointer.y > 400)
    {
        console.log('input disabled on', sprite.key);
        sprite.input.enabled = false;

        sprite.sendToBack();
    }
}

function render() {
    game.debug.text(result, 10, 20); 
	game.debug.text('拖动结束时纵坐标大于400,将禁止再次拖动!', 30, 560);
	//game.add.text(30, 560, '拖动结束时纵坐标大于400,将禁止再次拖动!', {font: '24px Arial'});		//这句是错误示例,一定要避免这样使用,输出调试信息时,一定要使用game.debug.xxxxinfo()方法。
}

 运行了上面的代码之后,再把那两行注释的代码取消注释,再运行下,你会发现其中有着明显地不同,相比较而言,参数为true的拖动效果要稍微好一些,这里,就要介绍一下enableDrag的参数了(具体描述在API都有,链接在这:http://phaser.io/docs/2.6.2/Phaser.InputHandler.html#enableDrag):

       enableDrag(lockCenter,bringToTop, pixelPerfect, alphaThreshold, boundsRect, boundsSprite)

       六个参数,含义如下:

 lockCenter:是否锁定中心,无论你按下的位置是在sprite的哪里,下一个画面sprite中心就会出现在你按下的地方;

 bringToTop:是否置顶,就是拖动结束后是否位于最顶层;

 pixelPerfect:是否启用像素识别,这样翻译有利于理解,一张png图片只可能是矩形,但是上面的图像不一定占满整个矩形,如果启用像素识别,代码会判断你点击的位置是否在图像上,如果点击的位置在空白区域,则拖动无效;

 alphaThreshold:像素识别的精度,取值范围0~255,数值越大精度越高;

 boundsRect:定义矩形边界;

 boundsSprite:定义一个sprite为边界,你可以试着添加一个和游戏窗口一样大的sprite图片,然后参数设置为它试下。

 ●注意:注意看render方法中添加的文字提示,如果想自己添加调试信息,就是用game.debug,如果没注意使用了下面的game.add,打开任务管理器,你就会发现你的浏览器内存一直在增加……

 最后再来说说补间动画,补间动画的概念大家都知道,其实说白了就是一个状态向另一个状态的变更,Phaserjs也提供了一个tween的构造器,可以修改对象的一个或多个属性,非常适用于对象的透明度、缩放等状态的改变,来看一个简单的例子:

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

function preload() {
	game.load.image('tile', 'assets/sprites/p2.jpeg');
	game.load.spritesheet('monster', 'assets/sprites/pixi_monsters.png', 154, 170);
}

function create() {
	// 设置一个边距使game.world比game.camera对象要大,否则无法实现game.camera的晃动效果
	var margin = 50;
	var x = -margin;
	var y = -margin;
	var w = game.world.width + margin * 2;
	var h = game.world.height + margin * 2;
	game.world.setBounds(x, y, w, h);
  
	//确认camera的位置是在0,0这个坐标
	game.world.camera.position.set(0);
	
	//添加一个背景图片
	game.add.tileSprite(x, y, w, h, 'tile');
	//添加一个图像,看起来清楚些
	var monster = game.add.sprite(400, 300, 'monster', 0);
	monster.anchor.setTo(0.5);
	
	//了解一下Phaser.Easing对象
	console.log(Phaser.Easing);
	
	//定义和执行动画
	addQuake();
}

function addQuake() {
  	//定义移动的距离
	var rumbleOffset = 50;
	//从相机当前的位置开始移动
	var properties = {
		x: game.camera.x - rumbleOffset
	};
	//持续时间
	var duration = 100;
	//重复次数
	var repeat = 4;
	//动画方式,支持对象和字符串两种方式
	//var ease = Phaser.Easing.Linear.None;
	var ease = 'Linear';
	//设置为true可以自动开始,false则需要手动调用start()方法
	var autoStart = false;
	//延迟x毫秒后开始
	var delay = 1000;
	//是否回到起始位置
	var yoyo = true;
	
	var quake = game.add.tween(game.camera)
		.to(properties, duration, ease, autoStart, delay, 0, yoyo);
	
	//我们定义结束后重新开始动画
	quake.onComplete.addOnce(addQuake);
	
	//开始动画
	quake.start();
}

 这里展示了一个简单的补间动画(参数的含义已经注释了),通过移动相机的位置使视图窗口内的元素发生变换,同时通过onComplete属性在动画结束时重新执行当前动画,使之无限循环。

 补间动画中,最重要的两个方法就是to和from了,因为这两个方法定义了状态的变更,它们的参数完全一样,只不过动画的起点不一样。至于其他的属性和方法,都很常规,有兴趣的可以去官网上仔细地看下:http://phaser.io/docs/2.6.2/Phaser.Tween.html,同时在下载的官方示例中,有很多补间动画的例子,不过讲的有些零散,大家还是都找出来运行下,看一下其中的知识点。

 我本来是想具体说一下Phaser.Easing对象的,后来想了想,还是自己动手记得比较熟练,所以已经打印在控制台了,同学们可以把感兴趣的都挑出来试一下,说实话,其实跟js的没有太大区别。

 好了,这一节我们讲到了一些简单的操作,操作虽然简单,但要熟练使用,还需要多多的练习,这一节就到这里,下一节了解一下物理引擎的简单使用。




  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值