Away3D - 给物体添加跟随标签(图片标签,文字标签)
作者:hangge | 2015-12-06 09:54
玩游戏时,常常会看到标签跟随的效果。比如人物头上的血条,怪物头上的名字等。这些标签会一直跟随着人物的移动,而且不管人物不管如何转向,标签始终是朝向我们。
2,添加文字标签
首先创建 TextField 填写文字,再将其转换成 BitmapData 。后面步骤就和图片标签一样了。
下面通过样例演示如何实现图片,或者文字的标签跟随效果。
1,添加图片标签
为了让图片始终朝向我们,这里用到了 sprite3D。并将其设置偏移量,添加到对应的 Mesh 中即可。
package{ import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Vector3D; import away3d.containers.View3D; import away3d.controllers.HoverController; import away3d.entities.Mesh; import away3d.entities.Sprite3D; import away3d.events.MouseEvent3D; import away3d.materials.TextureMaterial; import away3d.primitives.CubeGeometry; import away3d.tools.utils.Drag3D; import away3d.utils.Cast; [SWF(frameRate="60", backgroundColor="#FFFFFF")] public class S6 extends Sprite { private var _view3D:View3D; private var cameraController:HoverController;//360全景展示相机控制器 //物体 图片(用作方块 的纹理 ) [Embed(source="assets/snow_diffuse.png")] private var blockClass:Class; //地板图片(用作地板的纹理 ) [Embed(source="assets/road.jpg")] private var floorClass:Class; //告警图片(用作跟随标签) [Embed(source="assets/alert.png")] public static var alertClass:Class; //物体材质 private var blockMaterial:TextureMaterial; //地板材质 private var floorMaterial:TextureMaterial; //告警材质 private var alertMaterial:TextureMaterial; private var _drag:Drag3D; //记录当前是移动摄像机还是移动物体 private var _moveCamera:Boolean = true; private var _lastX:Number = 0; private var _lastY:Number = 0; public function S6() { initEngine(); initMaterials(); initObjects(); initListeners(); } /** * 初始化引擎 */ private function initEngine():void { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // 创建一个视口 _view3D = new View3D(); _view3D.antiAlias = 4; //设置抗锯齿级别 //初始化摄像头 cameraController = new HoverController(_view3D.camera); /*cameraController.distance = 1000; cameraController.minTiltAngle = 0; cameraController.maxTiltAngle = 90; cameraController.panAngle = 45;*/ cameraController.tiltAngle = 15; addChild(_view3D); } /** * 初始化材质 */ private function initMaterials():void { //地板的纹理 floorMaterial = new TextureMaterial(Cast.bitmapTexture(floorClass)); //方块 的纹理 blockMaterial = new TextureMaterial(Cast.bitmapTexture(blockClass)); //告警图片纹理 alertMaterial = new TextureMaterial(Cast.bitmapTexture(alertClass)); alertMaterial.alpha = 1 alertMaterial.alphaThreshold=0.5 //图片背景透明 } /** * 初始化物体 */ private function initObjects():void { // 在三维舞台中创建一个方块(地板 ) var cube1:Mesh = new Mesh(new CubeGeometry(700, 20, 500), floorMaterial); _view3D.scene.addChild(cube1); // 在三维舞台中创建一个方块(地板上的 方块 ) var cube2:Mesh = new Mesh(new CubeGeometry(50, 70, 50), blockMaterial); cube2.position = new Vector3D(0,35,0); //开启鼠标事件支持 cube2.mouseEnabled = true; cube2.addEventListener(MouseEvent3D.MOUSE_DOWN, cubeMouseDown); _view3D.scene.addChild(cube2); //给方块添加图片标签 var sprite3D:Sprite3D = new Sprite3D(alertMaterial,64,64); sprite3D.y = 90; cube2.addChild(sprite3D); //给方块添加拖拽 _drag = new Drag3D(_view3D, cube2, Drag3D.PLANE_XZ); _drag.planePosition = cube2.position; } //鼠标按下 private function cubeMouseDown(event:MouseEvent3D):void { _moveCamera = false; } /** * 初始化监听 */ private function initListeners():void { addEventListener(Event.ENTER_FRAME, _onEnterFrame); //鼠标事件监听 stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); stage.addEventListener(MouseEvent.MOUSE_WHEEL,onWheel); stage.addEventListener(Event.RESIZE, onResize); onResize(); } /** * 渲染视图 */ private function _onEnterFrame(e:Event):void { //渲染视图 _view3D.render(); } /** * 使用舞台大小一直全屏 */ private function onResize(event:Event = null):void { _view3D.width = stage.stageWidth; _view3D.height = stage.stageHeight; } /** * 鼠标滚轮事件 */ private function onWheel(e:MouseEvent):void { if(e.delta > 0){ if(cameraController.distance < 1000) cameraController.distance += 100; }else{ if(cameraController.distance > 600) cameraController.distance -= 100; } } /** * 鼠标按下事件 */ private function onMouseDown(event:MouseEvent):void { if (_moveCamera) { _view3D.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); _lastX = _view3D.mouseX; _lastY = _view3D.mouseY; } } /** * 鼠标弹起事件 */ private function onMouseUp(event:MouseEvent):void { _view3D.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); _moveCamera = true; } /** * 鼠标移动事件 */ private function mouseMoveHandler(event:MouseEvent):void { if (_moveCamera) { //移动摄像机 var dx:Number = _view3D.mouseX - _lastX; var dy:Number = _view3D.mouseY - _lastY; cameraController.panAngle += dx; cameraController.tiltAngle += dy; _lastX = _view3D.mouseX; _lastY = _view3D.mouseY; } else { //移动 3D 小球 _drag.updateDrag(); } } } }
2,添加文字标签
首先创建 TextField 填写文字,再将其转换成 BitmapData 。后面步骤就和图片标签一样了。
package{ import flash.display.BitmapData; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.geom.Vector3D; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import away3d.containers.View3D; import away3d.controllers.HoverController; import away3d.entities.Mesh; import away3d.entities.Sprite3D; import away3d.events.MouseEvent3D; import away3d.materials.TextureMaterial; import away3d.primitives.CubeGeometry; import away3d.tools.utils.Drag3D; import away3d.utils.Cast; [SWF(frameRate="60", backgroundColor="#FFFFFF")] public class S7 extends Sprite { private var _view3D:View3D; private var cameraController:HoverController;//360全景展示相机控制器 //物体 图片(用作方块 的纹理 ) [Embed(source="assets/snow_diffuse.png")] private var blockClass:Class; //地板图片(用作地板的纹理 ) [Embed(source="assets/road.jpg")] private var floorClass:Class; //物体材质 private var blockMaterial:TextureMaterial; //地板材质 private var floorMaterial:TextureMaterial; //标签材质 private var textMaterial:TextureMaterial; private var _drag:Drag3D; //记录当前是移动摄像机还是移动物体 private var _moveCamera:Boolean = true; private var _lastX:Number = 0; private var _lastY:Number = 0; public function S7() { initEngine(); initMaterials(); initObjects(); initListeners(); } /** * 初始化引擎 */ private function initEngine():void { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // 创建一个视口 _view3D = new View3D(); _view3D.antiAlias = 4; //设置抗锯齿级别 //初始化摄像头 cameraController = new HoverController(_view3D.camera); /*cameraController.distance = 1000; cameraController.minTiltAngle = 0; cameraController.maxTiltAngle = 90; cameraController.panAngle = 45;*/ cameraController.tiltAngle = 15; addChild(_view3D); } /** * 初始化材质 */ private function initMaterials():void { //地板的纹理 floorMaterial = new TextureMaterial(Cast.bitmapTexture(floorClass)); //方块 的纹理 blockMaterial = new TextureMaterial(Cast.bitmapTexture(blockClass)); //给方块添加文字标签 var text:TextField = new TextField(); text.autoSize = TextFieldAutoSize.LEFT; text.width = 128; text.height = 32; text.text = "我是一个方块"; var mytf:TextFormat=new TextFormat(); mytf.size = 19; mytf.color = 0x000000; mytf.font="黑体"; text.setTextFormat(mytf); //将标签转为位图 var bmpWidth:int = 128; var bmpHeight:int = 32; var textBmpData:BitmapData = new BitmapData(bmpWidth,bmpHeight); var matrix:Matrix = new Matrix(); matrix.tx = (bmpWidth - text.width)/2; //x方向偏移 matrix.ty = (bmpHeight- text.height)/2; //y方向偏移 textBmpData.draw(text,matrix); //创建标签材质 textMaterial = new TextureMaterial(Cast.bitmapTexture(textBmpData)); } /** * 初始化物体 */ private function initObjects():void { // 在三维舞台中创建一个方块(地板 ) var cube1:Mesh = new Mesh(new CubeGeometry(700, 20, 500), floorMaterial); _view3D.scene.addChild(cube1); // 在三维舞台中创建一个方块(地板上的 方块 ) var cube2:Mesh = new Mesh(new CubeGeometry(50, 70, 50), blockMaterial); cube2.position = new Vector3D(0,35,0); //开启鼠标事件支持 cube2.mouseEnabled = true; cube2.addEventListener(MouseEvent3D.MOUSE_DOWN, cubeMouseDown); _view3D.scene.addChild(cube2); //添加跟随标签 var sprite3D:Sprite3D = new Sprite3D(textMaterial,128,32); sprite3D.y = 70; //sprite3D.scale(1); cube2.addChild(sprite3D); //给方块添加拖拽 _drag = new Drag3D(_view3D, cube2, Drag3D.PLANE_XZ); _drag.planePosition = cube2.position; } //鼠标按下 private function cubeMouseDown(event:MouseEvent3D):void { _moveCamera = false; } /** * 初始化监听 */ private function initListeners():void { addEventListener(Event.ENTER_FRAME, _onEnterFrame); //鼠标事件监听 stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); stage.addEventListener(MouseEvent.MOUSE_WHEEL,onWheel); stage.addEventListener(Event.RESIZE, onResize); onResize(); } /** * 渲染视图 */ private function _onEnterFrame(e:Event):void { //渲染视图 _view3D.render(); } /** * 使用舞台大小一直全屏 */ private function onResize(event:Event = null):void { _view3D.width = stage.stageWidth; _view3D.height = stage.stageHeight; } /** * 鼠标滚轮事件 */ private function onWheel(e:MouseEvent):void { if(e.delta > 0){ if(cameraController.distance < 1000) cameraController.distance += 100; }else{ if(cameraController.distance > 600) cameraController.distance -= 100; } } /** * 鼠标按下事件 */ private function onMouseDown(event:MouseEvent):void { if (_moveCamera) { _view3D.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); _lastX = _view3D.mouseX; _lastY = _view3D.mouseY; } } /** * 鼠标弹起事件 */ private function onMouseUp(event:MouseEvent):void { _view3D.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); _moveCamera = true; } /** * 鼠标移动事件 */ private function mouseMoveHandler(event:MouseEvent):void { if (_moveCamera) { //移动摄像机 var dx:Number = _view3D.mouseX - _lastX; var dy:Number = _view3D.mouseY - _lastY; cameraController.panAngle += dx; cameraController.tiltAngle += dy; _lastX = _view3D.mouseX; _lastY = _view3D.mouseY; } else { //移动 3D 小球 _drag.updateDrag(); } } } }
全部评论(0)