Android?Flutter實(shí)現(xiàn)精靈圖的使用詳解
前言
在日常開(kāi)發(fā)中遇到的圖片展示一般是靜態(tài)圖和Gif圖兩種形式(靜態(tài)和動(dòng)態(tài)的不同)。與此同時(shí)當(dāng)需要對(duì)圖片做效果時(shí)讓其動(dòng)起來(lái),常用方案是Gif圖播放或者是幀動(dòng)畫(huà)(多種靜態(tài)圖輪詢播放)。但在游戲開(kāi)發(fā)中還有一種動(dòng)圖表現(xiàn)形式叫做Sprite圖(雪碧圖),其在前端開(kāi)發(fā)中也是很常見(jiàn)。為什么需要使用精靈圖,因?yàn)槊繌垐D片顯示都需要去發(fā)起請(qǐng)求獲取,若頁(yè)面圖片數(shù)量較多(一個(gè)頁(yè)面有幾十個(gè)小圖)并發(fā)請(qǐng)求將是一個(gè)大數(shù)量級(jí),可能會(huì)造成頁(yè)面加載速度降低,精靈圖其中一個(gè)特點(diǎn)就是減少服務(wù)器請(qǐng)求,一次性加載到所有圖片。
如何使用精靈圖
在游戲開(kāi)發(fā)中精靈圖會(huì)將一個(gè)人物所有動(dòng)作放置在一張圖片中,通過(guò)坐標(biāo)定位選取其中一張圖展示。根據(jù)精靈圖配置信息來(lái)定位到不同圖片再通過(guò)定時(shí)切換選取不同圖片從而實(shí)現(xiàn)連貫動(dòng)畫(huà)效果。
自定義實(shí)現(xiàn)加載
自定義實(shí)習(xí)方式是對(duì)精靈圖進(jìn)行加載,因?yàn)槊繋瑘D片尺寸大小是一致的。
- 每幀圖片尺寸固定后就能確認(rèn)每一幀圖片在整張圖片的定位位置,因此能夠根據(jù)X-Y坐標(biāo)來(lái)找到相應(yīng)圖片。
- 創(chuàng)建定時(shí)器調(diào)整間隔時(shí)間計(jì)算出坐標(biāo)位置切換需要展示圖片。
- 再結(jié)合
Container+Positioned
形式來(lái)實(shí)現(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; // 當(dāng)前顯示的圖片位置 int currentIndex = 0; int currentTimes = 0; int startIndex = 0; int endIndex = 1; int playTimes = 0; // 定時(shí)器用來(lái)更新精靈圖加載 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來(lái)限制圖片顯示區(qū)域 return Container( width: spriteSize.width, height: spriteSize.height, child: Stack( children: [ Positioned( left: -spriteSize.width * currentIndex, top: -spriteSize.height * currentIndex, child: image) ], ), ); } }
Flame加載精靈圖
除了自定義方式實(shí)現(xiàn)精靈圖加載外,F(xiàn)lutter官方還提供了Flame
框架實(shí)現(xiàn)游戲內(nèi)容制作幫助開(kāi)發(fā)者更方便實(shí)現(xiàn)游戲相關(guān)功能開(kāi)發(fā)。
首先在依賴庫(kù)添加Flame
庫(kù),此外bonfire
是Flame
庫(kù)的拓展封裝了更多游戲開(kāi)發(fā)相關(guān)功能接口。
bonfire: ^2.0.0 flame: ^1.0.0
實(shí)現(xiàn)角色資源加載類,bonfire
中已經(jīng)幫助開(kāi)發(fā)者實(shí)現(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
游戲開(kāi)發(fā)中還有SpriteComponent
組件,開(kāi)發(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實(shí)現(xiàn)精靈圖的使用詳解的文章就介紹到這了,更多相關(guān)Android Flutter精靈圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實(shí)現(xiàn)長(zhǎng)按圓環(huán)動(dòng)畫(huà)View效果的思路代碼
這篇文章主要介紹了Android實(shí)現(xiàn)長(zhǎng)按圓環(huán)動(dòng)畫(huà)View效果,本文給大家分享實(shí)現(xiàn)思路,通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09Android實(shí)現(xiàn)帶圖標(biāo)的列表對(duì)話框
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)帶圖標(biāo)的列表對(duì)話框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12Android應(yīng)用開(kāi)發(fā)工程目錄作用介紹
這篇文章主要介紹了Android應(yīng)用開(kāi)發(fā)工程目錄作用介紹,本文對(duì)Android項(xiàng)目中的每個(gè)目錄的作用作了總結(jié),需要的朋友可以參考下2014-10-10Android實(shí)現(xiàn)簡(jiǎn)單手機(jī)震動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)手機(jī)震動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Android開(kāi)發(fā)實(shí)現(xiàn)的保存圖片到相冊(cè)功能示例
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)的保存圖片到相冊(cè)功能,結(jié)合實(shí)例形式分析了Android圖片命名、保存、權(quán)限控制等相關(guān)操作技巧,需要的朋友可以參考下2019-03-03kotlin object關(guān)鍵字單例模式實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了kotlin object關(guān)鍵字單例模式實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Android 實(shí)現(xiàn)獲取手機(jī)里面的所有圖片詳解及實(shí)例
這篇文章主要介紹了Android 實(shí)現(xiàn)獲取手機(jī)里面的所有圖片詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05Android 模擬器(emulator-5554...)出現(xiàn)錯(cuò)誤解決辦法
這篇文章主要介紹了Android 模擬器出現(xiàn)錯(cuò)誤解決辦法的相關(guān)資料,如:Unable to get view server version from device,F(xiàn)ailed to install helloworld.apk on device 'emulator-5554': timeout,這種常見(jiàn)錯(cuò)誤,解決辦法,需要的朋友可以參考下2016-11-11flutter 路由跳轉(zhuǎn)的實(shí)現(xiàn)示例
這篇文章主要介紹了flutter 路由跳轉(zhuǎn)的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08Android Studio實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了Android Studio實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07