【Html5游戏开发 with LufyLegend.js 之一】一览全局函数 & LGlobal静态类

时间：2014-07-28 02:56:50 阅读：560 评论：0 收藏：0 [点我收藏+]

标签：des style blog http color 使用 os strong

一，前言

最近开始学习lufylegend.js，它是一款基于MIT协议的开源HTML5游戏引擎，目前使用Canvas渲染，2.0后会增添WebGL渲染。与其他的引擎相比，最大的特点就是模仿了ActionScript 3.0的语法，当然这只是一个特点，不会ActionScript对于学习lufylegend.js也没有什么坏的影响，我就是一个很好的例子(*_^)，只不过如果你接触过ActionScript，那使用lufylegend.js的时候可能会顺手一些。以下是关于lufylegend.js的一些相关资源。

lufylegend.js官方网站：http://lufylegend.com/lufylegend

中文文档地址：http://lufylegend.com/api/zh_CN/out/

论坛地址：http://lufylegend.com/forum/forum.php

官方博客：http://blog.csdn.net/lufy_legend

lufylegend.js的最新版本是1.9.0，该版本的changelog可以到官方网站上进行查阅。

二，全局函数

这里只主要介绍几个常见的函数，还有一两个没有介绍，大家可以到文档->全局函数中进行查找。

Ⅰ LInit函数

这是一个初始化游戏的函数，注意该函数在1.9.0之前叫init，不过在1.9.0中使用init函数也可以初始化游戏，换句话说，LInit = init。这个函数有六个参数，通常情况下最后一个可以不用传。相关用法请看：

http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_LInit

内部的代码如下：

 1 function init (s, c, w, h, f, t) {
 2     LGlobal.speed = s;
 3     var _f = function () {
 4         if (LGlobal.canTouch && LGlobal.aspectRatio == LANDSCAPE && window.innerWidth < window.innerHeight) {
 5             LGlobal.horizontalError();
 6         } else if (LGlobal.canTouch && LGlobal.aspectRatio == PORTRAIT && window.innerWidth > window.innerHeight) {
 7             LGlobal.verticalError();
 8         } else {
 9             setTimeout(f, 100);
10         }
11         LGlobal.startTimer = (new Date()).getTime();
12     };
13     if (t != null && t == LEvent.INIT) {
14         LGlobal.frameRate = setInterval(function () {
15             LGlobal.onShow();
16         }, s);
17         LGlobal.setCanvas(c, w, h);
18         _f();
19     }else{
20         LEvent.addEventListener(window, "load", function () {
21             LGlobal.frameRate = setInterval(function () {
22                 LGlobal.onShow();
23             }, s);
24             LGlobal.setCanvas(c, w, h);
25             _f();
26         });
27     }
28 }
29 var LInit = init;

这个函数关联的地方比较多，我就一一列举出来吧。

LEvent类的代码：

 1 function LEvent(type){
 2     this.eventType = type;
 3     this._ll_preventDefault = false;
 4 }
 5 LEvent.prototype.preventDefault = function () {
 6     this._ll_preventDefault = true;
 7 };
 8 LEvent.INIT = "init";
 9 LEvent.COMPLETE = "complete";
10 LEvent.ENTER_FRAME = "enter_frame";
11 LEvent.WINDOW_RESIZE = "resize";
12 LEvent.SOUND_COMPLETE = "sound_complete";
13 LEvent.END_CONTACT = "endContact";
14 LEvent.PRE_SOLVE = "preSolve";
15 LEvent.POST_SOLVE = "postSolve";
16 LEvent.BEGIN_CONTACT = "beginContact";
17 LEvent.addEventListener = function (n, t, f, b) {
18     if (b == null) {
19         b = false;
20     }
21     if (n.addEventListener) {
22         n.addEventListener(t, f, b);
23     } else if (n.attachEvent) {
24         n["e" + t + f] = f;
25         n[t + f] = function () {
26             n["e" + t + f]();
27         };
28         n.attachEvent("on" + t, n[t + f]);
29     }
30 };
31 LEvent.removeEventListener = function (n, t, f, b) {
32     if (b == null) {
33         b = false;
34     }
35     if (n.removeEventListener) {
36         n.removeEventListener(t, f, b);
37     } else if (n.detachEvent) {
38         n["e" + t + f] = f;
39         n[t + f] = function () {
40             n["e" + t + f]();
41         };
42         n.detachEvent("on" + t, n[t + f]);
43     }
44 };

