本帖最后由 stefan 于 2011-3-3 13:35 编辑
# The Timeline # Timeline
## Director
It all starts from thedirector. Director is a base object needed for every game and connects allLimeJS logic to a single place on the webpage. If you come from flash world youcan think of it as a stage, Cocos2d users see familiarities with Cocos2d-s ownDirector. All other can think of it just as a front controller.
There is only one directorinstance for each game. It handles games global viewport and controls whichscenes are visible. In the beginning of your came logic you have to create aninstance of director. The parameters for the constructor method are containerDOM element, stage width in pixels and height in pixels. ##Director 首先:director。Director是所有游戏都需要的基础对象,它把所有LimeJS的逻辑连接到了页面的单独的空间。如果你熟悉flash的话,你可以把它当作stage,如果你是cocos2d用户,你可以把它视为cocos2d自身的Director。如果你对两者都不熟悉,你就把它当成一个前端控制器。
每个游戏只有一个director(当然,一个电影只有一个主导演!)。它掌控了游戏的全局viewport(我想我还是别翻译这个单词了,ExtJS的用户应该对其相当的熟悉,就是游戏的主界面),并且控制哪个scenes(场景)是可见的。在建立游戏逻辑伊始,你需要建立一个director的实例。它的构造函数的参数包括DOM容器元素、stage宽和高。
vardirector = new dfkit.Director(document.body,320,460);
## Scene
Scene is a independentportion of visible elements that cover all the viewport. This means that onlyone scene can be active at a given time. For example, in common game logic youwould have menu scene, play scene and game-over scene. To make a scene visibleyou call ’director.replaceScene(scene)’ or ’director.pushScene(scene)’. Thedifference is that *pushScene* does not remove the previous scene but keeps itin a hidden stack so it can be made visible again with ’director.popScene()’call. ## Scene Scene(场景)是一个包含可视元素的用于覆盖viewport的孤立部分。也就是说,在某个时间点上,你只能看到一个场景。例如:在一般的游戏逻辑中,你可能需要菜单scene以及游戏结束的scene。通过调用director.replaceScene(scene)或者’director.pushScene(scene)来让一个scene可见。不同点在于后者不会移除之前的scene,只是将其隐藏起来方便之后通过director.popScene()激活可见。
var scene = new lime.Scene();
director.replaceScene(scene);
## Transitions
Using plain’replaceScene()’ just makes a quick switch between the scenes that may not bevisually appealing. To make it better you can set optional *transition* and*duration* property of your ’replaceScene()’ call. The transition defines theanimation that happens when current scene is dismissed and new scene isactivated. Currently various *Slide* and *Move* transitions are supported aswell as *Dissolve* for fade-in effect. ## Transitions
单纯使用replaceScene()来实现场景切换似乎不那么诱人。因此我们可以采用transition和duration属性。Transition定义了场景消失激活时的动画效果。当前,支持Slide和Move以及Dissolve(淡入)效果。
director.replaceScene(menuscene,lime.transition.SlideInRight);
director.replaceScene(gamescene,lime.transition.Dissolve,2);
## ScheduleManager
Everything in Lime isdrawn with repaint-dirty pattern. That means that every time you changesomething your method calls aren't strictly related to the equivalent DOM orCanvas2dContext calls. Instead property you set is marked as dirty and will beredrawn in the next frame. This allows us to update only once, update only whatis necessary and keep all updates stateless. Last criteria allows us to switchbetween the renderer methods any time. As there isn't any on-enter-frame eventin Javascript we've made a *lime.sheduleManager* static object that simulatesit. These are the methods it provides:
- schedule(callback,context) - Call a function in every frame. Context is object that represents*this*.
- unschedule(callback,context) - Clear previously scheduled function.
-scheduleWithDelay(callback, context, delay, opt_limit) - Same as *schedule* butfunction is only called if if more than *delay* seconds has passed from lastexecution.
- callAfter(callback,context, delay) - Only call function once after the delay.
You should never useJavaScript built in methods ’setTimeout()’ and ’setInterval()’ directly in yourgame code. *lime.schduleManager* provides you with the same functionality withextra features. Your callback is called with a parameter that is the delay fromthe last execution of the same callback in milliseconds. This allows you tomake smooth animations even if the CPU performance changes drastically. ##ScheduleManager(调度管理器)
Lime中的所有东西都是基于repaint-dirty(重绘-不一致/过期)模式。也就是说,每次当你改变东西时,你的方法调用和相关DOM或者Canvas2dContext调用并不严格相关。新的属性将会标识为过期并且在下一帧中重绘。这允许我们只更新一次,更新那些需要的内容、并且无状态地保存所有更新。最后一点(即无状态保存更新)允许我们在任何时候切换渲染方法。因为在JS中没有提供任何on-enter-frame(帧加载)事件,因此我们使用了一个静态的lime.sheduleManager对象来模拟它。以下是它提供的方法:
- schedule(callback, context) – 在每一帧里调用一个方法。Context是this作用域。
- unschedule(callback, context) – 清除之前的schedule方法。
-scheduleWithDelay(callback, context, delay, opt_limit) – 和schedule类似,但是回调函数只有在超过delay(自上一次执行的延迟时间)秒数时候才会被调用。
- callAfter(callback, context, delay) – 在delay指定的时间后调用一次回调函数。
你不应该在游戏代码里使用js自带的setTimeout()和setInterval()方法。lime.scheduleManager给你提供了能实现同一功能但却更丰富的方法。你的回调函数只有超过距离上次执行delay的时间后才会被再次执行。这使你能够让动画更加平滑,即使实在CPU性能急剧改变的情况下。
var velocity = 2;
lime.scheduleManager.schedule(function(dt){
var position= this.getPosition();
position.x+= velocity * dt; // if dt is bigger we just move more
this.setPosition(position);
},ball);
## Pausing
Using scheduleManagerinstead of timer functions also gives you benefit of pausing support. When youwish to pause your gave you simply have to call the ’setPaused(true)’ on yourDirector object. This pauses all the scheduled functions and animations. Onceyou resume by calling ’setPaused(false)’ all your code is resumed as if nothingever happened. While your game is in paused state instance of *lime.PauseScene*is placed as a active scene of the Director. If you wish to have some customappearance on this state you can override this class functionality.
##Pausing(暂停)
使用scheduleManager可以使你充分利用暂停。当你希望暂停游戏时,只需调用Director对象的setPaused(true)。这将会暂停所有计划中的方法和动画。一旦你调用setPaused(false),所有的代码又会继续执行,就如同什么都没发生一般。当你的游戏暂停时,lime.PauseScene将会被激活。如果你想自定义暂停场景,你可以覆盖这个类的功能。
mygame.director.setPaused(true);
## Layers
Now we are ready to addsomething on the screen. To better manage your display object we haveintroduced *lime.Layer* objects. You can think about them in a same way asPhotoshop layers. Layers are there to hold stuff in. They act as any otherdisplay objects with an exception that they don't have any body or sizethemselves. Their only contents is their children objects. So you create them,add to the tree, position if necessary and add child objects into to them. Justto be clear, using layers is not required - your can add any displayobjects to the scene. Layers just make your life easier. ##Layers(层)
现在我们希望在界面上加一些东西。为了更好的管理显示的对象,我们引入了lime.Layer对象。你可以把它当作PS里的layer。Layer可以用来盛放东西。它们和其他的可视对象行为相同,例外的是,他们没有自己body或者大小。他们只包含子对象。所以,你可以建立它们,添加到树中,选择合适的位置并且添加子对象。需要指明的是:Layer的使用并不是必须的——你可以往scene(场景)中添加任何对象。Layer只是为了方便你的生活罢了~~
var layer =new lime.Layer().setPosition(100,100);
scene.appendChild(layer);
for(var i=0;i<5;i++){
var box =customMakeBoxFunc().setPosition(i*50,0);
layer.appendChild(box);
} [注意:翻译部分为17html5.com版权所有,任何转载必须注明文章出处和链接地址以及作者,否则视为侵权,将追究法律责任!] |