HTML5+lufylegend實(shí)現(xiàn)游戲中的卷軸

2020-03-24 18:52:39

字體：大中小

供稿：網(wǎng)友

lufylegend是一個(gè)HTML5開(kāi)源引擎,它實(shí)現(xiàn)了利用仿ActionScript3.0的語(yǔ)法進(jìn)行HTML5的開(kāi)發(fā)，包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多個(gè)AS開(kāi)發(fā)人員熟悉的類(lèi)，支持Google Chrome，F(xiàn)irefox，Opera，IE9，IOS，Android等多種熱門(mén)環(huán)境。利用lufylegend可以輕松的使用html' target='_blank'>面向?qū)ο?/u>編程，并且可以配合Box2dWeb制作物理游戲，另外它還內(nèi)置了LTweenLite緩動(dòng)類(lèi)等非常實(shí)用的功能, 現(xiàn)在開(kāi)始使用它吧，它可以讓你更快的進(jìn)入HTML5的世界！
什么是卷軸
玩過(guò)RPG或者橫版格斗的同學(xué)應(yīng)該知道，人物走到屏幕中央后，由于地圖過(guò)大，地圖會(huì)進(jìn)行移動(dòng)，人物則相對(duì)靜止不動(dòng)。這個(gè)就是傳說(shuō)中的卷軸。例如下圖是我的游戲三國(guó)戰(zhàn)線里的卷軸：

有了以上的簡(jiǎn)介，大家應(yīng)該明白了什么是卷軸。說(shuō)白了就是鏡頭跟隨主角的效果。接下來(lái)，我們就利用lufylegend.js游戲引擎來(lái)實(shí)現(xiàn)這個(gè)效果。
原理介紹
其實(shí)實(shí)現(xiàn)這個(gè)效果的關(guān)鍵在于如何使人物靜止，何時(shí)移動(dòng)地圖，以及如何移動(dòng)地圖。在探究這個(gè)兩個(gè)問(wèn)題之前，我們先創(chuàng)建一個(gè)結(jié)構(gòu)良好的舞臺(tái)層（及一個(gè)LSprite對(duì)象），以便以后的操作。舞臺(tái)結(jié)構(gòu)如下：
+- 舞臺(tái)層
|
+- 地圖層
|
+- 人物層
可見(jiàn)舞臺(tái)層就是地圖層和人物層的父元素，并且人物層在地圖層上方，畢竟人物是站在地圖上的。我們知道，子對(duì)象的坐標(biāo)是相對(duì)于父對(duì)象的，所以移動(dòng)父對(duì)象，子對(duì)象會(huì)跟著移動(dòng)。這點(diǎn)要先弄明白。
如何使人物靜止呢？何時(shí)移動(dòng)地圖呢？如何移動(dòng)地圖呢？也許你會(huì)想，首先用if(xxx){...}來(lái)判斷人物的坐標(biāo)是否達(dá)到屏幕中央，如果是，則移動(dòng)地圖對(duì)象，如果不是則移動(dòng)人物對(duì)象。這么做的話就麻煩了。其實(shí)有更簡(jiǎn)單的方法：
卷軸/不卷軸時(shí)，我們的人物都是在移動(dòng)，但是如果人物達(dá)到屏幕中央時(shí)，要開(kāi)始卷軸了，我們的舞臺(tái)層就進(jìn)行與人物速度方向相反、大小相同的移動(dòng)，那么人物的相對(duì)于canvas畫(huà)布的位移就抵消了，看上去就是靜止的，而地圖就跟著父類(lèi)向反方向移動(dòng)。這個(gè)類(lèi)似于拍古裝電影，拍兩個(gè)人一邊騎馬一邊談話。如果人和馬在前進(jìn)，攝像機(jī)以相同的速度跟拍，那么得到的畫(huà)面就是人物并沒(méi)有移動(dòng)，而人物背后風(fēng)景是在移動(dòng)的。
接下來(lái)看實(shí)現(xiàn)代碼。
實(shí)現(xiàn)代碼
以下是含有詳細(xì)注釋的代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
LInit(30,'mydemo',700,480,main); //移動(dòng)方向，null代表沒(méi)移動(dòng) vardirection=null; //小鳥(niǎo)，舞臺(tái)層，背景對(duì)象 varbird,stageLayer,bg; //每次移動(dòng)的長(zhǎng)度 varstep=5; functionmain(){ //資源列表 varloadList=[ {name:'bird',path:'./bird.png'}, {name:'bg',path:'./bg.jpg'} ]; //加載資源 LLoadManage.load(loadList,null,demoInit); } functiondemoInit(result){ //初始化舞臺(tái)層 stageLayer=newLSprite(); addChild(stageLayer); //加入背景 bg=newLBitmap(newLBitmapData(result['bg'])); bg.y=-100; stageLayer.addChild(bg); //加入小鳥(niǎo) bird=newLBitmap(newLBitmapData(result['bird'])); bird.x=100; bird.y=150; stageLayer.addChild(bird); //添加鼠標(biāo)按下事件 stageLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown); //添加鼠標(biāo)彈起事件 stageLayer.addEventListener(LMouseEvent.MOUSE_UP,onUp); //添加時(shí)間軸事件 stageLayer.addEventListener(LEvent.ENTER_FRAME,onFrame); } functiononDown(e){ /**根據(jù)點(diǎn)擊位置設(shè)置移動(dòng)方向*/ if(e.offsetX LGlobal.width/2){ direction='right'; }else{ direction='left'; } } functiononUp(){ //設(shè)置方向?yàn)闊o(wú)方向，代表不移動(dòng) direction=null; } functiononFrame(){ var_step,minX,maxX; /**移動(dòng)小鳥(niǎo)*/ if(direction=='right'){ _step=step; }elseif(direction=='left'){ _step=-step; }else{ return; } bird.x+=_step; /**控制小鳥(niǎo)移動(dòng)范圍*/ minX=0, maxX=bg.getWidth()-bird.getWidth(); if(bird.x minX){ bird.x=minX; }elseif(bird.x maxX){ bird.x=maxX; } /**移動(dòng)舞臺(tái)*/ stageLayer.x=LGlobal.width/2-bird.x; /**控制舞臺(tái)移動(dòng)范圍*/ minX=LGlobal.width-stageLayer.getWidth(), maxX=0; if(stageLayer.x minX){ stageLayer.x=minX; }elseif(stageLayer.x maxX){ stageLayer.x=maxX; } }

大家可以到這里查看在線演示。點(diǎn)擊屏幕左半邊控制小鳥(niǎo)向左移動(dòng)，點(diǎn)擊右半邊屏幕，控制小鳥(niǎo)向右移動(dòng)。小鳥(niǎo)到達(dá)屏幕中央后，開(kāi)始卷軸。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：實(shí)例講解HTML5的meta標(biāo)簽的一些應(yīng)用

下一篇：Html5 FileReader實(shí)現(xiàn)即時(shí)上傳圖片功能實(shí)例代碼