LGlobal里的相关函数：

  1 LGlobal.setCanvas = function (id, w, h) {
  2     LGlobal.ll_createCanvas(id, w, h);
  3     LGlobal.ll_createStage();
  4     if(LGlobal.displayState == LStage.FULL_SCREEN){
  5         LGlobal.resize();
  6     }else if(typeof LGlobal.displayState == "number"){
  7         LGlobal.resize(LGlobal.width * LGlobal.displayState, LGlobal.height * LGlobal.displayState);
  8     }
  9     if (LGlobal.canTouch) {
 10         LGlobal.ll_clicks = 0;
 11         LGlobal.ll_prev_clickTime = 0;
 12         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.TOUCH_START, LGlobal.ll_touchStart);
 13         LEvent.addEventListener(document,LMouseEvent.TOUCH_END, LGlobal.ll_touchEnd);
 14         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.TOUCH_MOVE, LGlobal.ll_touchMove);
 15     } else {
 16         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.DOUBLE_CLICK, LGlobal.ll_mouseDbclick);
 17         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_DOWN, LGlobal.ll_mouseDown);
 18         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_MOVE, LGlobal.ll_mouseMove);
 19         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_UP, LGlobal.ll_mouseUp);
 20         LEvent.addEventListener(LGlobal.canvasObj,LMouseEvent.MOUSE_OUT, LGlobal.ll_mouseOut);
 21     }
 22 };
 23 LGlobal.ll_createCanvas = function (id, w, h) {
 24     LGlobal.id = id;
 25     LGlobal.object = document.getElementById(id);
 26     LGlobal.object.innerHTML = ‘<div style="position:absolute;margin:0;padding:0;overflow:visible;-webkit-transform: translateZ(0);z-index:0;">‘ +
 27     ‘<canvas id="‘ + LGlobal.id + ‘_canvas" style="margin:0;padding:0;width:‘ + w + ‘px;height:‘ + h + ‘px;">‘ +
 28     ‘<div id="noCanvas">‘ +
 29     "<p>Hey there, it looks like you‘re using Microsoft‘s Internet Explorer. Microsoft hates the Web and doesn‘t support HTML5 :(</p>" + 
 30     ‘</div>‘ +  
 31     ‘</canvas></div>‘ +
 32     ‘<div id="‘ + LGlobal.id + ‘_InputText" style="position:absolute;margin:0;padding:0;z-index:10;display:none;">‘ +
 33     ‘<textarea rows="1" id="‘ + LGlobal.id + ‘_InputTextareaBox" style="resize:none;background:transparent;border:0px;"></textarea>‘ +
 34     ‘<input type="text" id="‘ + LGlobal.id + ‘_InputTextBox"  style="background:transparent;border:0px;" />‘ +
 35     ‘<input type="password" id="‘ + LGlobal.id + ‘_passwordBox"  style="background:transparent;border:0px;" /></div>‘;
 36     LGlobal.canvasObj = document.getElementById(LGlobal.id + "_canvas");
 37     LGlobal._canvas = document.createElement("canvas");
 38     LGlobal._context = LGlobal._canvas.getContext("2d");
 39     if (LGlobal._context) {
 40         LGlobal.canvasObj.innerHTML="";
 41     }
 42     LGlobal.inputBox = document.getElementById(LGlobal.id + ‘_InputText‘);
 43     LGlobal.inputTextareaBoxObj = document.getElementById(LGlobal.id + ‘_InputTextareaBox‘);
 44     LGlobal.inputTextBoxObj = document.getElementById(LGlobal.id + ‘_InputTextBox‘);
 45     LGlobal.passwordBoxObj = document.getElementById(LGlobal.id + ‘_passwordBox‘);
 46     LGlobal.inputTextField = null;
 47     if (w) {
 48         LGlobal.canvasObj.width = w;
 49     }
 50     if (h) {
 51         LGlobal.canvasObj.height = h;
 52     }
 53     LGlobal.width = LGlobal.canvasObj.width;
 54     LGlobal.height = LGlobal.canvasObj.height;
 55     LGlobal.canvasStyleWidth = LGlobal.width;
 56     LGlobal.canvasStyleHeight = LGlobal.height;
 57     LGlobal.canvas = LGlobal.canvasObj.getContext("2d");
 58     LGlobal.offsetX = mouseX = 0;
 59     LGlobal.offsetY = mouseY = 0;
 60 };
 61 LGlobal.ll_createStage = function () {
 62     LGlobal.stage = new LSprite();
 63     LGlobal.stage.parent = "root";
 64     LGlobal.childList.push(LGlobal.stage);
 65     LGlobal.stage.baseAddEvent = LGlobal.stage.addEventListener;
 66     LGlobal.stage.baseRemoveEvent = LGlobal.stage.removeEventListener;
 67     LGlobal.stage.addEventListener = function (type, listener) {
 68         if (type == LEvent.WINDOW_RESIZE) {
 69             LGlobal.stage.onresizeListener = listener;
 70             LGlobal.stage.onresize = function (e) {
 71                 LGlobal.stage.onresizeEvent = e;
 72             };
 73             LEvent.addEventListener(LGlobal.window, type,LGlobal.stage.onresize);
 74         } else if (type == LKeyboardEvent.KEY_DOWN || type == LKeyboardEvent.KEY_UP || type == LKeyboardEvent.KEY_PRESS) {
 75             LEvent.addEventListener(LGlobal.window, type, listener);
 76         } else {
 77             LGlobal.stage.baseAddEvent(type, listener);
 78         }
 79     };
 80     LGlobal.stage.removeEventListener = function (type, listener) {
 81         if (type == LEvent.WINDOW_RESIZE) {
 82             LEvent.removeEventListener(LGlobal.window, LEvent.WINDOW_RESIZE, LGlobal.stage.onresize);
 83             delete LGlobal.stage.onresize;
 84             delete LGlobal.stage.onresizeListener;
 85         } else if (type == LKeyboardEvent.KEY_DOWN || type == LKeyboardEvent.KEY_UP || type == LKeyboardEvent.KEY_PRESS) {
 86             LEvent.removeEventListener(LGlobal.window, type, listener);
 87         } else {
 88             LGlobal.stage.baseRemoveEvent(type, listener);
 89         }
 90     };
 91 };
 92 LGlobal.ll_touchStart = function (event) {
 93     if (LGlobal.inputBox.style.display != NONE) {
 94         LGlobal.inputTextField._ll_getValue();
 95     }
 96     var canvasX = parseInt(0 + LGlobal.object.style.left) + parseInt(LGlobal.canvasObj.style.marginLeft),
 97     canvasY = parseInt(0 + LGlobal.object.style.top) + parseInt(LGlobal.canvasObj.style.marginTop), eve, k, i, eveIndex;
 98     if (LMultitouch.inputMode == LMultitouchInputMode.NONE) {
 99         eveIndex = 0;
100     } else if (LMultitouch.inputMode == LMultitouchInputMode.TOUCH_POINT) {
101         eveIndex = event.touches.length - 1;
102     }
103     eve = {offsetX : (event.touches[eveIndex].pageX - canvasX),
104     offsetY : (event.touches[eveIndex].pageY - canvasY),
105     touchPointID : event.touches[eveIndex].identifier};
106     eve.offsetX = LGlobal.ll_scaleX(eve.offsetX);
107     eve.offsetY = LGlobal.ll_scaleY(eve.offsetY);
108     mouseX = LGlobal.offsetX = eve.offsetX;
109     mouseY = LGlobal.offsetY = eve.offsetY;
110     LMultitouch.touchs["touch" + eve.touchPointID] = eve;
111     LGlobal.mouseEvent(eve, LMouseEvent.MOUSE_DOWN);
112     LGlobal.buttonStatusEvent = eve;
113     var date = new Date();
114     var clickTime = date.getTime();
115     LGlobal.ll_clicks = (clickTime <= (LGlobal.ll_prev_clickTime + 500)) ? (LGlobal.ll_clicks + 1) : 1;
116     LGlobal.ll_prev_clickTime = clickTime;
117     if (LGlobal.ll_clicks === 2) {
118         LGlobal.mouseEvent(eve, LMouseEvent.DOUBLE_CLICK);
119         LGlobal.ll_clicks = 0;
120     }
121     LGlobal.IS_MOUSE_DOWN = true;
122     if (LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.mouseJoint_start) {
123         LGlobal.mouseJoint_start(eve);
124     }
125     LGlobal.touchHandler(event);
126 };
127 LGlobal.ll_touchEnd = function (event) {
128     var e, eve, k, i, l, h;
129     if (LMultitouch.inputMode == LMultitouchInputMode.TOUCH_POINT) {
130         for (k in LMultitouch.touchs) {
131             e = LMultitouch.touchs[k];
132             h = false;
133             for (i = 0,l = event.touches.length; i < l; i++) {
134                 if (event.touches[i].identifier == e.touchPointID) {
135                     h = true;
136                     break;
137                 }
138             }
139             if (!h) {
140                 eve = e;
141                 delete LMultitouch.touchs[k];
142                 break;
143             }
144         }
145     }
146     if (!eve) {
147         eve = {offsetX : LGlobal.offsetX, offsetY : LGlobal.offsetY};
148     }
149     LGlobal.mouseEvent(eve, LMouseEvent.MOUSE_UP);
150     LGlobal.touchHandler(event);
151     LGlobal.IS_MOUSE_DOWN = false;
152     LGlobal.buttonStatusEvent = null;
153     if (LGlobal.box2d != null && LGlobal.box2d.mouseJoint) {
154         LGlobal.box2d.world.DestroyJoint(LGlobal.box2d.mouseJoint);
155         LGlobal.box2d.mouseJoint = null;
156     }
157 };
158 LGlobal.ll_touchMove = function (e) {
159     var cX = parseInt(0 + LGlobal.object.style.left) + parseInt(LGlobal.canvasObj.style.marginLeft),
160     cY = parseInt(0 + LGlobal.object.style.top) + parseInt(LGlobal.canvasObj.style.marginTop),
161     eve, l, ll = e.touches.length;
162     if (LMultitouch.inputMode == LMultitouchInputMode.NONE) {
163         ll = 1;
164     }
165     for (i = 0, l = e.touches.length; i < l && i < ll; i++) {
166         eve = {offsetX : (e.touches[i].pageX - cX), offsetY : (e.touches[i].pageY - cY), touchPointID : e.touches[i].identifier};
167         eve.offsetX = LGlobal.ll_scaleX(eve.offsetX);
168         eve.offsetY = LGlobal.ll_scaleY(eve.offsetY);
169         mouseX = LGlobal.offsetX = eve.offsetX;
170         mouseY = LGlobal.offsetY = eve.offsetY;
171         if (LMultitouch.touchs["touch" + eve.touchPointID] && 
172             LMultitouch.touchs["touch" + eve.touchPointID].offsetX == eve.offsetX && 
173             LMultitouch.touchs["touch" + eve.touchPointID].offsetY == eve.offsetY){
174             continue;    
175         }
176         LGlobal.buttonStatusEvent = eve;
177         LMultitouch.touchs["touch" + eve.touchPointID] = eve;
178         LGlobal.mouseEvent(eve, LMouseEvent.MOUSE_MOVE);
179     }
180     LGlobal.touchHandler(e);
181     if(LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.mouseJoint_move){
182         LGlobal.mouseJoint_move(eve);
183     }
184 };
185 LGlobal.ll_mouseDbclick = function (e) {
186     if (e.offsetX == null && e.layerX != null) {
187         e.offsetX = e.layerX;
188         e.offsetY = e.layerY;
189     }
190     var event = {button : e.button};
191     event.offsetX = LGlobal.ll_scaleX(e.offsetX);
192     event.offsetY = LGlobal.ll_scaleY(e.offsetY);
193     LGlobal.mouseEvent(event, LMouseEvent.DOUBLE_CLICK);
194 };
195 LGlobal.ll_mouseDown = function (e) {
196     if (e.offsetX == null && e.layerX != null) {
197         e.offsetX = e.layerX;
198         e.offsetY = e.layerY;
199     }
200     if (LGlobal.inputBox.style.display != NONE) {
201         LGlobal.inputTextField._ll_getValue();
202     }
203     var event = {button : e.button};
204     event.offsetX = LGlobal.ll_scaleX(e.offsetX);
205     event.offsetY = LGlobal.ll_scaleY(e.offsetY);
206     LGlobal.mouseEvent(event, LMouseEvent.MOUSE_DOWN);
207     LGlobal.IS_MOUSE_DOWN = true;
208     if (LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.mouseJoint_start) {
209         LGlobal.mouseJoint_start(e);
210     }
211 };
212 LGlobal.ll_mouseMove = function (e) {
213     if (e.offsetX == null && e.layerX != null) {
214         e.offsetX = e.layerX;
215         e.offsetY = e.layerY;
216     }
217     var event = {};
218     event.offsetX = LGlobal.ll_scaleX(e.offsetX);
219     event.offsetY = LGlobal.ll_scaleY(e.offsetY);
220     LGlobal.buttonStatusEvent = event;
221     mouseX = LGlobal.offsetX = event.offsetX;
222     mouseY = LGlobal.offsetY = event.offsetY;
223     LGlobal.mouseEvent(event, LMouseEvent.MOUSE_MOVE);
224     if (LGlobal.IS_MOUSE_DOWN && LGlobal.box2d != null && LGlobal.box2d.mouseJoint) {
225         LGlobal.box2d.mouseJoint.SetTarget(new LGlobal.box2d.b2Vec2(e.offsetX / LGlobal.box2d.drawScale, e.offsetY / LGlobal.box2d.drawScale));
226     }
227 };
228 LGlobal.ll_mouseUp = function (e) {
229     if (e.offsetX == null && e.layerX != null) {
230         e.offsetX = e.layerX;
231         e.offsetY = e.layerY;
232     }
233     var event = {button : e.button};
234     event.offsetX = LGlobal.ll_scaleX(e.offsetX);
235     event.offsetY = LGlobal.ll_scaleY(e.offsetY);
236     LGlobal.mouseEvent(event, LMouseEvent.MOUSE_UP);
237     LGlobal.IS_MOUSE_DOWN = false;
238     if (LGlobal.box2d != null && LGlobal.box2d.mouseJoint) {
239         LGlobal.box2d.world.DestroyJoint(LGlobal.box2d.mouseJoint);
240         LGlobal.box2d.mouseJoint = null;
241     }
242 };
243 LGlobal.ll_mouseOut = function (e) {
244     if (e.offsetX == null && e.layerX != null) {
245         e.offsetX = e.layerX;
246         e.offsetY = e.layerY;
247     }
248     var event = {};
249     event.offsetX = LGlobal.ll_scaleX(e.offsetX);
250     event.offsetY = LGlobal.ll_scaleY(e.offsetY);
251     LGlobal.mouseEvent(event, LMouseEvent.MOUSE_OUT);
252     LGlobal.IS_MOUSE_DOWN = false;
253 };
254 LGlobal.touchHandler = function (e) {
255     e.stopPropagation();
256     if (LGlobal.preventDefault) {
257         e.preventDefault();
258     }
259     if (e.stopImmediatePropagation) {
260         e.stopImmediatePropagation();
261     }
262     return e;
263 };
264 LGlobal.mouseEvent = function (e, t) {
265     if (t == LMouseEvent.MOUSE_MOVE) {
266         LGlobal.dragHandler(e);
267     }
268     if (LMouseEventContainer.container[t]) {
269         LMouseEventContainer.dispatchMouseEvent(e, t);
270         return;
271     }
272     for (var k = LGlobal.childList.length - 1; k >= 0; k--) {
273         if (LGlobal.childList[k].mouseEvent && LGlobal.childList[k].mouseEvent(e, t)) {
274             break;
275         }
276     }
277 };
278 LGlobal.dragHandler = function (e) {
279     var i, s, c, d = LGlobal.dragList;
280     for(i = d.length - 1; i >= 0; i--) {
281         s = d[i];
282         if (LGlobal.canTouch && s.ll_touchPointID != e.touchPointID) {
283             continue;
284         }
285         c = s.getAbsoluteScale();
286         s.x = s.ll_dragStartX + (e.offsetX - s.ll_dragMX) * s.scaleX / c.scaleX;
287         s.y = s.ll_dragStartY + (e.offsetY - s.ll_dragMY) * s.scaleY / c.scaleY;
288         break;
289     }
290 };
291 LGlobal.onShow = function () {
292     if (LGlobal.canvas == null) {
293         return;
294     }
295     if (LGlobal.stage.onresizeEvent) {
296         LGlobal.stage.onresizeListener(LGlobal.stage.onresizeEvent);
297         delete LGlobal.stage.onresizeEvent;
298     }
299     if (LGlobal.box2d != null) {
300         LGlobal.box2d.ll_show();
301         if (!LGlobal.traceDebug && LGlobal.keepClear) {
302             LGlobal.canvas.clearRect(0, 0, LGlobal.width + 1, LGlobal.height + 1);
303         }
304     } else {
305         if (LGlobal.keepClear) {
306             LGlobal.canvas.clearRect(0, 0, LGlobal.width + 1, LGlobal.height + 1);
307         }
308         if (LGlobal.backgroundColor !== null) {
309             LGlobal.canvas.fillStyle = LGlobal.backgroundColor;
310             LGlobal.canvas.fillRect(0, 0, LGlobal.width, LGlobal.height);
311         }
312     }
313     LGlobal.show(LGlobal.childList);
314 };
315 LGlobal.show = function (s) {
316     for (var i = 0, l = s.length; i < l; i++) {
317         if (s[i] && s[i].ll_show) {
318             s[i].ll_show();
319         }
320     }
321 };

