第二部分 显示对象（图片图形按钮精灵）

Phaser 中的显示对象是我们构建绚丽多彩的游戏世界的基础,本笔记记录关于显示对象的学习。

首先：了解一下Phaser中的显示对象种类

然后：了解一下游戏运行流程

接下来，开始一个一个显示对像的使用方法

 1、 图片

①单张图片

var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);
function state(game){
	this.preload = function(){
		game.load.image('cat', 'assets/cat.png');
	}
	this.create = function(){
		game.add.image(100, 100, 'cat');
	}
}

②整合图片 每小格大小150*162

var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);

function state(game){

	this.preload = function(){
		game.load.spritesheet('sprite', 'assets/sprite.png', 150, 162);
	}

	this.create = function(){
		game.add.image(0, 0, 'sprite', 0);
		game.add.image(200, 50, 'sprite', 1);
		game.add.image(0, 200, 'sprite', 2);
		game.add.image(200, 250, 'sprite', 3);
	}
}

2、 图形

关于图形的填充

var graphics = game.add.graphics(0, 0);

graphics.beginFill(0xFF0000);  //指定填充的颜色  ，还可以有第二个参数，指定透明度，值为0-1之间
graphics.drawRect(0, 0, 100, 100);
graphics.drawCircle(180, 100, 100);
graphics.drawEllipse(150, 220, 100, 50);
graphics.arc(100, 300, 50, 0, Math.PI);
graphics.beginFill(0x0000FF);
graphics.drawPolygon(50,380, 200,380, 250,430, 180,480, 20,450);
graphics.endFill();//结束填充

效果：

关于图形的描边：

var graphics = game.add.graphics(0, 0);

graphics.lineStyle(5, 0xFF0000);//第一个参数是描力的宽，第二个是颜色
graphics.drawRect(0, 0, 100, 100);
graphics.drawCircle(180, 100, 100);
graphics.drawEllipse(150, 220, 100, 50);
graphics.arc(100, 300, 50, 0, Math.PI);
graphics.lineStyle(5, 0x0000FF);
graphics.drawPolygon(50,380, 200,380, 250,430, 180,480, 20,450);

关于画直线线条：

var graphics = game.add.graphics(0, 0);
			//设置描边宽度和颜色
graphics.lineStyle(3, 0x00FF00);
			//绘制直线  粗为3 颜色为
graphics.moveTo(50, 50);//moveTo 设置起点
graphics.lineTo(300, 100);//lineTo 设置终点
			//绘制折线
graphics.moveTo(50, 200);
graphics.lineTo(200, 250);
graphics.lineTo(100, 300);
graphics.lineTo(200, 350);

关于曲线：

var graphics = game.add.graphics(0, 0);
			//设置描边宽度和颜色
graphics.lineStyle(3, 0x00FF00);
			//Phaser中可用的是二次贝塞尔曲线
graphics.moveTo(50, 50);//设置曲线起点
graphics.bezierCurveTo(250,50, 350,350, 50,400);//设置两个控制点（（250.50）（350.350））和终点（50.400）
//bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY);

关于清除图形

graphics.clear();//可以清除graphics中绘制的所有图形，重轩填充和描边

3 按钮

var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);

	function state(game){

		this.preload = function(){
			game.load.spritesheet('btn', 'assets/btn.png', 200, 38);
		}

		this.create = function(){
			game.add.button(100, 250, 'btn', function(){
				//alert('按钮被点击了！');
			}, game, 2, 3, 1, 0);
		}
		
	}

效果：

4 精灵

var cat1 = game.add.sprite(200, 250, 'cat');
//var cat1 = game.add.sprite(x, y, key，frame使用的帧，group所属的组);

位置的设置：cat1.x = *** cat1.y=*** 

锚点的设置：cat1.anchor.set(1, 1);值是0-1间的数，可以设置任何位置，默认为左上角0.0，如果设置为中间就是0.5 0.5

宽和高的设置：cat2.width = 50;cat2.height = 50;

改变颜色：cat2.tint = 16进制颜色

遮罩：图形1 图形2  图形1.mask=图形2，图形2是图形1的遮罩

其它：

例子：

/*var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);
	
	function state(game){
		this.preload = function(){
			game.load.image('cat', 'assets/cat.png');
		}
		this.create = function(){

			var cat1 = game.add.sprite(200, 250, 'cat');
			cat1.anchor.set(1, 1);

			var cat2 = game.add.sprite(200, 250, 'cat');
			cat2.anchor.set(0.5, 0.5);

			var cat3 = game.add.sprite(200, 250, 'cat');
			cat3.anchor.set(0, 0);

		}
		
	}*/







	/*var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);

	function state(game){

		this.preload = function(){
			game.load.image('cat', 'assets/cat.png');
		}

		this.create = function(){



			var cat1 = game.add.sprite(100, 50, 'cat');
			
			var cat2 = game.add.sprite(100, 200, 'cat');
			cat2.width = 50;
			cat2.height = 50;

			var cat3 = game.add.sprite(100, 300, 'cat');
			cat3.width = 100;
			cat3.height = 200;
		


		}
		
	}*/


	/*var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);

	function state(game){

		this.preload = function(){
			game.load.image('cat', 'assets/cat.png');
		}

		this.create = function(){



			var sprite = game.add.sprite(200, 200, 'cat');
			
			sprite.alpha = 0.5; //透明度,0为完全透明,1为完全不透明

			sprite.angle = 90; //旋转角度,单位为度

			sprite.scale.x = 2; //水平方向缩放,大于1为放大，小于1为缩小
			sprite.scale.y = 2; //垂直方向缩放,大于1为放大，小于1为缩小

			sprite.visible = true; //是否可见，true为可见，false不可见

			//是否需要处理该元素,为false时会在游戏的每一帧中
			//都跳过对该元素的处理，且会把该元素设为不可见
			//合理的运行这个属性可以提高游戏性能
			sprite.exists = true;	


		}
		
	}*/




	/*var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);

	function state(game){

		this.preload = function(){
			game.load.image('cat', 'assets/cat.png');
		}

		this.create = function(){



			var cat1 = game.add.sprite(100, 50, 'cat');
			
			var cat2 = game.add.sprite(100, 200, 'cat');
			cat2.tint = 0x0000FF; //蓝色	

			var cat3 = game.add.sprite(100, 350, 'cat');
			cat3.tint = 0x00FF00; //绿色 
		


		}
		
	}*/



	var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);

	function state(game){

		this.preload = function(){
			game.load.image('bg', 'assets/bg.jpg');
		}

		this.create = function(){
			var bg = game.add.image(0, 0, 'bg'); //背景图
			var graphics = game.add.graphics(0, 0);
			graphics.beginFill(0xFFFFFF);//必须要填充一个颜色
			var circle = graphics.drawCircle(150, 250, 200);//画一个圆
			bg.mask = circle; //把圆作为遮罩
		}
		
	}

5 瓦片精灵

一个小图片，进行拼接

var game = new Phaser.Game(400, 500, Phaser.AUTO, 'container', state);
function state(game){
	this.preload = function(){
		game.load.image('tile', 'assets/tile.png');
	}
	this.create = function(){

		var tileSprite = game.add.tileSprite(0, 0, game.width, game.height, 'tile');
		//game.add.tileSprite(X, Y, W, H, 'tile');
		//tileSprite.autoScroll(-20, 0); //每秒20像素向左滚动
		
		//tileSprite.autoScroll(0, -20); //每秒20像素向上滚动
		tileSprite.autoScroll(-20, -20); //向左上方滚动
		//tileSprite.stopScroll(); //停止滚动
	}
	
}