50行代码实现3D模拟真实撒金币动效
我们将会用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;//起始xy: number;//起始yvx: 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();
复制代码
50行代码实现3D模拟真实撒金币动效相关推荐
- 转:目标50行代码之内完成3d编辑器功能
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都 ...
- python实现50行代码_50行代码实现python计算器主要功能
实现功能:计算带有括号和四则运算的式子 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层小括 ...
- 【PyTorch】50行代码实现GAN——PyTorch
本文来源于PyTorch中文网. 一直想了解GAN到底是个什么东西,却一直没能腾出时间来认真研究,前几日正好搜到一篇关于PyTorch实现GAN训练的文章,特将学习记录如下,本文主要包含两个部分:GA ...
- python爬虫实战:利用scrapy,短短50行代码下载整站短视频
近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...
- 如何用50行代码构建情感分类器
选自Toward Data Science,作者:Rohith Gandhi,机器之心编译. 本文介绍了如何构建情感分类器,从介绍自然语言处理开始,一步一步讲述构建过程. 自然语言处理简介 语言把人类 ...
- pyquery获取不到网页完整源代码_爬虫神器之PyQuery实用教程(二),50行代码爬取穷游网...
爬虫神器之PyQuery实用教程(二),50行代码爬取穷游网 前言 上篇文章 PyQuery (一) 回顾.今天来介绍具体 PyQuery 的使用方法. 穷游网目标与分析 开始之前,按照之前的套路一步 ...
- python小游戏-16行代码实现3D撞球小游戏!-源码下载
python小游戏-16行代码实现3D撞球小游戏!-源码下载 所属网站分类: 资源下载 > python小游戏 作者:搞笑 链接: http://www.pythonheidong.com/bl ...
- python跑酷游戏源码_HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- 利用scrapy,短短50行代码下载整站短视频
一.撕开爬虫的面纱--爬虫是什么,它能做什么 爬虫是什么 爬虫就是一段能够从互联网上高效获取数据的程序. 我们每天都在从互联网上获取数据.当打开浏览器访问百度的时候,我们就从百度的服务器获取数据,当拿 ...
最新文章
- opencv函数copyto的用法
- Windows与Linux之间互传文件的方法
- 服务器统一计算系统,思科为微软扩展统一计算系统UCS服务器
- SSIS中的容器和数据流—举例说明数据转换任务
- Linux - XShell - alt 快捷键的设置
- ibatisnet 学习手记(1)
- 德鲁克的《卓有成效的管理者》
- 手机号正则表达 php,php 手机号码正则表达试程序代码_PHP教程
- 重磅公开!阿里语音识别模型端核心技术,让你“听”见未来
- 从windows server的文件服务到分布式文件服务(九)
- 系统学习深度学习(十九)--GoogLeNetV1,V2,V3
- 工作失误:没有分析进程消耗了这么多内存的原因
- Centos7解压Zip文件
- git fatal: destination path ‘**‘ already exists and is not an empty directory.解决
- 阅读 SICP 感想(0. 关于前言和序言)
- python中randon随机数
- @Component和@Bean的区别
- java计算平面度,关于平板平面度的计算方法?
- 研一学习笔记-小白NLP入门学习笔记
- 2021年G1工业锅炉司炉考试平台及G1工业锅炉司炉作业考试题库