代码就不一一解释了，大致说明一下吧，setCanvas以及在setCanvas中调用的函数主要用于创建并配置canvas对象，看了文档的朋友都知道，LInit第二个参数传入的是游戏界面所在div的id值而并非canvas的id值，所以这些函数就负责把canvas创建好，并配置好事件以及调度事件的接口。而onShow和show则是负责渲染的函数，因为游戏中可能会有层次化或别的不经过循环处理不能实现的效果，所以引擎在LInit中就用了setInterval来周期性调用onShow函数，进行驱动渲染。这些就是lufylegend.js的事件、渲染机制。

还有就是LEvent类，这个类保存了大量的引擎中的自带事件，并且有addEventListener和removeEventListener函数，这些函数都是对html元素进行事件操作的，也就是说如果你想为你自己写的一个html标签创建或删除一个事件，并且要兼容多个浏览器的话，就可以用LEvent.addEventListener和LEvent.removeEventListener。一般需要传入的参数有：[ 添加对象，事件名，调度的函数 ]。LEvent其他的用法可以看：http://lufylegend.com/api/zh_CN/out/classes/LEvent.html

Ⅱ addChild函数

调用这个函数相当于调用ActionScript里的stage.addChild，也就是说把显示对象加入到底层。显示对象有哪些呢？主要的有LSprite，LBitmap，LTextField等。相关用法请看：

