Lufylegend是一種基於html5的開源遊戲引擎,採用javascript語言編寫,用戶通過在網頁中引用相關的Lufylegend.js檔案就可以很方便的利用這個遊戲引擎編寫自己的網頁遊戲。
簡介,基本原理,
簡介
lufylegend是一個HTML5開源引擎,它實現了利用仿ActionScript3.0的語法進行HTML5的開發, 包含了LSprite,LBitmapData,LBitmap,LLoader,LURLLoader,LTextField,LEvent等多個AS開發人員熟悉的類, 支持Google Chrome,Firefox,Opera,IE9+,IOS,Android等多種熱門環境。 利用lufylegend可以輕鬆的使用面向對象編程,並且可以配合Box2dWeb製作物理遊戲, 另外它還內置了LTweenLite緩動類等非常實用的功能 。lufylegend配置起來非常簡單,只需要引用相關js檔案即可,並且在運行效率方面也比較高。
基本原理
我們知道,遊戲主要由事件和畫面組成,在lufylegend的事件中,有滑鼠事件(MOUSE_DOWN,MOUSE_UP,MOUSE_MOVE),鍵盤事件(KEY_DOWN,KEY_UP),時間軸事件(ENTER_FRAME),這些事件中,前兩項比較好理解,但時間軸事件對於一些剛接觸遊戲開發的新生而言,有些摸不著頭腦。其實時間軸事件相當於一個定時器,這個事件的監聽者(listener,也就是事件回調函式)每隔一段時間就會觸發一次。但這個東西有什麼用呢?我們舉個例子吧,假如我們做一個飛機大戰的遊戲,要讓敵機緩緩地移動起來,如果我們直接將它們的x或者y設定為某值,那飛機就會在嗖地一聲在瞬間之內移動到那裡。這樣很不“禮貌”,因為動作太大了~我們要做到緩緩地移動,這時候時間軸事件就該派上用處了,我們可以在監聽函式中給飛機的x或者y增加某個值,這樣的話,監聽函式每被調用一次,就會將飛機移動一下,又因為每隔一段時間監聽函式才被調用一次,所以說飛機就能夠達到慢慢移動的效果,這樣就”禮貌“多了,對吧?當然,要讓飛機移動地更帥一點,那就要用到緩動類LTweenLite,什麼是緩動類?好吧,我直觀地告訴你,就是像jQuery淡入淡出那種逐漸變化從而實現某種效果的一個功能。這裡有lufy對緩動類進行巧妙地利用,做出的一個超帥動畫:HTML5超帥動畫製作-LTweenLite的妙用
說完事件,我們再來說說畫面。lufylegend中,但凡是加入到畫面上的顯示對象都是通過一個setInverval不停繪製的,這樣做有什麼必要呢?首先,是可以實現層次化,如果我們把所有對象放入一個數組中,通過遍歷的方式獲取每個對象並調用函式將其顯示,那么第一個被加入的對象就會先被畫在最下面,其餘的依次畫上,這樣一來就實現了層次化效果。其次,還有個好處就是可以通過直接更改對象的屬性從而在下次重繪時表現出來,比如說我們加入一個圖片對象(對象名字為img),這時我們要改變它的顯示方式為不顯示(visible屬性改為false),那么直接把img.visible改為false即可,那在下次重繪時就控制它不顯示。另外,在上面提到的時間軸事件觸發的速度也是由重畫速度決定的——每畫一次就調用一次。