arpg网页游戏之地图

Posted 2020-08-15 Siegel的博客

[转]http://www.cnblogs.com/BlueWoods/p/4684557.html

  这一节说说视窗，这个视窗，也就是游戏的视角。现在的网页游戏分为2D游戏，2.5D游戏和3D游戏，2D游戏基本是一些横板的，2.5D基本都是arpg的，可以说游戏画面投影的角度略有不同，3D网页游戏，现在也有不少，效果做的不错的，都是带微端的，不带微端同屏人数过多就会出现卡顿的情况。个人感觉网页还不太适合做3D的，一是效率问题，二是表现效果不如端游炫。端游开发周期较长，世界观比较宏大，玩家呢，要适应游戏世界，并在里面找到自己的定位，这样玩家的忠诚度比较高；而网页游戏的目的不恰恰相反，它主要是迎合玩家的口味，并利用玩家的心理诱导其充值，游戏周期一年左右，玩家玩一个月基本就没什么新东西了。

说的有点跑题了。这个视窗主要是根据玩家的坐标来控制人物层和地图层移动的，它包含四个属性：人物坐标FocusPoint，最大视窗：MaxRect，移动视窗：moveRect，屏幕视窗viewRect

• 人物坐标fp：你玩网页游戏的时候，你会发现玩家的移动范围。当他移动到地图边界的时候，他才会真正的移向边界；当他远离边界的时候，他基本保持在屏幕的中央。虽然人物位置是按照格子坐标表示的，但是人物移动的时候，还是按照像素移动。
• 最大范围MaxRect:就是当前地图的宽和高
• 移动范围moveRect：玩家在此范围内移动，不会改变地图层的坐标，在游戏中我设置的可移动范围是100*100。其实你可以想象下：在屏幕的最中央，有100*100的矩形中，玩家在此移动是不会推图的，有助于提高玩家的体验，提升效率。
• 屏幕视窗ScreenRect：就是舞台的宽高

算法代码如下：

public function setFocusPoint(p:Point) : void
{
    _orx = _viewRect.x;
    _ory = _viewRect.y; // 记录原始视窗坐标（记录的作用？）
    _focusPoint.x = p.x >> 0;
    _focusPoint.y = p.y >> 0;
    focusPointChanged(); //触发视角变化事件
}

 

 

private function focusPointChanged() : void
{<br>　　　　// 检测时否改变屏幕视窗的坐标
    if (_focusPoint.x < _movableRect.x)
    {
        _viewRect.x = _focusPoint.x - _viewRect.width / 2 + _movableRect.width / 2;
    }
        if (_focusPoint.x > _movableRect.right)
        {
        _viewRect.x = _focusPoint.x - _viewRect.width / 2 - _movableRect.width / 2;
      }
    if (_focusPoint.y < _movableRect.y)
    {
        _viewRect.y = _focusPoint.y - _viewRect.height / 2 + _movableRect.height / 2;
    }
    if (_focusPoint.y > _movableRect.bottom)
    {
        _viewRect.y = _focusPoint.y - _viewRect.height / 2 - _movableRect.height / 2;
    }


===========================================================================
checkViewRectOffset();//检测边界<br><br>　　　　setMovableOffset(); // 屏幕视窗XY改变了，需要变化移动视窗的坐标

<em id="__mceDel">  moveMap();//加载地图
}
</em>

// 因为移动处于屏幕视窗的中央，屏幕视窗变化了，移动视窗也要重新计算其xy坐标<br>private function setMovableOffset() : void
{
    _movableRect.x = _viewRect.x + (_viewRect.width - _movableRect.width) * 0.5;
    _movableRect.y = _viewRect.y + (_viewRect.height - _movableRect.height) * 0.5;
}

//检测屏幕视窗的边界<br>private function checkViewRectOffset() : void
{
    if (_viewRect.x < 0)
    {
        _viewRect.x = 0;
    }
    if (_viewRect.y < 0)
    {
        _viewRect.y = 0;
    }
    if (_viewRect.x + _viewRect.width > _maxRect.width)
    {
        _viewRect.x = _maxRect.width - _viewRect.width;
    }
    if (_viewRect.y + _viewRect.height > _maxRect.height)
    {
        _viewRect.y = _maxRect.height - _viewRect.height;
    }
}

这是游戏视窗Manager，根据人物移动坐标变化而变化的代码，地图层是根据屏幕的坐标去判断加载哪块地图的。