http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_addChild

内部的代码如下：

1 function addChild (o) {
2     LGlobal.stage.addChild(o);
3 }

Ⅲ removeChild函数

调用这个函数相当于调用ActionScript里的stage.removeChild，也就是说把显示对象从底层删除。相关用法请看：

http://lufylegend.com/api/zh_CN/out/classes/%E5%85%A8%E5%B1%80%E5%87%BD%E6%95%B0.html#method_removeChild

内部的代码如下：

1 function removeChild (o) {
2     LGlobal.stage.removeChild(o);
3 }

三，LGlobal静态类

LGlobal是lufylegend.js中的全局类，用于装载许多关于全局设置的函数和全局属性，比如说全屏处理，获取canvas信息等。LGlobal的文档地址如下：http://lufylegend.com/api/zh_CN/out/classes/LGlobal.html

注意LSystem = LStage = LGlobal。

在LGlobal中，拉伸界面的函数叫screen，这个函数很有意思，通常情况下用来实现全屏游戏，我们不妨来看看这个函数内部的实现方法：

 1 LGlobal.screen = function (a) {
 2     LGlobal.displayState = a;
 3     if (LGlobal.stage) {
 4         if (typeof LGlobal.displayState == "number") {
 5             LGlobal.resize(LGlobal.width * LGlobal.displayState, LGlobal.height * LGlobal.displayState);
 6         } else {
 7             LGlobal.resize();
 8         }
 9     }
10 };

