一个H5游戏的开发（五）

上一章讲了地图的搭建,游戏中有了地图接下来就可以实现地图上的精灵了(npc,玩家角色,怪物,物品,传送阵).
在2d游戏中动画基本上都是有序列帧动画实现.

动作的编辑器就不在这里讲了,主要讲一下实现精灵显示的代码构成吧.

ActionRenderer 动作渲染类

这个类就是实现最基础的动画播放,把序列帧图片按照帧频顺序连续替换显示就形成了动画.主要有一下几个功能函数

• 动态加载动作资源
• 设置纹理集资源
• 播放下一帧
  动作渲染有这几种类型

/**
 * 角色动作渲染器类型
 */
class RoleActionRendererType {
    // 阴影
    public static SHADOW:number = 1;
    // 衣服
    public static CLOTHES:number = 2;
    // 武器
    public static WEAPON:number = 3;
    // 翅膀
    public static WING:number = 4;
}

ActionView 动作视图

有的ActionRenderer只能单纯播放一个动画,如果人拿着武器,身后还有翅膀.并且可以往不同方向做动作,就需要复杂点的组合.ActionView就是做这个事情.
ActionView里面有以下属性:

• _rendererList:Array ActionRenderer集合
• _direction 方向
• _action 动作类型
• _frameIndex 当前帧数索引 需要_rendererList里的动作渲染步调一致.播放出来的效果看起来才是一个整体动画.
  ActionView里面有以下函数:
• addRenderer 添加动作渲染器
• refreshRenderers 刷新动作渲染器
• setAction 设置动作
• nextFrame 播放下一帧
  可以根据这些实现一个接口类IActionView

interface IActionView {
    /**
     * 动作
     */
    action:number;
    /**
     * 方向
     */
    direction:Direction;
    /**
     * 当前索引
     */
    frameIndex:number;
    /**
     * 最大索引
     */
    maxFrameIndex:number;
    /**
     * 动作帧
     */
    frames:Array<number>;
    /**
     * 是否循环
     */
    loop:boolean;
    /**
     * 深度
     */
    depth:number;
    /**
     * 添加动作渲染器
     */
    addRenderer(renderer:IActionRenderer):void;
    /**
     * 移除动作渲染器
     */
    removeRenderer(renderer:IActionRenderer):IActionRenderer;
    /**
     * 根据类型移除渲染器
     */
    removeRendererByType(type:any):IActionRenderer;
    /**
     * 获取动作渲染器
     */
    getRenderer(type:any):IActionRenderer;
    /**
     * 刷新动作渲染器
     */
    refreshRenderers():void;
    /**
     * 设置动作
     */
    setAction(action:number, direction:Direction, callback?:Method):void;
    /**
     * 跳转到下一帧
     */
    nextFrame():void;
}

RoleActionView 角色动作

有了ActionView复杂的动画基本就可以组合起来了,然后我们可以根据不同的显示进行继承ActionView来实现些更高级或不同分类的动画方便管理实现.不至于所有功能都写在ActionView里面,不同的渲染不光根据方向,动作,获取图集,还有根据游戏里面的衣服,武器等的id去获取.id的获取方式更接近游戏逻辑.
例如

• ClothesActionView 专门渲染衣服类型
• AvatarActionView 出了衣服还有 武器 翅膀 影子

    /**
     * 刷新武器
     */
    protected refreshWeapon(): void {
        var url: string = this.roleData.avatar.getWeaponUrl(this._action, this._direction);
        if (url != null) {
            if (this.weaponRenderer == null) {
                this.weaponRenderer = this.addActionRenderer(RoleActionRendererType.WEAPON);
            } else {
                this.addRenderer(this.weaponRenderer);
            }
            this.weaponRenderer.loadAction(url);
        } else {
            if (this.weaponRenderer != null) {
                this.removeActionRenderer(this.weaponRenderer);
            }
        }
    }

-!!!

这篇就已经实现了角色的动画显示,如果直接add到地图上就可以看到.但是还远远不够.角色头顶血条名字,称号,角色喊话气泡.这些也必须要有,预计下一篇来讲讲这些.希望对大家能有点启发,可能讲的不是很详细欢迎指导.