lufylegend基础知识1
這是官方的介紹:
lufylegend是一個HTML5開源引擎,它實現了利用仿ActionScript3.0的語法進行HTML5的開發, 包含了LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent等多個AS開發人員熟悉的類, 支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多種熱門環境。 利用lufylegend可以輕松的使用面向對象編程,并且可以配合Box2dWeb制作物理游戲, 另外它還內置了LTweenLite緩動類等非常實用的功能, 現在開始使用它吧,它可以讓你更快的進入HTML5的世界!
?
從上面的文字可以看出啊,lufy大神的文字功底還是很屌的。其實說白了,lufylegend是一個兼容性極高,功能極多,使用方便的HTML5游戲引擎。
那么,在眾多html5游戲引擎中,lufylegend優勢何呢?
首先我覺得,最扯的一個優勢就是:Lufylegend is made by Chinese。當然Cocos2d-html5也是made by Chinese啊~但是,lufylegend的API文檔是中文的,Cocos2d-html5就不一樣了。也許你非常懂英文,但是至少而言,你看中文還是比看英文習慣一些,不是嗎?
第二個優點就是它效率十分高。在單核CPU上跑,FPS在15-23之間,在手機也就差不多是這個檔次了。也許有朋友笑曰:“我X,FPS在15-23之間好意思說出口?”,但其實不然,你要清楚啊,html5和OpenGL等不是一個檔次的,OpenGL發展N年了,而html5仍然被認為是一項新技術。以前,我也試著去學習Cocos2d-html5,但說真的,效率感覺比不上lufylegend。
第三個優點就是配置簡單。有些引擎,東西一大堆,使用者根本無從下手。而使用lufylegend,只需要把lufylegend-xxx.min.js復制到項目下面即可。
其實說實話,只有你使用它以后,才能真正地感受到帶來的方便。
?
當然,我還是再次把引擎的地址display出來:
官方網站:http://lufylegend.com/lufylegend
API文檔:http://lufylegend.com/lufylegend/api
?
1,引擎原理
我們知道,游戲主要由事件和畫面組成,在lufylegend的事件中,有鼠標事件(MOUSE_DOWN,MOUSE_UP,MOUSE_MOVE),鍵盤事件(KEY_DOWN,KEY_UP),時間軸事件(ENTER_FRAME),這些事件中,前兩項so easy,好理解,但時間軸事件對于一些剛接觸游戲開發的新生而言,有些摸不著頭腦。其實時間軸事件相當于一個定時器,這個事件的監聽者(listener,也就是事件回調函數)每隔一段時間就會觸發一次。但這個東西有什么用呢?我們舉個例子吧,假如我們做一個飛機大戰的游戲,要讓敵機緩緩地移動起來,如果我們直接將它們的x或者y設置為某值,那飛機就會在嗖地一聲在瞬間之內移動到那里。這樣很不“禮貌”,因為動作太大了~我們要做到緩緩地移動,這時候時間軸事件就該派上用處了,我們可以在監聽函數中給飛機的x或者y增加某個值,這樣的話,監聽函數每被調用一次,就會將飛機移動一下,又因為每隔一段時間監聽函數才被調用一次,所以說飛機就能夠達到慢慢移動的效果,這樣就”禮貌“多了,對吧?當然,要讓飛機移動地更帥一點,那就要用到緩動類LTweenLite,什么是緩動類?好吧,我直觀地告訴你,就是像jQuery淡入淡出那種逐漸變化從而實現某種效果的一個功能。這里有lufy對緩動類進行巧妙地利用,做出的一個超帥動畫:HTML5超帥動畫制作-LTweenLite的妙用
說完事件,我們再來說說畫面。lufylegend中,但凡是加入到畫面上的顯示對象都是通過一個setInverval不停繪制的,這樣做有什么必要呢?首先,是可以實現層次化,如果我們把所有對象放入一個數組中,通過遍歷的方式獲取每個對象并調用函數將其顯示,那么第一個被加入的對象就會先被畫在最下面,其余的依次畫上,這樣一來就實現了層次化效果。其次,還有個好處就是可以通過直接更改對象的屬性從而在下次重繪時表現出來,比如說我們加入一個圖片對象(對象名字為img),這時我們要改變它的顯示方式為不顯示(visible屬性改為false),那么直接把img.visible改為false即可,那在下次重繪時就控制它不顯示。另外,在上面提到的時間軸事件觸發的速度也是由重畫速度決定的——每畫一次就調用一次。
在lufylegend中,但凡是可顯示的對象,大都繼承自LDisplayObject。這個類有個ll_show方法,用于在循環渲染時變幻畫布,繪制該顯示的東西。
?
2,利用引擎初始化游戲
在引擎中,要初始化游戲需要用到引擎內部的init函數,使用方法舉例如下:
?
[javascript] view plaincopyprint?這個函數的參數是:
?
init(speed,divid,width,height,completeFunc);
speed:游戲速度設定
divid:傳入一個div的id,庫件進行初始化的時候,會自動將canvas加入到此div內部
width:游戲界面寬
height:游戲界面高
completeFunc:游戲初始化后,調用此函數
在使用lufylegend時,不用在html文件中寫什么<canvas>標簽,不過要寫一個div,如下:
?
[javascript] view plaincopyprint?還是很簡單的,不是嗎?不過值得一提的是,init的參數speed或許有的朋友不理解什么是游戲速度,其實就是我在原理中介紹到的setInterval的速度,這個速度控制的是重繪速度和時間軸觸發速度,如果設得超大,你的畫面會很卡,不管你是什么雙核CPU還是什么四核CPU。如果設得超小,比如說1-10,那有些性能差的電腦顯示起來就會有些差,一卡一卡的~所以我一般設置為30-50,這之間的數應該都挺合適的。
?
?
3,引擎基本功能及原理
?
1,LGlobal(LStage、LSystem)靜態類
這個類掌管游戲中許多全局的設置,比如說更改游戲速度,獲取游戲界面高度、寬度,canvas標簽,canvas標簽的getContext("2d"),和當前操作系統等,可以到API文檔中看個究竟。
在LGlobal中,有個childList屬性,這個屬性在最新的幾個版本里面主要存放LGlobal.stage(最底層,一個LSprite對象。LSprite是什么?下文會慢慢介紹的),LTweenLite(緩動類),LSound.Container(音頻容器,貌似里面有用于判斷音頻是否結束的函數)。引擎循環渲染便是從這個地方開始的。引擎中通過遍歷LGlobal.childList獲取這幾個對象,然后調用每個對象的ll_show方法來實現循環執行每個對象應該執行的命令,例如LGlobal.stage就應該執行LSprite該做的向下循環子對象,LTweenLite就應該調用緩動函數來改變緩動數據等。
?
2,全屏設置
html5最大的優勢就是跨平臺,所以游戲要能在手機上運行最好,但是能運行不能就完了,還要能達到全屏。以前lufylegend的全屏有點問題,不過最近改好了,不僅能手機全屏,PC機也OK,還提供了三種全屏模式:
LStageScaleMode.EXACT_FIT:[靜態] 指定整個應用程序在指定區域中可見,但不嘗試保持原始高寬比。
LStageScaleMode.SHOW_ALL:[靜態] 指定整個應用程序在指定區域中可見,且不會發生扭曲,同時保持應用程序的原始高寬比。
LStageScaleMode.NO_SCALE:[靜態] 指定應用程序的大小是固定的,因此,即使在更改播放器窗口大小時,它仍然保持不變。
※設置完舞臺的縮放模式之后,調用LSystem.screen(LStage.FULL_SCREEN);就可以實現全屏。
原理很簡單,就是設置canvas標簽的style.width和style.height來實現GPU縮放。
?
3,加入對象/移除對象:addChild,removeChild
在lufylegend中要加入顯示對象到銀幕上,需要使用addChild,如果直接調用這個函數,就是把對象加入最底層,當然LSprite也有addChild,是把對象添加到LSprite上,從而實現層次化效果。
removeChild是一樣的,只不過是把對象刪除而已~
addChild和removeChild等同于LGlobal.stage.addChild和LGlobal.stage.removeChild。原理為把參數所指定的對象從LSprite的childList里面刪除掉。
?
4,LLoadManage加載文件
主要用于加載游戲中的文件,如圖片,音頻,js文件,其他文件(需要用到服務器),用法可查API文檔。
原理:通過判斷文件不同的類型從而分別調用LLoader(讀取圖片),LURLLoader(讀取文本文件,包括js文件),LSound(讀取音頻)。當然你可以直接用上述的幾個類讀取數據,但是咱們的LLoadManage胃口更大,可以批量讀取不同類型的文件,使用起來還會更方便,因為其中還提供了進度條的顯示。
?
5,圖片類LBitmap,LBitmapData
這個兩個類主要配合顯示圖片,不過顯示之前需要加載圖片,方法如下:
?
[javascript] view plaincopyprint??
通過這倆的名字可以看出來,一個是負責提供數據,一個負責按數據要求顯示,類似于教研員和考生。LBitmap是LDisplayObject的子類,在ll_show中會調用到繪制圖像的函數。同時也會進行相應的畫布變幻。
?
6,LSprite層次化效果
?
LSprite的定義是:LSprite 類是基本顯示列表構造塊,一個可顯示圖形并且也可包含子項的顯示列表節點。這個有點復雜,但其實說白了就是一個Layer層。我們在前面說到過,加入越后的對象會顯示在最頂部,但是我要讓后加的對象顯示在先加的對象下方,就要用到LSprite分層顯示了。LSprite也有addChild和removeChild方法,用于添加對象。此外,LSprite還有addEventListener函數,用于給對象加入事件。具體的一些功能可以到官方API去看看。
LSprite也有個childList屬性,裝有其子成員,在ll_show中,LSprite執行畫布變幻和循環自己的childList,然后調用循環到的子對象的ll_show方法。
?
7,LTextField文字顯示
這個類如LBitmap一般,需要用addChild加入到界面中。這個類的屬性很多,不過用起來挺不錯的,大家可以到API中去看一看,使用舉例如下:
?
[javascript] view plaincopyprint?這個類嘛和LBitmap執行的命令差不多,畫圖的命令改為畫文字的命令即可。
總結
以上是生活随笔為你收集整理的lufylegend基础知识1的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 三目运算符 改变a标签的class属性
- 下一篇: 解决Myeclipse下Debug出现S