首先使用时我们需要往这里面传一个参数，也就是拉伸大小，如果传个数字就会把界面按拉伸模式拉伸到指定的倍数。如果你想弄成全屏，那就传入LGlobal.FULL_SCREEN，这个属性的值其实是一个字符串。介绍完参数，我们来看看代码，在LGlobal.screen里第一行代码就是保存一下拉伸大小，第二行的判断条件中有个LGlobal.stage，这个是一个LSprite对象，LSprite会在今后的文章中讲到，因为这是一个非常重要的类；第二行里的判断主要作用是在LInit调用后screen函数也有拉伸界面的效果，因为在调用LInit前，Html里的元素可能并没有加载完成，但拉伸界面的时候必须要找到canvas对象，所以在LInit调用时也会使用到这个判断中的代码来保证LInit前使用screen也能达到拉伸界面的效果。第三行和第五行就是在进行代码运行分岔，条件是拉伸大小是否为数字。虽然这里通过if...else...分了两条路出来，不过都同时调用了resize函数，接下来就该看看resize函数了：

 1 LGlobal.resize = function (canvasW, canvasH) {
 2     var w, h, t = 0, l = 0, ww = window.innerWidth, wh = window.innerHeight;
 3     if (canvasW) {
 4         w = canvasW;
 5     }
 6     if (canvasH) {
 7         h = canvasH;
 8     }
 9     if (LGlobal.stageScale == "noScale") {
10         w = canvasW || LGlobal.width;
11         h = canvasH || LGlobal.height;
12     }
13     switch (LGlobal.stageScale) {
14     case "exactFit":
15         w = canvasW || ww;
16         h = canvasH || wh;
17         break;
18     case "noBorder":
19         w = canvasW || ww;
20         h = canvasH || LGlobal.height*ww/LGlobal.width;
21         switch (LGlobal.align) {
22         case LStageAlign.BOTTOM:
23         case LStageAlign.BOTTOM_LEFT:
24         case LStageAlign.BOTTOM_RIGHT:
25         case LStageAlign.BOTTOM_MIDDLE:
26             t = wh - h;
27             break;
28         }
29     break;
30     case "showAll":
31         if (ww / wh > LGlobal.width / LGlobal.height) {
32             h = canvasH || wh;
33             w = canvasW || LGlobal.width * wh / LGlobal.height;
34         } else {
35             w = canvasW || ww;
36             h = canvasH || LGlobal.height * ww / LGlobal.width;
37         }
38     case "noScale":
39     default:
40         switch (LGlobal.align) {
41         case LStageAlign.BOTTOM:
42         case LStageAlign.BOTTOM_LEFT:
43             t = wh - h;
44             break;
45         case LStageAlign.RIGHT:
46         case LStageAlign.TOP_RIGHT:
47             l = ww - w;
48             break;
49         case LStageAlign.TOP_MIDDLE:
50             l = (ww - w) * 0.5;
51             break;
52         case LStageAlign.BOTTOM_RIGHT:
53             t = wh - h;
54             l = ww - w;
55             break;
56         case LStageAlign.BOTTOM_MIDDLE:
57             t = wh - h;
58             l = (ww - w) * 0.5;
59             break;
60         case LStageAlign.MIDDLE:
61             t = (wh - h) * 0.5;
62             l = (ww - w) * 0.5;
63             break;
64         case LStageAlign.TOP:
65         case LStageAlign.LEFT:
66         case LStageAlign.TOP_LEFT:
67         default:
68         }
69     }
70     LGlobal.canvasObj.style.marginTop = t + "px";
71     LGlobal.canvasObj.style.marginLeft = l + "px";
72     if (LGlobal.isFirefox) {
73         LGlobal.left = parseInt(LGlobal.canvasObj.style.marginLeft);
74         LGlobal.top = parseInt(LGlobal.canvasObj.style.marginTop);
75     }
76     LGlobal.ll_setStageSize(w, h);
77 };

