我们将会用50行不到的代码来实现一个3D模拟撒金币动效。你只需要一点Egret基础就能够快速上手,如果你不了解Egret,这里有一篇3分钟创建hello world来带你快速入门。
实现效果
源码和在线demo
- 完整的工程请见:github.com/wildfirecod…
- 在线访问地址:wildfirecode.com/fallingCoin…
资源准备
图片序列帧在工程的design/coin
下。我们需要用TextureMerge
工具来创建一个精灵图
(SpriteSheet)。具体方式查看 这里 。最后将精灵图导入assets/
文件夹,文件名为coin.json
和coin.png
。
注意:序列帧图片的文件名为1.png~8.png
。
加载资源
我们通过精灵图的方式加载这8张序列帧图片。这里有一个工具函数:
const loadSpriteSheet: (keys: string[]) => Promise<egret.SpriteSheet>
复制代码
我们将精灵图的keys传入就可以获取到一个egret.SpriteSheet
类型的对象,使用代码:
const keys = ['assets/coin.json', 'assets/coin.png'];
const spritesheet = await loadSpriteSheet(keys);
复制代码
注意:如果你想用TexturePacker来创建精灵图也是可以的,只是loadSpriteSheet
函数需要有少许的变动。
创建序列帧图片动画
这里要引入一个工具类MovieClip
(不要太在意类的命名 >.<)。看下API:
constructor MovieClip(
{ spritesheet, frames, position, keys,frameInterval} :
{
spritesheet: egret.SpriteSheet;//精灵图
frames: string[];//序列帧的图片的文件名序列
position: number[];//设置动画位置
frameInterval?: number;//相邻图片播放间隔,单位是帧,这会控制动画的播放速度
}): MovieClip
复制代码
下面这段代码将金币动画放置在{x:100,y:100}
的位置,相邻图片播放间隔是3帧,图片的播放顺序是1.png~8.png
。
const animation = new MovieClip({
frameInterval: 3,
frames: ['1', '2', '3', '4', '5', '6', '7', '8'],
position: [100, 100],
spritesheet: spritesheet
});
this.addChild(animation);//显示动画
复制代码
对动画增加真实的掉落效果
这里引入物理对象工具类Body
。
constructor Body({ x, y, vx, vy, gx, gy, host }: {
x: number;//起始x
y: number;//起始y
vx: number;//起始x方向速度
vy: number;//起始y方向速度
gx: number;//x方向重力
gy: number;//y方向重力
host: egret.DisplayObject;//宿主显示对象
}): Body
复制代码
下面是使用代码:
const x = 750 / 2;
const y = 750 / 2;
const vx = 10;
const vy = -10;
const animation = this.createCoinMovieClip(spritesheet);
const falling = new Body({
x: x, y: y, vx: vx, vy: vy, gy: 1, host: animation
});
复制代码
创建3D模拟撒金币
main.ts
增加创建单个动画的函数:
createCoinMovieClip(spritesheet) {
const animation = new MovieClip({
frameInterval: 3,
frames: ['1', '2', '3', '4', '5', '6', '7', '8'],
loop: true,
position: [100, 100],
spritesheet: spritesheet
});
return animation;
}
复制代码
我们来创建100个金币动画,并设置随机的起始位置和速度,重力设置为1。你可以调整其中的各种参数来获得你想要的效果。
let coinsFall = setInterval(() => {
if (count < 100) {
const x = 750 / 2 + Math.random() * 50 - 25;
const y = 750 / 2 + Math.random() * 50 - 25;
const vx = Math.random() * 20 - 10;
const vy = -10 + Math.random() * 10 - 5;
const animation = this.createCoinMovieClip(spritesheet);
const falling = new Body({
x: x, y: y, vx: vx, vy: vy, gy: 1, host: animation
});
this.addChild(animation);
count++;
} else {
//结束
}
}, 10)
复制代码
完整的代码
可以看出,我们只用了50行不到的代码就实现了一个真实的撒金币效果。
import Body from "./physics/Body";
import loadSpriteSheet from "./utils/loadSpriteSheet";
import MovieClip from "./movieclip/MovieClip";
class Main extends egret.DisplayObjectContainer {
constructor() {
super();
this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
}
async onAddToStage() {
const keys = ['assets/coin.json', 'assets/coin.png'];
const spritesheet = await loadSpriteSheet(keys);
let count = 0;
let coinsFall = setInterval(() => {
if (count < 100) {
const x = 750 / 2 + Math.random() * 50 - 25;
const y = 750 / 2 + Math.random() * 50 - 25;
const vx = Math.random() * 20 - 10;
const vy = -10 + Math.random() * 10 - 5;
const animation = this.createCoinMovieClip(spritesheet);
const falling = new Body({
x: x, y: y, vx: vx, vy: vy, gy: 1, host: animation
});
this.addChild(animation);
count++;
} else {
//结束
}
}, 10)
}
createCoinMovieClip(spritesheet) {
const animation = new MovieClip({
frameInterval: 3,
frames: ['1', '2', '3', '4', '5', '6', '7', '8'],
loop: true,
position: [100, 100],
spritesheet: spritesheet
});
return animation;
}
}
window['Main'] = Main;
egret.runEgret();
复制代码