pixi.js中有MovieClip类，是通过传入一个Texture数组实现的。
资源稍微多一点，手动实现一个一个的MovieClip是不现实的，需要借助工具批量完成，createjs、egret、cocos都有自己的格式。
这里我们通过egret论坛中网友提供的一个jsfl插件来实现。
插件地址：http://bbs.egret.com/thread-127-1-1.html
还是先看最终效果吧。
首先用上面提到的jsfl，从flash中导出sprite表。
包括一张图片和一个json文件。本例中用到的json格式如下：
var 城堡破坏者_json={
"mc": {
"Hero": {
"frameRate":24,
"labels": [
],
"frames": [
{"res":"Hero0000","x":-200.25,"y":-244.1},
{"res":"Hero0001","x":-196.25,"y":-237.1},
{"res":"Hero0002","x":-192.25,"y":-230.1},
{"res":"Hero0003","x":-189.25,"y":-224.1},
{"res":"Hero0004","x":-183.25,"y":-213.1},
{"res":"Hero0005","x":-177.25,"y":-202.1},
{"res":"Hero0006","x":-172.25,"y":-192.1},
{"res":"Hero0007","x":-177.25,"y":-203.1},
{"res":"Hero0008","x":-182.25,"y":-214.1},
{"res":"Hero0009","x":-187.25,"y":-225.1},
{"res":"Hero0010","x":-191.25,"y":-231.1},
{"res":"Hero0011","x":-195.25,"y":-237.1},
{"res":"Hero0012","x":-200.25,"y":-244.1},
{"res":"Hero0013","x":-200.25,"y":-244.1},
{"res":"Hero0014","x":-196.25,"y":-237.1},
{"res":"Hero0015","x":-192.25,"y":-230.1},
{"res":"Hero0016","x":-189.25,"y":-224.1},
{"res":"Hero0017","x":-183.25,"y":-213.1},
{"res":"Hero0018","x":-177.25,"y":-202.1},
{"res":"Hero0019","x":-172.25,"y":-192.1},
{"res":"Hero0020","x":-177.25,"y":-203.1},
{"res":"Hero0021","x":-182.25,"y":-214.1},
{"res":"Hero0022","x":-187.25,"y":-225.1},
{"res":"Hero0023","x":-191.25,"y":-231.1},
{"res":"Hero0024","x":-195.25,"y":-237.1},
{"res":"Hero0025","x":-200.25,"y":-244.1}
]
}
},
"res": {
"Hero0000":{"x":0,"y":0,"w":376,"h":407},
"Hero0001":{"x":376,"y":0,"w":368,"h":410},
"Hero0002":{"x":744,"y":0,"w":368,"h":410},
"Hero0003":{"x":1112,"y":0,"w":369,"h":411},
"Hero0004":{"x":1481,"y":0,"w":368,"h":400},
"Hero0005":{"x":0,"y":411,"w":367,"h":389},
"Hero0006":{"x":367,"y":411,"w":367,"h":382},
"Hero0007":{"x":734,"y":411,"w":368,"h":393},
"Hero0008":{"x":1102,"y":411,"w":368,"h":404},
"Hero0009":{"x":1470,"y":411,"w":367,"h":416},
"Hero0010":{"x":0,"y":827,"w":367,"h":427},
"Hero0011":{"x":367,"y":827,"w":367,"h":423},
"Hero0012":{"x":734,"y":827,"w":376,"h":407},
"Hero0013":{"x":1110,"y":827,"w":376,"h":407},
"Hero0014":{"x":1486,"y":827,"w":368,"h":410},
"Hero0015":{"x":0,"y":1254,"w":368,"h":410},
"Hero0016":{"x":368,"y":1254,"w":369,"h":411},
"Hero0017":{"x":737,"y":1254,"w":368,"h":400},
"Hero0018":{"x":1105,"y":1254,"w":367,"h":389},
"Hero0019":{"x":1472,"y":1254,"w":367,"h":382},
"Hero0020":{"x":0,"y":1665,"w":368,"h":393},
"Hero0021":{"x":368,"y":1665,"w":368,"h":404},
"Hero0022":{"x":736,"y":1665,"w":367,"h":416},
"Hero0023":{"x":1103,"y":1665,"w":367,"h":427},
"Hero0024":{"x":1470,"y":1665,"w":367,"h":423},
"Hero0025":{"x":0,"y":2092,"w":376,"h":407}
}
}为了加载方便，我们在最前面加上了
var 城堡破坏者_json=
这样，我们就可以把json文件当做js文件来读取，然后通过变量名直接取到变量。
主要代码如下：
<html>
<head>
<title>pixijs入门-MovieClip</title>
<script type="text/javascript" src="/js/pixi.min.js"></script>
<script type="text/javascript" src="js/HResources.js"></script>
<script type="text/javascript">
var frameRate=100;
var renderer;
var stage;
var tf;
var fps=0;
var ticker;
window.onload = function() {
HResources.data=[
{"type":"js","src":"assets/城堡破坏者.json"},
{"type":"img","src":"assets/城堡破坏者.png","tag":"城堡破坏者"},
{"type":"js","src":"js/MovieClipManager.js"}
];
HResources.preLoad(
function(value){
console.log("已加载："+parseInt(value*100)+"%");
},
function(){
console.log("加载完成。");
init();
}
);
}
function init(){
//准备MovieClip资源管理器
MovieClipManager.add(城堡破坏者_json,HResources.getResourceByTag("城堡破坏者"));
renderer = new PIXI.WebGLRenderer(600, 400);
document.body.appendChild(renderer.view);
stage = new PIXI.Container();
var hero=MovieClipManager.getMc("Hero");
stage.addChild(hero);
hero.play();
tf = new PIXI.Text("fps:0", {
font: '24px Arial',
fill: 0xff1010,
align: 'left'
});
stage.addChild(tf);
ticker=PIXI.ticker.shared;
ticker.autoStart=false;
//ticker.speed = 0.5;
ticker.start();
ticker.add(function(time){
renderer.render(stage);
//console.log("render:"+fps);
});
setInterval(showFps, 1000);
}
function showFps(){
tf.text="fps:"+Math.round(ticker.FPS);
}
</script>
</head>
<body>
</body>
</html>用到了两个js文件，HResources.js、MovieClipManager.js，其中HResources.js是我自己写的，用来加载资源的类。MovieClipManager.js是用来将图片和json转成MovieClip的类。
HResources.js就不多说了，主要看一下MovieClipManager.js。源码如下：
//-----------------MovieClipManager.js---------------------
/**
* MovieClip的Texture资源管理
*/
var MovieClipManager=new (function(a){
var s=this;
var cache={};
/**
* 资源管理器中添加内容
* @param Object mcJson egret生成的MovieClip的资源描述文件，json格式
* @param Image imgUrl html中的图片对象
*/
s.add=function(mcJson,img){
var mc=mcJson.mc;
var res=mcJson.res;
var baseTexture=new PIXI.BaseTexture(img);
for(var key in mc){
//console.log(key,mc[key])
var frames=mc[key].frames;
var arr=[];
for(var i=0;i<frames.length;i++){
var o=frames[i];
var rect=res[o.res];
var texture=new PIXI.Texture(baseTexture, new PIXI.Rectangle(rect.x, rect.y, rect.w, rect.h));
arr.push(texture);
}
cache[key]=arr;
}
}
/**
* 获取MovieClip
* @param String name MovieClip的名字
* @return PIXI.extras.MovieClip
*/
s.getMc=function(name){
var mc=new PIXI.extras.MovieClip(cache[name]);
mc.gotoAndStop(0);
return mc;
}
});解析json对象，自己观察一下json的结构就会了，需要提一下，通过dom中的img对象创建Texture,需要用到Texture的基类BaseTeture。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。