A11y 无障碍插件

    安装

    先引入无障碍系统,然后为相应的游戏对象添加无障碍能力。

    上面的代码会自动在相应的游戏对象区域上方添加一个如下图所示的辅助 DOM: 插件的工作示意图如下: image.png 如果游戏对象没有添加至游戏场景中,或者游戏对象被移除出场景,辅助的 DOM 节点也会相应的删除。

    1. // 游戏对象被移除,辅助 DOM 也被移除
    2. gameObject.addComponent(new A11y({ hint: 'text' }))
    3. game.scene.removeChild(gameObject)
    4. gameObject.removeComponent('A11y')

    API

    1、A11ySystem

    游戏场景无障碍能力

    3、A11yActivate

    使用上一些需要注意的地方:

    • 一些可拖动的游戏玩法需根据业务进行优化
    • 龙骨动画的辅助 DOM 节点为 1px
    • 点击事件将自动触发 Event 组件上面的 touchstart/touchend/tip 事件

    Eva.js 无障碍插件动画

    对于普通的过渡动画,无障碍的 DOM 层需要等到动画结束后才能知道游戏对象的位置。

    eva-plugin-a11y 选择这样对过渡动画进行处理。

    如果有多个动画,只需要监听最后一个动画的 finish 事件

    1. // move 动画
    2. animation.on('finish', name => {
    3. });

    不推荐在 Infinity 的移动动画中使用无障碍能力,例如这样的动画。

    这类的动画无障碍用户根本无法使用,建议从业务层面进行优化。

    eva-plugin-a11y 无障碍组件的构造还提供一个 delay 的参数,开发者可以选择在任意时刻将游戏对象的无障碍 DOM 渲染出来。