游戏开发：Html5 虚拟摇杆控制人物移动

这边想再单独和大家分享一下有关虚拟摇杆的开发经验，因为觉得这个功能还是很实用和用途广泛的！

效果：

运行地址：
http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon/game.html

摇杆显示：

因为制作该游戏使用了 pixi 框架，所以需要利用 PIXI.Graphics() 方法绘制两个圆就可以了，一大一小，大圆为移动背景，给与一个颜色和透明度，默认隐藏即可，下面是绘制一个按钮移动背景圆的代码：

	var rockerbg = new PIXI.Graphics();//绘制摇杆背景
    rockerbg.lineStyle(0);//外边框宽度为0
    rockerbg.beginFill(0x000000, 0.3);//背景色 透明度
    var radius = 0;//半径
    if(phoneWidth > phoneHeight)radius = phoneWidth/10;
    else radius = phoneHeight/10;
    rockerbg.drawCircle(0,0,radius);//设置半径
    rockerbg.endFill();//结束绘画
    parent.addChild(rockerbg);//添加到舞台，parent为传进来的舞台参数

控制按钮同理，只不过小一点就可以了。当然如果小伙伴们图省事或不使用框架，找两个圆的图片也可以，但是要注意设置锚点为中心

摇杆功能：

接下来就要具体说明一下他是如何将被操作的人或物捆绑到一起的了，在该宝可梦游戏中主要为了提供给角色一个速度，这个速度是一个 json 数据，里面存放了 x 轴与 y 轴的速度

var speed = {
   x:0,y:0};

如何实现触摸屏幕给与速度相应数据呢，这就要用到开启舞台交互事件中的“鼠标按下”、“鼠标抬起”、“鼠标移动”三个事件

其中“鼠标按下”事件中控制获取当前鼠标位置，以及按钮的显示

    app.stage.on("pointerdown",function(event){
   //在鼠标按下位置显示控制器
        var pos = event.data.getLocalPosition(app.stage);
        rockerbg.x = pos.x;
        rockerbg.y = pos.y;
        rockerbg.visible = true;
    })

“鼠标抬起”事件中控制控制器隐藏以及速度归零

    app.stage.on("pointerup",function(){
   //鼠标抬起时控制器隐藏,速度归零
        rocker.x = 0;
        rocker.y = 0;
        rockerbg.visible = false;
        speed = {
   x:0,y:0};
    })

“鼠标移动”事件是整个控制的关键，他将控制按钮的移动，利用大圆与小圆的圆心位置获得角色所需的移动方向，因为角色只能四个方向移动，所以只需要先判断小圆圆心据原点的X轴与Y轴绝对值的最大值，再判断最大值为正值或负值即可得出角色的移动方向

    rocker.on("pointermove",function(event){
   //利用判断控制器在控制器背景原点的方向进行设置角色移动方向
        var pos = event.data.getLocalPosition(app.stage);
        var A = rockerbg.x-pos.x;//摇杆起始点与鼠标X轴