大佬教程收集整理的这篇文章主要介绍了【html5手游开发】虚拟摇杆及虚拟按键的开发，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
现在很多手游都有虚拟按钮–尤其是那些需要操作高的。那么我们也要紧跟时代步伐，开发一个虚拟按钮插件。
1、首先绝对要先熟悉一下pixi。
2、要计算一下手指触摸拖动摇杆的角度–小学数学要过关，假如是小学连续留级十几年的话，会有点麻烦。
3、pixi有一些小bug，就是touch end会无缘无故由其他物体触发，代码里面已经有解决方案了。想知道原委就看看上一篇文章。
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String _js_version="7"; %>
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<Meta name="apple-mobile-web-app-capable" content="yes"/>
<Meta name="apple-mobile-web-app-status-bar-style" content="black">
<Meta content="telephone=no,email=no" name="format-detection">
<Meta name="full-screen" content="true"/>
<%--竖屏--%>
<%--<Meta name="screen-orientation" content="porTrait"/>--%>
<%--横屏--%>
<Meta name="screen-orientation" content="landscape"/>
<Meta name="x5-fullscreen" content="true"/>
<Meta name="360-fullscreen" content="true"/>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/@L_674_19@2dWeb/@L_674_19@2dWeb-2.1.a.3.min.js"></script>
<script src="../js/pixi.min.js"></script>
<script src="../js/pixi-spine.min.js"></script>
<style> body{ padding: 0; @H_204_62@margin: 0; } </style>
</head>
<body>
<div id="game" style=""></div>
<script> var GameOptions={ width:800 //游戏屏幕的高度。,height:600 //游戏屏幕的宽度。,ground_y:400-65 //地面y坐标,fps:10,actorWidth:57*2*0.8,actorHeight:61*2*0.8 //--hero的行走向量速度。,hero_run_x_speed:15,hero_run_y_speed:30 //hero跳跃时候向上的速度。 }; </script>
<script> //--虚拟手柄控件。 function GameJoyPad(parent_container,_opts){ var me=this; this.setTings={ joy_pad_BACkground:"assets/joystick/BACkgrounds/BACk_08.png"//摇杆的背景。,joy_pad_joystick:"assets/joystick/Joystick/Joystick_08.png" //摇杆正体。,joy_pad_x:100 //摇杆的坐标,joy_pad_y:220 //摇杆的y坐标 //--注意，所有缩放的尺寸都是按照unitiy3d获得的这些摇杆素材来设置的，假如替换了texture，请重新设置缩放尺寸。,joy_pad_BACkground_scale:{ x:0.4,y:0.4 }//摇杆背景需要缩放的比例，默认是x和y上面都是1,joy_pad_joystick_scale:{ x:0.4,y:0.4 }//摇杆主体需要缩放的比例，默认x、y都是1,buttons:[ { button_name:"shoot",normal_texture:"assets/joystick/Buttons/Button_08_Normal_Shoot.png",pressed_texture:"assets/joystick/Buttons/Button_08_Pressed_Shoot.png",x:300,y:250,scale:{x:0.4,y:0.4} },{ button_name:"gun",normal_texture:"assets/joystick/Buttons/Button_08_Normal_ShooT_B.png",pressed_texture:"assets/joystick/Buttons/Button_08_Pressed_ShooT_B.png",x:400,{ button_name:"blank",normal_texture:"assets/joystick/Buttons/Button_08_Normal_Virgin.png",pressed_texture:"assets/joystick/Buttons/Button_08_Pressed_Virgin.png",x:500,y:0.4} } ] //虚拟手柄的其他按钮。 //--摇杆摇动角度变换时候的回调函数。,onJoyStickMove:function(Now_stick_anglE){ } //--点击了控制按钮的回调事件。,onButtonClick:function(event,button_Name){ } }; $.extend(this.setTings,_opts); //--基本赋值。 this.parent_container=parent_container; this.joy_pad_container={}; this.joy_pad_BACkground={}; this.joy_pad_joystick={}; this.joy_pad_radius=0;//这是背景大圈子的半径。 this.joy_pad_stickRadius=0;//这是摇杆小圈子的半径。 //--生成一个随机的joy container id。 this.joy_pad_container_id=new Date().getTime()+"_"+parseInt(@H_918_44@math.random()*1000); //--好了，加载相关资源 me.__loadresources(function(){ me.__init_stick(); }); //--新建按钮。 for(var i=0;i< me.setTings.buttons.length;i++){ var buttonItemInfo=me.setTings.buttons[i]; me.__createButton(buttonItemInfo); } } GameJoyPad.prototype.__loadresources=function(callBACk){ var me=this; PIXI.loader.add('joy_pad_BACkground',me.setTings.joy_pad_BACkground); PIXI.loader.add('joy_pad_joystick',me.setTings.joy_pad_joystick); PIXI.loader.once('complete',function(){ if(callBACk){ callBACk(); } }); PIXI.loader.load(); } //--初始化摇杆。 GameJoyPad.prototype.__init_stick=function(){ var child=this; var texture_bg=PIXI.Texture.fromImage(this.setTings.joy_pad_BACkground); var texture_joystick=PIXI.Texture.fromImage(this.setTings.joy_pad_joystick); this.joy_pad_container=new PIXI.Container(); this.joy_pad_BACkground=new PIXI.Sprite(texture_bg); this.joy_pad_joystick=new PIXI.Sprite(texture_joystick); this.joy_pad_BACkground.scale=this.setTings.joy_pad_BACkground_scale; this.joy_pad_joystick.scale=this.setTings.joy_pad_joystick_scale; this.joy_pad_BACkground.anchor={x:0.5,y:0.5}; this.joy_pad_joystick.anchor={x:0.5,y:0.5}; this.joy_pad_container.anchor={x:0.5,y:0.5}; this.joy_pad_container.addChild(this.joy_pad_BACkground); this.joy_pad_container.addChild(this.joy_pad_joystick); this.joy_pad_radius=this.joy_pad_container.width/2; this.joy_pad_stickRadius=this.joy_pad_joystick.width/2; window.joy_container=this.joy_pad_container; this.joy_pad_container.position={ x:this.setTings.joy_pad_x,y:this.setTings.joy_pad_y }; this.parent_container.addChild(this.joy_pad_container); this.joy_pad_container.random_id=this.joy_pad_container_id; this.__init_stick_events(); } GameJoyPad.prototype.__init_stick_events=function(){ var me=this; this.joy_pad_container.interactive=true; var _on_drag=false; var _event_data={}; var _touch_event_id=0; /******pixi bug1：当两个手指其中一个，譬如摇杆，另一个手指点击按钮，摇杆会接收到touch end事件。醉了。******/ function onDragStart(event){ //--注意，pc端的identifier是undefined。 _event_data = event.data; var startPosition = _event_data.getLocalPosition(this.parent); _touch_event_id=event.data.identifier; _on_drag=true; } function onDragend(event){ if(_on_drag==false){ return; } if(_touch_event_id!=event.data.identifier){ return; } _on_drag=false; window.end_event=event; me.joy_pad_joystick.position={ x:0,y:0 }; } function onDragMove(event){ if(_touch_event_id!=event.data.identifier){ return; } if(_on_drag==false){ return; } var newPosition = _event_data.getLocalPosition(this.parent); var _side_length_y=newPosition.y-me.setTings.joy_pad_y; var _side_length_x=newPosition.x-me.setTings.joy_pad_x; var _center_point={ x:0,y:0 };//--中心点。 var _stick_angle=0; //当前摇杆的角度 if(_side_length_x==0&&_side_length_y==0){ return; } //--好了，现在判断执行计算的半径。 var _cal_radius=0; if(_side_length_x*_side_length_x+_side_length_y*_side_length_y>=me.joy_pad_radius*me.joy_pad_radius){ _cal_radius=me.joy_pad_radius; //--假如大于的话，那么就按照圆弧计算坐标。 } else{ _cal_radius=me.joy_pad_radius-me.joy_pad_stickRadius; } if(_side_length_x==0){ if(_side_length_y>0){ _center_point={ x:0,y:_side_length_y>me.joy_pad_radius?me.joy_pad_radius:_side_length_y }; _stick_angle=270;//180度。 } else{ _center_point={ x:0,y:-(@H_918_44@math.abs(_side_length_y)>me.joy_pad_radius?me.joy_pad_radius:@H_918_44@math.abs(_side_length_y)) }; _stick_angle=90;//901度 } me.joy_pad_joystick.position=_center_point; me.setTings.onJoyStickMove(_stick_anglE); return; } else if(_side_length_y==0){ if(_side_length_x>0){ _center_point={ x:(@H_918_44@math.abs(_side_length_X)>me.joy_pad_radius?me.joy_pad_radius:@H_918_44@math.abs(_side_length_X)),y:0 }; _stick_angle=0;//0度 } else{ _center_point={ x:-(@H_918_44@math.abs(_side_length_X)>me.joy_pad_radius?me.joy_pad_radius:@H_918_44@math.abs(_side_length_X)),y:0 }; _stick_angle=180;//180度 } me.joy_pad_joystick.position=_center_point; me.setTings.onJoyStickMove(_stick_anglE); return; } var _tan_val=@H_918_44@math.abs(_side_length_y/_side_length_X); var _radian=@H_918_44@math.atan(_tan_val); var _angle=_radian*180/@H_918_44@math.PI; _stick_angle=_angle; //--好了，计算现在摇杆的中心点主坐标了。 var _center_x= 0; var _center_y=0; if(_side_length_x*_side_length_x+_side_length_y*_side_length_y>=me.joy_pad_radius*me.joy_pad_radius){ _center_x= me.joy_pad_radius*@H_918_44@math.cos(_radian); _center_y=me.joy_pad_radius*@H_918_44@math.sin(_radian); } else{ _center_x= @H_918_44@math.abs(_side_length_X)>me.joy_pad_radius?me.joy_pad_radius:@H_918_44@math.abs(_side_length_X); _center_y=@H_918_44@math.abs(_side_length_y)>me.joy_pad_radius?me.joy_pad_radius:@H_918_44@math.abs(_side_length_y); } if(_side_length_y<0){ _center_y=-@H_918_44@math.abs(_center_y); } if(_side_length_x<0){ _center_x=-@H_918_44@math.abs(_center_X); } if(_side_length_x>0&&_side_length_y<0){ //--锐角。 } else if(_side_length_x<0&&_side_length_y<0){ //--好了，钝角。 _stick_angle=180-_stick_angle; } else if(_side_length_x<0&&_side_length_y>0){ _stick_angle=_stick_angle+180; } else if(_side_length_x>0&&_side_length_y>0){ _stick_angle=360-_stick_angle; } _center_point={ x:_center_x,y:_center_y }; me.joy_pad_joystick.position=_center_point; me.setTings.onJoyStickMove(_stick_anglE); }; // events for drag start this.joy_pad_container.on('mousedown',onDragStart) .on('touchstart',onDragStart) // events for drag end .on('mouseup',onDragend) .on('mouseupoutside',onDragend) .on('touchend',onDragend) .on('touchendoutside',onDragend) // events for drag move .on('mousemove',onDragMovE) .on('touchmove',onDragMovE); } GameJoyPad.prototype.__createButton=function(buttonItemInfo){ var me=this; var textureButton = PIXI.Texture.fromImage(buttonItemInfo.normal_texturE); var textureButtonDown = PIXI.Texture.fromImage(buttonItemInfo.pressed_texturE); var textureButtonOver = PIXI.Texture.fromImage(buttonItemInfo.normal_texturE); var button = new PIXI.Sprite(textureButton); button.buttonMode = true; button.anchor.set(0.5); button.position.x = buttonItemInfo.x; button.position.y = buttonItemInfo.y; button.interactive = true; if(buttonItemInfo.scalE){ button.scale=buttonItemInfo.scale; } var _event_data_identifier=0; function onButtonDown(event) { this.isdown = true; this.texture = textureButtonDown; this.alpha = 1; _event_data_identifier=event.data.identifier; } function onButtonUp(event) { if(_event_data_identifier!=event.data.identifier){ return; } this.isdown = false; if (this.isOver) { this.texture = textureButtonOver; } else { this.texture = textureButton; } } function onButtonOver() { this.isOver = true; if (this.isdown) { return; } this.texture = textureButtonOver; } function onButtonOut() { this.isOver = false; if (this.isdown) { return; } this.texture = textureButton; } button.on('mousedown',onButtonDown) .on('touchstart',onButtonDown) // set the mouseup and touchend callBACk... .on('mouseup',onButtonUp) .on('touchend',onButtonUp) .on('mouseupoutside',onButtonUp) .on('touchendoutside',onButtonUp) // set the mouSEOver callBACk... .on('mouSEOver',onButtonOver) // set the mouSEOut callBACk... .on('mouSEOut',onButtonOut); // you can also listen to click and tap events : //.on('click',noop) var noop = function (_event) { me.setTings.onButtonClick(_event,buttonItemInfo.button_Name); }; button.tap = noop; button.click = noop; this.parent_container.addChild(button); return button; } </script>
<script> var game_renderer = PIXI.autoDetectRenderer(GameOptions.width,GameOptions.height,{BACkgroundColor : 0x1099bb}); var game_stage = new PIXI.Container(0x66FF99); $("#game").append(game_renderer.view); var _joy_pad=new GameJoyPad(game_stage,{ //--摇杆摇动角度变换时候的回调函数。 onJoyStickMove:function(Now_stick_anglE){ _showMsg("摇杆角度为："+Now_stick_anglE); } //--点击了控制按钮的回调事件。,button_Name){ _showMsg("点击的按钮名称是："+button_Name); } }); var style = { font : 'bold italic 20px Arial',fill : '#F7EDCA',stroke : '#4a1850',// strokeThickness : 5, // dropShadow : true, // dropShadowColor : '#000000', // dropShadowAngle : Math.PI / 6, // dropShadowDistance : 6, wordWrap : true,wordWrapWidth : 300 }; var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines',stylE); richText.x = 0; richText.y = 0; game_stage.addChild(richText); function game_animate(){ requestAnimationFrame(game_animatE); game_renderer.render(game_stagE); } requestAnimationFrame(game_animatE); </script>
<script> function _debug(msg){ var _str=richText.text; richText.text=_str+"\n"+msg; } function _showMsg(msg){ richText.text=msg; } </script>
</body>
</html>
以上是大佬教程为你收集整理的【html5手游开发】虚拟摇杆及虚拟按键的开发全部内容，希望文章能够帮你解决【html5手游开发】虚拟摇杆及虚拟按键的开发所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。