这里面主要是实现了界面对齐，和计算拉伸尺寸。

实现界面对齐是因为使用者可能有需求使界面处于屏幕的不同位置，当然通常情况下使用居中，大家可以看看文档上关于这方面的介绍：http://lufylegend.com/api/zh_CN/out/classes/LStageAlign.html

计算拉伸尺寸是为了下一步进行拉伸操作做准备，lufylegend.js中全屏拉伸模式有那么几种，在resize函数里会根据不同的模式进行不同的尺寸计算，详情请移步：http://lufylegend.com/api/zh_CN/out/classes/LStageScaleMode.html

界面拉伸的实现我们一直没看到，是吧？其实就离我们一步之遥了，拉伸方面的实现就在ll_setStageSize里，这个函数有两个参数，分别是拉伸的宽度和高度，这些都已经计算好了，所以直接传给了ll_setStageSize函数。

ll_setStageSize里的代码：

1 LGlobal.ll_setStageSize = function (w, h) {
2     w =  Math.ceil(w);
3     h =  Math.ceil(h);
4     LGlobal.canvasObj.style.width = w + "px";
5     LGlobal.canvasObj.style.height = h + "px";
6     LGlobal.canvasStyleWidth = w;
7     LGlobal.canvasStyleHeight = h;
8 };

