Html5斜45度地图+3D模型ARPG系列教程（2）-- 相机更随及平滑

实现目标：
1.游戏场景管理器

2.摄像机跟随及平滑

3.地图边界处理

1.游戏场景管理器
不管你做什么游戏，首先呈现给用户的都是一个场景，对于用户来说他永远看到的是一个2d画面，而对于我们来说，一个场景分成了多个层。抛开UI暂且不谈，在这里我把游戏场景分成了，地图层，角色层，特效层，提示层，调试层（不够再加）

package com.gameLogic.scene{import com.gameLogic.utils.ObjDictionary;import laya.d3.core.Camera;import laya.d3.core.Sprite3D;import laya.d3.core.scene.Scene;import laya.display.Node;import laya.display.Sprite;import laya.maths.Point;public class SceneManager{private var _camera:Camera2D;public function get camera():Camera2D{return _camera;}private var _camera3d:Camera;public function get camera3d():Camera{return _camera3d;}private var _scene:Sprite;public function get scene():Sprite{return _scene;}private var _scene3d:Scene;public function get scene3d():Scene{return _scene3d;}private var _container3d:Sprite3D;private var _layer_map:Sprite;private var _layer_actor:Sprite;private var _layer_effect:Sprite;private var _layer_tip:Sprite;private var _layer_debug:Sprite;private var _layerDic:ObjDictionary;public function SceneManager(){}public function init():void{init2dScene();}private function init2dScene():void{_scene = new Sprite();_layer_map = new Sprite();_layer_actor = new Sprite;_layer_effect = new Sprite;_layer_debug = new Sprite;_layer_tip = new Sprite();_layer_debug.mouseEnabled = false;_layerDic = new ObjDictionary(Sprite);_layerDic.add(LayerEnum.MapLayer, _layer_map);_layerDic.add(LayerEnum.ActorLayer, _layer_actor);_layerDic.add(LayerEnum.EffectLayer, _layer_effect);_layerDic.add(LayerEnum.DebugLayer, _layer_effect);_layerDic.add(LayerEnum.TipLayer, _layer_tip);_scene.addChild(_layer_map);_scene.addChild(_layer_actor);_scene.addChild(_layer_effect);_scene.addChild(_layer_debug);_scene.addChild(_layer_tip);Laya.stage.addChild(_scene);_camera = new Camera2D(_scene);}public function addToLayer(spr:Sprite, layer:String=LayerEnum.MapLayer, posX:Number=0, posY:Number=0):void{var layerSpr:Sprite = _layerDic.get(layer) as Sprite;if(layerSpr){layerSpr.addChild(spr);spr.x = posX;spr.y = posY;}else{trace("can not find layer " + layer);}}public function getLayer(layer:String):Sprite{return  _layerDic.get(layer);}public function add3dContent(node:Node):void{_container3d.addChild(node);}public function getGlobalScreenPos():Point{if(_scene)return _scene.localToGlobal(new Point(_scene.mouseX, _scene.mouseY));elsereturn new Point();}public function getMousePos():Point{if(_scene)return new Point(_scene.mouseX, _scene.mouseY);elsereturn new Point();}public function update():void{_camera.update();}private static var _instance:SceneManagerpublic static function get instance():SceneManager{if(!_instance){ _instance = new SceneManager(); }return _instance;}}}

2.摄像机跟随及平滑
如果是U3D的话相机更随就一个脚本直接挂主角上就搞定，但是LayaAir没有自带的2d相机，于是我用scrollRect来实现了一个，让主角不管怎么移动都保持在屏幕的中心，但是为了让相机移动起来相对平滑，加入了一个ease参数来进行调整。

package com.gameLogic.scene{import com.gameLogic.utils.GameConfig;import laya.display.Sprite;import laya.maths.Point;import laya.maths.Rectangle;public class Camera2D extends Sprite{private var _cameraView:Rectangle;public function get cameraView():Rectangle{return _cameraView;}private var _scene:Sprite;private var _ease:Number = 0.0025;private var _focusTarget:Sprite = null;public function Camera2D(scene:Sprite){_cameraView = new Rectangle(0, 0, GameConfig.DeviceW, GameConfig.DeviceH);_scene = scene;_scene.scrollRect = _cameraView;}/** * 镜头跟随 */ public function focus(target:Sprite):void{_focusTarget = target;_cameraView.x = (_focusTarget.x-(GameConfig.DeviceW>>1));_cameraView.y = (_focusTarget.y-(GameConfig.DeviceH>>1));}private var _pos:Point = new Point();public function update():void{if(_focusTarget){_pos.x = (_focusTarget.x-(GameConfig.DeviceW>>1));_pos.y = (_focusTarget.y-(GameConfig.DeviceH>>1));if(_pos.x + GameConfig.DeviceW <= WorldMap.instance.mapW && _pos.x >= 0){_cameraView.x += (_pos.x - _cameraView.x) * Laya.timer.delta * _ease;}if(_pos.y + GameConfig.DeviceH <= WorldMap.instance.mapH && _pos.y >= 0){_cameraView.y += (_pos.y - _cameraView.y) * Laya.timer.delta * _ease;}}}}}

3.地图边界处理
地图边界处理的意思就是，当主角移动到地图边界的时候，只主角移动而摄像机不移动。很简单判断下scrollRect的坐标是否在（0，0，地图宽度，地图高度）范围内就ok了。

if(_pos.x + GameConfig.DeviceW <= WorldMap.instance.mapW && _pos.x >= 0){_cameraView.x += (_pos.x - _cameraView.x) * Laya.timer.delta * _ease;}if(_pos.y + GameConfig.DeviceH <= WorldMap.instance.mapH && _pos.y >= 0){_cameraView.y += (_pos.y - _cameraView.y) * Laya.timer.delta * _ease;}

4.上个图以及代码下载

源码下载