文档章节

CreateJs系列教程之 EaselJs_6_绘制动画走秀(spriteSheet)

乐派电影
 乐派电影
发布于 2015/11/16 13:23
字数 268
阅读 3114
收藏 0

核心JS代码:

var cjs = createjs,
    canvas,
    stage,
    container,
    w = window.innerWidth,
    h = window.innerHeight;

function init() {
    //设置canvas属性
    canvas = document.getElementById('game');
    canvas.width = w;
    canvas.height = h;
    //创建舞台
    stage = new cjs.Stage(canvas);
    container = new cjs.Container();//绘制外部容器
    stage.addChild(container);

    var data = {
        images: ["imgs/dance.png"],
        frames: {
            width: 320,
            height: 504,
            count: 12
        },
        animations: {
            dance: [0, 11]
        }
    };
    var spriteSheet = new cjs.SpriteSheet(data),
        animation = new cjs.Sprite(spriteSheet, "dance");

    animation.set({x:0,y:0,scaleX: w/320,scaleY:h/504 });//缩放到全屏
    container.addChild(animation);

    cjs.Ticker.setFPS(15);//设置游戏帧率
    cjs.Ticker.on("tick", stage);
}

说明讲解:

1:sprite数据构造

var data = {
        images: ["imgs/dance.png"],
        frames: {
            width: 320, //每帧的宽度
            height: 504, //每帧的高度
            count: 12 //总的帧数
        },
        animations: {
            dance: [0, 11]  //自定义动画名称
        }
    };

动画数据构造的形式有多种,分每一帧尺寸大小相同和不同的;这里采用的是相同的方法;

2:全频show

 var spriteSheet = new cjs.SpriteSheet(data),
        animation = new cjs.Sprite(spriteSheet, "dance");//开始就执行 定义的dance动画

    animation.set({x:0,y:0,scaleX: w/320,scaleY:h/504 });//缩放到全屏
    container.addChild(animation);


效果演示:




© 著作权归作者所有

共有 人打赏支持
乐派电影

乐派电影

粉丝 135
博文 39
码字总数 18922
作品 1
成都
后端工程师
私信 提问
加载中

评论(2)

乐派电影
乐派电影

引用来自“xiaoyaomuma”的评论

您好,我想问一下,那个init()函数加不加有什么区别?谢谢
可以不加,只要所有代码是在 资源加载完整之后执行就可以了!
x
xiaoyaomuma
您好,我想问一下,那个init()函数加不加有什么区别?谢谢
CreateJS 新司机开车指南

CreateJS 新司机开车指南 2 人 TL,TR 最近在对前端互动游戏技术一些学习和探索,恰逢上一个小游戏使用了 CreateJS 技术,借此文对其使用做一次备忘,同时让想用 CreateJS 写小游戏的同学可以...

Tw93
2018/07/29
0
0
CreateJS入门 -- 注释详细到爆炸(My Style)

写在前面 首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章。虽然自己的底子没有多么优秀,但总是觉得这个...

MagicEyess
2018/07/19
0
0
CreateJs系列教程-1-开始出发

介绍: CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。打造 HTML5 游戏! CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成...

乐派电影
2015/11/11
0
0
5 月份最热门的 10 个 JavaScript 库

1. Annotator : Open Source JavaScript Library Annotator 是一个jQuery的文本注解插件,可以包括注释、标签、用户等。 2. CreateJS CreateJS 是一个完整的 JavaScript 游戏和动画开发包,包...

oschina
2012/06/27
5.6K
5
canvas 动画库 CreateJs 之 EaselJS(下篇)

本文来自网易云社区 作者:田亚楠 继承 对应原文:Inheritance 我们可以继承已有的「显示对象」,创建新的自定义类。实现方法有很多种,下面介绍其中之一。 举例:实现一个继承于 Container ...

网易云
2018/09/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-13(Mybatis基本概念和简单的例子)

在mybatis初次学习Mybatis的时候,遇到了很多问题,虽然阿里云的视频有教学,但是视频教学所使用的软件和我自己使用的软件不用,我自己用的数据库是oracle数据库,开发环境是idea。而且视频中...

白话
今天
4
0
Java基础:String、StringBuffer和StringBuilder的区别

1 String String:字符串常量,字符串长度不可变。Java中String是immutable(不可变)的。 String类的包含如下定义: /** The value is used for character storage. */private final cha...

watermelon11
今天
2
0
mogodb服务

部署MongoDB 官网: https://www.mongodb.com/download-center/community 创建mongo数据目录 mkdir /data/mongodb 二进制部署 wget -c https://fastdl.mongodb.org/linux/mongodb-linux-x8......

以谁为师
昨天
5
0
大神教你Debian GNU/Linux 9.7 “Stretch” Live和安装镜像开放下载

Debian项目团队于昨天发布了Debian GNU/Linux 9 "Stretch" 的第7个维护版本更新,重点修复了APT软件管理器中存在的安全漏洞。在敦促每位用户尽快升级系统的同时,Debian团队还发布了Debian ...

linux-tao
昨天
4
0
PHP 相关配置

1. php-fpm的pool 编辑php-fpm配置文件php-fpm.con vim /usr/local/php/etc/php-fpm.conf //在[global]部分增加以下内容 include = etc/php-fpm.d/*.conf # 相当与Nginx的虚拟主机文件 “vho......

Yue_Chen
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部