CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。
核心Js代码：
var&canvas,
&&&&stage,
&&&&container,
&&&&w&=&window.innerWidth,
&&&&h&=&window.innerHeight,
&&&&dt&=&'';
function&init()&{
&&&&//设置canvas属性
&&&&canvas&=&document.getElementById('game');
&&&&canvas.width&=&w;
&&&&canvas.height&=&h;
&&&&//创建舞台
&&&&stage&=&new&createjs.Stage(canvas);
&&&&container&=&new&createjs.Container();//绘制外部容器
&&&&stage.addChild(container);
&&&&//创建矩形
&&&&s&=&new&DrawPillars();
&&&&//注册事件
&&&&s.on('click',&function&()&{
&&&&&&&&alert();
&&&&//PS：Shape&类是没有getBounds这个方法，可以通过setBounds来获得
&&&&var&bounds&=&s.getBounds();
&&&&//右下角控制矩形位置
&&&&s.x&=&w&-&bounds.
&&&&s.y&=&h&-&bounds.
&&&&//加入场景
&&&&container.addChild(s);
&&&&stage.update();
//绘制矩形&类
function&DrawPillars()&{
&&&&createjs.Shape.call(this);//继承Shap类
&&&&this.graphics.beginFill("#ff0000").drawRect(0,&0,&50,&50);
&&&&this.setBounds(0,0,50,50);//设置矩形的边界属性，这样可以获得width和height属性
DrawPillars.prototype&=&new&createjs.Shape();//获得原型方法
createjs.Ticker.setFPS(60);//设置游戏帧率
createjs.Ticker.on("tick",&tick);
function&tick()&{
&&&&if&(s.x&&&0&&&&s.x&&=&10&&&&s.y&&&0&&&&s.y&&=&10)&{//左上角
&&&&&&&&dt&=&3;
&&&&}&else&if&(s.x&&&0&&&&s.x&&=&10&&&&s.y&&&h&-&s.getBounds().height&-&10&&&&s.y&&=&h&-&s.getBounds().height)&{//左下角
&&&&&&&&dt&=&2;
&&&&}&else&if&(s.x&&&w&-&s.getBounds().width&-&10&&&&s.x&&=&w&-&s.getBounds().width&&&&s.y&&&0&&&&s.y&&=&10)&{//右上角
&&&&&&&&dt&=&1;
&&&&}&else&if&(s.x&&&w&-&s.getBounds().width&-&10&&&&s.y&&&h&-&s.getBounds().height&-&10&&&&s.y&&=&h&-&s.getBounds().height)&{&//右下角
&&&&&&&&dt&=&0;
&&&&switch&(dt)&{
&&&&&&&&case&0:
&&&&&&&&&&&&s.x&-=&5;
&&&&&&&&&&&&
&&&&&&&&case&1:
&&&&&&&&&&&&s.y&+=&5;
&&&&&&&&&&&&
&&&&&&&&case&2:
&&&&&&&&&&&&s.y&-=&5;
&&&&&&&&&&&&
&&&&&&&&case&3:
&&&&&&&&&&&&s.x&+=&5;
&&&&stage.update();
说明讲解：
1：外部容器类
container&=&new&createjs.Container();//绘制外部容器
一个容器是一种可嵌套的显示列表,允许您处理复合显示元素。例如你可以组的胳膊,腿,躯干和头部位图实例连接成一个容器,并把他们作为一个群体,同时还能够将各个部分之间的相互关系。
2：注册事件
//注册事件
s.on('click',&function&()&{
&&&&alert();
可以在显示对象上面绑定一个事件：可以用 on 或者addEventListener &注意大小写！包含（click,, mousedown,mousemove,mouseover）好像不支持，touchstart等！
3：创建一个矩形绘制类
//绘制矩形&类
function&DrawPillars()&{
&&&&createjs.Shape.call(this);//继承Shap类
&&&&this.graphics.beginFill("#ff0000").drawRect(0,&0,&50,&50);
&&&&this.setBounds(0,0,50,50);//设置矩形的边界属性，这样可以获得width和height属性
DrawPillars.prototype&=&new&createjs.Shape();//获得原型方法
4：PS：Shape类不拥有 getBounds方法，所以必须手动 setBounds ，边界，然后就可以获得 width|heigt属性；
5：游戏动画设置
createjs.Ticker.setFPS(60);//设置游戏帧率
createjs.Ticker.on("tick",&handleTick);
效果演示：
欢迎交流！
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区Html5游戏框架createJs组件--EaselJS(三)精灵Sprite类和ticker类
前一段时间由于自己生活上的事情，导致状态不是蛮好，所以没有继续更新createJs教程，现在继续更新……& & & & 一、EaselJS中Sprite类& & & & & & & & 今天讲一下精灵动画sprite精灵即显示的SpriteSheet雪碧精灵运动队列的实例，涉及SpriteSheet类设置帧和动画。& & & & 其实单单讲sprite没有什么，主要是涉及SpriteSheet类设置帧和动画，先讲一下结构，然后开始讲SpriteSheet；& & & & sprite结构：HTML 代码Sprite ( spriteSheet
frameOrAnimation )& & & & 参数：& & & & spriteSheet：包括源图像(s),框架尺寸和帧数据。& & & & frameOrAnimation String | Number& & & & 动画的帧数，和开始的动画& & & & sprite例子：HTML 代码
／／实例化 createjs.Sprite类，传入精灵spriteSheet参数
var instance = new createjs.Sprite(spriteSheet);
／／使用gotoAndPlay和gotoAndStop方法开启和结束动画
instance.gotoAndPlay(&frameName&);
instance.gotoAndStop(&frameName&);& & & & 重点：gotoAndPlay()和gotoAndStop()这两个方法很重要，就是唤起和结束精灵帧动画的方法，其实如果说我们有研究flash的同学就会发现flash的actionscript语言里面就有这两个方法，真不愧是adobe公司推出的createJS。& & & & 接下来，我们了解SpriteSheet类：& & & & SpriteSheet是封装与雪碧表相关的属性和方法。雪碧表是一系列的图像(通常是动画帧)组合成一个更大的图像(或图像)。例如,一个由8个100 x100图像组成的动画，可能结合成一个单一的400 x200型雪碧表(由2高4帧)。& & & & SpriteSheet类构造函数：& & & & 我们从一个png图像里面弄进来实现Sprite，EaselJS有个专门的类SpriteSheet来实现。& & & & 传递给SpriteSheet类构造函数的参数需要定义三个重要的信息:& & & & 1.Sprite使用的图片，或是图片集。& & & & 2.每个图像帧的位置，可以以两种方式，一种是涉及连续大小的、相同的帧呈现，一种是每个帧单独设置。& & & & 3.动画，同样通话也可以以两种方式定义，一种是定义开始和结束帧的连续帧定义的开始和结束帧如[0,3]，一种是定义一个帧列表如[0,1,2,3]。HTML 代码
// 定义帧速率:
// 这指定的是SpriteSheet帧速率，即看到帧速率
framerate: 20,
// 定义图像路径
// 使用图像或图像的url列表。SpriteSheet可以处理预加载。
// 定义图片列表时，需要加索引值
images: [image1, &path/to/image2.png&],
// 定义框架:
//简单的方法来定义框架,只需要连续帧大小（框架的大小就是单个帧的图片大小）:
// 定义框架宽/高和可选的帧数和注册点x / y，count就是帧数，regx，regy就是相对于原始偏移的位置。
frames: {width:64, height:64, count:20, regX: 32, regY:64},
// 或者,复杂的方法,定义了单个矩形帧。
//第五个值是图像索引每“图像”中定义的列表(默认为0)。
// x, y, width, height, imageIndex, regX, regY
[0,0,64,64,0,32,64],
[64,0,96,64,0]
// 定义动画:
// 简单的动画定义，定义一个连续范围的帧(包括开始结束)。
// 可以定义一个“下一个”动画序列(或停止)和播放速度
start end next next speed
animations: {
// start, end, next, speed
run: [0,8],
jump: [9,12,&run&,2]
// 复杂的方法就是指定动画的每一帧索引。
animations: {
frames: [1,2,3,3,2,1]
frames: [1,4,5,6,1],
next: &run&,
stand: { frames: [7] }
// 上述两种方法可以结合,您还可以使用一个单帧定义:
animations: {
run: [0,8,true,2],
frames: [8,9,10,9,8],
next: &run&,
//实例精灵动画集
var spriteSheet = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var animation = new createjs.Sprite(spriteSheet, &run&);
& & & & & & & & 注意：为了保证更好的运行速度，请使用EaselJS 0.7.0及以上的版本。& & & & & & & & 接下来，举个栗子：HTML 代码 var data = {
images: [&sprites.jpg&],
frames: {width:50, height:50},
animations: {run:[0,4], jump:[5,8,&run&]}
var spriteSheet = new createjs.SpriteSheet(data);
var animation = new createjs.Sprite(spriteSheet, &run&);& & & & & & & & SpriteSheet方法主要这么几个，功能如下& & & & clone ()&&克隆一个SpriteSheet实例&&返回值是一个SpriteSheet对象& & & & getAnimation ( name )&&返回指定的动画对象，参数name接受String类型，返回一个包含frames, speed, name, and next properties的对象& & & & getAnimations ()&&返回一个由字符串命名的动画组成数组& & & & getFrame ( frameIndex ) Object& & & & getFrameBounds ( frameIndex&&[rectangle] ) Rectangle& & & & getNumFrames ( animation ) Number& & & & 定义了一个简单的雪碧精灵在50px*50px的框架中，运行[0-4]帧跑，[5-8]帧跳，跳的下一运动时跑& & & & 二、EaselJS中Ticker类动画机制& & & & EaselJS简明教程动画，动画是将静止的画面变为动态的艺术，由静止到动态的实现，主要依靠人眼的视觉残留效应。& & & & 通常来说动画分为两种：逐帧动画和补间动画& & & & 1.逐帧动画& & & & 逐帧动画把动画（例如人物动作）进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。& & & & 实现逐帧动画主要需要两个东西，动作关键帧和动起来的机制。& & & & “动画”机制：& & & & 使动画动起来的机制，这里使用EaselJS的另一个类Ticker。Ticker的使用貌似下面代码HTML 代码createjs.Ticker.addEventListener(&tick&, tick);
function tick(evt) {
//some code
& & & & Ticker的几个关键方法，setFPS、getFPS设置和获取帧频，setInterval、getInterval设置和获取时间间隔，setPaused、getPaused设置和获取暂停等，这些都是静态方法。& & & & createJS上的逐帧动画实例改编解析：HTML 代码&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta author=&pingfan& content=&creatJSGame&&
&title&玩转createJS游戏&/title&
&link rel=&stylesheet& href=&../css/game.css&&
&canvas id='canvas' width=&960& height=&400&&您的浏览器不支持canvas，请使用现代浏览器。&/canvas&
&script src='/createjs-.min.js'&&/script&
stage=new createjs.Stage(&canvas&),
container=new createjs.Container(),
// 定义SpriteSheet 参数
&animations&:{
&run&: [0, 25, &jump&],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
&jump&: [26, 63, &run&,1]
&images&: [&/Demos/EaselJS/assets/runningGrant.png&],
&frames&:{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
&height&: 292.5,
&width&:165.75,
//相对于原始偏移的位置
&regX&: 0,
&regY&: 0,
&count&: 64
//实例精灵动画集
var move = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,&run&);
//设置在舞台中的位置
grant.x=360;
grant.y=100;
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(&tick&,stage);
stage.update();
&/html&代码片段 1效果预览&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta author=&pingfan& content=&creatJSGame&&
&title&玩转createJS游戏&/title&
&link rel=&stylesheet& href=&../css/game.css&&
&canvas id='canvas' width=&960& height=&400&&您的浏览器不支持canvas，请使用现代浏览器。&/canvas&
&script src='/createjs-.min.js'&&/script&
stage=new createjs.Stage(&canvas&),
container=new createjs.Container(),
// 定义SpriteSheet 参数
&animations&:{
&run&: [0, 25, &jump&],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
&jump&: [26, 63, &run&,1]
&images&: [&/Demos/EaselJS/assets/runningGrant.png&],
&frames&:{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
&height&: 292.5,
&width&:165.75,
//相对于原始偏移的位置
&regX&: 0,
&regY&: 0,
&count&: 64
//实例精灵动画集
var move = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,&run&);
//设置在舞台中的位置
grant.x=360;
grant.y=100;
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(&tick&,stage);
stage.update();
&/html&& & & & 2.补间动画& & & & 补间动画，指我们给定动作的初始状态和结束状态，然后动画系统（例如动画软件）自动补齐中间状态，从而形成动画，补间动画适用于物体的移动、状态的改变等简单的动画。& & & & 补间动画实例，让刚刚那个原地跑步的人，向前方跑动，单击时表示跳起：& & & & HTML 代码&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta author=&pingfan& content=&creatJSGame&&
&title&玩转createJS游戏&/title&
&link rel=&stylesheet& href=&../css/game.css&&
&canvas id='canvas' width=&960& height=&400&&您的浏览器不支持canvas，请使用现代浏览器。&/canvas&
&button id='btn'&暂停pause&/button&
&script src='/createjs-.min.js'&&/script&
stage=new createjs.Stage(&canvas&),
container=new createjs.Container(),
// 定义SpriteSheet 参数
&animations&:{
&run&: [0, 25, &run&,1.5],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
&jump&: [26, 63, &run&,1.5]
&images&: [&../img/runningGrant.png&],
&frames&:{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
&height&: 292.5,
&width&:165.75,
//相对于原始偏移的位置
&regX&: 0,
&regY&: 0,
&count&: 64
//实例精灵动画集
var move = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,&run&);
//设置在舞台中的位置
grant.x=20;
grant.y=22;
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(&tick&,tick);
//speed用来做加速度
var speed=1;
function tick(){
if(!createjs.Ticker.getPaused()){
grant.x+=3*
stage.update();
speed+=.01;
(grant.x&stage.canvas.width) && (grant.x=0,speed=1)
//侦听鼠标事件
stage.addEventListener(&stagemousedown&,handleClick);
function handleClick(){
//alert(11);
grant.gotoAndPlay(&jump&);
//设置按钮暂停
var btn=document.getElementById(&btn&);
btn.addEventListener(&click&,toggleMove,false);
function toggleMove(){
// grant.gotoAndStop();
//其实实现暂停和运动就是false和true切换
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
btn.value=&暂停pause& ? &运动play& : &暂停pause&;
stage.update();
&/html&代码片段 2效果预览&!DOCTYPE html&
&html lang=&en&&
&meta charset=&UTF-8&&
&meta author=&pingfan& content=&creatJSGame&&
&title&玩转createJS游戏&/title&
&link rel=&stylesheet& href=&../css/game.css&&
&canvas id='canvas' width=&960& height=&400&&您的浏览器不支持canvas，请使用现代浏览器。&/canvas&
&button id='btn'&暂停pause&/button&
&script src='/createjs-.min.js'&&/script&
stage=new createjs.Stage(&canvas&),
container=new createjs.Container(),
// 定义SpriteSheet 参数
&animations&:{
&run&: [0, 25, &run&,1.5],
//start,end,next,speed开始帧，结束帧，下一个动作，运行速度
&jump&: [26, 63, &run&,1.5]
&images&: [&/Demos/EaselJS/assets/runningGrant.png&],
&frames&:{
//单个帧的高度，宽度，就是png图片里面那么多个帧一个帧的大小
&height&: 292.5,
&width&:165.75,
//相对于原始偏移的位置
&regX&: 0,
&regY&: 0,
&count&: 64
//实例精灵动画集
var move = new createjs.SpriteSheet(data);
//SpriteSheet类设置帧和动画,里面的run为开始的动画
var grant = new createjs.Sprite(move,&run&);
//设置在舞台中的位置
grant.x=20;
grant.y=22;
// 把动画放到舞台上，创建一个间隔事件侦听，进行动画
container.addChild(grant);
stage.addChild(container);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener(&tick&,tick);
//speed用来做加速度
var speed=1;
function tick(){
if(!createjs.Ticker.getPaused()){
grant.x+=3*
stage.update();
speed+=.01;
(grant.x&stage.canvas.width) && (grant.x=0,speed=1)
//侦听鼠标事件
stage.addEventListener(&stagemousedown&,handleClick);
function handleClick(){
//alert(11);
grant.gotoAndPlay(&jump&);
//设置按钮暂停
var btn=document.getElementById(&btn&);
btn.addEventListener(&click&,toggleMove,false);
function toggleMove(){
// grant.gotoAndStop();
//其实实现暂停和运动就是false和true切换
var paused = !createjs.Ticker.getPaused();
createjs.Ticker.setPaused(paused);
btn.value=&暂停pause& ? &运动play& : &暂停pause&;
stage.update();
104 总笔记数
12.7万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：当前位置：正文
微信扫一扫分享到朋友圈
第一节：EaselJS处理图片使用 Bitmap类可以非常方便的处理图片，Bitmap可以用来代表任何形式，比如，Canvas，视频或者图片，可以使用已经存在的元素实例化，或者使用base64。第二节：使用sprite和SpriteSheets来处理游戏动画Sprite用来在SpriteSheet中显示一个动画或者一系列的动画帧，SpriteSheet是一系列的图片整合到一张图片中，可以用来定义一个完整的动画，下面是一个spritesheet定义：var spritesheet = new createjs.SpriteSheet({
&images&: [characterImage], //动画人物图片来自base64编码字符串
&frames&: {&height&: 96, &count&: 10, &width&: 75},
&animations&: { run: [0,9]}
}); 第三节：EaselJS中的&容器& （container）Container类是EaselJS中用来管理符合图形的单位，例如，我们可以将一个人物的，头，手，脚等等放置在统一的容器中，这样一来，可以统一的管理或者动画图形。虽然容器中每一个部分都可以单独的生成动画，但是容器中的子元素都可以统一使用容器的属性来控制本节相关代码将演示如何使用容器来定义一系列图片，并且通过定义容器来控制这一系列图片，实现统一的行为第四节： EaselJS中的cache方法在图形处理中，往往会有一些图形不太变化，而每次都重新渲染会使得性能比较受影响。在EaselJS中提供了cache()方法，这个方法可以帮助生成绘制时需要使用的图形到新画布里，它不会在每一个tick中被重新绘制，因此加载速度快，性能更好被cache的显示图形也可以自由的控制移动，旋转，淡入淡出等等属性，但图形变化了需要手动调用cache或者updateCache方法重新加载第五节：EaselJS处理Filter（滤镜）EaselJS包含了一些内置的滤镜方法，如下：AlphaMapFilter : 将一个灰度图形映射到一个图形的阿尔法通道AlphaMaskFilter: 将一个图片的阿尔法通道映射到一个显示图形的阿尔法通道BlurFilter: 执行水平和垂直的模糊ColorFilter: 显示对象的颜色变形ColorMatrixFilter: 使用ColorMatrix1来变形图片了解更多相关代码和演示，请立刻开始学习课程：HTML5类库CreateJS系列：EaselJS画布类库基础使用（二）点击“阅读原文” 访问课程库相关课程
分享给好友
分享到微信朋友圈：
第一步 打开微信底部扫一扫
第二步 扫下面的文章二维码
第三步 右上角点击转发
相关文章Relevant
点击题目下方魅力女人,一键关注本账号委内瑞拉这个国家,还有个别称,叫“选美之都”,也可以叫“Miss Factory选美小姐工厂”...
中 财 国 际微信号:zcgj365财富管理和运营、农产品贸易和投资、教育投资和咨询.这两天,一则视频被加上《2015央视春晚终于请...
美国国家地理杂志创刊于1888年10月,它由美国的一家非盈利科学教育组织——“美国国家地理协会”创办,现在已经成为世界上最...
手机完全侵入我们的生活,不管你身在何处,总能见到神态各异的人在划!手!机!过人行横道也在划!手!机!跟朋友出去吃饭还是...
点击「箭头所指处」可快速关注微信号:pipweb01.且行且珍惜
出处:日凌晨,文章首次回应“出轨门”承认了“劈腿”...
感知CG,感触创意,感受艺术,感悟心灵 国外百年前的绘本和现如今的实景,今昔相比,历史的尘埃犹在.∨今昔相比来源:互联网...createjs入门（〇）_createjs吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：68贴子：
createjs入门（〇）
原帖地址：====================================================（〇）createjs-写在前面最早接触html5（其实我都不想叫他html5，因为我用到的也就是一个Canvas，而html并不是只提供了这一个画布）的时候，用的引擎是LufyLegend,作为一个个人开发的引擎，已经很不错了，虽然有些bug，但是用来学习和做一些小游戏还是不错的。而且作者提供了很多开发实例，还有一本作者写的书。对于as开发者来说，选这个引擎入门确实受益良多。熟悉了canvas之后，其实完全可以试着自己写一个渲染引擎，事件引擎稍难一点。虽然效率不高，但是只做一些益智类的小游戏，或者一些小应用还是完全可以的。看网上好多对比html5各种引擎的，以及对比as3和html5的，也顺便数一下自己的观点。html5游戏引擎比较：就只拿cocos2d和createjs来说，因为其他不熟悉。cocos2d的优势在于用到了webgl，借鉴了cocos2d-x里边的东西，比如plist之类的。效率上在某些情况下比较高。略势在于引擎文件太大，最小的好像也有1M多。createjs的优势在于轻量级。分了好几个类，只用easyjs的话，不到100k，4个常用的类加一块儿也才300k。至于哪个好用，得看使用者原来是做什么的，对于as人员来说，肯定是createjs好用，对于cocos2d-x的开发者来说，肯定是cocos2d好用。对于一个门外汉或者前端来说，可能两个差不多，况且还有适合前端语法的引擎。至于引擎中的bug，都是半斤八两。使用者必须知道什么能做，什么不能做，哪里会有坑。createjs的好处就体现出来了，体积小，代码少，简单，直接拿源码看就可以了，cocos要翻半天，翻出来还不敢改。至于效率，也都差不多，小游戏应用，用哪个都行，自己写都行，大一点的效率都不行，尤其是放在手机端。html5游戏引擎和as3比较看到很多html5和as3的比较，其实html5的优势不是在做游戏上，而是在于css3，css3普及之前，页面上的元素只能是矩形的，而且只能控制元素的平移；缩放和旋转都做不了，更不用说多媒体了。所以flash明显有优势。现在css3大多数设备都支持了，很多效果都可以直接用css3做了。甚至可以用css3+js来做游戏，完全可以。选择css3的好处在于：1、移动设备支持比较好，flash在好多移动设备上是不支持的，或者是默认禁止播放的；2、不用插件，一旦某个页面导致flash player插件崩溃，自己的页面也跟着遭殃，所以还是用html做比较好；3、跨平台，跨浏览器，开发成本低；其实开发成本低才是主要的，跨平台跨、浏览器并不是想象中的那样。反正客户不管你怎么实现，只要能实现想要的效果，能省钱干嘛不省呢。其实flash跨平台和跨浏览器比html做的好，因为flash是在flashplayer这个虚拟机里边播放的，flashplayer是一家公司开发的，所以不存在兼容性问题，html就不一样了，即使有了标准，那么多浏览器开发商，有哪个是完全按照标准来做的。用css实现一个效果，要写很多份代码，来适应不同的浏览器，开发起来并不轻松，还要解决各种浏览器上出现的问题。要说以前做页面只是适应各种浏览器的话，现在还要加上适应各种分辨率，对于开发人员的要求又提高了。所以，移动端除非万不得已，不用flash做。pc端能用html做的，不用flash。但是仅仅指页面展示方面。互动性强的和游戏还是flash有优势。as3的逻辑还是很严谨的，html5的这些引擎，没有哪个是完备的，逻辑漏洞一大堆，各种坑。falsh发展了这么多年，还是很有优势的，而且as3功能相对很强大，也很简单易用，效率也还可以，至少不比canvas差。而且有很多开发者（虽然流失严重），有大量的工具包。flash里边有一个“重绘区域”，这个对于提高效率有很大帮助（cocos里边好像也有，不过不会用）。拿canvas做一个的界面，然后放一个背景图，开始刷新，看看能到多少帧，再拿falsh试试，看看帧频，再看看重绘区域。其实大多数情况下，cpu都是被重绘占用的。单从做页面来说的话，html5很有优势，但是做游戏，没有什么优势。html5的优势在移动端。html5的游戏引擎也不少，但是没有哪一个真正火起来，创造不了实际价值，用的人就少，用的人少，维护的就少，周边相应的工具就少，很难发展。html5游戏的现状是在pc端完全没有优势，在手机端，根本没人跟他竞争。现在都说网速提高了，然后都不考虑文件大小，一个网页、小游戏动不动就好几M、好几十M，其实就跟说平均工资水平似的，大多数人都被平均了。本人家里的网速，最多也就400多K，平均也就100多k，，还不是一个人在用所以还是很在意文件的大小的，能自己写的就不用引擎，能用小引擎的不用大引擎。html5完全替代flash做游戏设想：有一款主流的html5游戏引擎；从底层开始封装，逻辑严密，而不只是对Canvas或者Webgl功能的二次封装；主流浏览器都绑定安装该html5引擎；效率只要不输于flash就行。好像跑题了。flash cc用的createjs，学一下，看看能不能结合cc来用。熟悉as的话createjs很好上手，不会as的话也很好学，顺便连as都学了。createjs和as不一样，不要想当然。createjs有坑，有坑就绕着走，不要钻牛角尖。createjs很简陋，并不强大。有能力的话。看看源码，试着自己写一个渲染引擎。任何语言、引擎都只是一种工具，只要能实现自己想要的效果，用什么都行。
贴吧热议榜
使用签名档&&
保存至快速回贴