Android?Flutter實現(xiàn)精靈圖的使用詳解
前言
在日常開發(fā)中遇到的圖片展示一般是靜態(tài)圖和Gif圖兩種形式(靜態(tài)和動態(tài)的不同)。與此同時當需要對圖片做效果時讓其動起來,常用方案是Gif圖播放或者是幀動畫(多種靜態(tài)圖輪詢播放)。但在游戲開發(fā)中還有一種動圖表現(xiàn)形式叫做Sprite圖(雪碧圖),其在前端開發(fā)中也是很常見。為什么需要使用精靈圖,因為每張圖片顯示都需要去發(fā)起請求獲取,若頁面圖片數(shù)量較多(一個頁面有幾十個小圖)并發(fā)請求將是一個大數(shù)量級,可能會造成頁面加載速度降低,精靈圖其中一個特點就是減少服務(wù)器請求,一次性加載到所有圖片。
如何使用精靈圖
在游戲開發(fā)中精靈圖會將一個人物所有動作放置在一張圖片中,通過坐標定位選取其中一張圖展示。根據(jù)精靈圖配置信息來定位到不同圖片再通過定時切換選取不同圖片從而實現(xiàn)連貫動畫效果。
自定義實現(xiàn)加載
自定義實習方式是對精靈圖進行加載,因為每幀圖片尺寸大小是一致的。
- 每幀圖片尺寸固定后就能確認每一幀圖片在整張圖片的定位位置,因此能夠根據(jù)X-Y坐標來找到相應(yīng)圖片。
- 創(chuàng)建定時器調(diào)整間隔時間計算出坐標位置切換需要展示圖片。
- 再結(jié)合
Container+Positioned
形式來實現(xiàn)采用偏移量方式顯示哪張圖片。
class SpriteWidget extends StatefulWidget { final Image image; final Size spriteSize; final Duration duration; SpriteWidget({ Key key, @required this.image, @required this.spriteSize, @required this.duration, }) : super(key: key); @override _SpriteWidgetState createState() => _SpriteWidgetState(); } class _SpriteWidgetState extends State<SpriteWidget> { Image get image => widget.image; Size get spriteSize => widget.spriteSize; Duration get duration => widget.duration; // 當前顯示的圖片位置 int currentIndex = 0; int currentTimes = 0; int startIndex = 0; int endIndex = 1; int playTimes = 0; // 定時器用來更新精靈圖加載 Timer timer; @override void initState() { currentIndex = startIndex; timer = Timer.periodic(duration, (timer) { if (currentTimes <= playTimes) { setState(() { if (currentIndex >= endIndex) { if (playTimes != 0) currentTimes++; if (currentTimes < playTimes || playTimes == 0) currentIndex = startIndex; else currentIndex = endIndex; } else currentIndex++; }); } }); super.initState(); } @override void dispose() { super.dispose(); timer?.cancel(); } @override Widget build(BuildContext context) { // 使用container+Positioned來限制圖片顯示區(qū)域 return Container( width: spriteSize.width, height: spriteSize.height, child: Stack( children: [ Positioned( left: -spriteSize.width * currentIndex, top: -spriteSize.height * currentIndex, child: image) ], ), ); } }
Flame加載精靈圖
除了自定義方式實現(xiàn)精靈圖加載外,F(xiàn)lutter官方還提供了Flame
框架實現(xiàn)游戲內(nèi)容制作幫助開發(fā)者更方便實現(xiàn)游戲相關(guān)功能開發(fā)。
首先在依賴庫添加Flame
庫,此外bonfire
是Flame
庫的拓展封裝了更多游戲開發(fā)相關(guān)功能接口。
bonfire: ^2.0.0 flame: ^1.0.0
實現(xiàn)角色資源加載類,bonfire
中已經(jīng)幫助開發(fā)者實現(xiàn)了Sprite
功能只需要加載精靈圖就能獲取到精靈圖加載能力。
abstract class BaseRole { // 速度 double velocity; late Sprite sprite; BaseRole({ this.velocity = 10, }); dynamic load(); void run(); } class UserRole extends BaseRole { Vector2 offset = Vector2(0.0, 0.0); Vector2 size = Vector2(48.0, 48.0); @override void run() { double x = (48 + offset.x) % 192; double y = 0; offset = Vector2(x, y); sprite.srcPosition = offset; sprite.srcSize = size; } @override Future load() async { sprite = await Sprite.load( 'user_role.png', srcPosition: offset, srcSize: size, ); return sprite; } }
在bonfire
游戲開發(fā)中還有SpriteComponent
組件,開發(fā)者只需要繼承它加載使用Sprite
即可。
class UserRoleComponent extends SpriteComponent { late UserRole userRole; UserRoleComponent() : super( size: Vector2.all(100), ); double minDt = 1 / 8; // 30 fps double dtOverflow = 0; @override Future<void>? onLoad() async { userRole = UserRole(); sprite = await userRole.load(); super.onLoad(); } @override void update(double dt) { dtOverflow += dt; if (dtOverflow < minDt) { return; } userRole.run(); dtOverflow = 0; } }
到此這篇關(guān)于Android Flutter實現(xiàn)精靈圖的使用詳解的文章就介紹到這了,更多相關(guān)Android Flutter精靈圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實現(xiàn)長按圓環(huán)動畫View效果的思路代碼
這篇文章主要介紹了Android實現(xiàn)長按圓環(huán)動畫View效果,本文給大家分享實現(xiàn)思路,通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09Android開發(fā)實現(xiàn)的保存圖片到相冊功能示例
這篇文章主要介紹了Android開發(fā)實現(xiàn)的保存圖片到相冊功能,結(jié)合實例形式分析了Android圖片命名、保存、權(quán)限控制等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03kotlin object關(guān)鍵字單例模式實現(xiàn)示例詳解
這篇文章主要為大家介紹了kotlin object關(guān)鍵字單例模式實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-01-01Android 實現(xiàn)獲取手機里面的所有圖片詳解及實例
這篇文章主要介紹了Android 實現(xiàn)獲取手機里面的所有圖片詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-05-05Android 模擬器(emulator-5554...)出現(xiàn)錯誤解決辦法
這篇文章主要介紹了Android 模擬器出現(xiàn)錯誤解決辦法的相關(guān)資料,如:Unable to get view server version from device,F(xiàn)ailed to install helloworld.apk on device 'emulator-5554': timeout,這種常見錯誤,解決辦法,需要的朋友可以參考下2016-11-11flutter 路由跳轉(zhuǎn)的實現(xiàn)示例
這篇文章主要介紹了flutter 路由跳轉(zhuǎn)的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-08-08