HTML5游戏开发引擎Pixi.js简单例子

发表于:2014-09-16 10:25:58 | 阅读数:--次| 作者:小猪仔

摘要：HTML5游戏开发引擎Pixi.js简单例子

这篇文章中，介绍HTML5游戏引擎pixi.js的基本使用。相关引擎地址：

http://statics.webkfa.com/yxjs/pixi.js
相关代码如下：

导入类库：（使用webkfa的静态高速服务：http://statics.webkfa.com）

		js代码
	

<script type="text/javascript" src="http://statics.webkfa.com/yxjs/pixi.js"></script>

引擎使用：

		js代码
	

// 创建pixi的stage
var stage = new PIXI.Stage(0x222222);
 
// 创建一个渲染
var renderer = PIXI.autoDetectRenderer(400, 300);
 
// 添加到页面
document.body.appendChild(renderer.view);
 
requestAnimFrame( animate );

以上生成了最简单的pixi，下面创建游戏元素：

		js代码
	

// 创建添加一个素材
var texture = PIXI.Texture.fromImage("img/fist.png");
// 使用素材创建一个动画元素
var bunny = new PIXI.Sprite(texture);
 
// 居中
bunny.anchor.x = .5;
bunny.anchor.y = .5;
 
// 移动到游戏屏幕中央
bunny.position.x = 200;
bunny.position.y = 150;
 
stage.addChild(bunny);

最后是动画效果代码：

		js代码
	

function animate() {
requestAnimFrame( animate );

//添加旋转效果
bunny.rotation += 0.1;

//添加缩放效果
if(bunny.scale.x>=1){
 scaleflag = 1;
}else if(bunny.scale.x<=0.5){
 scaleflag = 0;
}

scaleflag?bunny.scale.x -= 0.05: bunny.scale.x +=0.05;
scaleflag?bunny.scale.y -= 0.05: bunny.scale.y +=0.05;
 
renderer.render(stage);
}

在线演示