Stage.js简介

Stage.js是一个轻量级的开放源代码JavaScript库，可用于跨平台的2D HTML5游戏开发。 该库使用类似DOM的模型来操纵画布，并独自管理应用程序的呈现周期。
在本教程中，我将向您介绍该库，尝试涵盖您可能需要知道的一切，以了解如何轻松地开始使用它。
开始吧！

设置和使用

首先，您必须下载该库。 您可以从其GitHub存储库中获取Stage.js的最新版本（此处包括一些入门示例）。 如果愿意，还可以直接从CDN加载它 。 包含核心文件之后，您必须添加自己的JavaScript文件，但请注意不要在库之前包含应用程序文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/stage.js/0.8.2/stage.web.min.js"></script>
<script src="path/to/your/stage/application.js"></script>

通过将回调函数传递给Stage()来创建Stage.js中的应用程序。 然后，该库将加载所有必需的组件。 最后，它将调用回调函数并在屏幕上呈现所有内容。 您创建的每个应用程序都会有一棵树，而stage将位于该树的根。 所有其他元素（例如图像或字符串）将成为其节点。 在每个渲染周期中更新节点时，将重绘应用程序树。

固定

固定确定节点如何连接到其父节点。 您可以使用固定设置很多选项。 其中一些是大小，位置，对齐方式和变换。 您可以在下面找到一个简单的示例，并对其功能进行说明。

Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});

我们首先指定视图框大小。 我们已经将被称为wheel的image wheel.png附加到了舞台上。 之后，我们使用handle设置此图像或节点的初始位置。 任何节点上的handle都将其自身置于其父节点的对齐点指定的偏移量处。 handle和align都指定为相对单位。 例如，0是左上角，而1是右下角。 上面的代码将轮子定位在视图框的中心。

该示例的实时演示在CodePen上可用 ，如下所示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen YyKQLx 。

要将图像放置在距中心特定水平距离的位置，可以使用“ offsetX”，如下所示：

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    })
);

请注意，上面的距离不是300px，而是3/14框大小的3/14倍。 您还可以为节点设置其他值，例如scale ， skew和rotation 。 要沿特定方向缩放（例如，横向），可以使用scaleX 。 下方的代码段会将车轮水平缩放1.4倍。

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    })
);

这是应用了缩放轮的CodePen演示 。

默认情况下，将以节点中心为枢轴点进行旋转，缩放和倾斜。 您还可以使用以下方法为节点设置不同的枢轴点：

node.pin({
    pivotX: x,
    pivotY: y
});

概括起来，固定元素使您能够四处移动元素，缩放或旋转它们。

鼠标和触摸事件

要在用户交互时更新节点，您可以使用各种鼠标和触摸事件。 通过上面的车轮示例向前移动，我们可以编写以下代码：

var wheelNode = Stage.image('wheel').appendTo(stage);
wheelNode.pin({
    'handle': 0.5
});
wheelNode.on('click', function () {
    // Do something with the wheel here.    
});

另外，您可以定义这些事件，例如Stage.Mouse.CLICK = 'click'; 。 更新的代码将是：

wheelNode.on(click, function () {
     // Do something with the wheel here.    
 });

另一个示例是Stage.Mouse.MOVE = 'touchmove mousemove'; 。

补间

补间将平滑过渡应用于固定值。 这样可以防止有关节点的位置或大小突然变化。 例如，下面的代码将通过PI弧度使轮子突然旋转，并在每次单击时将其位置更改600 。

var wheelRotation = Math.PI;
 var wheelPosition = 300;

 wheelNode.on('click', function () {
     wheelRotation = -wheelRotation;
     wheelPosition = -wheelPosition;
     this.pin({
         rotation: wheelRotation,
         offsetX: wheelPosition
     });
 });

这是没有补间的演示 ，如下所示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen YyKQvx 。

但是，添加补间方法会使过渡平滑。

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.tween(3000)
        .pin({
            rotation: wheelRotation,
            offsetX: wheelPosition
        })
        .ease('bounce');
});

在这里，您可以找到一个应用了补间和缓动的演示 ，也如下所示，以便您可以看到其中的区别：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen XmrgBb 。

有很多可用的选项，例如缓动方法，持续时间和延迟。 在上面的代码中，我将持续时间设置为3000 ms，并将缓动函数设置为bounce 。 此外，您可以使用一些缓动函数，例如linear ， quad ， cubic和quart 。

设置延迟将在指定的延迟后开始过渡。 如果动画完成后不需要节点，则可以调用tween.remove(); 删除节点。 要执行其他一些操作，可以在补间完成后使用以下代码片段执行回调函数：

tween.done(function () {
    //Perform your actions here.
});

纹理图集

树节点使用纹理在画布上绘制图形。 要在画布上显示图形，您可以使用精灵表，也称为“纹理图集”。 设置纹理图集的名称是可选的。 一个精灵表需要具有一组命名的纹理。 要在应用程序中使用它们，我们可以按名称引用它们。 您可以使用一系列纹理作为框架来创建动画。 动画或anim本身就是一个节点。 这是一个动画战士的例子：

Stage({
    name: "warriorsprite",
    image: {
        src: "warriorsprite.png"
    },
    textures: {
        w1: {
            x: 0 * 120,
            y: 0,
            width: 120,
            height: 320
        },
        w2: {
            x: 1 * 120,
            y: 0,
            width: 120,
            height: 320
        },
        w3: {
            x: 2 * 128,
            y: 0,
            width: 128,
            height: 320
        },
        w4: {
            x: 3 * 128,
            y: 0,
            width: 128,
            height: 320
        },
        warrior: ['w1', 'w2', 'w3', 'w4']
    }
});

要为战士制作动画，您需要以下代码。 要使其更快，您可以提高fps 。 ：

Stage(function (stage) {
    stage.viewbox(320, 320);
    Stage.anim('warrior')
        .appendTo(stage)
        .pin('align', 0.5)
        .fps(8)
        .on('click', function () {
        this.play();
    });
});

要观看战士动画， 请查看此演示或以下演示：

请参阅CodePen上的SitePoint（ @SitePoint ）的Pen RWbgBj 。

anim还有很多其他方法，例如gotoFrame(n) ，它将直接带您到第n帧。 根据n的值，您还可以使用moveFrame(n)向前或向后移动n帧。

结论

在本入门教程中，我们介绍了如何入门Stage.js所需的所有内容。 所讨论的概念应有助于您使用精灵创建基本的角色动画并与用户进行交互。 您可以从官方网站了解有关图书馆的更多信息。 我还建议您从其GitHub页面下载文件。 下载文件中包含的演示将进一步清除问题。

From: https://www.sitepoint.com/introduction-to-stage-js/