CreateJS框架初探

createJs作为一个轻量级框架,使得canvas开发轻松不少;不过初次接触还是有些坑。createJs分成easelJs(图形动画)、preloadJs(文件加载)、soundJs(音频控制)以及tweenJs(补间动画)四部分,直接写一个小demo当入门吧。


最终效果是用w、a、s、d控制小人的移动与跳跃,这里只需要引入easelJs和preloadJs即可。

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
var preload = new createjs.LoadQueue(false);
先用LoadQueue对象加载资源,这里传一个false参数。(true为使用 XHRLoader,false将使用 TagLoader;本地开发使用false即可)

然后加载资源:

        function startPreload() {
            var manifest = [{
                id: 'ground',
                src: 'ground.png'
            }, {
                id: 'man',
                src: 'man.png'
            }];
            preload.setMaxConnections(3);
            preload.maintainScriptOrder = true;
            preload.installPlugin(createjs.Sound);
            preload.on("error", loadError);
            preload.on("complete", loadComplete);
            preload.loadManifest(manifest);
        }
        startPreload();
将需要的资源写成JSON,调用loadManifest()方法加载。这里记录一下LoadQue
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CreateJS是一组用于构建HTML5网页游戏和应用程序的JavaScript库。它由四个库组成:EaselJS,TweenJS,SoundJS和PreloadJS。 EaselJS是CreateJS库中的绘图API,鼓励使用基于对象的编程模型来创建复杂的交互式图形,动画和其他高性能图形应用程序。它提供了2D图形,动画,粒子系统和轻量级事件处理。EaselJS还可以通过Canvas和WebGL来呈现符合WebGL标准的3D图形,它提供了一个易于使用的渲染API,并且可以与其他CreateJS库无缝集成。 TweenJS是一个用于创建和管理过渡动画的JavaScript库。它支持自定义缓动和链式动画序列,使开发人员可以使用TweenJS轻松地创建复杂的交互式动画,如曲线运动和补间动画。TweenJS可以与EaselJS和其他CreateJS库一起使用,提供了更高级别的动画能力,使开发人员可以更轻松地控制动画的流程和效果。 SoundJS是CreateJS库中的音频管理库。它提供了一种易于使用的API,使开发人员可以创建、播放和控制声音。它支持HTML5之外的各种浏览器和平台,并且可以自动切换到适当的音频格式,以便在不同的浏览器和设备上播放音频。 PreloadJS是CreateJS库中的预加载库。它提供了一种易于使用的方式,以确保所有媒体文件和其他资源在应用程序加载时及时预加载,以最大程度地优化应用程序的效率和性能。 PreloadJS支持不同类型的文件和格式,并可以根据需要预加载,例如在应用程序外部加载音频文件,以免在应用程序运行时造成延迟。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值