摘要:在做動畫時,精靈封裝的好壞,直接影響后續(xù)的編程體驗?;痉庋b精靈名字繪制器,需另外封裝行為,精靈行為屬性是一個指向?qū)ο蟮囊茫褂梅椒▉砝L制精靈。精靈繪制器即提供給對象的對象,和解耦。
在做canvas動畫時,精靈封裝的好壞,直接影響后續(xù)的編程體驗。
下文的封裝方法來自《HTML5 Canvas核心技術(shù) 圖形、動畫與游戲開發(fā)》,實現(xiàn)了精靈與繪制對象的解耦,很好用,平時自己也用這種寫法。
一個完整的Sprite包含兩部分:
Sprite的基本封裝
Sprite Painter實現(xiàn)
拆開Sprite和Painter,實現(xiàn)了解耦,可以隨意調(diào)整Painter功能。Pinter對象只需要實現(xiàn): void paint(sprite, context)方法即可。這好像也叫策略模式。
Sprite 基本封裝:// name:精靈名字 // painter: 繪制器,需另外封裝 // behaviors: 行為,精靈行為 var Sprite = function(name, painter, behaviors){ this.left = 0, this.top = 0, this.width = 10, this.height = 10, this.velocityX = 0, this.velocityY = 0, this.visible = true, this.animating = false, this.painter = undefined, // object with paint(sprite, context) this.behaviors = [], // objects with execute(sprite, context, time) if(name){ this.name = name; } if(painter){ this.painter = painter; } } Sprite.prototype = { // painter屬性是一個指向Painter對象的引用,使用paint(sprite, context)方法來繪制精靈。 // behaviors屬性指向一個對象數(shù)組,數(shù)組的每個對象都以execute(sprite, context, time)方法來對精靈進行操作 paint: function(context){ if(this.painter.paint !== undefined && this.visible){ this.painter.paint(this, context); } }, update: function(context, time){ for(var i = this.behaviors.length; i > 0; --i){ this.behaviors[i-1].execute(this, context, time); } } }
behavior一開始有些難理解。書上的解釋是:精靈的行為。
什么叫行為呢?
個人覺得,改變了Sprite基本屬性的動作,都叫精靈的行為,改變了top、width、velocityX等balabala的都叫行為。
behavior里面會實現(xiàn)一個excute方法 void excute(sprite, context, time){}。在方法里面會修改各類的值。到Pianter繪制的時候,會實現(xiàn)修改后的效果。也就實現(xiàn)了精靈的多種行為。
精靈繪制器即提供給Sprite對象的Painter對象,和Sprite解耦。
目前Painter對象分為三類:
描邊繪制器可以隨意控制,只要實現(xiàn)了 void paint(sprite, context)就可以了。
1.圖像繪制器
var ImagePainter = function(imgUrl){ this.image = new Image(); this.image.src = imgUrl; } ImagePainter.prototype = { paint: function(sprite, context){ if(this.image.complete){ context.drawImage(this.image, sprite.left, sprite.top, sprite.width, sprite.height); } else{ this.iamge.onload = function(e){ context.drawImage(this.image, sprite.left, sprite.top, sprite.width, sprite.height); } } } }
2.精靈繪制器
var SpriteSheetPainter = function(cells){ this.cells = cells; }; SpriteSheetPainter.prototype = { cells: [], cellIndex: 0, advance: function(){ if(this.cellInde === this.cells.length -1 ){ this.cellIndex = 0; } else{ this.cellIndex++; } }, paint: function(sprite, context){ var cell = this.cells[this.cellIndex]; context.drawImage(spritesheet, cell.x, cell.y, cell.w, cell.h, sprite.left, sprite.top, cell.w, cell.h); } }精靈動畫制作器
SpriteAnimator包含兩個參數(shù),Painter數(shù)組和回調(diào)函數(shù)。
var SpriteAnimator = function(painters, elapsedCallback){ this.painters = painters; if(elapsedCallback){ this.elapsedCallback = elapsedCallback; } }; SpriteAnimator.prototype = { painters: [], duration: 1000, startTime: 0, index: 0, elapsedCallback: undefined, end: function(sprite, originalPainter){ sprite.animating = false; if(this.elapsedCallback){ this.elapsedCallback(sprite); } else{ sprite.painter = originalPainter; } }, start: function(sprite, duration){ var endTime = +new Date() + duration, period = duration / (this.painters.length), interval = undefined, animator = this, // for setInterval() function originalPainter = sprite.painter; this.index = 0; sprite.animating = true; sprite.painter = this.painter[this.index]; interval = setInterval(){ if(+new Date() < endTime){ sprite.painter = animator.painters[++animator.index]; } else{ animator.end(sprite, originalPainter); clearIntercal(interval); } }, period); } }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/80252.html
摘要:設(shè)置縮放比例的構(gòu)造函數(shù)還可以傳入第三個參數(shù),這個可選的參數(shù)用來確保使用的坐標(biāo)將匹配畫布的縮放像素坐標(biāo)。將其設(shè)置為將再次啟用拖動。 說明 Pixi 內(nèi)置一組功能有限的用于鼠標(biāo)交互和觸摸交互的方法,但是對于游戲和應(yīng)用程序所需的豐富交互性,建議使用第三方庫來簡化操作,這篇文章介紹的是 Tink 庫,它有通用的指針對象、拖放精靈、按鈕對象、鍵盤控制 等一些有用的功能。 使用 Tink 庫 要...
摘要:方法創(chuàng)建弧曲線用于創(chuàng)建圓或部分圓圓的中心的坐標(biāo)?;〉膱A形的三點鐘位置是度。規(guī)定應(yīng)該逆時針還是順時針繪圖。注意事項構(gòu)造函數(shù)的形參只有兩個是必須的,就是定位點的坐標(biāo)。選中元素時調(diào)用,判斷選中位置。 面向?qū)ο蟮腸anvas畫圖程序 項目簡介 整個項目分為兩大部分 場景場景負(fù)責(zé)canvas控制,事件監(jiān)聽,動畫處理 精靈精靈則指的是每一種可以繪制的canvas元素 Demo演示地址Demo為...
摘要:文章首發(fā)于個人博客在最近項目中需要實現(xiàn)一個精靈動畫,素材方只提供了一個短視頻素材,所以在實現(xiàn)精靈動畫之前先介紹兩個工具來幫助我們更好的實現(xiàn)需求。 文章首發(fā)于個人博客:http://heavenru.com 在最近項目中需要實現(xiàn)一個精靈動畫,素材方只提供了一個短視頻素材,所以在實現(xiàn)精靈動畫之前先介紹兩個工具來幫助我們更好的實現(xiàn)需求。在這篇文章中,主要是介紹兩個命令行工具來實現(xiàn)將一個短視頻...
閱讀 2784·2021-09-02 15:11
閱讀 937·2019-08-26 18:18
閱讀 1899·2019-08-26 11:57
閱讀 3350·2019-08-23 16:59
閱讀 2024·2019-08-23 16:51
閱讀 2335·2019-08-23 16:11
閱讀 3168·2019-08-23 14:58
閱讀 1133·2019-08-23 11:34