createjs.js 前端游戏引擎插件-BFW插件库

createjs.js 前端游戏引擎插件

1.1 CreateJS
CreateJS 有Adobe的背景, 官网：https://www.createjs.com/ 上面介绍说：CreateJS 是一组模块化代码库和工具套件，可以独立工作也可以组合工作，用于通过HTML5技术来在网页上开发丰富的交互式内容。

1.1.1 CreateJS的主要组件
EaselJS: CreateJS 核心库，提供在HTML5 Canvas 上轻松创建操控元素的功能。
TweenJS: 用于提供平滑动画效果
SoundJS: 声音播放器
PreloadJS: 资源加载器
1.1.2 CreateJS工具
CreateJS 官网列出了很多相关工具，这里只介绍我用过的两个：

Adobe Animate: Adobe主打工具软件之一，貌似前身是Flash编辑器，现在加了HTML5的支持。它可以输出JS和HTML文件，其中的JS文件就是调用了CreateJS引擎。
TexturePacker: 著名的精灵表制作软件，可以输出CreateJS格式的精灵表（JSON）。

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        function init() {
            var stage = new createjs.Stage("demoCanvas");
            var circle = new createjs.Shape();
            circle.graphics.beginFill("Crimson").drawCircle(0, 0, 50);
            circle.x = 100;
            circle.y = 100;
            stage.addChild(circle);
            createjs.Tween.get(circle, {
                loop: true
            })
            .to({
                x: 400
            }, 1000, createjs.Ease.getPowInOut(4))
            .to({
                alpha: 0, y: 75
            }, 500, createjs.Ease.getPowInOut(2))
            .to({
                alpha: 0, y: 125
            }, 100)
            .to({
                alpha: 1, y: 100
            }, 500, createjs.Ease.getPowInOut(2))
            .to({
                x: 100
            }, 800, createjs.Ease.getPowInOut(2));
            createjs.Ticker.setFPS(60);
            createjs.Ticker.addEventListener("tick", stage);
        }
        bready(function() {
            use(["createjs.min"], function() {
                init();
            });
        });
    </script>
</head>
<body>

    <canvas id="demoCanvas" width="500" height="200"></canvas>

</body>
</html>

官网https://www.createjs.com/

createjs.js 前端游戏引擎插件

网友评论0

pixi.min.js

jquery.gif.js

gif.js

jquery.fliptimer.js

gifshot.js

libgif.js

particleground.js

pts.js

bubbly-bg.js

PixelWave.js