就短短的8行就解决了问题。那么总得来说，要实现拉伸canvas效果，直接改canvas元素的style.width和style.height就能实现。最后来看看效果图吧：

测试地址为：http://lufylegend.com/api/api/LGlobal/screen.html

Demo中用到的代码如下：

 1 LInit(1000/60, "legend", 240, 240, main);
 2 function main () {
 3     LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
 4     LGlobal.screen(LStage.FULL_SCREEN);
 5     //you can also use it like : LGlobal.screen(1.5);
 6     var loader = new LLoader();
 7     loader.addEventListener(LEvent.COMPLETE, loadBitmapdata); 
 8     loader.load("http://lufylegend.com/api/api/LGlobal/face.jpg
 9 ", "bitmapData");
10 }
11 function loadBitmapdata (event) {
12     var bitmapdata = new LBitmapData(event.target);  
13     var bitmap = new LBitmap(bitmapdata);
14     addChild(bitmap);
15 }

Ok，今天就先到此为止，欢迎大家留言，下次我们就来看看所有显示对象的基类LDisplayObject，敬请期待~

欢迎大家继续关注我的博客http://www.cnblogs.com/yuehao

【Html5游戏开发 with LufyLegend.js 之一】一览全局函数 & LGlobal静态类,布布扣,bubuko.com

【Html5游戏开发 with LufyLegend.js 之一】一览全局函数 & LGlobal静态类

标签：des style blog http color 使用 os strong

原文地址：http://www.cnblogs.com/yuehao/p/html5_gamedev_with_lufylegend_1.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行