一、概括
本文主要讲述用Egret做的播放器计时器和裁剪器，还有其他常用功能模块（碰撞检测、遮罩这些），这些都是后面加进去的，其实都是主要便于学习吧。
二、视频演示
三、功能模块
1.音乐播放器
1）UI界面
2）代码
//音乐皮肤
public up:eui.Button;
public down:eui.Button;
public Sound_value:eui.VSlider;
public play:eui.ToggleButton;
public Sound_text:eui.Label;
//音乐属性
public soundIndex:number=0;
public isPlay:boolean=false;
public S_value:egret.SoundChannel;
public PlayStart:number=0;
constructor(){
super();
this.skinName="resource/Tool_skins/MusicPlayer.exml"
}
protected createChildren(): void {
super.createChildren();
//播放器
this.MusicPlay();
}
public MusicPlay(){
let Sourdarr:string[]=[];
let Sourd:egret.Sound=new egret.Sound;
//load加载
Sourd.load("resource/sound/李灿松 - 总会遇见的 在这个季节.mp3");
Sourdarr[0]="resource/sound/李灿松 - 总会遇见的 在这个季节.mp3";
Sourdarr[1]="resource/sound/苏打绿 - 我好想你 (I Miss You So).mp3";
Sourdarr[2]="resource/sound/元念念 - 等到世界颠倒.mp3";
Sourdarr[3]="resource/sound/VariousArtists.mp3";
// //UrlLoader加载
// let Sourds1:egret.URLLoader[];
// Sourds1[0].dataFormat=egret.URLLoaderDataFormat.SOUND;
// Sourds1[0].load(new egret.URLRequest("resource/sound/VariousArtists.mp3"));
// //res加载
// const sound: egret.Sound = RES.getRes("sound_mp3");
// sound.play();
//替换歌名
this.Sound_text.text=Sourdarr[this.soundIndex].slice((Sourdarr[this.soundIndex].toString().indexOf("d/"))+2,Sourdarr[this.soundIndex].length-4); //
/*
上一首
*/
this.up.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
//起始重置
this.PlayStart=0;
if(this.soundIndex==0) this.soundIndex=Sourdarr.length-1;
else {
this.soundIndex-=1
}
this.Sound_text.text=Sourdarr[this.soundIndex].slice((Sourdarr[this.soundIndex].toString().indexOf("d/"))+2,Sourdarr[this.soundIndex].length-4); //
//播放上一首并停止现在这首
if(this.isPlay){ //如果正在播放
this.PlaySound(Sourd,Sourdarr,true) //暂停
this.isPlay=false;
//this.play.selected=false;
this.PlaySound(Sourd,Sourdarr,true)//播放上一首
}
else{ //没播放
this.play.selected=true;
this.PlaySound(Sourd,Sourdarr,true)//播放上一首
}
},this)
/*
下一首
*/
this.down.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
//起始重置
this.PlayStart=0;
//索引前置
if(this.soundIndex==Sourdarr.length-1) this.soundIndex=0;
else {
this.soundIndex+=1
}
this.Sound_text.text=Sourdarr[this.soundIndex].slice((Sourdarr[this.soundIndex].toString().indexOf("d/"))+2,Sourdarr[this.soundIndex].length-4); //
//播放下一首并停止现在这首
if(this.isPlay){ //如果正在播放
this.PlaySound(Sourd,Sourdarr,true) //暂停
this.isPlay=false;
this.PlaySound(Sourd,Sourdarr,true)//播放下一首
}
else{ //如果没正在播放
this.play.selected=true;
this.PlaySound(Sourd,Sourdarr,true)//播放下一首
}
},this)
/*
播放
*/
this.play.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.PlaySound(Sourd,Sourdarr,false);
},this)
/*
设置声音
*/
this.Sound_value.addEventListener(egret.TouchEvent.CHANGE,()=>{
this.S_value.volume=this.Sound_value.value/10;
},this)
}
//播放音乐
private PlaySound(Sourd:egret.Sound,Sourdarr:string[],isJump:boolean){
Sourd.load(Sourdarr[this.soundIndex]);
if(this.isPlay==false){
egret.log("开始播放")
if(isJump==true)
this.S_value=Sourd.play(0,1);
else
this.S_value=Sourd.play(this.PlayStart,1); //play（开始，次数）
this.isPlay=true;
}else{
egret.log("停止播放,播放到"+this.S_value.position)
this.PlayStart=this.S_value.position;
this.S_value.stop();
this.isPlay=false;
}
//console.log("这首歌的长度为"+Sourd.length) 好像不行 NaN
//播放完，关按钮
this.S_value.once(egret.Event.SOUND_COMPLETE,()=>{
console.log("播放完")
this.play.selected=false;
},this)2.视频播放器
1）UI界面
2）代码
//视频皮肤
public up1:eui.Button;
public down1:eui.Button;
public Video_Text:eui.Label;
public play1:eui.ToggleButton;
public Sound_value1:eui.VSlider;
public video_Group:eui.Group;
public Full_screen:eui.ToggleButton;
//视频属性
public video: egret.Video;
public Isplay:boolean=false;
public VideoIndex:number=0;
public V_value:number;
public PlayStart1:number=0;
constructor() {
super();
this.skinName="resource/Tool_skins/VideoPlayer.exml"
}
protected createChildren(): void {
super.createChildren();
//建视频
this.video = new egret.Video();
this.video.x = 0; //设置视频坐标x
this.video.y = 0; //设置视频坐标y
this.video.width = 445; //设置视频宽
this.video.height = 240; //设置视频高
this.video.fullscreen = false; //设置是否全屏（暂不支持移动设备）
//this.video.poster = "resource/image/MusicPlayer/Play.png"; //设置loding图
this.video_Group.addChild(this.video); //将视频添加到舞台
this.onLoad();
// 监听视频加载完成
// this.video.once(egret.Event.COMPLETE, this.onLoad, this);
// 监听视频加载失败
// this.video.once(egret.IOErrorEvent.IO_ERROR, this.onLoadErr, this);
}
private onLoad() {
let Videoarr:string[]=[]
Videoarr[0]="resource/video/Clanned.mp4"
Videoarr[1]="resource/video/西游记.mp4"
Videoarr[2]="resource/video/蜡笔小新.mp4"
Videoarr[3]="resource/video/大话西游.mp4"
//加载下标视频
this.video.load(Videoarr[this.VideoIndex]);
//替换视频名
this.Video_Text.text=Videoarr[this.VideoIndex].slice((Videoarr[this.VideoIndex].toString().indexOf("o/"))+2,Videoarr[this.VideoIndex].length-4); //
//上一部
this.up1.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.video.close();
//更新下标
if(this.VideoIndex==0)this.VideoIndex=Videoarr.length-1;
else{
this.VideoIndex-=1;
}
//加载下标视频
this.video.load(Videoarr[this.VideoIndex]);
//替换视频名
this.Video_Text.text=Videoarr[this.VideoIndex].slice((Videoarr[this.VideoIndex].toString().indexOf("o/"))+2,Videoarr[this.VideoIndex].length-4); //
if(this.Isplay){
this.Video_play(Videoarr);
this.Isplay=false
this.Video_play(Videoarr);
}else{
//更新按钮
this.play1.selected=true;
this.Video_play(Videoarr);
}
},this)
//下一部
this.down1.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.video.close();
//更新下标
if(this.VideoIndex==Videoarr.length-1)this.VideoIndex=0;
else{
this.VideoIndex+=1;
}
//加载下标视频
this.video.load(Videoarr[this.VideoIndex]);
//替换视频名
this.Video_Text.text=Videoarr[this.VideoIndex].slice((Videoarr[this.VideoIndex].toString().indexOf("o/"))+2,Videoarr[this.VideoIndex].length-4); //
if(this.Isplay){
this.Video_play(Videoarr);
this.Isplay=false
this.Video_play(Videoarr);
}else{
//更新按钮
this.play1.selected=true;
this.Video_play(Videoarr);
}
},this)
//设置音量
this.Sound_value1.addEventListener(egret.TouchEvent.CHANGE,()=>{
this.video.volume=this.Sound_value1.value/10;
},this)
//播放完自动关闭按钮
this.video.addEventListener(egret.Event.SOUND_COMPLETE,()=>{
},this)
//播放和停止
this.play1.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
console.log("按下")
this.Video_play(Videoarr)
}, this);
4
//全屏
this.Full_screen.addEventListener(egret.Event.CHANGE,this.setFullScreen,this);
//播放时间 video.position
//获取视频长度
console.log("视频长度为"+this.video.length) //好像不行 ，NaN
// //截图bitmapData
// const btnPrintScreen: eui.Button = new eui.Button();
// btnPrintScreen.label = "截图";
// btnPrintScreen.x = 100;
// btnPrintScreen.y = this.play1.y;
// this.addChild(btnPrintScreen);
// btnPrintScreen.addEventListener(egret.TouchEvent.TOUCH_TAP, this.printScreen, this);
}
// //截图
// private printScreen(e: egret.TouchEvent) {
// const bitmap: egret.Bitmap = new egret.Bitmap();
// bitmap.$bitmapData = this.video.bitmapData;
// bitmap.x = this.video.x+this.video.height;
// bitmap.y = this.video.y + this.video.height + 150;
// this.addChild(bitmap);
// }
//播放视频
public Video_play(Videoarr:string[]) {
console.log("视频播放位置："+this.video.position)
if(this.Isplay){
console.log("停止")
this.video.pause();
this.Isplay=false;
}else{
console.log("播放")
this.video.play();
this.Isplay=true;
}
}
//全屏
private setFullScreen(e: egret.TouchEvent) {
//当开关被选择后。该开关的selected属性将变为true,反之则为false
this.video.fullscreen = e.target.selected;
}小结：音乐播放器的话除了处理正常的暂停播放之外需要处理下一首和上一首的播放暂停，同时用全局变量PlayStart来存储播放的位置，重新播放时从该位置开始，这俩播放器原理基本一样，只不过视频属性不需要进行定位可以直接暂停播放，音乐播放器的话避免不了重新播放。
3.计时器
1）UI界面
2）代码
/*
Timer计时器
*/
private loadTimer(){
let isplay:boolean=false;
//监听Timer按钮
let timer:egret.Timer=new egret.Timer(2000,0) //间隔，次数
this.Timer_button.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
if(!timer.running){ //没在运行
timer.start();
timer.addEventListener(egret.TimerEvent.TIMER,()=>{
this.Timer_text.text=timer.currentCount.toString()
},this)
}else{
timer.stop();
}
},this)
//监听Timer重置
this.Timer_Reset.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
timer.reset();
this.Timer_text.text="0";
this.Timer_button.selected=false;
},this)
}
/*
Frame计时器(监听器)
*/
public isplay:boolean=false;
private now:number=0;
private loadFrame(){
//按钮
this.Frame_button.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
if(!this.isplay){ //没计时
this.timeOnEnterFrame=egret.getTimer();
this.addEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this)
this.isplay=true;
}else{ //正在计时按下
this.removeEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this)
this.isplay=false;
}
},this)
//重置按钮
this.Frame_reset.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.nomber=0;
this.isplay=false;
this.Frame_text.text="0";
this.Frame_button.selected=false;
this.removeEventListener(egret.Event.ENTER_FRAME,this.onEnterFrame,this)
},this)
}
private nomber:number=0;
private onEnterFrame(){
console.log("---*--"+(this.nomber+=0.01))
// if(this.isplay)
// this.now+= egret.getTimer()-this.timeOnEnterFrame;
// else
// this.now+=egret.getTimer()-this.timeOnEnterFrame;
// this.Frame_text.text=(this.now).toFixed()
this.Frame_text.text=(this.nomber).toFixed()
}
/*
StartTicker计时器(开启计时方法)
*/
public isTickering:boolean=false;
public Ticker_number:number=0;
private loadStartTicker(){
//监听计时按钮
this.StartTicker_button.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
//正在运行
if(this.isTickering)
{ console.log("停止计时")
egret.stopTick(this.TickerStart,this)
this.isTickering=false;
}else{
egret.startTick(this.TickerStart,this);
this.isTickering=true;
}
},this)
//监听重置按钮
this.StartTicker_reset.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.isTickering=false;
this.Ticker_number=0;
this.StartTicker_button.selected=false;
this.StartTicker_text.text="0";
egret.stopTick(this.TickerStart,this)
},this)
}
//计时器方法
private TickerStart():boolean{
this.Ticker_number+=0.01
this.StartTicker_text.text=this.Ticker_number.toFixed();
return false;
}这里也就是用到了常用的Timer计时器、Frame监听器、StartTicker方法计时器,区别：Timer可调节计时频率和次数，启停也可控（Start，Stop);而Frame因为是监听器，暂停就只有移除监听了，再次计时得重新启用；StartTicker就是通过60帧频率调用一个方法，可以通过StopTicker来暂停。
4.位图和裁剪
1）UI界面
2）代码
public image_index:eui.EditableText;
public shear:eui.Button;
public BitImage:eui.Image;
public shear_image:eui.Image;
constructor(){
super();
this.skinName="resource/Tool_skins/BitImagePlayer.exml";
//剪切图
this.shear.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
console.log("剪切图片")
this.loadPicSprite(parseInt(this.image_index.text));
}, this)
//位图
this.loadBitMap();
//eui图
this.BitImage.source="resource/image/MusicPlayer/boycat.jpg"
}
private loadBitMap() {
var imgLoader: egret.ImageLoader = new egret.ImageLoader;
imgLoader.once(egret.Event.COMPLETE, this.imgLoadHandler, this);
imgLoader.load("resource/image/MusicPlayer/0.jpg");
}
private imgLoadHandler(evt: egret.Event): void {
let loader: egret.ImageLoader = evt.currentTarget;
let bmd: egret.BitmapData = loader.data;
//创建纹理对象
let texture = new egret.Texture();
texture.bitmapData = bmd;
let bmp: egret.Bitmap = new egret.Bitmap(texture);
// 创建一个自定义矩形对象
//var rect: egret.Rectangle = new egret.Rectangle(30, 31, 40, 41);
// 开启缩放区域检测
//bmp.scale9Grid = rect;
bmp.width = 186;
bmp.height=152;
bmp.x=10;
bmp.y = 35;
this.addChild(bmp);
}
private loadPicSprite(index:number) {
RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,()=>{this.onGroupComplete(index)}, this);
RES.loadConfig("resource/default.res.json", "resource/");
RES.loadGroup("preload");
}
private onGroupComplete(index:number) {
//json图集文件名字，图集指定图片name
console.log(index)
this.shear_image.texture=RES.getRes(`cardSprite_json#pic${index}`);//eui直接套
// //纯纯手动
// var txtr: egret.Texture = RES.getRes(`cardSprite_json#pic${index}`);
// var img: egret.Bitmap = new egret.Bitmap(txtr);
// img.y = 450;
// img.x = 300;
// this.addChild(img);
}3）json文件
{"file":"cardSprite.png","frames":{
"pic6":{"x":123,"y":267,"w":120,"h":131,"offX":0,"offY":0,"sourceW":120,"sourceH":132},
"pic5":{"x":1,"y":267,"w":120,"h":131,"offX":0,"offY":0,"sourceW":120,"sourceH":132},
"pic4":{"x":123,"y":134,"w":120,"h":131,"offX":0,"offY":0,"sourceW":120,"sourceH":132},
"pic3":{"x":1,"y":134,"w":120,"h":131,"offX":0,"offY":0,"sourceW":120,"sourceH":132},
"pic2":{"x":123,"y":1,"w":120,"h":131,"offX":0,"offY":0,"sourceW":120,"sourceH":132},
"pic1":{"x":1,"y":1,"w":120,"h":131,"offX":0,"offY":0,"sourceW":120,"sourceH":132}}}注意：这里的图集和图集json文件得加载到Eui(或 写进res.json)
5.碰撞检测
1）UI界面：
2）代码：
public hit_Image1:eui.Image;
public hit_text2:eui.Label;
public hit_Image2:eui.Image;
constructor(){
super();
this.skinName="resource/Tool_skins/hitTestPlayer.exml"
}
protected createChildren(): void {
super.createChildren();
this.load();
}
private load(){
this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, function(event) {
console.log("点击：\nx:"+event.localX+"\ny:"+event.localY)
let point:egret.Point=new egret.Point();
let point2:egret.Point=new egret.Point();
point=this.hit_Image1.localToGlobal(event.localX,event.localY)
if(this.hit_Image1.hitTestPoint(point.x,point.y))
this.hit_text2.text="状态:点到了";
else
this.hit_text2.text="状态:没点到";
point2=this.hit_Image2.localToGlobal(event.localX,event.localY)
if(this.hit_Image2.hitTestPoint(point2.x,point2.y,true))
this.hit_text2.text="状态:点到了";
else
this.hit_text2.text="状态:没点到";
console.log("世界1-"+point.x+"-"+point.y)
console.log("世界2-"+point2.x+"-"+point2.y)
},this)
}6.遮罩
1）ui界面
2）代码
this.Mask1.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.image2.mask=this.Image1;
},this)
this.Mase2.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.Image1.mask=this.image2;
},this)
//绘制一个矩形对象，用于制作蒙版区域
var rect:egret.Rectangle = new egret.Rectangle(125,125,90,90);
this.Mase3.addEventListener(egret.TouchEvent.TOUCH_TAP,()=>{
this.image3.mask=rect;
},this)7.圆的拖动
1）UI界面
2）代码
this.circle=new egret.Shape();
this.circle.graphics.beginFill(0xFF5A5A)
this.circle.graphics.drawCircle(335,100,50);
this.circle.graphics.endFill();
this.Move_Group.addChild( this.circle);
this.circle.touchEnabled=true;
this.circle.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.onMove,this)
//手指离开屏幕，触发 stopMove 方法
this.circle.addEventListener(egret.TouchEvent.TOUCH_END, this.stopMove, this);
}
private offsetX: number;
private offsetY: number;
private circle: egret.Shape;
private onMove(e:egret.TouchEvent){
//计算手指和圆形的距离
this.offsetX = e.stageX - this.circle.x;
this.offsetY = e.stageY - this.circle.y;
this.circle.addEventListener(egret.TouchEvent.TOUCH_MOVE,()=>{
this.circle.x = e.stageX - this.offsetX;
this.circle.y = e.stageY - this.offsetY;
},this)
}
private stopMove(e: egret.TouchEvent) {
console.log(e.target.x+"1111"+e.target.y);
let ax1 = this.Move_Group.x;
let ax2 = this.Move_Group.x + this.Move_Group.width;
let ay1 = this.Move_Group.y;
let ay2 = this.Move_Group.y + this.Move_Group.height;
console.log(ay1)
//e.target得转世界坐标，懒的转了了了
if (e.target.x > ax1 && e.target.x < ax2 && e.target.y > ay1 && e.target.y < ay2) {
console.log('在容器内')
} else {
console.log('不在容器')
}
//手指离开屏幕，移除手指移动的监听
this.stage.removeEventListener(egret.TouchEvent.TOUCH_MOVE, this.onMove, this);
}8.文本
1）代码
this.drawText();
this.drawInput()
this.inputType()
this.onLoadComplete();
//RES.getResByUrl("resource/cartoon-font.fnt", this.onLoadComplete, this, RES.ResourceItem.TYPE_FONT);
}
private infoText: egret.TextField;
private drawText() {
this.infoText = new egret.TextField();
this.infoText.y = 40;
this.infoText.text = "这是一条普通文本";
this.infoText.textColor = 0x0000ff;
this.infoText.fontFamily = 'Impact'
this.infoText.width = 150;
this.infoText.height = 100;
this.infoText.size = 30
this.infoText.strokeColor = 0x000000;
this.infoText.stroke = 2;
this.infoText.bold = true;
this.infoText.italic = true;
// this.infoText.textAlign = egret.HorizontalAlign.RIGHT;
// this.infoText.textAlign = egret.HorizontalAlign.LEFT;
// this.infoText.textAlign = egret.HorizontalAlign.CENTER;
// 纵列对齐
// this.infoText.verticalAlign = egret.VerticalAlign.BOTTOM;
//垂直居中对齐
// this.infoText.verticalAlign = egret.VerticalAlign.MIDDLE;
this.addChild(this.infoText);
}
private drawInput() {
var textIput: egret.TextField = new egret.TextField();
textIput.text="输入文本"
textIput.type = egret.TextFieldType.INPUT;
textIput.width=200;
textIput.x=200
textIput.y=50
this.addChild(textIput);
}
private inputType() {
var pass: egret.TextField = new egret.TextField();
pass.type = egret.TextFieldType.INPUT;
//设置输入文本显示为密码
pass.inputType = egret.TextFieldInputType.PASSWORD;
//设置密码显示
pass.displayAsPassword = true;
pass.text = "Password";
pass.x=350
pass.y = 50;
pass.width = 300;
this.addChild(pass);
var tel: egret.TextField = new egret.TextField();
tel.type = egret.TextFieldType.INPUT;
//设置输入电话号样式
tel.inputType = egret.TextFieldInputType.TEL;
tel.text = "Telephone number:"
tel.x=500;
tel.y = 50;
tel.width = 300;
this.addChild(tel);
}
private _bitmapText: egret.BitmapText;
private onLoadComplete(): void {
this._bitmapText = new egret.BitmapText();
//this._bitmapText.font = font;
this._bitmapText.x = 600;
this._bitmapText.y = 50;
this.addChild(this._bitmapText);
}
9.动画
1）代码
private _mcData: any;
private _mcTexture: egret.Texture;
private idTimeout:number
private onAddToStage() {
this.load(this.initMovieClip);
}
private setEgretTimer(node) {
this.idTimeout = egret.setTimeout(function (arg) {
console.log("timeout:", arg);
}, this, 3000, "egret"
);
console.log("start setTimeout");
node.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onTouch, this);
}
private onTouch() {
egret.clearTimeout( this.idTimeout );
}
private initMovieClip(): void {
console.log('-=-=-=-=-=-=-222222222')
/*** 本示例关键代码段开始 ***/
var mcDataFactory = new egret.MovieClipDataFactory(this._mcData, this._mcTexture);
var role: egret.MovieClip = new egret.MovieClip(mcDataFactory.generateMovieClipData("attack"));
this.addChild(role);
role.touchEnabled = true;
//播放3次数
role.gotoAndPlay(1, 3);
// role.gotoAndPlay('atc',1);
role.x = 300;
role.y = 600;
// role.addEventListener(egret.MovieClipEvent.FRAME_LABEL,(e:egret.MovieClipEvent)=>{
// console.log(e.type,e.frameLabel, role.currentFrame);
//frame_label @attack 14
// },this)
this.setEgretTimer(role)
role.addEventListener(egret.Event.COMPLETE, function (e: egret.Event): void {
egret.log("play over!")
this.removeChild(e.target);
}, this);
var count: number = 0;
role.addEventListener(egret.Event.LOOP_COMPLETE, function (e: egret.Event): void {
egret.log("play times:" + ++count);
}, this);
role.addEventListener(egret.MovieClipEvent.FRAME_LABEL, function (e: egret.MovieClipEvent): void {
egret.log("frameLabel:" + e.frameLabel);
}, this);
this.stage.addEventListener(egret.TouchEvent.TOUCH_TAP, function (e: egret.TouchEvent): void {
count = 0;
role.gotoAndPlay(1, 1);
}, this);
/*** 本示例关键代码段结束 ***/
}
protected load(callback: Function): void {
var count: number = 0;
var self = this;
var check = function () {
count++;
if (count == 2) {
callback.call(self);
console.log('-=-=-=-=-=-=-111111111')
}
}
//load png图片
var loader = new egret.URLLoader();
loader.addEventListener(egret.Event.COMPLETE, function loadOver(e) {
var loader = e.currentTarget;
this._mcTexture = loader.data;
check();
}, this);
loader.dataFormat = egret.URLLoaderDataFormat.TEXTURE;
var request = new egret.URLRequest("resource/assets/mc/animation.png");
loader.load(request);
//load json文件信息
var loader = new egret.URLLoader();
loader.addEventListener(egret.Event.COMPLETE, function loadOver(e) {
var loader = e.currentTarget;
this._mcData = JSON.parse(loader.data);
check();
}, this);2）json文件
{
"mc": {
"attack": {
"frameRate": 24,
"events": [
{
"name": "@attack",
"frame": 14
}
],
"frames": [
{
"y": -336,
"res": "atc_0",
"duration": 1,
"x": -118
},
{
"y": -337,
"res": "atc_1",
"duration": 1,
"x": -112
},
{
"y": -339,
"res": "atc_2",
"duration": 1,
"x": -107
},
{
"y": -340,
"res": "atc_3",
"duration": 1,
"x": -101
},
{
"y": -340,
"res": "atc_4",
"duration": 1,
"x": -95
},
{
"y": -341,
"res": "atc_5",
"duration": 1,
"x": -90
},
{
"y": -341,
"res": "atc_6",
"duration": 1,
"x": -90
},
{
"y": -341,
"res": "atc_7",
"duration": 1,
"x": -90
},
{
"y": -341,
"res": "atc_8",
"duration": 1,
"x": -90
},
{
"y": -341,
"res": "atc_9",
"duration": 1,
"x": -90
},
{
"y": -342,
"res": "atc_10",
"duration": 1,
"x": -136
},
{
"y": -350,
"res": "atc_11",
"duration": 1,
"x": -180
},
{
"y": -343,
"res": "atc_12",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_13",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_14",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_15",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_16",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_17",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_18",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_19",
"duration": 1,
"x": -224
},
{
"y": -343,
"res": "atc_20",
"duration": 1,
"x": -224
},
{
"y": -348,
"res": "atc_21",
"duration": 1,
"x": -202
},
{
"y": -350,
"res": "atc_22",
"duration": 1,
"x": -182
},
{
"y": -348,
"res": "atc_23",
"duration": 1,
"x": -161
},
{
"y": -342,
"res": "atc_24",
"duration": 1,
"x": -139
},
{
"y": -339,
"res": "atc_25",
"duration": 1,
"x": -133
},
{
"y": -337,
"res": "atc_26",
"duration": 1,
"x": -127
}
],
"labels": [
{
"end": 27,
"name": "atc",
"frame": 1
}
]
}
},
"file": "animation.png",
"res": {
"atc_2": {
"x": 1362,
"y": 709,
"w": 233,
"h": 353
},
"atc_0": {
"x": 1595,
"y": 1060,
"w": 231,
"h": 350
},
"atc_10": {
"x": 640,
"y": 357,
"w": 250,
"h": 356
},
"atc_16": {
"x": 328,
"y": 357,
"w": 312,
"h": 357
},
"atc_14": {
"x": 0,
"y": 714,
"w": 320,
"h": 357
},
"atc_12": {
"x": 0,
"y": 0,
"w": 336,
"h": 357
},
"atc_18": {
"x": 0,
"y": 1071,
"w": 314,
"h": 357
},
"atc_13": {
"x": 0,
"y": 357,
"w": 328,
"h": 357
},
"atc_1": {
"x": 1595,
"y": 709,
"w": 232,
"h": 351
},
"atc_17": {
"x": 320,
"y": 714,
"w": 313,
"h": 357
},
"atc_8": {
"x": 884,
"y": 0,
"w": 236,
"h": 355
},
"atc_7": {
"x": 890,
"y": 355,
"w": 236,
"h": 355
},
"atc_9": {
"x": 648,
"y": 0,
"w": 236,
"h": 355
},
"atc_23": {
"x": 911,
"y": 714,
"w": 257,
"h": 361
},
"atc_4": {
"x": 1356,
"y": 0,
"w": 235,
"h": 354
},
"atc_20": {
"x": 0,
"y": 1428,
"w": 314,
"h": 357
},
"atc_26": {
"x": 628,
"y": 1078,
"w": 228,
"h": 350
},
"atc_25": {
"x": 1362,
"y": 354,
"w": 227,
"h": 353
},
"atc_6": {
"x": 1120,
"y": 0,
"w": 236,
"h": 355
},
"atc_5": {
"x": 1126,
"y": 355,
"w": 236,
"h": 355
},
"atc_21": {
"x": 614,
"y": 1428,
"w": 296,
"h": 362
},
"atc_19": {
"x": 314,
"y": 1071,
"w": 314,
"h": 357
},
"atc_24": {
"x": 1591,
"y": 0,
"w": 233,
"h": 356
},
"atc_11": {
"x": 314,
"y": 1428,
"w": 300,
"h": 364
},
"atc_22": {
"x": 633,
"y": 714,
"w": 278,
"h": 364
},
"atc_3": {
"x": 1591,
"y": 356,
"w": 234,
"h": 353
},
"atc_15": {
"x": 336,
"y": 0,
"w": 312,
"h": 357
}
}
}3）图片
四、总结
总体也不难，算是作为一个学习参考吧，播放器方面后续我想加个歌词和进度条，歌词用Json.然后裁剪去找个裁剪工具研究下吧。这里的圆的拖动其实可以做角色控制滑动盘，动画方面我会先龙骨动画方面学习的。
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
