运用EntityComponent架构的游戏引擎快速开发HTML5游戏.ppt

Crafty中的关卡场景定义 关卡场景定义 Crafty.scene(“sceneName”, function(){ …//执行一些函数，创建一堆Entity，设置背景，bhla bhla…}); 关卡场景调用 Crafty.scene(“sceneName”); // =_____= 没啥好说的… 关卡场景切换时发生了啥？ 开始某关卡时，Stage当前所有具有2D组件的Entity都会被销毁 若希望保留某些Entity，给它添加Persist组件即可 关卡切换时SceneChange事件将触发 引擎的启动与停止 Crafty.init([width, height]); 长宽默认是全屏 引擎init后，将持续触发Enterframe事件, 即为游戏提供update。 引擎启动瞬间，将触发Load事件 Crafty.stop(); 当引擎停止后将移除Enterframe事件的setInterval 同时也将移除全部在Stage中的元素 使用SpriteSheet 使用Crafty.sprite函数创建Sprite组件 Crafty.sprite(16, 16, “spirte.png”, { // 定义每格长宽 grass1:[0,0], // 将此SpriteSheet的0,0格位置定义为grass1 grass2:[1,0], // 同上定义1, 0格为grass2 grass3:[2,0], grass4:[3,0], flower:[0,1], // flower定义在0,1格 bush:[0,2], player:[0,3], // 玩家定义在0, 3格位置}); 定义Sprite组件后，创建GameEntity Crafty.e(“2D, DOM, flower”);//此时组件已定义，将渲染0,1 格的flower 使用Sprite动画 添加SpriteAnimation组件即可使用Sprite动画 var player = Crafty.e(“2D, DOM, player, SpriteAnimation”) .attr({ x:100, y: 100}) .animate(“left”, 6, 3, 8) // 定义left为x:6, y:3格开始到x:8格 .animate(“right”, 9, 3, 11)// 同上 .animate(“up”, 3, 3, 5) .animate(“down”, 0, 3, 2); 播放动画 player.animate(“left”, 10); // 在10帧时间内播放left动画 其他函数 stop(), reset(), isPlaying(name) Crafty中的碰撞检测 基于Crafty.Polygon或者Crafty.Circle的碰撞检测 添加Collision组件后即可使用 var player = Crafty.e(“2D, DOM, player, Collision”) .collision() //默认创建基于x,y,w,h的Polygon用于检测 .onHit(“flower”, function(){ …// 进行一些处理 }); onHit方法是自动对具有某个Component进行检测 当与具有该组件的GameEntity碰撞时即调用注册的函数 也可以直接调用hit(compName)检测 此方法返回Boolean Crafty中的键盘操控 基本组件：Keyboard组件 函数：isDown(key) //可以在Crafty.keys中找到映射 事件触发：KeyDown，KeyUp 高级组件：Multiway组件（依赖Keyboard） 函数：multiway([speed], {W: -90, S:90, D:0, A:180} ); 事件触发：NewDirection(方向切换时), Moved(发生移动时) 便捷组件：Fourway, Twoway (依赖Multiway) fourway // wasd四方向控制 twoway // ad 双方向，w跳可在Gravity组件中使用 Crafty中的鼠标操控 基本组件: Mouse 组件 函数：areaMap(polygon) //传入一个Crafy.Polygon作为检测区 事件触发: MouseOver, MouseOut, MouseUp, MouseDown, Click 高级组件：Draggable组件（依赖Mouse组件） 函数: startDrag, stopDrag, enableDrag, disableDrag 事件触发： StartDrag, StopDrag 对于移动平台的Touch，同样使用Mo